phyks/flatisfy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better mobile UI

Browse Source 
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.
This commit is contained in:
Lucas Verney 2017-05-09 15:29:21 +02:00
parent 7cec9dcec2
commit 05aa5812ad
7 changed files with 67 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
flatisfy/web/js_src/components/flatstable.vue
View File

@ -34,7 +34,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <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> <td>
<template v-for="n in range(flat.notation)"> <template v-for="n in range(flat.notation)">
<i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i> <i class="fa fa-star" aria-hidden="true" :title="capitalize($t('status.followed'))"></i>
@ -61,16 +61,16 @@
</template> </template>
</td> </td>
<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> <i class="fa fa-plus" aria-hidden="true"></i>
</router-link> </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> <i class="fa fa-external-link" aria-hidden="true"></i>
</a> </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> <i class="fa fa-trash" aria-hidden="true"></i>
</button> </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> <i class="fa fa-undo" aria-hidden="true"></i>
</button> </button>
</td> </td>
@ -123,6 +123,9 @@ export default {
this.sortBy = field this.sortBy = field
} }
}, },
showMore (flatId) {
this.$router.push({ name: 'details', params: { id: flatId }})
},
capitalize: capitalize, capitalize: capitalize,
range: range range: range
} }

7
flatisfy/web/js_src/i18n/en/index.js
View File

@ -3,10 +3,11 @@ export default {
'flats': 'flat | flats', 'flats': 'flat | flats',
'loading': 'Loading…', 'loading': 'Loading…',
'Actions': 'Actions', 'Actions': 'Actions',
'More': 'More', 'More_about': 'More about',
'Remove': 'Remove', 'Remove': 'Remove',
'Restore': 'Restore', 'Restore': 'Restore',
'External_link': 'External link', 'Original_post': 'Original post | Original posts',
'Original_post_for': 'Original post for',
'Follow': 'Follow', 'Follow': 'Follow',
'Unfollow': 'Unfollow', 'Unfollow': 'Unfollow',
'Close': 'Close', 'Close': 'Close',
@ -43,8 +44,6 @@ export default {
'Location': 'Location', 'Location': 'Location',
'Contact': 'Contact', 'Contact': 'Contact',
'no_phone_found': 'No phone found', 'no_phone_found': 'No phone found',
'Original_posts': 'Original posts:',
'Original_post': 'Original post',
'rooms': 'room | rooms', 'rooms': 'room | rooms',
'bedrooms': 'bedroom | bedrooms' 'bedrooms': 'bedroom | bedrooms'
}, },

55
flatisfy/web/js_src/views/details.vue
View File

@ -110,6 +110,7 @@
</form> </form>
</div> </div>
</div> </div>
<div class="right-panel"> <div class="right-panel">
<h3>{{ $t("flatsDetails.Contact") }}</h3> <h3>{{ $t("flatsDetails.Contact") }}</h3>
<div class="contact"> <div class="contact">
@ -119,11 +120,11 @@
{{ $t("flatsDetails.no_phone_found") }} {{ $t("flatsDetails.no_phone_found") }}
</template> </template>
</p> </p>
<p>{{ $t("flatsDetails.Original_posts") }} <p>{{ $tc("common.Original_post", 42) }}
<ul> <ul>
<li v-for="(url, index) in flat.urls"> <li v-for="(url, index) in flat.urls">
<a :href="url"> <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> <i class="fa fa-external-link" aria-hidden="true"></i>
</a> </a>
</li> </li>
@ -149,7 +150,7 @@
</template> </template>
</li> </li>
<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> <i class="fa fa-trash" aria-hidden="true"></i>
{{ $t("common.Remove") }} {{ $t("common.Remove") }}
</button> </button>
@ -157,7 +158,7 @@
</template> </template>
<template v-else> <template v-else>
<li> <li>
<button v-on:click="updateFlatStatus('new')"> <button v-on:click="updateFlatStatus('new')" class="fullButton">
<i class="fa fa-undo" aria-hidden="true"></i> <i class="fa fa-undo" aria-hidden="true"></i>
{{ $t("common.Restore") }} {{ $t("common.Restore") }}
</button> </button>
@ -188,6 +189,8 @@ export default {
}, },
created () { created () {
document.title = this.title // Set title
// Fetch data when the component is created // Fetch data when the component is created
this.fetchData() this.fetchData()
@ -197,7 +200,10 @@ export default {
watch: { watch: {
// Fetch data again when the component is updated // Fetch data again when the component is updated
'$route': 'fetchData' '$route': 'fetchData',
title () {
document.title = this.title;
}
}, },
data () { data () {
@ -207,6 +213,9 @@ export default {
}, },
computed: { computed: {
title () {
return "Flatisfy - " + this.$route.params.id
},
flatMarkers () { flatMarkers () {
return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.$route.params.id) return this.$store.getters.flatsMarkers(this.$router, flat => flat.id === this.$route.params.id)
}, },
@ -301,20 +310,22 @@ export default {
</script> </script>
<style scoped> <style scoped>
.grid { @media screen and (min-width: 768px) {
display: grid; .grid {
grid-gap: 50px; display: grid;
grid-template-columns: 75fr 25fr; grid-gap: 50px;
} grid-template-columns: 75fr 25fr;
}
.left-panel { .left-panel {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
} }
.right-panel { .right-panel {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
}
} }
.left-panel textarea { .left-panel textarea {
@ -366,4 +377,14 @@ td {
width: auto; width: auto;
background-color: transparent; background-color: transparent;
} }
@media screen and (max-width: 767px) {
.right-panel nav {
text-align: center;
}
.fullButton {
width: 100%;
}
}
</style> </style>

2
flatisfy/web/js_src/views/home.vue
View File

@ -31,6 +31,8 @@ export default {
}, },
created () { created () {
document.title = "Flatisfy" // Set title
// Fetch flats when the component is created // Fetch flats when the component is created
this.$store.dispatch('getAllFlats') this.$store.dispatch('getAllFlats')
// Fetch time to places when the component is created // Fetch time to places when the component is created

2
flatisfy/web/js_src/views/search.vue
View File

@ -33,6 +33,8 @@ export default {
}, },
created () { created () {
document.title = "Flatisfy - " + this.$t('menu.search') // Set title
this.doSearch() this.doSearch()
}, },

14
flatisfy/web/js_src/views/status.vue
View File

@ -49,13 +49,22 @@ export default {
}, },
created () { created () {
document.title = this.title // Set title
// Fetch flats when the component is created // Fetch flats when the component is created
this.$store.dispatch('getAllFlats') this.$store.dispatch('getAllFlats')
}, },
watch: {
title () {
// only used when the title changes after page load
document.title = this.title;
}
},
mounted () { mounted () {
window.addEventListener('click', event => { 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 this.isDropdownVisible = false
} }
}) })
@ -64,6 +73,9 @@ export default {
computed: { computed: {
postalCodesFlatsBuckets () { postalCodesFlatsBuckets () {
return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status) return this.$store.getters.postalCodesFlatsBuckets(flat => flat.status === this.$route.params.status)
},
title () {
return "Flatisfy - " + capitalize(this.$t("status." + this.$route.params.status))
} }
}, },

2
flatisfy/web/static/index.html
View File

@ -2,8 +2,8 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<title>Flatisfy</title> <title>Flatisfy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico"> <link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" 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"> <link rel="icon" type="image/png" sizes="196x196" href="/img/favicon-192.png">