@asd20/ui 3.2.1003 → 3.2.1005
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/atoms/Asd20Icon/index.stories.js +3 -0
- package/src/components/atoms/icons/Asd20FaxSvg.vue +99 -0
- package/src/components/atoms/icons/Asd20ParentsquareSvg.vue +39 -0
- package/src/components/atoms/icons/Asd20SchoolSvg.vue +26 -52
- package/src/components/atoms/icons/Asd20VideoAltSvg.vue +51 -0
- package/src/components/atoms/icons/Asd20VideoSvg.vue +2 -11
- package/src/components/molecules/Asd20DepartmentContactCard/index.vue +1 -1
- package/src/components/organisms/Asd20PageFooter/index.vue +1 -1
- package/src/components/templates/Asd20ClubsTemplate/index.vue +14 -39
package/package.json
CHANGED
|
@@ -100,6 +100,7 @@ storiesOf('Atoms - Asd20Icon', module)
|
|
|
100
100
|
'map',
|
|
101
101
|
'external',
|
|
102
102
|
'contact',
|
|
103
|
+
'fax',
|
|
103
104
|
'chevron',
|
|
104
105
|
'menu',
|
|
105
106
|
'close',
|
|
@@ -155,6 +156,8 @@ storiesOf('Atoms - Asd20Icon', module)
|
|
|
155
156
|
'printer',
|
|
156
157
|
'share',
|
|
157
158
|
'share-alt',
|
|
159
|
+
'parentsquare',
|
|
160
|
+
'video-alt',
|
|
158
161
|
],
|
|
159
162
|
}),
|
|
160
163
|
template: `
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<g viewBox="0 0 32 40" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<g transform="translate(3,4) scale(0.8)">
|
|
4
|
+
<defs>
|
|
5
|
+
<!-- Mask to round the band while keeping the notch -->
|
|
6
|
+
<mask id="printerBandMask">
|
|
7
|
+
<!-- White = keep, Black = cut out -->
|
|
8
|
+
<rect x="0" y="0" width="32" height="40" fill="black" />
|
|
9
|
+
<!-- Rounded band area -->
|
|
10
|
+
<rect x="6" y="14" width="20" height="7" rx="1.6" fill="white" />
|
|
11
|
+
<!-- Notch (remove inside band) -->
|
|
12
|
+
<rect x="8" y="18" width="16" height="3" rx="0.8" fill="black" />
|
|
13
|
+
</mask>
|
|
14
|
+
</defs>
|
|
15
|
+
|
|
16
|
+
<!-- Outer printer body (rounded outline) -->
|
|
17
|
+
<rect
|
|
18
|
+
x="4"
|
|
19
|
+
y="9"
|
|
20
|
+
width="24"
|
|
21
|
+
height="14"
|
|
22
|
+
rx="2"
|
|
23
|
+
fill="none"
|
|
24
|
+
class="line"
|
|
25
|
+
stroke="currentColor"
|
|
26
|
+
stroke-width="1.5"
|
|
27
|
+
stroke-linejoin="round"
|
|
28
|
+
/>
|
|
29
|
+
|
|
30
|
+
<!-- Top module (rounded) -->
|
|
31
|
+
<rect
|
|
32
|
+
x="9"
|
|
33
|
+
y="6"
|
|
34
|
+
width="14"
|
|
35
|
+
height="3"
|
|
36
|
+
rx="1.2"
|
|
37
|
+
class="line"
|
|
38
|
+
fill="currentColor"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<!-- Top slot (rounded) -->
|
|
42
|
+
<rect
|
|
43
|
+
x="10"
|
|
44
|
+
y="7"
|
|
45
|
+
width="12"
|
|
46
|
+
height="2"
|
|
47
|
+
rx="0.8"
|
|
48
|
+
class="line"
|
|
49
|
+
fill="currentColor"
|
|
50
|
+
/>
|
|
51
|
+
|
|
52
|
+
<!-- Middle band (original polygon reimagined: rounded + notched via mask) -->
|
|
53
|
+
<rect
|
|
54
|
+
x="6"
|
|
55
|
+
y="14"
|
|
56
|
+
width="20"
|
|
57
|
+
height="7"
|
|
58
|
+
rx="1.6"
|
|
59
|
+
class="line"
|
|
60
|
+
fill="currentColor"
|
|
61
|
+
mask="url(#printerBandMask)"
|
|
62
|
+
/>
|
|
63
|
+
|
|
64
|
+
<!-- Small indicators (rounded) -->
|
|
65
|
+
<rect
|
|
66
|
+
x="6"
|
|
67
|
+
y="11"
|
|
68
|
+
width="2"
|
|
69
|
+
height="1"
|
|
70
|
+
rx="0.5"
|
|
71
|
+
class="line"
|
|
72
|
+
fill="currentColor"
|
|
73
|
+
/>
|
|
74
|
+
<rect
|
|
75
|
+
x="9"
|
|
76
|
+
y="11"
|
|
77
|
+
width="1"
|
|
78
|
+
height="1"
|
|
79
|
+
rx="0.5"
|
|
80
|
+
class="line"
|
|
81
|
+
fill="currentColor"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<!-- Paper page (rounded) -->
|
|
85
|
+
<rect
|
|
86
|
+
x="10"
|
|
87
|
+
y="20"
|
|
88
|
+
width="12"
|
|
89
|
+
height="6"
|
|
90
|
+
rx="1.2"
|
|
91
|
+
fill="white"
|
|
92
|
+
class="line"
|
|
93
|
+
stroke="currentColor"
|
|
94
|
+
stroke-width="1.5"
|
|
95
|
+
stroke-linejoin="round"
|
|
96
|
+
/>
|
|
97
|
+
</g>
|
|
98
|
+
</g>
|
|
99
|
+
</template>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<g
|
|
3
|
+
viewBox="0 0 32 40"
|
|
4
|
+
width="128"
|
|
5
|
+
height="160"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<g>
|
|
9
|
+
<!-- 3/4 Circle outline -->
|
|
10
|
+
<path
|
|
11
|
+
d="M6 28 a15 15 0 1 1 20 0"
|
|
12
|
+
fill="none"
|
|
13
|
+
class="line"
|
|
14
|
+
stroke="currentColor"
|
|
15
|
+
stroke-width="2"
|
|
16
|
+
stroke-linecap="round"
|
|
17
|
+
/>
|
|
18
|
+
<!-- Rectangle -->
|
|
19
|
+
<rect
|
|
20
|
+
x="9"
|
|
21
|
+
y="9"
|
|
22
|
+
width="14"
|
|
23
|
+
height="14"
|
|
24
|
+
rx="2"
|
|
25
|
+
stroke="#000000"
|
|
26
|
+
stroke-width="2"
|
|
27
|
+
stroke-linecap="round"
|
|
28
|
+
stroke-linejoin="round"
|
|
29
|
+
fill="none"
|
|
30
|
+
/>
|
|
31
|
+
|
|
32
|
+
<!-- Corner dots -->
|
|
33
|
+
<circle cx="10" cy="10" r="4" class="line" stroke="currentColor" stroke-width="1" />
|
|
34
|
+
<circle cx="22" cy="10" r="4" class="line" stroke="currentColor" stroke-width="1" />
|
|
35
|
+
<circle cx="10" cy="22" r="4" class="line" stroke="currentColor" stroke-width="1" />
|
|
36
|
+
<circle cx="22" cy="22" r="4" class="line" stroke="currentColor" stroke-width="1" />
|
|
37
|
+
</g>
|
|
38
|
+
</g>
|
|
39
|
+
</template>
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
</g>
|
|
43
43
|
</template> -->
|
|
44
44
|
|
|
45
|
+
|
|
45
46
|
<template>
|
|
46
47
|
<g
|
|
47
48
|
viewBox="0 0 32 40"
|
|
@@ -49,49 +50,7 @@
|
|
|
49
50
|
height="160"
|
|
50
51
|
xmlns="http://www.w3.org/2000/svg"
|
|
51
52
|
>
|
|
52
|
-
|
|
53
|
-
<!-- Mask for left building (outline color) -->
|
|
54
|
-
<mask
|
|
55
|
-
:id="`leftBuildingMask-${_uid}`"
|
|
56
|
-
maskUnits="userSpaceOnUse"
|
|
57
|
-
maskContentUnits="userSpaceOnUse"
|
|
58
|
-
x="0"
|
|
59
|
-
y="0"
|
|
60
|
-
width="32"
|
|
61
|
-
height="40"
|
|
62
|
-
mask-type="luminance"
|
|
63
|
-
>
|
|
64
|
-
<rect x="0" y="0" width="32" height="40" fill="black" />
|
|
65
|
-
<!-- Building shape (opaque) -->
|
|
66
|
-
<polygon points="7,29 7,13 17,11 17,29" fill="white" />
|
|
67
|
-
<!-- Windows and door (transparent "holes") -->
|
|
68
|
-
<rect x="10" y="15" width="2" height="2" rx="0.3" fill="black" />
|
|
69
|
-
<rect x="10" y="19" width="2" height="2" rx="0.3" fill="black" />
|
|
70
|
-
<rect x="14" y="15" width="2" height="2" rx="0.3" fill="black" />
|
|
71
|
-
<rect x="14" y="19" width="2" height="2" rx="0.3" fill="black" />
|
|
72
|
-
<rect x="12" y="23" width="4" height="4" rx="0.7" fill="black" />
|
|
73
|
-
</mask>
|
|
74
|
-
<!-- Mask for right building (fill color) -->
|
|
75
|
-
<mask
|
|
76
|
-
:id="`rightBuildingMask-${_uid}`"
|
|
77
|
-
maskUnits="userSpaceOnUse"
|
|
78
|
-
maskContentUnits="userSpaceOnUse"
|
|
79
|
-
x="0"
|
|
80
|
-
y="0"
|
|
81
|
-
width="32"
|
|
82
|
-
height="40"
|
|
83
|
-
mask-type="luminance"
|
|
84
|
-
>
|
|
85
|
-
<rect x="0" y="0" width="32" height="40" fill="black" />
|
|
86
|
-
<!-- Building shape (opaque) -->
|
|
87
|
-
<polygon points="17,29 17,13 25,15 25,29" fill="white" />
|
|
88
|
-
<!-- Windows (transparent "holes") -->
|
|
89
|
-
<rect x="21" y="17" width="3" height="1.2" rx="0.4" fill="black" />
|
|
90
|
-
<rect x="21" y="20" width="3" height="1.2" rx="0.4" fill="black" />
|
|
91
|
-
<rect x="21" y="23" width="3" height="1.2" rx="0.4" fill="black" />
|
|
92
|
-
</mask>
|
|
93
|
-
</defs>
|
|
94
|
-
<!-- 3/4 Circle outline (open at bottom) -->
|
|
53
|
+
<!-- Arc -->
|
|
95
54
|
<path
|
|
96
55
|
d="M6 28 a15 15 0 1 1 20 0"
|
|
97
56
|
fill="none"
|
|
@@ -100,20 +59,35 @@
|
|
|
100
59
|
stroke-width="2"
|
|
101
60
|
stroke-linecap="round"
|
|
102
61
|
/>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
62
|
+
|
|
63
|
+
<!-- Left building: shell + holes -->
|
|
64
|
+
<path
|
|
106
65
|
class="line"
|
|
107
66
|
fill="currentColor"
|
|
108
|
-
|
|
67
|
+
fill-rule="evenodd"
|
|
68
|
+
d="
|
|
69
|
+
M7,29 L7,13 L17,11 L17,29 Z
|
|
70
|
+
M10,15 h2 v2 h-2 Z
|
|
71
|
+
M10,19 h2 v2 h-2 Z
|
|
72
|
+
M14,15 h2 v2 h-2 Z
|
|
73
|
+
M14,19 h2 v2 h-2 Z
|
|
74
|
+
M12,23 h4 v4 h-4 Z
|
|
75
|
+
"
|
|
109
76
|
/>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
77
|
+
|
|
78
|
+
<!-- Right building: shell + holes -->
|
|
79
|
+
<path
|
|
113
80
|
class="fill"
|
|
114
|
-
|
|
81
|
+
fill-rule="evenodd"
|
|
82
|
+
d="
|
|
83
|
+
M17,29 L17,13 L25,15 L25,29 Z
|
|
84
|
+
M21,17 h3 v1.2 h-3 Z
|
|
85
|
+
M21,20 h3 v1.2 h-3 Z
|
|
86
|
+
M21,23 h3 v1.2 h-3 Z
|
|
87
|
+
"
|
|
115
88
|
/>
|
|
116
|
-
|
|
89
|
+
|
|
90
|
+
<!-- Flag/pole -->
|
|
117
91
|
<polygon
|
|
118
92
|
points="17,29 17,6 25,6 25,10 19,10 19,29"
|
|
119
93
|
class="line"
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<g
|
|
3
|
+
viewBox="0 0 32 40"
|
|
4
|
+
width="128"
|
|
5
|
+
height="160"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<g>
|
|
9
|
+
<!-- 3/4 Circle outline -->
|
|
10
|
+
<path
|
|
11
|
+
d="M6 28 a15 15 0 1 1 20 0"
|
|
12
|
+
fill="none"
|
|
13
|
+
class="line"
|
|
14
|
+
stroke="currentColor"
|
|
15
|
+
stroke-width="2"
|
|
16
|
+
stroke-linecap="round"
|
|
17
|
+
/>
|
|
18
|
+
<!-- Video screen -->
|
|
19
|
+
<rect
|
|
20
|
+
class="fill"
|
|
21
|
+
stroke="currentColor"
|
|
22
|
+
stroke-width="2"
|
|
23
|
+
x="7"
|
|
24
|
+
y="9"
|
|
25
|
+
width="18"
|
|
26
|
+
height="12"
|
|
27
|
+
rx="1.5"
|
|
28
|
+
/>
|
|
29
|
+
<!-- Play triangle -->
|
|
30
|
+
<polygon
|
|
31
|
+
class="line"
|
|
32
|
+
fill="currentColor"
|
|
33
|
+
points="14 11 14 19 19 15 14 11"
|
|
34
|
+
/>
|
|
35
|
+
<!-- Stand -->
|
|
36
|
+
<!-- Horizontal line from x=5 to x=27 at y=25 -->
|
|
37
|
+
<line
|
|
38
|
+
x1="7"
|
|
39
|
+
y1="25"
|
|
40
|
+
x2="25"
|
|
41
|
+
y2="25"
|
|
42
|
+
stroke="currentColor"
|
|
43
|
+
stroke-width="1.5"
|
|
44
|
+
stroke-linecap="round"
|
|
45
|
+
/>
|
|
46
|
+
|
|
47
|
+
<!-- Dot in the middle -->
|
|
48
|
+
<circle cx="16" cy="25" r="2" fill="currentColor" />
|
|
49
|
+
</g>
|
|
50
|
+
</g>
|
|
51
|
+
</template>
|
|
@@ -18,15 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
20
|
<g>
|
|
21
|
-
<!--
|
|
22
|
-
<rect
|
|
23
|
-
class="line"
|
|
24
|
-
fill="currentColor"
|
|
25
|
-
x="5" y="7"
|
|
26
|
-
width="22" height="16"
|
|
27
|
-
rx="2" <!-- adjust this value for more or less rounding -->
|
|
28
|
-
/>
|
|
29
|
-
<!-- Inner video screen cutout -->
|
|
21
|
+
<!-- Video screen -->
|
|
30
22
|
<rect
|
|
31
23
|
class="line"
|
|
32
24
|
fill="none"
|
|
@@ -49,5 +41,4 @@
|
|
|
49
41
|
points="17 24 15 24 15 25 5 25 5 26 15 26 15 27 17 27 17 26 27 26 27 25 17 25 17 24"
|
|
50
42
|
/>
|
|
51
43
|
</g>
|
|
52
|
-
</template>
|
|
53
|
-
|
|
44
|
+
</template>
|
|
@@ -87,7 +87,10 @@
|
|
|
87
87
|
|
|
88
88
|
<intersect @enter="$emit('stories-in-view')">
|
|
89
89
|
<section aria-label="Feed Section" class="article-digest">
|
|
90
|
-
<
|
|
90
|
+
<div class="feed-title-wrapper">
|
|
91
|
+
<asd20-icon name="arts" size="lg"></asd20-icon>
|
|
92
|
+
<h2 class="feed-title">Current Clubs & Activities</h2>
|
|
93
|
+
</div>
|
|
91
94
|
<div class="search-header">
|
|
92
95
|
<asd20-search-field
|
|
93
96
|
:value="keywords"
|
|
@@ -257,6 +260,7 @@
|
|
|
257
260
|
<script>
|
|
258
261
|
// Components
|
|
259
262
|
import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
|
|
263
|
+
import Asd20Icon from '../../../components/atoms/Asd20Icon'
|
|
260
264
|
import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
|
|
261
265
|
|
|
262
266
|
import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
|
|
@@ -289,6 +293,7 @@ export default {
|
|
|
289
293
|
components: {
|
|
290
294
|
Asd20PageContent,
|
|
291
295
|
Asd20SkipTo,
|
|
296
|
+
Asd20Icon,
|
|
292
297
|
Asd20PageHeader,
|
|
293
298
|
Asd20PageFooter,
|
|
294
299
|
Asd20SiteNavigation,
|
|
@@ -430,20 +435,6 @@ export default {
|
|
|
430
435
|
.asd20-notification-group--floating {
|
|
431
436
|
position: absolute;
|
|
432
437
|
top: space(2.0375);
|
|
433
|
-
// .bell {
|
|
434
|
-
// box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
|
|
435
|
-
// svg {
|
|
436
|
-
// fill: var(--color__accent) !important;
|
|
437
|
-
// }
|
|
438
|
-
// span {
|
|
439
|
-
// background: var(--color__accent) !important;
|
|
440
|
-
// top: inherit !important;
|
|
441
|
-
// right: inherit !important;
|
|
442
|
-
// width: 1.2rem !important;
|
|
443
|
-
// height: 1.2rem !important;
|
|
444
|
-
// font-size: 0.75rem !important;
|
|
445
|
-
// }
|
|
446
|
-
// }
|
|
447
438
|
}
|
|
448
439
|
.asd20-page-content {
|
|
449
440
|
display: block;
|
|
@@ -457,13 +448,18 @@ export default {
|
|
|
457
448
|
background: inherit !important;
|
|
458
449
|
}
|
|
459
450
|
}
|
|
460
|
-
.feed-title {
|
|
451
|
+
.feed-title-wrapper {
|
|
452
|
+
display: flex;
|
|
453
|
+
align-items: center;
|
|
454
|
+
justify-content: flex-start;
|
|
461
455
|
margin: space(1) 0 0 space(1);
|
|
456
|
+
.feed-title {
|
|
457
|
+
margin-left: space(0.5);
|
|
458
|
+
}
|
|
462
459
|
}
|
|
463
460
|
.article-digest {
|
|
464
461
|
.asd20-card {
|
|
465
462
|
margin-bottom: space(0.5);
|
|
466
|
-
// border-bottom: 1px solid gray;
|
|
467
463
|
.asd20-card__content:hover {
|
|
468
464
|
background: rgba(200, 200, 200, 0.2);
|
|
469
465
|
}
|
|
@@ -471,12 +467,6 @@ export default {
|
|
|
471
467
|
padding-bottom: space(1);
|
|
472
468
|
border-bottom: 1px solid gray;
|
|
473
469
|
}
|
|
474
|
-
// &__date-time {
|
|
475
|
-
// display: none;
|
|
476
|
-
// }
|
|
477
|
-
// &__description {
|
|
478
|
-
// display: none;
|
|
479
|
-
// }
|
|
480
470
|
}
|
|
481
471
|
.feed-items {
|
|
482
472
|
--website-card__border-color: transparent;
|
|
@@ -535,15 +525,8 @@ export default {
|
|
|
535
525
|
.asd20-notification-group--floating {
|
|
536
526
|
position: absolute;
|
|
537
527
|
top: space(1);
|
|
538
|
-
// .bell {
|
|
539
|
-
// span {
|
|
540
|
-
// background: var(--color__accent);
|
|
541
|
-
// top: -0.6em !important;
|
|
542
|
-
// right: -0.6em !important;
|
|
543
|
-
// }
|
|
544
|
-
// }
|
|
545
528
|
}
|
|
546
|
-
.feed-title {
|
|
529
|
+
.feed-title-wrapper {
|
|
547
530
|
margin-left: 0;
|
|
548
531
|
}
|
|
549
532
|
|
|
@@ -564,9 +547,6 @@ export default {
|
|
|
564
547
|
.prev-next {
|
|
565
548
|
margin: space(1) 0;
|
|
566
549
|
}
|
|
567
|
-
// .primary-messaging-section {
|
|
568
|
-
// max-width: 100vw;
|
|
569
|
-
// }
|
|
570
550
|
.search-header,
|
|
571
551
|
.result-count {
|
|
572
552
|
margin: space(0) space(0) space(1) space(0);
|
|
@@ -580,14 +560,9 @@ export default {
|
|
|
580
560
|
flex-direction: row;
|
|
581
561
|
}
|
|
582
562
|
.article-digest {
|
|
583
|
-
// flex-basis: 100%;
|
|
584
563
|
margin: space(1) space(3) space(1) space(3);
|
|
585
564
|
max-width: 60%;
|
|
586
565
|
.feed-items {
|
|
587
|
-
// display: grid;
|
|
588
|
-
// grid-template-columns: 1fr 1fr 1fr;
|
|
589
|
-
// grid-gap: space(1);
|
|
590
|
-
// margin-bottom: space(1);
|
|
591
566
|
.asd20-card {
|
|
592
567
|
margin-bottom: 0;
|
|
593
568
|
}
|