Переглянути джерело

:art: added responsive row and column with wrap for ProfileCardList

tags/0.0.3^2
K Rob 3 роки тому
джерело
коміт
5023fdad38

+ 23
- 6
frontend/src/components/ProfileCardList.vue Переглянути файл

1
 <template lang="pug">
1
 <template lang="pug">
2
-section.profile-card-list.xs12.w-flex.column
3
-    article
2
+section.profile-card-list.xs12.w-flex
3
+    article.w-flex.xs-col.sm-row.sm-wrap
4
         ProfileCard.match-layout(
4
         ProfileCard.match-layout(
5
             :aspects='aspects'
5
             :aspects='aspects'
6
             :card='card'
6
             :card='card'
8
             :key='`${card.pid}-${i}`'
8
             :key='`${card.pid}-${i}`'
9
             v-for='(card, i) in cards'
9
             v-for='(card, i) in cards'
10
         )
10
         )
11
-        w-button.pa8.more-results(bg-color='primary' @click="loadMoreResults()")
11
+        w-button.pa8.more-results(
12
+            @click='loadMoreResults()'
13
+            bg-color='primary'
14
+        )
12
 </template>
15
 </template>
13
 
16
 
14
 <script setup>
17
 <script setup>
36
     },
39
     },
37
 })
40
 })
38
 
41
 
39
-const loadMoreResults = () => { emit('loadMore') } // TODO update to scroll
42
+const loadMoreResults = () => {
43
+    emit('loadMore')
44
+} // TODO update to scroll
40
 </script>
45
 </script>
41
 
46
 
42
 <style lang="sass">
47
 <style lang="sass">
48
+@import '../assets/sass/main'
49
+
43
 .profile-card-list
50
 .profile-card-list
44
     > header > .w-select >.primary
51
     > header > .w-select >.primary
45
         margin-top: 0
52
         margin-top: 0
46
-.more-results
47
-    margin-bottom: 2em
53
+
54
+@media (min-width: $tablet)
55
+    section.profile-card-list.xs12.w-flex > article
56
+        display: flex
57
+        flex-wrap: wrap
58
+        flex-direction: row
59
+
60
+@media (max-width: $tablet)
61
+    section.profile-card-list.xs12.w-flex > article
62
+        display: flex
63
+        flex-wrap: wrap
64
+        flex-direction: column
48
 </style>
65
 </style>

+ 7
- 12
frontend/src/entities/survey/survey.answer.validator.js Переглянути файл

7
         minDomainSegments: 2,
7
         minDomainSegments: 2,
8
         tlds: { allow: domains },
8
         tlds: { allow: domains },
9
     }),
9
     }),
10
-    // Comment out and uncomment below for more robust password testing
11
-    password: Joi.string().min(14).max(30),
12
-    // TODO: consider using a more robust library for password validation
13
-    // password: Joi.string()
14
-        // .min(14)
15
-        // .max(30)
16
-        // .pattern(
17
-            // new RegExp(
18
-                // '^(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])(?=.*[!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?])[a-zA-Z0-9!@#$%^&*()_+\\-=[\\]{};\':"\\\\|,.<>\\/?]{14,}$',
19
-            // ),
20
-        // ),
10
+
11
+    password: Joi.string().min(10).max(30).pattern(new RegExp('[a-zA-Z0-9]+')),
21
     // TODO: Change if going international (only works in usa)
12
     // TODO: Change if going international (only works in usa)
22
     zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
13
     zipcode: Joi.string().min(5).max(5).pattern(new RegExp('^[0-9]{5}$')),
23
     seeking: Joi.string(),
14
     seeking: Joi.string(),
31
     distance: Joi.string()
22
     distance: Joi.string()
32
         .min(4)
23
         .min(4)
33
         .max(15)
24
         .max(15)
34
-        .pattern(new RegExp('^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$')),
25
+        .pattern(
26
+            new RegExp(
27
+                '^\\d{1,3}(\\.\\d{1,2})?\\s?(mi|km|mile|miles|kilometer|kilometers)$',
28
+            ),
29
+        ),
35
     blurb: Joi.string().max(200),
30
     blurb: Joi.string().max(200),
36
     value: Joi.string(),
31
     value: Joi.string(),
37
     aspect: Joi.number(),
32
     aspect: Joi.number(),

+ 1
- 1
frontend/src/views/HomeView.vue Переглянути файл

1
 <template lang="pug">
1
 <template lang="pug">
2
 main.view--home
2
 main.view--home
3
-    article.w-flex.column.align-center
3
+    article.w-flex.sm-column.md-row.align-center
4
         template(v-if='isLoading')
4
         template(v-if='isLoading')
5
             w-spinner(bounce)
5
             w-spinner(bounce)
6
 
6
 

Завантаження…
Відмінити
Зберегти