Skip to content

Commit 7b79359

Browse files
kkrebssebhofmannTiloNNAntoniafriedrich
authored
MIR-1418 upgrade to bootstrap v5 (#1128)
* MIR-1418-Upgrade to Bootstrap v5 * REP-1057 replaces droped mixins * REP-1057 prevent error from css compressor by not using it * MIR-1418-Upgrade to Bootstrap v5 - use bootstrap 5 javascript * REP-1057 adds first bs migration changes, still in progress * REP-1057 adjust badges, rebuild hover effects * REP-1057 migrates tooltips and filter check boxes * REP-1057 form- and button group migrations * MIR-1418 fixes class bug, missing whitespace after search and replace * MIR-1418 fixes class bug, missing whitespace after search and replace * MIR-1418 Fix styling Some Buttons and elements looked off when building MIR local. * MIR-1418 Update Popper and Bootstrap Popover Bootstrap Popover does not work with JQuery anymore. * MIR-1418 Fix styling for bootstrap 5 -data-dismiss to data-bs-dismiss -related item check so html does not get created multiple times -modal-title class was messing up the styling -the html class close gets renamed to "btn close". externally loaded closebutton symbols can get removed with this. * MIR-1418 improves bs migration changes (modals) * MIR-1418-Upgrade to Bootstrap v5 - fix merge * MIR-1418 fixes close and cancel buttons on citation and leated item modals * MIR-1418: Fix compatibility issues with Selenium and Bootstrap 5 in SCSS * MIR-1418 move selenium fix to variables --------- Co-authored-by: Sebastian Hofmann <sebastian.hofmann@gbv.de> Co-authored-by: Tilo Neumann <tilo.neumann@gbv.de> Co-authored-by: Antoniafriedrich <antonia.friedrich@uni-jena.de>
1 parent 88cc5c3 commit 7b79359

File tree

94 files changed

+2427
-1765
lines changed

Some content is hidden

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

94 files changed

+2427
-1765
lines changed

‎mir-it/src/test/java/org/mycore/mir/it/controller/MIREditorController.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ protected boolean hasInputTextError(String childElementName) {
6868
try {
6969
driver.waitAndFindElement(
7070
By.xpath(
71-
".//div[contains(@class, 'mcr-invalid') and contains(@class, 'form-group')]//*[contains(@name,'"
71+
".//div[contains(@class, 'mcr-invalid') and contains(@class, 'mir-form-group')]//*[contains(@name,'"
7272
+ childElementName + "')]"));
7373
} catch (NoSuchElementException | TimeoutException e) {
7474
LOGGER.error("Could not find red validation border !", e);

‎mir-layout/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212
},
1313
"engineStrict": true,
1414
"devDependencies": {
15-
"@fortawesome/fontawesome-free": "5.11.2",
16-
"bootstrap": "4.6.1",
17-
"bootswatch": "4.6.1",
15+
"@fortawesome/fontawesome-free": "6.7.2",
16+
"bootstrap": "5.3.3",
17+
"bootswatch": "5.3.3",
1818
"grunt": "^1.5.3",
1919
"grunt-cli": "^1.2.0",
2020
"grunt-contrib-concat": "^1.0.1",

‎mir-layout/src/main/resources/META-INF/resources/bootswatch-default.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1191,14 +1191,14 @@ <h2>Modals</h2>
11911191
<div class="modal-dialog">
11921192
<div class="modal-content">
11931193
<div class="modal-header">
1194-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1194+
<button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">×</button>
11951195
<h4 class="modal-title">Modal title</h4>
11961196
</div>
11971197
<div class="modal-body">
11981198
<p>One fine body…</p>
11991199
</div>
12001200
<div class="modal-footer">
1201-
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1201+
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
12021202
<button type="button" class="btn btn-primary">Save changes</button>
12031203
</div>
12041204
</div>
@@ -1236,7 +1236,7 @@ <h2>Tooltips</h2>
12361236
<div class="modal-dialog modal-lg">
12371237
<div class="modal-content">
12381238
<div class="modal-header">
1239-
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
1239+
<button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
12401240
<h4 class="modal-title">Source Code</h4>
12411241
</div>
12421242
<div class="modal-body">

‎mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/base.scss‎

Lines changed: 62 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
* - basic settings for the webpage
33
* TODO: what does it mean: basic settings?
44
*/
5+
//
56

6-
// Extra large devices (large desktops) and below
7-
// no (xl) media query necessary (desktop first)
8-
// set the defaults for all responsive levels here
7+
// set the defaults for all responsive levels here (desktop first)
8+
// after that, use the media queryies to adujust the lower responsive levels
9+
10+
// XX-Large devices (larger desktops)
11+
// No media query since the xxl breakpoint has no upper bound on its width
912

1013
body {
1114
// TODO do we still need those background settings?
@@ -61,6 +64,19 @@
6164
letter-spacing: 0.4em;
6265
padding-left: 12px
6366
}
67+
68+
// all the elements that should have no underline by default
69+
.hit_title,
70+
.hit_author,
71+
.hit_source,
72+
.single_hit_option,
73+
.names,
74+
.internal_links,
75+
.social_links {
76+
a {
77+
text-decoration: none;
78+
}
79+
}
6480
.internal_links {
6581
list-style: none;
6682
margin: 0;
@@ -201,7 +217,7 @@
201217
color: $link-color;
202218
text-decoration: $link-decoration;
203219
cursor: pointer;
204-
@include hover {
220+
&:hover {
205221
color: $link-hover-color;
206222
text-decoration: $link-hover-decoration;
207223
}
@@ -216,7 +232,8 @@
216232
a:not([href]).dropdown-item {
217233
color: $dropdown-link-color;
218234
cursor: pointer;
219-
@include hover-focus() {
235+
&:hover,
236+
&:focus {
220237
color: $dropdown-link-hover-color;
221238
}
222239
&.active,
@@ -233,23 +250,51 @@
233250
color: inherit;
234251
}
235252

236-
// Large devices (desktops) and below
237-
@include media-breakpoint-down(lg) {
238-
// add/overwrite styles for responsive level lg and lower
253+
// bs 5 droped jumbotron
254+
// we keep it alive
255+
$jumbotron-padding: 2rem !default;
256+
$jumbotron-color: null !default;
257+
$jumbotron-bg: $gray-200 !default;
258+
259+
.jumbotron {
260+
padding: $jumbotron-padding ($jumbotron-padding / 2);
261+
margin-bottom: $jumbotron-padding;
262+
color: $jumbotron-color;
263+
background-color: $jumbotron-bg;
264+
@include border-radius($border-radius-lg);
265+
266+
@include media-breakpoint-up(sm) {
267+
padding: ($jumbotron-padding * 2) $jumbotron-padding;
268+
}
269+
}
270+
.jumbotron-fluid {
271+
padding-right: 0;
272+
padding-left: 0;
273+
@include border-radius(0);
274+
}
275+
276+
277+
// X-Large devices (large desktops, less than 1400px)
278+
@include media-breakpoint-down(xxl) {
279+
// add/overwrite styles for responsive level xl and lower
239280
}
240281

241-
// Medium devices (tablets) and below
242-
@include media-breakpoint-down(md) {
243-
// add/overwrite styles for responsive level md and lower
282+
// Large devices (desktops, less than 1200px)
283+
@include media-breakpoint-down(xl) {
284+
// lg and lower
244285
}
245286

246-
// Small devices (landscape phones) and below
247-
@include media-breakpoint-down(sm) {
248-
// add/overwrite styles for responsive level sm and lower
287+
// Medium devices (tablets, less than 992px)
288+
@include media-breakpoint-down(lg) {
289+
// md and lower
249290
}
250291

251-
// Extra small devices (portrait phones)
252-
@include media-breakpoint-down(xs) {
253-
// add/overwrite styles for responsive level xs
292+
// Small devices (landscape phones, less than 768px)
293+
@include media-breakpoint-down(md) {
294+
// sm and lower
295+
}
254296

297+
// X-Small devices (portrait phones, less than 576px)
298+
@include media-breakpoint-down(sm) {
299+
// xs
255300
}

‎mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/bootstrap4fix.scss‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
* - should be replaced by a refactoring of our css/sass
44
*/
55

6-
// Extra large devices (large desktops) and below
7-
// no (xl) media query necessary (desktop first)
8-
// set the defaults for all responsive levels here
6+
7+
// set the defaults for all responsive levels here (desktop first)
8+
// after that, use the media queryies to adujust the lower responsive levels
9+
10+
// XX-Large devices (larger desktops)
11+
// No media query since the xxl breakpoint has no upper bound on its width
912

1013
.card {
1114
margin-bottom: 20px;
@@ -68,7 +71,9 @@
6871
top: 10px;
6972
}
7073

74+
// TODO: check if we can remove it now
7175
// fix outdated bs3 myclabs confirm modal
76+
/* temporary deactivated
7277
.modal-header {
7378
.modal-title {
7479
order: 1;
@@ -77,24 +82,29 @@
7782
order: 2;
7883
}
7984
}
85+
*/
86+
87+
// X-Large devices (large desktops, less than 1400px)
88+
@include media-breakpoint-down(xxl) {
89+
// add/overwrite styles for responsive level xl and lower
90+
}
8091

81-
// Large devices (desktops) and below
92+
// Large devices (desktops, less than 1200px)
93+
@include media-breakpoint-down(xl) {
94+
// lg and lower
95+
}
96+
97+
// Medium devices (tablets, less than 992px)
8298
@include media-breakpoint-down(lg) {
83-
// add/overwrite styles for responsive level lg and lower
99+
// md and lower
84100
}
85101

86-
// Medium devices (tablets) and below
102+
// Small devices (landscape phones, less than 768px)
87103
@include media-breakpoint-down(md) {
88-
// add/overwrite styles for responsive level md and lower
104+
// sm and lower
89105
}
90106

91-
// Small devices (landscape phones) and below
107+
// X-Small devices (portrait phones, less than 576px)
92108
@include media-breakpoint-down(sm) {
93-
// add/overwrite styles for responsive level sm and lower
109+
// xs
94110
}
95-
96-
// Extra small devices (portrait phones)
97-
@include media-breakpoint-down(xs) {
98-
// add/overwrite styles for responsive level xs
99-
100-
}

‎mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/buttons.scss‎

Lines changed: 97 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
* - for buttons and links that look like buttons
33
*/
44

5-
// Extra large devices (large desktops) and below
6-
// no (xl) media query necessary (desktop first)
7-
// set the defaults for all responsive levels here
5+
// set the defaults for all responsive levels here (desktop first)
6+
// after that, use the media queryies to adujust the lower responsive levels
7+
8+
// XX-Large devices (larger desktops)
9+
// No media query since the xxl breakpoint has no upper bound on its width
810

911
.back-to-top {
1012
position: fixed;
@@ -19,23 +21,103 @@
1921
line-height: 0;
2022
}
2123

22-
// Large devices (desktops) and below
23-
@include media-breakpoint-down(lg) {
24-
// add/overwrite styles for responsive level lg and lower
24+
// adds hover and focus effects for buttons and links with badge class
25+
a,
26+
button {
27+
&.badge {
28+
&.bg-primary,
29+
&.text-bg-primary {
30+
&:hover,
31+
&:focus {
32+
background-color: shift-color($primary,$btn-hover-bg-shade-amount) !important;
33+
}
34+
}
35+
&.bg-secondary,
36+
&.text-bg-secondary {
37+
&:hover,
38+
&:focus {
39+
background-color: shift-color($secondary,$btn-hover-bg-shade-amount) !important;
40+
}
41+
}
42+
&.bg-success,
43+
&.text-bg-success {
44+
&:hover,
45+
&:focus {
46+
background-color: shift-color($success,$btn-hover-bg-shade-amount) !important;
47+
}
48+
}
49+
&.bg-danger,
50+
&.text-bg-danger {
51+
&:hover,
52+
&:focus {
53+
background-color: shift-color($danger,$btn-hover-bg-shade-amount) !important;
54+
}
55+
}
56+
&.bg-warning,
57+
&.text-bg-warning {
58+
&:hover,
59+
&:focus {
60+
background-color: shift-color($warning,$btn-hover-bg-shade-amount) !important;
61+
}
62+
}
63+
&.bg-info,
64+
&.text-bg-info {
65+
&:hover,
66+
&:focus {
67+
background-color: shift-color($info,$btn-hover-bg-shade-amount) !important;
68+
}
69+
}
70+
&.bg-light,
71+
&.text-bg-light {
72+
&:hover,
73+
&:focus {
74+
background-color: shift-color($light,$btn-hover-bg-shade-amount) !important;
75+
}
76+
}
77+
&.bg-dark,
78+
&.text-bg-dark {
79+
&:hover,
80+
&:focus {
81+
background-color: shift-color($dark,$btn-hover-bg-shade-amount) !important;
82+
}
83+
}
84+
}
85+
}
86+
87+
// removes text decoration from links with badge class
88+
a {
89+
&.badge {
90+
text-decoration: none;
91+
&:focus,
92+
&:hover {
93+
text-decoration: none;
94+
}
95+
}
96+
}
97+
98+
99+
100+
// X-Large devices (large desktops, less than 1400px)
101+
@include media-breakpoint-down(xxl) {
102+
// add/overwrite styles for responsive level xl and lower
25103
}
26104

27-
// Medium devices (tablets) and below
28-
@include media-breakpoint-down(md) {
29-
// add/overwrite styles for responsive level md and lower
105+
// Large devices (desktops, less than 1200px)
106+
@include media-breakpoint-down(xl) {
107+
// lg and lower
30108
}
31109

32-
// Small devices (landscape phones) and below
33-
@include media-breakpoint-down(sm) {
34-
// add/overwrite styles for responsive level sm and lower
110+
// Medium devices (tablets, less than 992px)
111+
@include media-breakpoint-down(lg) {
112+
// md and lower
35113
}
36114

37-
// Extra small devices (portrait phones)
38-
@include media-breakpoint-down(xs) {
39-
// add/overwrite styles for responsive level xs
115+
// Small devices (landscape phones, less than 768px)
116+
@include media-breakpoint-down(md) {
117+
// sm and lower
118+
}
40119

120+
// X-Small devices (portrait phones, less than 576px)
121+
@include media-breakpoint-down(sm) {
122+
// xs
41123
}

‎mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/datatable.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
line-height: 1.8;
55
}
66

7-
.float-left.sort-icon {
7+
.float-start.sort-icon {
88
margin-right: 5px;
99
}
1010
}

‎mir-layout/src/main/resources/META-INF/resources/mir-layout/scss/common/fileupload.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
}
99
}
1010

11-
background-color: darken($info, 10%)!important;
12-
color: darken($info, 10%) !important;
11+
background-color: shade-color($info, 10%)!important;
12+
color: shade-color($info, 10%) !important;
1313
}
1414

1515
[data-upload-target].well {

0 commit comments

Comments
 (0)