From 05aa5812adc84d62ddd418b02cd874a990c5ef63 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Tue, 9 May 2017 15:29:21 +0200
Subject: [PATCH] Better mobile UI

The mobile UI is now more responsive, without grid in the details view.
Clicking on a line in the flats table sends the user to the flat
details. Also features better title descriptions and reactive title of
the tab.
---
 flatisfy/web/js_src/components/flatstable.vue | 13 +++--
 flatisfy/web/js_src/i18n/en/index.js          |  7 +--
 flatisfy/web/js_src/views/details.vue         | 55 +++++++++++++------
 flatisfy/web/js_src/views/home.vue            |  2 +
 flatisfy/web/js_src/views/search.vue          |  2 +
 flatisfy/web/js_src/views/status.vue          | 14 ++++-
 flatisfy/web/static/index.html                |  2 +-
 7 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/flatisfy/web/js_src/components/flatstable.vue b/flatisfy/web/js_src/components/flatstable.vue
index 75e837a..61e69ba 100644
--- a/flatisfy/web/js_src/components/flatstable.vue
+++ b/flatisfy/web/js_src/components/flatstable.vue
@@ -34,7 +34,7 @@
             </tr>
         </thead>
         <tbody>
-            <tr v-for="flat in sortedFlats" :key="flat.id">
+            <tr v-for="flat in sortedFlats" :key="flat.id" v-on:click="showMore(flat.id)" class="pointer">
                 <td>
                     <template v-for="n in range(flat.notation)">
                         <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
@@ -61,16 +61,16 @@
                     </template>
                 </td>
                 <td>
-                    <router-link :to="{name: 'details', params: {id: flat.id}}" :aria-label="$t('common.More')" :title="$t('common.More')">
+                    <router-link :to="{name: 'details', params: {id: flat.id}}" :aria-label="$t('common.More_about') + ' ' + flat.id" :title="$t('common.More_about') + ' ' + flat.id">
                         <i class="fa fa-plus" aria-hidden="true"></i>
                     </router-link>
-                    <a :href="flat.urls[0]" :aria-label="$t('common.External_link')" :title="$t('common.External_link')" target="_blank">
+                    <a :href="flat.urls[0]" :aria-label="$t('common.Original_post_for') + ' ' + flat.id" :title="$t('common.Original_post_for') + ' ' + flat.id" target="_blank">
                         <i class="fa fa-external-link" aria-hidden="true"></i>
                     </a>
-                    <button v-if="flat.status !== 'user_deleted'" v-on:click="updateFlatStatus(flat.id, 'user_deleted')" :aria-label="$t('common.Remove')" :title="$t('common.Remove')">
+                    <button v-if="flat.status !== 'user_deleted'" v-on:click="updateFlatStatus(flat.id, 'user_deleted')" :aria-label="$t('common.Remove') + ' ' + flat.id" :title="$t('common.Remove') + ' ' + flat.id">
                         <i class="fa fa-trash" aria-hidden="true"></i>
                     </button>
-                    <button v-else v-on:click="updateFlatStatus(flat.id, 'new')" :aria-label="$t('common.Restore')" :title="$t('common.Restore')">
+                    <button v-else v-on:click="updateFlatStatus(flat.id, 'new')" :aria-label="$t('common.Restore') + ' ' + flat.id" :title="$t('common.Restore') + ' ' + flat.id">
                         <i class="fa fa-undo" aria-hidden="true"></i>
                     </button>
                 </td>
@@ -123,6 +123,9 @@ export default {
                 this.sortBy = field
             }
         },
+        showMore (flatId) {
+            this.$router.push({ name: 'details', params: { id: flatId }})
+        },
         capitalize: capitalize,
         range: range
     }
diff --git a/flatisfy/web/js_src/i18n/en/index.js b/flatisfy/web/js_src/i18n/en/index.js
index f6d6545..9856253 100644
--- a/flatisfy/web/js_src/i18n/en/index.js
+++ b/flatisfy/web/js_src/i18n/en/index.js
@@ -3,10 +3,11 @@ export default {
         'flats': 'flat | flats',
         'loading': 'Loading…',
         'Actions': 'Actions',
-        'More': 'More',
+        'More_about': 'More about',
         'Remove': 'Remove',
         'Restore': 'Restore',
-        'External_link': 'External link',
+        'Original_post': 'Original post | Original posts',
+        'Original_post_for': 'Original post for',
         'Follow': 'Follow',
         'Unfollow': 'Unfollow',
         'Close': 'Close',
@@ -43,8 +44,6 @@ export default {
         'Location': 'Location',
         'Contact': 'Contact',
         'no_phone_found': 'No phone found',
-        'Original_posts': 'Original posts:',
-        'Original_post': 'Original post',
         'rooms': 'room | rooms',
         'bedrooms': 'bedroom | bedrooms'
     },
diff --git a/flatisfy/web/js_src/views/details.vue b/flatisfy/web/js_src/views/details.vue
index 25f12ef..c4bd603 100644
--- a/flatisfy/web/js_src/views/details.vue
+++ b/flatisfy/web/js_src/views/details.vue
@@ -110,6 +110,7 @@
                     </form>
                 </div>
             </div>
+
             <div class="right-panel">
                 <h3>{{ $t("flatsDetails.Contact") }}</h3>
                 <div class="contact">
@@ -119,11 +120,11 @@
                             {{ $t("flatsDetails.no_phone_found") }}
                         </template>
                     </p>
-                    <p>{{ $t("flatsDetails.Original_posts") }}
+                    <p>{{ $tc("common.Original_post", 42) }}
                         <ul>
                             <li v-for="(url, index) in flat.urls">
                                 <a :href="url">
-                                    {{ $t("flatsDetails.Original_post") }} {{ index + 1 }}
+                                    {{ $tc("common.Original_post", 1) }} {{ index + 1 }}
                                     <i class="fa fa-external-link" aria-hidden="true"></i>
                                 </a>
                             </li>
@@ -149,7 +150,7 @@
                                 </template>
                             </li>
                             <li>
-                                <button v-on:click="updateFlatStatus('user_deleted')">
+                                <button v-on:click="updateFlatStatus('user_deleted')" class="fullButton">
                                     <i class="fa fa-trash" aria-hidden="true"></i>
                                     {{ $t("common.Remove") }}
                                 </button>
@@ -157,7 +158,7 @@
                         </template>
                         <template v-else>
                             <li>
-                                <button v-on:click="updateFlatStatus('new')">
+                                <button v-on:click="updateFlatStatus('new')" class="fullButton">
                                     <i class="fa fa-undo" aria-hidden="true"></i>
                                     {{ $t("common.Restore") }}
                                 </button>
@@ -188,6 +189,8 @@ export default {
     },
 
     created () {
+        document.title = this.title  // Set title
+
         // Fetch data when the component is created
         this.fetchData()
 
@@ -197,7 +200,10 @@ export default {
 
     watch: {
         // Fetch data again when the component is updated
-        '$route': 'fetchData'
+        '$route': 'fetchData',
+        title () {
+            document.title = this.title;
+        }
     },
 
     data () {
@@ -207,6 +213,9 @@ export default {
     },
 
     computed: {
+        title () {
+            return "Flatisfy - " + this.$route.params.id
+        },
         flatMarkers () {
             return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.$route.params.id)
         },
@@ -301,20 +310,22 @@ export default {
 </script>
 
 <style scoped>
-.grid {
-    display: grid;
-    grid-gap: 50px;
-    grid-template-columns: 75fr 25fr;
-}
+@media screen and (min-width: 768px) {
+    .grid {
+        display: grid;
+        grid-gap: 50px;
+        grid-template-columns: 75fr 25fr;
+    }
 
-.left-panel {
-    grid-column: 1;
-    grid-row: 1;
-}
+    .left-panel {
+        grid-column: 1;
+        grid-row: 1;
+    }
 
-.right-panel {
-    grid-column: 2;
-    grid-row: 1;
+    .right-panel {
+        grid-column: 2;
+        grid-row: 1;
+    }
 }
 
 .left-panel textarea {
@@ -366,4 +377,14 @@ td {
     width: auto;
     background-color: transparent;
 }
+
+@media screen and (max-width: 767px) {
+    .right-panel nav {
+        text-align: center;
+    }
+
+    .fullButton {
+        width: 100%;
+    }
+}
 </style>
diff --git a/flatisfy/web/js_src/views/home.vue b/flatisfy/web/js_src/views/home.vue
index 4a1e41d..1221317 100644
--- a/flatisfy/web/js_src/views/home.vue
+++ b/flatisfy/web/js_src/views/home.vue
@@ -31,6 +31,8 @@ export default {
     },
 
     created () {
+        document.title = "Flatisfy"  // Set title
+
         // Fetch flats when the component is created
         this.$store.dispatch('getAllFlats')
         // Fetch time to places when the component is created
diff --git a/flatisfy/web/js_src/views/search.vue b/flatisfy/web/js_src/views/search.vue
index 6c7ed7e..e0bcfc4 100644
--- a/flatisfy/web/js_src/views/search.vue
+++ b/flatisfy/web/js_src/views/search.vue
@@ -33,6 +33,8 @@ export default {
     },
 
     created () {
+        document.title = "Flatisfy - " + this.$t('menu.search')  // Set title
+
         this.doSearch()
     },
 
diff --git a/flatisfy/web/js_src/views/status.vue b/flatisfy/web/js_src/views/status.vue
index 6928bcd..c7a165a 100644
--- a/flatisfy/web/js_src/views/status.vue
+++ b/flatisfy/web/js_src/views/status.vue
@@ -49,13 +49,22 @@ export default {
     },
 
     created () {
+        document.title = this.title  // Set title
+
         // Fetch flats when the component is created
         this.$store.dispatch('getAllFlats')
     },
 
+    watch: {
+        title () {
+            // only used when the title changes after page load
+            document.title = this.title;
+        }
+    },
+
     mounted () {
         window.addEventListener('click', event => {
-            if (event.target !== this.$refs.dropdownToggle) {
+            if (event.target !== this.$refs.dropdownToggle && event.target.parentNode !== this.$refs.dropdownToggle) {
                 this.isDropdownVisible = false
             }
         })
@@ -64,6 +73,9 @@ export default {
     computed: {
         postalCodesFlatsBuckets () {
             return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status)
+        },
+        title () {
+            return "Flatisfy - " + capitalize(this.$t("status." + this.$route.params.status))
         }
     },
 
diff --git a/flatisfy/web/static/index.html b/flatisfy/web/static/index.html
index a965826..bf48f70 100644
--- a/flatisfy/web/static/index.html
+++ b/flatisfy/web/static/index.html
@@ -2,8 +2,8 @@
 <html lang="fr">
     <head>
         <meta charset="utf-8">
-        <meta name="format-detection" content="telephone=no">
         <title>Flatisfy</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
         <link rel="shortcut icon" href="/favicon.ico">
         <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
         <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon-192.png">