Skip to content

Commit 4def124

Browse files
rlxdevrlxdev
committed
test of Bulma V1 upgrade; add Buefy
1 parent ee0bba7 commit 4def124

75 files changed

Lines changed: 3434 additions & 5087 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 1540 additions & 3092 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,42 +15,42 @@
1515
"format": "prettier --write src/"
1616
},
1717
"dependencies": {
18-
"@cityssm/bulma-sticky-table": "^2.1.0",
19-
"@fortawesome/fontawesome-svg-core": "^6.7.2",
20-
"@fortawesome/free-brands-svg-icons": "^6.7.2",
21-
"@fortawesome/free-regular-svg-icons": "^6.7.2",
22-
"@fortawesome/free-solid-svg-icons": "^6.7.2",
18+
"@cityssm/bulma-sticky-table": "^3.0.1",
19+
"@fortawesome/fontawesome-svg-core": "^7.2.0",
20+
"@fortawesome/free-brands-svg-icons": "^7.2.0",
21+
"@fortawesome/free-regular-svg-icons": "^7.2.0",
22+
"@fortawesome/free-solid-svg-icons": "^7.2.0",
2323
"@fortawesome/vue-fontawesome": "^3.1.2",
24-
"@unhead/vue": "^1.11.20",
24+
"@unhead/vue": "^2.1.2",
2525
"axios": "^1.13.2",
26-
"bulma": "^0.9.4",
26+
"buefy": "^3.0.3",
27+
"bulma": "^1.0.4",
2728
"bulma-timeline": "^3.0.5",
2829
"leaflet": "^1.9.4",
2930
"lodash": "^4.17.21",
30-
"node-sass": "^9.0.0",
31-
"pinia": "^2.3.1",
31+
"pinia": "^3.0.4",
3232
"vue": "^3.3.11",
33-
"vue-gtag": "^2.1.2",
33+
"vue-gtag": "^3.7.0",
3434
"vue-plugin-load-script": "^2.1.1",
35-
"vue-router": "^4.6.3"
35+
"vue-router": "^5.0.3"
3636
},
3737
"devDependencies": {
3838
"@rushstack/eslint-patch": "^1.15.0",
3939
"@tsconfig/node18": "^18.2.6",
4040
"@types/lodash": "^4.17.20",
41-
"@types/node": "^18.19.130",
42-
"@vitejs/plugin-vue": "^5.2.4",
43-
"@vitejs/plugin-vue-jsx": "^4.2.0",
41+
"@types/node": "^20.19.33",
42+
"@vitejs/plugin-vue": "^6.0.4",
43+
"@vitejs/plugin-vue-jsx": "^5.1.4",
4444
"@vue/eslint-config-prettier": "^10.2.0",
4545
"@vue/eslint-config-typescript": "^14.6.0",
46-
"@vue/tsconfig": "^0.5.1",
46+
"@vue/tsconfig": "^0.8.1",
4747
"eslint": "^9.39.1",
4848
"eslint-plugin-vue": "^10.5.1",
4949
"npm-run-all2": "^6.2.6",
5050
"prettier": "^3.6.2",
5151
"sass-embedded": "^1.93.3",
52-
"typescript": "~5.3.0",
53-
"vite": "^6.4.1",
54-
"vue-tsc": "^1.8.27"
52+
"typescript": "^5.9",
53+
"vite": "^7.3.1",
54+
"vue-tsc": "^3.2"
5555
}
5656
}

‎src/App.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,11 @@ export default {
7474

7575
<style lang="scss">
7676
77+
@use 'bulmaCveCustomizations';
78+
@use 'bulma-timeline';
79+
@use 'globals';
80+
@use 'routerLink';
81+
7782
#cve-skip-link {
7883
background-color: white;
7984
text-decoration: underline;

‎src/assets/style/bulma-timeline.sass‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
@use 'sass:list';
2+
@use "derived-variables" as *;
3+
@use "initial-variables" as *;
4+
5+
$timeline-marker-size: 12px !default
6+
$timeline-marker-color: $grey-lighter !default
7+
$timeline-marker-icon-size: 24px !default
8+
$timeline-marker-border-size: 1px !default
9+
$timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default
10+
$timeline-line-color: $grey-lighter !default
11+
$timeline-line-width: 1px !default
12+
$timeline-line-style: solid !default
13+
$timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default
14+
$timeline-content-padding: 1em 0 0 2em !default
15+
$timeline-rtl-content-padding: 1em 2em 0 0 !default
16+
$timeline-icon-size: .75rem !default
17+
$timeline-header-width: 4em !default
18+
$timeline-item-padding-left: $timeline-header-width * 0.5 !default
19+
$timeline-item-padding-bottom: 2em !default
20+
$dimensions: 16 24 32 48 64 96 128 !default
21+
22+
.timeline
23+
display: flex
24+
flex-direction: column
25+
.timeline-header
26+
width: $timeline-header-width
27+
min-width: $timeline-header-width
28+
max-width: $timeline-header-width * 2
29+
word-wrap: normal
30+
text-align: center
31+
display: flex
32+
justify-content: center
33+
.timeline-item
34+
display: flex
35+
display: -ms-flexbox
36+
display: -webkit-flex
37+
position: relative
38+
margin-left: $timeline-item-padding-left
39+
padding-bottom: $timeline-item-padding-bottom
40+
&::before
41+
content: ""
42+
background-color: $timeline-line-color
43+
display: block
44+
width: $timeline-line-width
45+
height: 100%
46+
position: absolute
47+
left: -($timeline-line-width * 0.5)
48+
top: 0
49+
50+
.timeline-marker
51+
position: absolute
52+
background: $timeline-marker-color
53+
border: $timeline-marker-border
54+
border-radius: 100%
55+
content: ""
56+
display: block
57+
height: $timeline-marker-size
58+
transform: translateX(-50%)
59+
top: 1.2rem
60+
width: $timeline-marker-size
61+
&.is-image
62+
@each $dimension in $dimensions
63+
&.is-#{$dimension}x#{$dimension}
64+
height: $dimension * 1px
65+
width: $dimension * 1px
66+
background: $timeline-marker-color
67+
border: $timeline-marker-border
68+
border-radius: 100%
69+
display: block
70+
overflow: hidden
71+
&.is-icon
72+
display: flex
73+
align-items: center
74+
justify-content: center
75+
height: $timeline-marker-icon-size
76+
width: $timeline-marker-icon-size
77+
background: $timeline-marker-color
78+
border: $timeline-marker-border
79+
border-radius: 100%
80+
padding: .5rem
81+
> *
82+
font-size: $timeline-icon-size !important
83+
&.is-outlined
84+
.image
85+
background: $white
86+
&.is-icon
87+
background: $white
88+
> *
89+
color: $timeline-marker-color
90+
@each $name, $pair in $colors
91+
$color: list.nth($pair, 1)
92+
$color-invert: list.nth($pair, 1)
93+
@if list.length($pair) == 2
94+
$color-invert: list.nth($pair, 2)
95+
&.is-#{$name}
96+
background-color: $color !important
97+
border-color: $color !important
98+
.image
99+
border-color: $color !important
100+
101+
&.is-icon
102+
background-color: $color !important
103+
border-color: $color !important
104+
> *
105+
color: $color-invert !important
106+
&.is-outlined
107+
background-color: $white !important
108+
border-color: $color !important
109+
.image
110+
background-color: $white !important
111+
&.is-icon
112+
background-color: $white !important
113+
> *
114+
color: $color !important
115+
.timeline-content
116+
padding: $timeline-content-padding
117+
.heading
118+
font-weight: $weight-semibold
119+
120+
@each $name, $pair in $colors
121+
$color: list.nth($pair, 1)
122+
$color-invert: list.nth($pair, 1)
123+
@if list.length($pair) == 2
124+
$color-invert: list.nth($pair, 2)
125+
&.is-#{$name}
126+
&::before
127+
background-color: $color
128+
129+
&.is-centered
130+
.timeline-header
131+
display: flex
132+
width: 100%
133+
align-self: center
134+
.timeline-item
135+
width: 50%
136+
align-self: flex-end
137+
flex-direction: row
138+
&:nth-of-type(2n)
139+
align-self: flex-start
140+
flex-direction: row-reverse
141+
margin-left: 0
142+
margin-right: $timeline-item-padding-left
143+
&::before
144+
right: -($timeline-line-width * 0.5)
145+
left: auto
146+
.timeline-marker
147+
transform: translateX(50%)
148+
.timeline-content
149+
padding: $timeline-rtl-content-padding
150+
text-align: right
151+
display: flex
152+
flex-direction: column
153+
align-items: flex-end
154+
flex-basis: 100%
155+
&:nth-of-type(2n+1)
156+
&::before
157+
content: ""
158+
background-color: $timeline-line-color
159+
display: block
160+
width: $timeline-line-width
161+
height: 100%
162+
position: absolute
163+
top: 0
164+
@each $name, $pair in $colors
165+
$color: list.nth($pair, 1)
166+
$color-invert: list.nth($pair, 1)
167+
@if list.length($pair) == 2
168+
$color-invert: list.nth($pair, 2)
169+
&.is-#{$name}
170+
&::before
171+
background-color: $color
172+
173+
&.is-rtl
174+
justify-content: flex-end
175+
align-items: flex-end
176+
.timeline-item
177+
justify-content: flex-end
178+
flex-direction: row
179+
border-left: none
180+
&::before
181+
right: 0
182+
left: auto
183+
margin-left: 0
184+
margin-right: $timeline-header-width * 0.5
185+
.timeline-marker
186+
transform: translateX(50%)
187+
&.is-image
188+
@each $dimension in $dimensions
189+
&.is-#{$dimension}x#{$dimension}
190+
transform: translateX(50%)
191+
.timeline-content
192+
padding: $timeline-rtl-content-padding
193+
text-align: right
194+
195+
&.no-headers
196+
.timeline-item
197+
&.is-first
198+
&::before
199+
height: calc(100% - 1.2rem)
200+
top: 1.2rem
201+
&.is-last
202+
&::before
203+
height: 1.2rem

0 commit comments

Comments
 (0)