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:
parent
7cec9dcec2
commit
05aa5812ad
@ -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
|
||||
}
|
||||
|
||||
@ -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'
|
||||
},
|
||||
|
||||
@ -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 {
|
||||
@media screen and (min-width: 768px) {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 50px;
|
||||
grid-template-columns: 75fr 25fr;
|
||||
}
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
.left-panel {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
.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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -33,6 +33,8 @@ export default {
|
||||
},
|
||||
|
||||
created () {
|
||||
document.title = "Flatisfy - " + this.$t('menu.search') // Set title
|
||||
|
||||
this.doSearch()
|
||||
},
|
||||
|
||||
|
||||
@ -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,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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user