Browse Source

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

tags/0.0.3^2
K Rob 3 years ago
parent
commit
c84fd55605
2 changed files with 18 additions and 1 deletions
  1. 17
    0
      frontend/src/components/ProfileCardList.vue
  2. 1
    1
      frontend/src/views/HomeView.vue

+ 17
- 0
frontend/src/components/ProfileCardList.vue View File

@@ -65,4 +65,21 @@ const loadMoreResults = () => {
65 65
 
66 66
 .more-results
67 67
     margin-bottom: 2em
68
+
69
+@media (min-width: $tablet) 
70
+    section.profile-card-list.xs12.w-flex > article
71
+        display: flex
72
+        flex-wrap: wrap
73
+        flex-direction: row
74
+    
75
+
76
+
77
+@media (max-width: $tablet) 
78
+    section.profile-card-list.xs12.w-flex > article
79
+        display: flex
80
+        flex-wrap: wrap
81
+        flex-direction: column
82
+    
83
+
84
+
68 85
 </style>

+ 1
- 1
frontend/src/views/HomeView.vue View File

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

Loading…
Cancel
Save