craft-in-america
/
vue-wp
Volgen 4
Ster 2
Vork 0
Code Kwesties 8 Pull-aanvragen 0 Publicaties 6 Wiki Activiteit
Bladeren bron

Merge branch 'dev' of ssh://gitea.yvvas.com:4022/craft-in-america/vue-wp into dev

tags/1.0.2^2
J 3 jaren geleden
bovenliggende
72f52c067f aa9e209e6c
commit
a4385fb2cc
14 gewijzigde bestanden met toevoegingen van 180 en 52 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 8
    7
      plugins/cia-post-types/includes/p2p-mappings.php
  2. 5
    0
      vue-theme/editor-style.css
  3. 17
    0
      vue-theme/functions.php
  4. 10
    0
      vue-theme/index.php
  5. BIN
      vue-theme/screenshot.png
  6. 1
    1
      vue-theme/src/app.vue
  7. 21
    12
      vue-theme/src/components/navigation/navigation.vue
  8. 49
    13
      vue-theme/src/components/sidebars/sidebar.vue
  9. 30
    5
      vue-theme/src/pages/index.vue
  10. 1
    0
      vue-theme/src/pages/mixin-post-types.js
  11. 14
    5
      vue-theme/src/pages/single.vue
  12. 22
    7
      vue-theme/src/sss/_lightbox.sss
  13. 1
    1
      vue-theme/src/sss/variables.sss
  14. 1
    1
      vue-theme/src/utils/helpers.js

+ 8
- 7
plugins/cia-post-types/includes/p2p-mappings.php Bestand weergeven 

@@ -20,15 +20,16 @@ function register_connections_for($type, $from_types) {
20 20 
 }
21 21
22 22 
 function register_all_one_offs() {
23 
-    register_connections_for('object', ['object', 'exhibition', 'guide', 'technique', 'post', 'publication']);
24 
-    register_connections_for('artist', ['artist', 'object', 'technique', 'publication']);
25 
-    register_connections_for('short', ['short', 'exhibition', 'event', 'object', 'guide', 'post', 'technique', 'publication']);
23 
+    register_connections_for('post', ['post', 'publication']);
24 
+    register_connections_for('artist', ['artist', 'object', 'technique', 'post', 'publication']);
25 
+    register_connections_for('exhibition', ['exhibition','technique', 'post', 'publication']);
26 
+    register_connections_for('event', ['event', 'object', 'guide', 'technique', 'post', 'publication']);
27 
+    register_connections_for('episode', ['episode', 'object', 'guide', 'technique', 'post', 'publication']);
28 
+    register_connections_for('short', ['short', 'exhibition', 'event', 'object', 'guide', 'technique', 'post', 'publication']);
26 29 
     register_connections_for('technique', ['technique', 'post', 'publication']);
27 30 
     register_connections_for('guide', ['technique', 'exhibition', 'post', 'publication']);
28 
-    register_connections_for('exhibition', ['exhibition','technique', 'publication']);
29 
-    register_connections_for('event', ['event', 'object', 'post', 'guide', 'technique', 'publication']);
30 
-    register_connections_for('episode', ['episode', 'object', 'guide', 'technique', 'publication']);
31 
-    register_connections_for('post', ['post']);
31 
+    register_connections_for('object', ['object', 'exhibition', 'guide', 'technique', 'post', 'publication']);
32 
+    register_connections_for('publication', ['publication']);
32 33 
 }
33 34
34 35 
 function all_connection_types() {

+ 5
- 0
vue-theme/editor-style.css Bestand weergeven 

@@ -125,5 +125,10 @@ hr .wp-block-separator, .is-style-dots:before {
125 125 
     position: inherit !important;
126 126 
     background: none !important;
127 127 
     color: black !important;
128 
+    max-height: 5% !important;
129 
+    overflow: visible !important;
130 
+    padding: 0 !important;
131 
+    margin-bottom: 0.75em !important;
132 
+
128 133 
 }
129 134

+ 17
- 0
vue-theme/functions.php Bestand weergeven 

@@ -387,3 +387,20 @@ function custom_publication_column( $column, $post_id ) {
387 387 
             break;
388 388 
     }
389 389 
 }
390 
+// Add Author to Custom Post Type
391 
+function add_author_support_to_posts() {
392 
+    $args = array(
393 
+       'public'   => true,
394 
+       '_builtin' => false
395 
+    );
396 
+
397 
+    $output = 'names';
398 
+
399 
+    $post_types = get_post_types( $args, $output );
400 
+
401 
+    foreach ( $post_types  as $post_type ) {
402 
+        add_post_type_support( $post_type, 'author' );
403 
+    }
404 
+
405 
+}
406 
+add_action( 'init', 'add_author_support_to_posts' );

+ 10
- 0
vue-theme/index.php Bestand weergeven 

@@ -1,10 +1,20 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html <?php language_attributes(); ?>>
3 3 
     <head>
4 
+        <!-- Google tag (gtag.js) -->
5 
+        <script async src="https://www.googletagmanager.com/gtag/js?id=AW-10996061145"></script>
6 
+        <script>
7 
+        window.dataLayer = window.dataLayer || [];
8 
+        function gtag(){dataLayer.push(arguments);}
9 
+        gtag('js', new Date());
10 
+
11 
+        gtag('config', 'AW-10996061145');
12 
+        </script>
4 13 
         <title><?php wp_title(); ?></title>
5 14 
         <meta charset="<?php bloginfo( 'charset' ); ?>">
6 15 
         <meta name="viewport" content="width=device-width, initial-scale=1">
7 16 
         <link rel="prefetch" url="resource-url" />
17 
+
8 18 
         <?php wp_head(); ?>
9 19 
     </head>
10 20 
     <body>

BIN
vue-theme/screenshot.png Bestand weergeven


+ 1
- 1
vue-theme/src/app.vue Bestand weergeven 

@@ -36,7 +36,7 @@ html
36 36 
             /* background-color: green*/
37 37 
             background-color: $cia_white2
38 38 
             width: 100%
39 
-            padding: 0 0 3vh 0
39 
+            padding: 0 0 1vh 0
40 40
41 41 
             /* :--headings, a */
42 42 
             a

+ 21
- 12
vue-theme/src/components/navigation/navigation.vue Bestand weergeven 

@@ -19,7 +19,8 @@ nav.main.w-max
19 19
20 20 
             //- hardcoded menu
21 21 
             li.f-grow
22 
-            li.t-up PBS Series
22 
+            li.t-up
23 
+                router-link(to="/episode") PBS Series
23 24 
                 ul.submenu
24 25 
                     li
25 26 
                         router-link(to="/episode") Episodes
 
@@ -28,23 +29,26 @@ nav.main.w-max
28 29 
                     li
29 30 
                         router-link(to="/technique") Techniques
30 31 
             li.f-grow
31 
-            li.t-up Artists
32 
+            li.t-up
33 
+                router-link(to="/artist/sorted/by-material") Artists
32 34 
                 ul.submenu
33 35 
                     li
34 36 
                         router-link(to="/artist/sorted/by-alpha") A - Z
35 37 
                     li
36 38 
                         router-link(to="/artist/sorted/by-material") By Material
37 39 
             li.f-grow
38 
-            li.t-up Exhibitions
40 
+            li.t-up
41 
+                router-link(to="/exhibition/sorted/by-current-and-upcoming") Exhibitions
39 42 
                 ul.submenu
40 43 
                     li
41 44 
                         router-link(to="/exhibition/sorted/by-current-and-upcoming") Current/Upcoming
42 45 
                     li
43 
-                        router-link(to="/exhibition/sorted/by-date") Past
46 
+                        router-link(to="/exhibition/sorted/by-past") Past
44 47 
                     li
45 48 
                         router-link(to="/object") Explore Craft Objects
46 49 
             li.f-grow
47 
-            li.t-up Center
50 
+            li.t-up
51 
+                router-link(to="/page/center") Center
48 52 
                 ul.submenu
49 53 
                     li
50 54 
                         router-link(to="/page/center") Info
 
@@ -55,7 +59,8 @@ nav.main.w-max
55 59 
                     li
56 60 
                         router-link(to="/page/library") Library
57 61 
             li.f-grow
58 
-            li.t-up Education
62 
+            li.t-up
63 
+                router-link(to="/guide") Education
59 64 
                 ul.submenu
60 65 
                     li
61 66 
                         router-link(to="/guide") Education Guides
 
@@ -71,7 +76,8 @@ nav.main.w-max
71 76 
                         router-link(to="/page/library") Library
72 77
73 78 
             li.f-grow
74 
-            li.t-up Resources
79 
+            li.t-up
80 
+                router-link(to="/page/artists-resources") Resources
75 81 
                 ul.submenu
76 82 
                     li
77 83 
                         router-link(to="/page/artists-resources") Opportunities
 
@@ -82,14 +88,16 @@ nav.main.w-max
82 88 
                     li
83 89 
                         router-link(to="/page/community-craft-calendar") Community Craft Calendar
84 90 
             li.f-grow
85 
-            li.t-up Support
91 
+            li.t-up
92 
+                router-link(to="/page/donate") Support
86 93 
                 ul.submenu
87 94 
                     li
88 95 
                         router-link(to="/page/donate") Donate
89 96 
                     li
90 97 
                         router-link(to="/page/shop") Shop
91 98 
             li.f-grow
92 
-            li.t-up About
99 
+            li.t-up
100 
+                router-link(to="/page/about") About
93 101 
                 ul.submenu
94 102 
                     li
95 103 
                         router-link(to="/page/about") Craft in America 
@@ -103,11 +111,11 @@ nav.main.w-max
103 111 
                         router-link(to="/page/contact") Contact
104 112 
             li.f-grow
105 113 
             li.t-up
106 
-                a(@click="toggleSearch") search
114 
+                a(@click="toggleSearch") 🔍
107 115 
         ul(v-if="isSearchOpen").search.w-max
108 116 
             li.f-row.w-max
109 117 
                 input(v-model="searchTerms" @keyup.enter="sendSearch" tabindex="10")
110 
-                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍
118 
+                button.b-none.bg-none(@click="sendSearch" tabindex="11") 🔍 search
111 119
112 120 
     .mobile-menu
113 121 
         .f-row.start
 
@@ -164,7 +172,7 @@ export default {
164 172 
                 // 'education',
165 173 
                 // 'resources',
166 174 
                 // 'support',
167 
-                // 'about',
175 
+                'page/about',
168 176 
                 '🔍'
169 177 
             ]
170 178 
             const ignore = [
 
@@ -261,6 +269,7 @@ nav.main
261 269 
                 background-color: $lighter
262 270 
                 padding: 0 0.5em 0.5em
263 271 
                 opacity: 0
272 
+                top: 23px
264 273
265 274 
                 //- submenu hover
266 275 
                 &:hover

+ 49
- 13
vue-theme/src/components/sidebars/sidebar.vue Bestand weergeven 

@@ -6,17 +6,30 @@ aside.sidebar
6 6 
             h3.t-up sort {{ type }}
7 7 
             ul.t-up
8 8 
                 li
9 
-                    //- ?type=articles //
9 
+                    //- post?type=articles //
10 10 
                     router-link(v-if="type === 'post' " :to="`/${type}?type=articles`")
11 11 
                         p in the news
12 12 
                 li
13 
-                    //- ?type=releases //
13 
+                    //- post?type=releases //
14 14 
                     router-link(v-if="type === 'post' " :to="`/${type}?type=releases`")
15 15 
                         p press releases
16 16 
                 li
17 
-                    //- ?type=talks //
17 
+                    //- event?type=concerts //
18 
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=concerts`")
19 
+                        p concerts
20 
+                li
21 
+                    //- event?type=openings //
22 
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=openings`")
23 
+                        p openings
24 
+                li
25 
+                    //- event?type=talks //
18 26 
                     router-link(v-if="type === 'event' " :to="`/${type}?type=talks`")
19 27 
                         p talks
28 
+                li
29 
+                    //- event?type=workshops //
30 
+                    router-link(v-if="type === 'event' " :to="`/${type}?type=workshops`")
31 
+                        p workshops
32 
+
20 33 
                     //- by type //
21 34 
                 li(v-for="option in sortOptions")
22 35 
                     router-link(:to="`/${type}/sorted/${sortTypes[option]}`")
 
@@ -24,9 +37,10 @@ aside.sidebar
24 37 
                 li
25 38 
                     router-link(v-if="shouldShowDateSort.includes(type) " :to="`/${type}/sorted/by-current-and-upcoming`")
26 39 
                         p by current and upcoming
27 
-                li
28 
-                    router-link(:to="`/${type}/sorted/by-date`")
29 
-                        p by all
40 
+                //- li
41 
+                //-     router-link(v-if="type === ('event', 'exhibition') " :to="`/${type}/sorted/by-past`")
42 
+                //-         p by past
43 
+
30 44
31 45 
         //- if {{type}} has sorted by-material show material options
32 46 
         .shadow(v-if="shouldShowMaterialSort.includes(type) && layout !== 'single'")
 
@@ -46,6 +60,15 @@ aside.sidebar
46 60 
                         router-link(:to="`/${type}/sorted/by-alpha#${charaSet[0]}`")
47 61 
                             p.alpha {{ charaSet }}
48 62
63 
+        //- if type has sorted by-episode show episode options
64 
+        .shadow(v-if="shouldShowEpisodeSort.includes(type) && layout !== 'single'")
65 
+            h3.t-up {{ type }} episode
66 
+            ul.t-up
67 
+                li.f-row.start.wrap
68 
+                    template(v-for="episodeSet in episodeSets")
69 
+                        router-link(:to="`/${type}/sorted/by-episode#${episodeSet}`")
70 
+                            p {{ episodeSet }}&nbsp;&nbsp;
71 
+
49 72 
         //- p2p types and related posts
50 73 
         .shadow(v-if="layout === 'single' && Object.keys(related).length" v-for="p2pPostType in Object.keys(related)")
51 74 
             related-sidebar(:posts-by-type="related" :post-type="p2pPostType")
 
@@ -103,16 +126,20 @@ export default {
103 126 
                 'by artist': `${sortTypes.artist}`,     //:2
104 127 
                 'by episode': `${sortTypes.episode}`,   //:3
105 128 
                 'by type': `${sortTypes.subtype}`,      //:4
106 
-                // 'by articles': `articles`,              //:5
129 
+                'by past': `${sortTypes.past}`,         //:5
130 
+                // 'by articles': `articles`,
107 131 
                 subtype: 'by-type',
108 132 
             },
109 133 
             charaSets: [
110 
-                // '0 a b', 'c d e', 'f g h',
111 
-                // 'i j k', 'l m n', 'o p q',
112 
-                // 'r s t', 'u v w', 'x y z'
113 134 
                 '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l',
114 135 
                 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'
115 136 
             ],
137 
+            episodeSets: [
138 
+                'inspiration', 'home', 'jewelery', 'harmony', 'storytellers',
139 
+                'democracy', 'identity', 'quilts', 'visionaries', 'california',
140 
+                'neighbors', 'borders', 'nature', 'teachers', 'music',
141 
+                'celebration', 'service', 'industry', 'holiday', 'forge',
142 
+            ],
116 143 
             materials: materials,
117 144 
             shouldShowListSort: [
118 145 
                 'artist', 'exhibition', 'event', 
@@ -120,9 +147,14 @@ export default {
120 147 
                 'publication', 'technique', 'post'
121 148 
             ],
122 149 
             shouldShowMaterialSort: [
123 
-                'artist', 'exhibition', 'event',
124 
-                'short', 'guide', 'object',
125 
-                'technique',
150 
+                'artist',
151 
+                'short', 'guide',
152 
+                'technique', 'publication',
153 
+            ],
154 
+            shouldShowEpisodeSort: [
155 
+                'artist',
156 
+                'short', 'guide',
157 
+                'technique'
126 158 
             ],
127 159 
             shouldShowAlphaSort: [
128 160 
                 'artist'
 
@@ -153,12 +185,14 @@ export default {
153 185 
                     opts = [
154 186 
                         // Object.keys(this.sortTypes)[4],
155 187 
                         // Object.keys(this.sortTypes)[1],
188 
+                        Object.keys(this.sortTypes)[5],
156 189 
                     ]
157 190 
                     break
158 191 
                 case 'event':
159 192 
                     opts = [
160 193 
                         // Object.keys(this.sortTypes)[4],
161 194 
                         // Object.keys(this.sortTypes)[1],
195 
+                        Object.keys(this.sortTypes)[5],
162 196 
                     ]
163 197 
                     break
164 198 
                 case 'post':
 
@@ -213,6 +247,7 @@ aside.sidebar
213 247 
     position: sticky
214 248 
     top: 40px
215 249 
     width: 100%
250 
+    font-size: x-small
216 251 
     p, h3
217 252 
         margin: 0
218 253 
         padding: 0 0 $ms--4 0
 
@@ -247,6 +282,7 @@ aside.sidebar
247 282 
         position: sticky
248 283 
         min-width: 25%
249 284 
         width: 25%
285 
+        font-size: revert
250 286 
         > section
251 287 
             > *
252 288 
                 display: inherit

+ 30
- 5
vue-theme/src/pages/index.vue Bestand weergeven 

@@ -138,12 +138,31 @@ export default {
138 138 
                         max-height: $max-card-img-height
139 139 
                     p.excerpt
140 140 
                         -webkit-line-clamp: $card-line-clamp
141 
+                &.flipped
142 
+                    li
143 
+                        &:nth-of-type(4)
144 
+                            /* p.excerpt, p.read-more
145 
+                                display: none */
146 
+                            header
147 
+                                padding: 0.57em 0
148 
+                                a
149 
+                                    display: none
141 150 
             &.max
142 151 
                 > ul
143 152 
                     grid-template-columns:
144 153 
                         auto
145 154 
                     grid-template-rows:
146 155 
                         auto
156 
+            &.stickies
157 
+                ul
158 
+                    &.flipped
159 
+                        li
160 
+                            &:nth-of-type(4)
161 
+                                header
162 
+                                    padding: 0
163 
+                                    a
164 
+                                        display: block
165 
+
147 166 
 /* min-width 768px */
148 167 
 @media (min-width: $medium)
149 168 
     .page--index 
@@ -153,7 +172,7 @@ export default {
153 172 
                 ul
154 173 
                     display: grid
155 174 
                     grid-template-columns:
156 
-                        49.5% 24.25% 24.25%
175 
+                        49.5% 24.35% 24.35%
157 176 
                     grid-template-rows: repeat(2, 1fr)
158 177 
                     gap: 0 $ms--2
159 178 
                     li
 
@@ -185,7 +204,7 @@ export default {
185 204 
                             grid-column-start: 3
186 205 
                     &.flipped
187 206 
                         grid-template-columns:
188 
-                            24.25% 24.25% 49.5%
207 
+                            24.35% 24.35% 49.5%
189 208 
                         li
190 209 
                             &:nth-of-type(1)
191 210 
                                 grid-row-end: 2
 
@@ -200,11 +219,12 @@ export default {
200 219 
                         max-height: $max-card-img-height
201 220 
                 &.stickies
202 221 
                     .post
203 
-                        min-width: 24.25%
222 
+                        min-width: 24.35%
223 
+                        max-width: 33%
204 224 
                     ul
205 225 
                         &.flipped
206 226 
                             grid-template-columns:
207 
-                                24.25% 24.25% 49.5%
227 
+                                24.35% 24.35% 49.5%
208 228 
                             li
209 229 
                                 &:nth-of-type(1)
210 230 
                                     grid-row-end: 2
 
@@ -214,6 +234,11 @@ export default {
214 234 
                                 &:nth-of-type(5)
215 235 
                                     grid-row-start: 1
216 236 
                                     grid-row-end: 3
237 
+                                &:nth-of-type(4)
238 
+                                    header
239 
+                                        padding: 0
240 
+                                        a
241 
+                                            display: block
217 242 
                         &[class^="sticky-"]
218 243 
                             display: flex
219 244 
                         &.sticky-1
 
@@ -223,7 +248,7 @@ export default {
223 248 
                                     width: 100%
224 249 
                         &.sticky-5
225 250 
                             grid-template-columns:
226 
-                                24.25% 24.25% 49.5%
251 
+                                24.35% 24.35% 49.5%
227 252 
                             grid-template-rows:
228 253 
                                 repeat(2, 1fr)
229 254 
                             gap: 3% 1%

+ 1
- 0
vue-theme/src/pages/mixin-post-types.js Bestand weergeven 

@@ -73,6 +73,7 @@ const heroUtils = {
73 73 
                 post.type == 'page' && post.slug == 'staff' ||
74 74 
                 post.type == 'page' && post.slug == 'board' ||
75 75 
                 post.type == 'page' && post.slug == 'donate' ||
76 
+                post.type == 'page' && post.slug == 'shop' ||
76 77 
                 post.type == 'page' && post.slug == 'library' ||
77 78 
                 post.type == 'page' && post.slug == 'artists-resources' ||
78 79 
                 post.type == 'page' && post.slug == 'craft-resources-map' ||

+ 14
- 5
vue-theme/src/pages/single.vue Bestand weergeven 

@@ -255,7 +255,7 @@ export default {
255 255 
             position: relative
256 256 
             width: 100%
257 257 
             padding-bottom: 56.25%
258 
-            margin-bottom: 7em
258 
+            margin-bottom: $ms-7
259 259 
             &__wrapper
260 260 
                 display: contents
261 261 
             /* TBD if kept- edit ot test */
 
@@ -266,12 +266,18 @@ export default {
266 266 
         .wp-block-gallery
267 267 
             margin: 0 0 0.5em 0
268 268 
             grid-gap: $ms--5
269 
-
270 
-            > .wp-block-image
269 
+            > .wp-block-image
271 270 
                 figcaption
272 271 
                     position: inherit
273 272 
                     background: none
273 
+                    font-size: $ms--1
274 274 
                     color: $cia_black
275 
+                    max-height: 9%
276 
+                    overflow: visible
277 
+                    padding: 0
278 
+                    margin-bottom: 2.5em
279 
+            figcaption
280 
+                flex-direction: column
275 281
276 282 
         /* iframe container 16:9 */
277 283 
         [class^="iframe-container"]
 
@@ -331,6 +337,9 @@ export default {
331 337 
             margin: 0 0.65em 0 0
332 338 
         &.f-col
333 339 
             flex-direction: row
334 
-            .wp-block-embed, .is-type-video
335 
-                margin-bottom: $ms-9
340 
+            .wp-block-gallery
341 
+                .wp-block-image
342 
+                    figcaption
343 
+                        max-height: 5%
344 
+                        margin-bottom: $ms-4
336 345 
 </style>

+ 22
- 7
vue-theme/src/sss/_lightbox.sss Bestand weergeven 

@@ -1,8 +1,11 @@
1 
+@import './variables.sss'
2 
+@import './theme.sss'
3 
+
1 4 
 .vel-fade
2 5 
     &-enter-active, &-active
3 6 
         transition: all 0.3s ease
4 7 
     &-enter-from, &-leave-to
5 
-        opacity: 0
8 
+        opacity: 1
6 9
7 10 
 .vel-img
8 11 
     &-swiper
 
@@ -14,10 +17,10 @@
14 17 
         position: absolute
15 18 
         top: 50%
16 19 
         transform: translate(-50% -50%)
17 
-        transition: 0.3s linear
18 
-        will-change: transform opacity
19 
-    background-color: rgba(0, 0, 0, 0.7)
20 
-    box-shadow: 0 5px 20px 2px rgba(0, 0, 0, 0.7)
20 
+        /* transition: 0.3s linear */
21 
+        /* will-change: transform opacity */
22 
+    /* background-color: rgba(0, 0, 0, 0.7) */
23 
+    box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
21 24 
     display: block
22 25 
     max-height: 80vh
23 26 
     max-width: 80vw
 
@@ -25,7 +28,7 @@
25 28 
     transition: transform 0.3s ease-in-out
26 29
27 30 
 .vel-modal
28 
-    background: rgba(0, 0, 0, 0.5)
31 
+    background: rgba(255, 255, 255, 0.9)
29 32 
     bottom: 0
30 33 
     left: 0
31 34 
     margin: 0
 
@@ -33,13 +36,17 @@
33 36 
     right: 0
34 37 
     top: 0
35 38 
     z-index: 10003
39 
+    img
40 
+        transition: none
41 
+        &:hover
42 
+            filter: grayscale(0%) brightness(100%)
36 43
37 44 
 .vel-img, .vel-img-wrapper
38 45 
     user-select: none
39 46
40 47 
 .vel-btns-wrapper
41 48 
     .btn__close, .btn__next, .btn__prev
42 
-        color: #fff
49 
+        color: $cia_black
43 50 
         cursor: pointer
44 51 
         font-size: 32px
45 52 
         opacity: 0.6
 
@@ -94,6 +101,7 @@
94 101
95 102 
 .vel-modal.is-rtl .vel-img-title
96 103 
     direction: rtl
104 
+    display: block
97 105
98 106 
 .vel-loading
99 107 
     left: 50%
 
@@ -166,6 +174,7 @@
166 174 
     width: 1em
167 175
168 176 
 .vel-toolbar
177 
+    display: none
169 178 
     border-radius: 4px
170 179 
     bottom: 8px
171 180 
     display: flex
 
@@ -176,6 +185,7 @@
176 185 
     position: absolute
177 186 
     transform: translate(-50%)
178 187 
     .toolbar-btn
188 
+        display: none
179 189 
         color: #fff
180 190 
         cursor: pointer
181 191 
         flex-shrink: 0
 
@@ -188,3 +198,8 @@
188 198 
 .vel-toolbar, .vel-toolbar .toolbar-btn
189 199 
     background-color: #2d2d2d
190 200 
     user-select: none
201 
+
202 
+figcaption
203 
+    position: inherit
204 
+    background: none
205 
+    color: $cia_black

+ 1
- 1
vue-theme/src/sss/variables.sss Bestand weergeven 

@@ -1,6 +1,6 @@
1 1 
 @import './_ratios.sss'
2 2
3 
-$transition: 500ms
3 
+$transition: 300ms
4 4
5 5 
 $min-width: 20em
6 6 
 $max-width: 74em

+ 1
- 1
vue-theme/src/utils/helpers.js Bestand weergeven 

@@ -75,7 +75,7 @@ const ytThumbnail = (url, desiredSize) => {
75 75 
 const formatDate = (unix, includeTime) => {
76 76 
     const d = new Date(parseInt(unix) * 1000)
77 77 
     return includeTime
78 
-        ? d.toLocaleString('en-US', { timeZone: 'UTC' })
78 
+        ? d.toLocaleString('en-US', { timeZone: 'UTC', dateStyle: 'short', timeStyle: 'short' })
79 79 
         : d.toLocaleDateString('en-US', { timeZone: 'UTC' })
80 80 
 }
81 81

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan