From 508d55acf2425438ba1bf1eb0be350568a3c0240 Mon Sep 17 00:00:00 2001
From: Dominik Korsa <dominik.korsa@gmail.com>
Date: Tue, 1 Oct 2019 21:24:13 +0200
Subject: [PATCH] Add mobile support

---
 src/components/HomeFeaturesTableCell.vue    |  3 +-
 src/components/HomeFeaturesTableSection.vue | 57 +++++++++++++--------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/components/HomeFeaturesTableCell.vue b/src/components/HomeFeaturesTableCell.vue
index 11d6501..346f334 100644
--- a/src/components/HomeFeaturesTableCell.vue
+++ b/src/components/HomeFeaturesTableCell.vue
@@ -28,14 +28,13 @@
 <style lang="scss" scoped>
   td {
     text-align: center;
+    min-width: 95px;
 
     &.wulkanowy {
-      // background-color: #ffebee;
       background-color: #fff !important;
     }
 
     &.other {
-      // background-color: #e3f2fd;
       color: #1e88e5;
     }
   }
diff --git a/src/components/HomeFeaturesTableSection.vue b/src/components/HomeFeaturesTableSection.vue
index 7cec24d..9dd4135 100644
--- a/src/components/HomeFeaturesTableSection.vue
+++ b/src/components/HomeFeaturesTableSection.vue
@@ -1,24 +1,26 @@
 <template>
   <div id="features-table" class="home-section">
     <h2 class="title">Porównanie funkcji</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Funkcja</th>
-          <th>Strona UONET+</th>
-          <th>Aplikacja Dzienniczek+</th>
-          <th class="wulkanowy">Aplikacja Wulkanowy</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, i) in table" :key="i">
-          <td class="feature-name" v-html="row.feature"></td>
-          <table-cell :value="row.uonet" />
-          <table-cell :value="row.dzienniczek" />
-          <table-cell :value="row.wulkanowy" wulkanowy />
-        </tr>
-      </tbody>
-    </table>
+    <div class="table-wrapper">
+      <table>
+        <thead>
+          <tr>
+            <th>Funkcja</th>
+            <th>Strona UONET+</th>
+            <th>Aplikacja Dzienniczek+</th>
+            <th class="wulkanowy">Aplikacja Wulkanowy</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, i) in table" :key="i">
+            <td class="feature-name" v-html="row.feature"></td>
+            <table-cell :value="row.uonet" />
+            <table-cell :value="row.dzienniczek" />
+            <table-cell :value="row.wulkanowy" wulkanowy />
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -40,6 +42,8 @@
 <style lang="scss">
   #features-table {
     min-height: 100vh;
+    width: 100vw;
+    overflow: hidden;
     box-sizing: border-box;
     padding: 0 32px 32px;
     background-color: #d32f2f;
@@ -49,11 +53,11 @@
     font-family: 'Roboto', sans-serif;
 
     @media screen and (max-width: 875px) {
-      padding: 0 16px 16px;
+      padding: 0 0 16px;
     }
 
     @media screen and (max-width: 450px) {
-      padding: 0 8px 16px;
+      padding: 0 0 16px;
     }
 
     .title {
@@ -66,9 +70,20 @@
       grid-column: 1;
     }
 
+    .table-wrapper {
+      grid-row: 3;
+      width: fit-content;
+      max-width: 100vw;
+      box-sizing: border-box;
+      overflow-x: auto;
+      justify-self: center;
+    }
+
     table {
       border-spacing: 5px;
-      grid-row: 3;
+      width: fit-content;
+      min-width: 75vw;
+      padding: 0 16px;
 
       th {
         padding: 8px;