Pārlūkot izejas kodu

:art: styling tweaks for footer and nav | auto-gen the navigation items

tags/0.9.0
J 5 gadus atpakaļ
vecāks
revīzija
db388a8eee

+ 32
- 38
vue-theme/src/components/footer.vue Parādīt failu

@@ -142,46 +142,40 @@
142 142
             font-size: 0.8em
143 143
             color: $cia_grey
144 144
 
145
-@media (--medium-viewport)
146
-    .footer-wrapper footer.main > ul
147
-        background-color: darkgreen
148
-        &:nth-child(n+2)
149
-            align-items: flex-start
150
-            flex-direction: row
151
-            flex-wrap: wrap
152
-            > li
153
-                width: 50%
145
+    @media (--medium-viewport)
146
+        footer.main > ul
147
+            background-color: darkgreen
148
+            &:nth-child(n+2)
149
+                align-items: flex-start
150
+                flex-direction: row
151
+                flex-wrap: wrap
152
+                > li
153
+                    width: 50%
154 154
 
155
-@media (--large-viewport)
156
-    .footer-wrapper footer.main > ul
157
-        background-color: purple
158
-        &:nth-child(n+2)
159
-            align-items: flex-start
160
-            flex-direction: row
161
-            flex-wrap: wrap
162
-            > li
163
-                width: 33%
155
+    @media (--large-viewport)
156
+        footer.main > ul
157
+            background-color: purple
158
+            &:nth-child(n+2)
159
+                > li
160
+                    width: 33%
164 161
 
165
-@media (--extra-large-viewport)
166
-    .footer-wrapper footer.main > ul
167
-        background-color: rebeccapurple
168
-        &:nth-child(n+2)
169
-            align-items: flex-start
170
-            flex-direction: row
171
-            flex-wrap: wrap
172
-            margin: 0 0 $ms-2 0
173
-            > li
174
-                width: 25%
162
+    @media (--extra-large-viewport)
163
+        footer.main > ul
164
+            background-color: rebeccapurple
165
+            &:nth-child(n+2)
166
+                margin: 0 0 $ms-2 0
167
+                > li
168
+                    width: 25%
175 169
 
176
-@media (--huge-viewport)
177
-    .footer-wrapper footer.main 
178
-        max-width: $max-width
179
-        margin: 0 auto
180
-        > ul
181
-            background-color: orange
170
+    @media (--huge-viewport)
171
+        footer.main 
172
+            max-width: $max-width
173
+            margin: 0 auto
174
+            > ul
175
+                background-color: orange
182 176
 
183
-@media (--ultra-viewport)
184
-    .footer-wrapper footer.main 
185
-        > ul
186
-            background-color: teal
177
+    @media (--ultra-viewport)
178
+        footer.main 
179
+            > ul
180
+                background-color: teal
187 181
 </style>

+ 31
- 18
vue-theme/src/components/navigation/navigation.vue Parādīt failu

@@ -31,20 +31,33 @@ nav.main
31 31
 </template>
32 32
 
33 33
 <script>
34
+import { postTypes } from '@/utils/helpers'
35
+import { computed } from '@vue/runtime-core'
36
+
34 37
 export default {
35 38
     setup() {
36
-        const menuItems = [
37
-            'episodes',
38
-            'artists',
39
-            'exhibitions',
40
-            'events',
41
-            'center',
42
-            'education',
43
-            'posts',
44
-            'support',
45
-            'search',
46
-        ]
47
-        return { 
39
+        /**
40
+         * Navigation items
41
+         * Auto-includes declared postTypes
42
+         * and extra items
43
+         * TIP: Add things to the ignored array
44
+         * to remove from the nav
45
+         */
46
+        const menuItems = computed(() => {
47
+            const extras = [
48
+                'center',
49
+                'education',
50
+                'support',
51
+                'search'
52
+            ]
53
+            const ignored = [
54
+                'pages',
55
+                // 'posts',
56
+            ]
57
+            const filtered = postTypes.filter(val => !ignored.includes(val))
58
+            return [ ...filtered, ...extras ]
59
+        })
60
+        return {
48 61
             menuItems
49 62
         }
50 63
     }
@@ -86,7 +99,7 @@ nav.main
86 99
                 padding: 0 $ms--1
87 100
     
88 101
     .mobile-menu
89
-        img
102
+        img 
90 103
             margin: 0 $ms--5 0 $ms-0
91 104
         label
92 105
             position: absolute
@@ -122,14 +135,14 @@ nav.main
122 135
                     padding: $ms--1
123 136
 
124 137
 
125
-@media (--medium-viewport)
126
-    nav.main 
138
+    @media (--medium-viewport)
127 139
         .menu
128 140
             display: flex
129 141
             justify-content: center
130 142
         .mobile-menu
131 143
             display: none
132
-@media (--extra-large-viewport)
133
-    nav.main .menu > ul
134
-        max-width: $max-width
144
+
145
+    @media (--extra-large-viewport)
146
+        .menu > ul
147
+            max-width: $max-width
135 148
 </style>

+ 4
- 4
vue-theme/src/utils/helpers.js Parādīt failu

@@ -24,12 +24,12 @@ const sortTypes = {
24 24
  * list and single components to request data
25 25
  */
26 26
  const postTypes = [
27
-    'posts',
28
-    'pages',
29
-    'artists',
30 27
     'episodes',
28
+    'artists',
29
+    'exhibitions',
31 30
     'events',
32
-    'exhibitions'
31
+    'posts',
32
+    'pages',
33 33
 ]
34 34
 
35 35
 export { convertTitleCase, dePluralize, typeFromRoute, sortTypes, postTypes }

Notiek ielāde…
Atcelt
Saglabāt