Skip to content

Commit ca906e7

Browse files
rlxdevrlxdev
committed
test of Bulma V1 upgrade
1 parent 52120e5 commit ca906e7

Some content is hidden

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

74 files changed

+1674
-3886
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,18 @@
1515
"format": "prettier --write src/"
1616
},
1717
"dependencies": {
18-
"@cityssm/bulma-sticky-table": "^2.1.0",
18+
"@cityssm/bulma-sticky-table": "^3.0.1",
1919
"@fortawesome/fontawesome-svg-core": "^6.7.2",
2020
"@fortawesome/free-brands-svg-icons": "^6.7.2",
2121
"@fortawesome/free-regular-svg-icons": "^6.7.2",
2222
"@fortawesome/free-solid-svg-icons": "^6.7.2",
2323
"@fortawesome/vue-fontawesome": "^3.1.2",
2424
"@unhead/vue": "^1.11.20",
2525
"axios": "^1.13.2",
26-
"bulma": "^0.9.4",
26+
"bulma": "^1.0.4",
2727
"bulma-timeline": "^3.0.5",
2828
"leaflet": "^1.9.4",
2929
"lodash": "^4.17.21",
30-
"node-sass": "^9.0.0",
3130
"pinia": "^2.3.1",
3231
"vue": "^3.3.11",
3332
"vue-gtag": "^2.1.2",

‎src/App.vue‎

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

6161
<style lang="scss">
6262
63+
@use 'bulmaCveCustomizations';
64+
@use 'bulma-timeline';
65+
@use 'globals';
66+
@use 'routerLink';
67+
6368
#cve-skip-link {
6469
background-color: white;
6570
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

‎src/assets/style/bulmaCveCustomizations.scss‎

Lines changed: 74 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,76 @@
11
@use 'variables' as *;
22

3-
/** Override Bulma's generic variables **/
4-
$body-family: "Source Sans Pro", "Public Sans Web", sans-serif;
5-
6-
/** Override Bulma's derived variables **/
7-
$text: black; // primary navbar text & body text color
8-
$body-background-color: $cve-theme-page-background;
9-
$body-font-size: 1rem;
10-
$link: $theme-color-primary;
11-
$link-visited: $theme-color-violet-vivid;
12-
$family-primary: "Source Sans Pro", "Public Sans Web", sans-serif;
13-
$family-secondary: "Source Sans Pro", "Public Sans Web", sans-serif;
14-
$family-code: sans-serif;
15-
$size-small: 0.77rem;
16-
17-
/** Override Bulma's element variables **/
18-
$icon-dimensions-large: 4rem;
19-
20-
21-
/** Override Bulma's Element - Table variables **/
22-
$table-striped-row-even-background-color: $theme-color-base-lightest;
23-
24-
25-
/** Override Bulma's form variables **/
26-
$input-placeholder-color: $theme-color-base;
27-
28-
/** Override Bulma's Components - message variables **/
29-
$message-background-color: white;
30-
$message-header-radius: $cve-border-radius;
31-
32-
/** Override Bulma's Layout - footer variables **/
33-
$footer-background-color: $theme-color-base-lightest;
34-
35-
/** Override Bulma's navbar variables **/
36-
$navbar-background-color: $theme-color-primary-darker; // background for application size below desktop
37-
$navbar-item-hover-background-color: unset; // submenu background color for touchscreen
38-
$navbar-item-color: white;
39-
$navbar-item-hover-color: white; // sets submenu item for selected page & active link color
40-
$navbar-burger-color: $theme-color-accent-warm;
41-
$navbar-tab-hover-border-bottom-color: white;
42-
$navbar-tab-active-color: white;
43-
$navbar-dropdown-radius: $cve-border-radius;
44-
$navbar-dropdown-background-color: $theme-color-primary-darker;
45-
$navbar-dropdown-item-active-color: $theme-color-accent-cool-light; // desktop
46-
$navbar-dropdown-item-hover-color: white;
47-
48-
/** Override Bulma's pagination variables **/
49-
$pagination-margin: 0;
3+
// Keeping the same order as bulma/sass, which is:
4+
//
5+
// @forward "utilities";
6+
// @forward "themes";
7+
// @forward "base";
8+
// @forward "elements";
9+
// @forward "form";
10+
// @forward "components";
11+
// @forward "grid";
12+
// @forward "layout";
13+
// @forward "base/skeleton";
14+
// @forward "helpers";
15+
16+
@forward 'bulma/sass/utilities' with (
17+
/** Override Bulma's variables **/
18+
// $primary: $theme-color-primary-darker,
19+
$text: black, // primary navbar text & body text color
20+
$family-sans-serif: '"Source Sans Pro", "Public Sans Web", sans-serif',
21+
$family-primary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
22+
$family-secondary: '"Arial", "Source Sans Pro", "Public Sans Web", sans-serif, "Arial"',
23+
$family-code: sans-serif,
24+
$size-small: 0.77rem,
25+
);
26+
27+
@use 'initial-variables' as *;
28+
29+
@forward "bulma/sass/themes";
30+
31+
@forward 'bulma/sass/base' with (
32+
$body-background-color: $cve-theme-page-background,
33+
$body-font-size: 1rem,
34+
);
35+
36+
@forward 'bulma/sass/elements' with (
37+
$content-heading-weight: $weight-semibold,
38+
$icon-dimensions-large: 4rem,
39+
$table-striped-row-even-background-color: $theme-color-base-lightest,
40+
$title-weight: $weight-semibold,
41+
);
42+
43+
@forward 'bulma/sass/form' with (
44+
$input-placeholder-color: $theme-color-base,
45+
46+
);
47+
48+
// Commented-out settings were used before Bulma 1.0, but are now not available.
49+
// They're kept here in case we need to investigate if the UI look & feel
50+
// changes in some way.
51+
52+
@forward 'bulma/sass/components' with (
53+
// $message-background-color: white,
54+
$message-header-radius: $cve-border-radius,
55+
$navbar-background-color: $theme-color-primary-darker, // background for application size below desktop
56+
// $navbar-item-hover-background-color: unset, // submenu background color for touchscreen
57+
$navbar-item-color: white,
58+
// $navbar-item-hover-color: white, // sets submenu item for selected page & active link color
59+
$navbar-burger-color: $theme-color-accent-warm,
60+
$navbar-tab-hover-border-bottom-color: white,
61+
$navbar-tab-active-color: white,
62+
$navbar-dropdown-radius: $cve-border-radius,
63+
$navbar-dropdown-background-color: $theme-color-primary-darker,
64+
// $navbar-dropdown-item-active-color: $theme-color-accent-cool-light, // desktop
65+
// $navbar-dropdown-item-hover-color: white,
66+
$pagination-margin: 0,
67+
);
68+
69+
@forward "bulma/sass/grid";
70+
71+
@forward "bulma/sass/layout" with (
72+
$footer-background-color: $theme-color-base-lightest
73+
);
74+
75+
@forward "bulma/sass/base/skeleton";
76+
@forward "bulma/sass/helpers";

‎src/assets/style/cveRecord.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import '@/assets/style/globals.scss';
1+
@use 'mixins' as *;
2+
@use 'variables' as *;
23

34
.level-item {
45
@include touch {

‎src/assets/style/elements/cveTableStacked.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'initial-variables' as *;
2+
@use 'variables' as *;
3+
14
@media only screen and (max-width: $desktop) {
25
td {
36
border-color: $theme-color-primary-darker !important;

0 commit comments

Comments
 (0)