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

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.
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>
</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
}

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

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

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

@ -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>

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

@ -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

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

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

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

@ -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))
}
},

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

@ -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">