From 7309b4da181fd4c9bbffe5de5707606ed66b03ab Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Fri, 12 May 2017 17:19:51 +0200
Subject: [PATCH] Stash

---
 flatisfy/web/js_src/components/app.vue        | 31 ++++++++++++++-----
 flatisfy/web/js_src/components/flatstable.vue | 26 ++++++++++++++++
 flatisfy/web/js_src/i18n/en/index.js          |  3 +-
 flatisfy/web/js_src/views/details.vue         |  4 +++
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/flatisfy/web/js_src/components/app.vue b/flatisfy/web/js_src/components/app.vue
index 801fd3c..cc48330 100644
--- a/flatisfy/web/js_src/components/app.vue
+++ b/flatisfy/web/js_src/components/app.vue
@@ -15,13 +15,30 @@
 
 <style>
 body {
-  margin: 0 auto;
-  max-width: 75em;
-  font-family: "Helvetica", "Arial", sans-serif;
-  line-height: 1.5;
-  padding: 4em 1em;
-  padding-top: 1em;
-  color: #555;
+    margin: 0 auto;
+    max-width: 75em;
+    font-family: "Helvetica", "Arial", sans-serif;
+    line-height: 1.5;
+    padding: 4em 1em;
+    padding-top: 1em;
+    color: #555;
+    font-size: 14px;
+}
+
+.mobile-only {
+    display: none;
+}
+
+@media screen and (max-width: 767px) {
+    body {
+        max-width: auto;
+        width: 100%;
+        padding: 1em 0.1em;
+    }
+
+    .mobile-only {
+        display: initial;
+    }
 }
 
 h1 {
diff --git a/flatisfy/web/js_src/components/flatstable.vue b/flatisfy/web/js_src/components/flatstable.vue
index 056225c..39c52ed 100644
--- a/flatisfy/web/js_src/components/flatstable.vue
+++ b/flatisfy/web/js_src/components/flatstable.vue
@@ -67,6 +67,7 @@
                 <td>{{ flat.area }} m²</td>
                 <td>
                     {{ flat.rooms ? flat.rooms : '?'}}
+                    <span class="mobile-only">{{ $t("flatsDetails.RM") }}</span>
                 </td>
                 <td>
                     {{ flat.cost }} {{ flat.currency }}
@@ -97,6 +98,7 @@
 </template>
 
 <script>
+// TODO: Table is too wide on mobile device, and button trash is not aligned with links
 import 'font-awesome-webpack'
 
 import { capitalize, range } from '../tools'
@@ -217,4 +219,28 @@ pre {
     word-wrap: break-word;
     word-break: break-all;
 }
+
+@media screen and (max-width: 767px) {
+    table {
+        margin: 0;
+        width: 100%;
+    }
+
+    thead {
+        display: none;
+    }
+
+    th, td {
+        padding: 0.25em;
+    }
+
+    td a, td button {
+        display: block;
+        width: 1em;
+    }
+
+    td {
+        vertical-align: top;
+    }
+}
 </style>
diff --git a/flatisfy/web/js_src/i18n/en/index.js b/flatisfy/web/js_src/i18n/en/index.js
index dd66dd5..6b2fb85 100644
--- a/flatisfy/web/js_src/i18n/en/index.js
+++ b/flatisfy/web/js_src/i18n/en/index.js
@@ -46,7 +46,8 @@ export default {
         'Contact': 'Contact',
         'no_phone_found': 'No phone found',
         'rooms': 'room | rooms',
-        'bedrooms': 'bedroom | bedrooms'
+        'bedrooms': 'bedroom | bedrooms',
+        'RM': 'RM'
     },
     status: {
         'new': 'new',
diff --git a/flatisfy/web/js_src/views/details.vue b/flatisfy/web/js_src/views/details.vue
index 9d42bb6..467630f 100644
--- a/flatisfy/web/js_src/views/details.vue
+++ b/flatisfy/web/js_src/views/details.vue
@@ -391,5 +391,9 @@ td {
     .fullButton {
         width: 100%;
     }
+
+    td, th {
+        padding: 0;
+    }
 }
 </style>