Browse Source

Continue styling

Phyks (Lucas Verney) 2 years ago
parent
commit
916a0abc41

+ 1
- 0
package.json View File

@@ -17,6 +17,7 @@
17 17
     "font-awesome": "^4.7.0",
18 18
     "isomorphic-fetch": "^2.2.1",
19 19
     "material-design-icons": "^3.0.1",
20
+    "material-ui-rating": "^1.4.0",
20 21
     "moment": "^2.19.3",
21 22
     "vue": "^2.5.2",
22 23
     "vue-i18n": "^7.3.2",

+ 35
- 5
src/App.vue View File

@@ -4,16 +4,15 @@
4 4
         <template v-else>
5 5
             <v-navigation-drawer
6 6
                 fixed
7
-                mini-variant
8 7
                 clipped
9 8
                 v-model="drawer"
10 9
                 app
11 10
                 >
12 11
                 <v-list>
13 12
                     <v-list-tile
14
-                        value="true"
15 13
                         v-for="(item, i) in menuItems"
16 14
                         :key="i"
15
+                        :to="item.to"
17 16
                         >
18 17
                         <v-list-tile-action>
19 18
                             <v-icon v-html="item.icon"></v-icon>
@@ -27,7 +26,7 @@
27 26
             <v-toolbar fixed app clipped-left>
28 27
                 <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
29 28
                 <v-toolbar-title>
30
-                    <router-link :to="{ name: 'Home' }">Flatisfy</router-link>
29
+                    <router-link :to="{ name: 'Home' }" class="noLinkStyling">Flatisfy</router-link>
31 30
                 </v-toolbar-title>
32 31
                 <v-spacer></v-spacer>
33 32
             </v-toolbar>
@@ -41,7 +40,7 @@
41 40
                 </v-container>
42 41
             </v-content>
43 42
             <v-footer app>
44
-                <span>&copy; 2017</span>
43
+                <p class="text-xs-center mb-0 footerP">{{ $t('app.licensing') }}</p>
45 44
             </v-footer>
46 45
         </template>
47 46
     </v-app>
@@ -53,7 +52,26 @@ export default {
53 52
         return {
54 53
             drawer: true,
55 54
             menuItems: [
56
-                { icon: 'bubble_chart', title: 'Inspire' },
55
+                {
56
+                    icon: 'new_releases',
57
+                    title: this.$t('menu.newFlats'),
58
+                    to: { name: 'Home' },
59
+                },
60
+                {
61
+                    icon: 'star',
62
+                    title: this.$t('menu.followedFlats'),
63
+                    to: { name: 'Home' },
64
+                },
65
+                {
66
+                    icon: 'add',
67
+                    title: this.$t('menu.flatsByStatus'),
68
+                    to: { name: 'Home' },
69
+                },
70
+                {
71
+                    icon: 'search',
72
+                    title: this.$t('menu.search'),
73
+                    to: { name: 'Home' },
74
+                },
57 75
             ],
58 76
         };
59 77
     },
@@ -73,3 +91,15 @@ export default {
73 91
     font-size: 20px;
74 92
 }
75 93
 </style>
94
+
95
+<style scoped>
96
+.noLinkStyling {
97
+    color: rgba(0,0,0,0.87) !important;
98
+    text-decoration: none;
99
+}
100
+
101
+.footerP {
102
+    margin-left: auto;
103
+    margin-right: auto;
104
+}
105
+</style>

+ 70
- 16
src/components/FlatDetails.vue View File

@@ -1,25 +1,78 @@
1 1
 <template>
2
-    <div>
3
-        <template v-if="isLoading"></template>
4
-        <template v-else>
5
-            <template v-if="flatIsNotEmpty">
6
-                <h2>{{ flat.title }}</h2>
7
-                <FormattedCost :cost="flat.cost" :currency="flat.currency"></FormattedCost>
8
-                <FormattedLocation :location="flat.location"></FormattedLocation>
9
-                <FormattedArea :area="flat.area" :areaUnits="flat.areaUnits"></FormattedArea>
10
-                <FormattedRooms :rooms="flat.rooms"></FormattedRooms>
11
-                <FormattedBedrooms :bedrooms="flat.bedrooms" v-if="flat.bedrooms"></FormattedBedrooms>
12
-                <PhotosGrid :photos="flat.photos"></PhotosGrid>
13
-                <p>{{ flat.text }}</p>
14
-            </template>
2
+    <v-card>
3
+        <v-container grid-list-lg>
4
+            <template v-if="isLoading"></template>
15 5
             <template v-else>
16
-                <h2>{{ $t('flatDetails.notFound') }}</h2>
6
+                <template v-if="flatIsNotEmpty">
7
+                    <v-layout row align-center>
8
+                        <v-flex xs12>
9
+                            <h2 class="display-1">
10
+                                {{ flat.title }}
11
+                                <a :href="flat.urls[0]" target="_blank" v-on:click.stop="">
12
+                                    <v-btn flat icon>
13
+                                        <v-icon class="fa-icon text--darken-2 blue--text">fa-external-link</v-icon>
14
+                                    </v-btn>
15
+                                </a>
16
+                            </h2>
17
+                        </v-flex>
18
+                    </v-layout>
19
+                    <v-layout row align-center>
20
+                        <v-flex xs12>
21
+                            <FormattedLocation :location="flat.location"></FormattedLocation>
22
+                        </v-flex>
23
+                    </v-layout>
24
+                    <v-layout row align-center>
25
+                        <v-flex xs2>
26
+                            <FormattedCost :cost="flat.cost" :currency="flat.currency"></FormattedCost>
27
+                        </v-flex>
28
+                        <v-flex xs2>
29
+                            <FormattedArea :area="flat.area" :areaUnits="flat.areaUnits"></FormattedArea>
30
+                        </v-flex>
31
+                        <v-flex xs2>
32
+                            <FormattedRooms :rooms="flat.rooms"></FormattedRooms>
33
+                        </v-flex>
34
+                        <v-flex xs2>
35
+                            <FormattedBedrooms :bedrooms="flat.bedrooms" v-if="flat.bedrooms"></FormattedBedrooms>
36
+                        </v-flex>
37
+                    </v-layout>
38
+                    <v-layout row align-center>
39
+                        <v-flex xs12>
40
+                            <PhotosGrid :photos="flat.photos"></PhotosGrid>
41
+                        </v-flex>
42
+                    </v-layout>
43
+
44
+                    <v-layout row align-center>
45
+                        <v-flex xs12>
46
+                            <h3 class="title">{{ $t('flatDetails.Description') }}</h3>
47
+                        </v-flex>
48
+                    </v-layout>
49
+                    <v-layout row align-center>
50
+                        <v-flex xs12>
51
+                            <p>{{ flat.text }}</p>
52
+                        </v-flex>
53
+                    </v-layout>
54
+
55
+                    <v-layout row align-center>
56
+                        <v-flex xs12>
57
+                            <h3 class="title">{{ $t('flatDetails.Details') }}</h3>
58
+                        </v-flex>
59
+                    </v-layout>
60
+                    <v-layout row align-center>
61
+                        <v-flex xs8 offset-xs2>
62
+                            <DetailsTable :details="flat.details"></DetailsTable>
63
+                        </v-flex>
64
+                    </v-layout>
65
+                </template>
66
+                <template v-else>
67
+                    <p>{{ $t('flatDetails.notFound') }}</p>
68
+                </template>
17 69
             </template>
18
-        </template>
19
-    </div>
70
+        </v-container>
71
+    </v-card>
20 72
 </template>
21 73
 
22 74
 <script>
75
+import DetailsTable from '@/components/ui/DetailsTable.vue';
23 76
 import FormattedArea from '@/components/ui/FormattedArea.vue';
24 77
 import FormattedBedrooms from '@/components/ui/FormattedBedrooms.vue';
25 78
 import FormattedCost from '@/components/ui/FormattedCost.vue';
@@ -29,6 +82,7 @@ import PhotosGrid from '@/components/ui/PhotosGrid.vue';
29 82
 
30 83
 export default {
31 84
     components: {
85
+        DetailsTable,
32 86
         FormattedArea,
33 87
         FormattedBedrooms,
34 88
         FormattedCost,

+ 5
- 4
src/components/FlatEntry.vue View File

@@ -9,7 +9,7 @@
9 9
                                 <Avatar :thumbnail="thumbnail"></Avatar>
10 10
                             </v-flex>
11 11
                             <v-flex d-flex xs12>
12
-                                <FormattedCost :cost="cost" :currency="currency"></FormattedCost>
12
+                                <FormattedCost :cost="cost" :currency="currency" :withIcon="false"></FormattedCost>
13 13
                             </v-flex>
14 14
                         </v-layout>
15 15
                     </v-flex>
@@ -34,9 +34,7 @@
34 34
                         </v-layout>
35 35
                     </v-flex>
36 36
                     <v-flex xs1 hidden-sm-and-down>
37
-                        <v-btn flat icon v-on:click.stop="starFlat">
38
-                            <v-icon>star</v-icon>
39
-                        </v-btn>
37
+                        <Rating :notation="notation"></Rating>
40 38
                     </v-flex>
41 39
                     <v-flex xs1 hidden-sm-and-down>
42 40
                         <v-btn flat icon v-on:click.stop="deleteFlat">
@@ -62,6 +60,7 @@ import FormattedArea from '@/components/ui/FormattedArea.vue';
62 60
 import FormattedCost from '@/components/ui/FormattedCost.vue';
63 61
 import FormattedLocation from '@/components/ui/FormattedLocation.vue';
64 62
 import FormattedRooms from '@/components/ui/FormattedRooms.vue';
63
+import Rating from '@/components/ui/Rating.vue';
65 64
 
66 65
 export default {
67 66
     components: {
@@ -70,6 +69,7 @@ export default {
70 69
         FormattedCost,
71 70
         FormattedLocation,
72 71
         FormattedRooms,
72
+        Rating,
73 73
     },
74 74
     props: {
75 75
         id: String,
@@ -82,6 +82,7 @@ export default {
82 82
         rooms: Number,
83 83
         location: String,
84 84
         urls: Array,
85
+        notation: Number,
85 86
     },
86 87
     methods: {
87 88
         goToFlatDetailsPage() {

+ 2
- 3
src/components/FlatList.vue View File

@@ -1,9 +1,8 @@
1 1
 <template>
2 2
     <div v-if="!isLoading">
3
-        <template v-for="flat in flats">
4
-            <FlatEntry v-bind="flat"></FlatEntry>
5
-        </template>
3
+        <FlatEntry v-bind="flat" v-for="flat in flats" :key="flat.id"></FlatEntry>
6 4
     </div>
5
+    <v-progress-circular v-else></v-progress-circular>
7 6
 </template>
8 7
 
9 8
 <script>

+ 35
- 0
src/components/ui/DetailsTable.vue View File

@@ -0,0 +1,35 @@
1
+<template>
2
+    <table class="table">
3
+        <tbody>
4
+            <tr v-for="key in sortedDetailsKeys" :key="key">
5
+                <th>{{ capitalize(key) }}</th>
6
+                <td class="text-xs-center">
7
+                    <template v-if="details[key]">
8
+                        {{ details[key] }}
9
+                    </template>
10
+                    <template v-else>
11
+                        <v-icon>check</v-icon>
12
+                    </template>
13
+                </td>
14
+            </tr>
15
+        </tbody>
16
+    </table>
17
+</template>
18
+
19
+<script>
20
+import { capitalize } from '@/tools';
21
+
22
+export default {
23
+    props: {
24
+        details: Object,
25
+    },
26
+    computed: {
27
+        sortedDetailsKeys() {
28
+            return Object.keys(this.details).sort();
29
+        },
30
+    },
31
+    methods: {
32
+        capitalize,
33
+    },
34
+};
35
+</script>

+ 7
- 1
src/components/ui/FormattedCost.vue View File

@@ -1,5 +1,7 @@
1 1
 <template>
2
-    <span class="body-2">{{ formattedCost }}</span>
2
+    <span class="body-2">
3
+        <v-icon class="flex-icon" v-if="withIcon">attach_money</v-icon> {{ formattedCost }}
4
+    </span>
3 5
 </template>
4 6
 
5 7
 <script>
@@ -9,6 +11,10 @@ export default {
9 11
     props: {
10 12
         cost: Number,
11 13
         currency: String,
14
+        withIcon: {
15
+            type: Boolean,
16
+            default: true,
17
+        },
12 18
     },
13 19
     computed: {
14 20
         formattedCost() {

+ 6
- 1
src/components/ui/FormattedRooms.vue View File

@@ -1,6 +1,6 @@
1 1
 <template>
2 2
     <span>
3
-        <v-icon v-if="withIcon">home</v-icon> {{ $tc('flatEntry.rooms', rooms, { count: rooms }) }}
3
+        <v-icon v-if="withIcon">home</v-icon> {{ $tc('flatEntry.rooms', roomsWithDefault, { count: roomsWithDefault }) }}
4 4
     </span>
5 5
 </template>
6 6
 
@@ -13,5 +13,10 @@ export default {
13 13
             default: true,
14 14
         },
15 15
     },
16
+    computed: {
17
+        roomsWithDefault() {
18
+            return this.rooms || 1;
19
+        },
20
+    },
16 21
 };
17 22
 </script>

+ 20
- 0
src/components/ui/Rating.vue View File

@@ -0,0 +1,20 @@
1
+<template>
2
+    <v-btn flat icon v-on:click.stop="starFlat">
3
+        <v-icon>
4
+            <template v-if="notation > 0">
5
+                star
6
+            </template>
7
+            <template v-else>
8
+                star_border
9
+            </template>
10
+        </v-icon>
11
+    </v-btn>
12
+</template>
13
+
14
+<script>
15
+export default {
16
+    props: {
17
+        notation: Number,
18
+    },
19
+};
20
+</script>

+ 11
- 0
src/i18n/index.js View File

@@ -1,11 +1,22 @@
1 1
 const messages = {
2 2
     fr: {
3
+        app: {
4
+            licensing: 'Flatisfy est un logiciel sous licence MIT.',
5
+        },
3 6
         flatEntry: {
4 7
             rooms: '1 pièce | {count} pièces',
5 8
             bedrooms: '1 chambre | {count} chambres',
6 9
         },
7 10
         flatDetails: {
8 11
             notFound: 'Annonce introuvable',
12
+            Description: 'Description',
13
+            Details: 'Détails',
14
+        },
15
+        menu: {
16
+            newFlats: 'Nouveautés',
17
+            followedFlats: 'Favoris',
18
+            flatsByStatus: 'Par statut',
19
+            search: 'Recherche',
9 20
         },
10 21
         onboarding: {
11 22
             start: 'démarrer',

+ 7
- 0
src/tools/index.js View File

@@ -0,0 +1,7 @@
1
+function capitalize(string) {
2
+    return string.charAt(0).toUpperCase() + string.slice(1);
3
+}
4
+
5
+export {
6
+    capitalize,
7
+};