Stash

flatisfy/web/js_src/components/app.vue

@@ -22,6 +22,23 @@ body {
     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 {

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>

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',

flatisfy/web/js_src/views/details.vue

@@ -391,5 +391,9 @@ td {
     .fullButton {
         width: 100%;
     }
+
+    td, th {
+        padding: 0;
+    }
 }
 </style>