diff --git a/app/views/layouts/2020_bootstrap_v5.html.erb b/app/views/layouts/2020_bootstrap_v5.html.erb new file mode 100644 index 00000000..e02eff33 --- /dev/null +++ b/app/views/layouts/2020_bootstrap_v5.html.erb @@ -0,0 +1,35 @@ + + + + + + + <%= favicon_link_tag 'https://www.ualberta.ca/favicon.svg' %> + <%= javascript_pack_tag '2020main-bootstrap-v5' %> + <%= stylesheet_pack_tag '2020main-bootstrap-v5' %> + + + + + <%= stylesheet_link_tag comfy_cms_render_css_path(@cms_site.id, @cms_layout.identifier) %> + + <% if content_for(:title) %> + <%= yield(:title) %> - UofA Library + <% elsif @cms_page %> + <%= @cms_page.label %> - UofA Library + <% else %> + University of Alberta Library + <% end %> + + + + + <%= yield %> + + + diff --git a/app/webpacker/packs/2020main-bootstrap-v5.js b/app/webpacker/packs/2020main-bootstrap-v5.js new file mode 100644 index 00000000..e1799252 --- /dev/null +++ b/app/webpacker/packs/2020main-bootstrap-v5.js @@ -0,0 +1,31 @@ +// Importing and adding jQuery which is required for our legacy js (pre-bootstrap 5 layouts), remove one fully migrated. +import jquery from 'jquery' +window.jQuery = jquery +window.$ = jquery + +import '@popperjs/core' +import 'bootstrap' +import '../src/stylesheets/2020main-bootstrap-v5.css'; + +$(function() { + $('[data-toggle-second="tooltip"]').tooltip(); + $('[data-toggle-second="tooltip"]').on('click', function() { + $(this).tooltip('hide') + }) + + var mode = localStorage.getItem('mode'); + if (mode == 'dark') { + $('body').addClass('dark-mode'); + $('#dark-mode-toggle').click(function() { + $('body').toggleClass('dark-mode'); + localStorage.setItem('mode', 'lite'); + mode = localStorage.getItem('mode'); + }); + } else { + $('#dark-mode-toggle').click(function() { + $('body').toggleClass('dark-mode'); + localStorage.setItem('mode', 'dark'); + mode = localStorage.getItem('mode'); + }); + } +}); diff --git a/app/webpacker/packs/2020main.js b/app/webpacker/packs/2020main.js index 00e02c7e..285f2420 100644 --- a/app/webpacker/packs/2020main.js +++ b/app/webpacker/packs/2020main.js @@ -1,7 +1,7 @@ import 'jquery' import 'popper.js' -import 'bootstrap' +import 'bootstrap-v462' import '../src/stylesheets/2020main.css'; @@ -29,6 +29,6 @@ $(function() { }); } - + }); - + diff --git a/app/webpacker/src/stylesheets/2020main-bootstrap-v5.css b/app/webpacker/src/stylesheets/2020main-bootstrap-v5.css new file mode 100644 index 00000000..02cfd9aa --- /dev/null +++ b/app/webpacker/src/stylesheets/2020main-bootstrap-v5.css @@ -0,0 +1,687 @@ +@import 'bootstrap'; + +/* resets of existing classes and elements */ +body, .sticky-footer-wrapper { + min-height:100vh; +} +.flex-fill{ + flex:1 1 auto; +} + +.dropdown-menu { + top: 80%; +} +.card { + border:none; +} +.card-header{ + background-color:#284E36; + border:#00492c solid 3px; + border-width: 3px 3px 0 3px; + color:#fff; +} +.card-header h2{ + color:#fff; +} +.card-header h2 a{ + color:#FDE382 +} +.card-header h2 a:hover{ + color:#fff; +} +.card-body{ + border:#00492c solid 3px; + border-width: 0px 3px 3px 3px; + border-radius:0px 0px 5px 5px; +} +.card>.list-group{ + border-top:none; +} +.list-group-item a{ + display:block; +} +.list-group-item:hover{ + background-color: #FCFCF0; +} +.hp{ + display: none; +} +.form-control{ + border-color:#00492c; +} + +/* custom ual styles */ + +/*header styles*/ +.ual-btn{ + color:#fff; + background-color:#007C41; +} +.ual-btn:hover{ + background-color:#7AB800; + color:#fff; +} +.ual-ltgr-line{ + border-top:0.2rem solid #7AB800; +} +.ual-yellow-line{ + border-top:0.2rem solid #FFDB05; +} +.ual-top{ + border-top:0.4rem solid #7AB800; + border-bottom:0.4rem solid #007C41; + background-color:#FCFCF0; +} +.ual-blade{ + background-color:#fff; + padding:0; +} +.ual-blade li{ + text-align:right; + padding:0.5em 0; + font-size:.875em; + padding-right: 1.5rem; +} +.ual-blade .navbar-nav>li>a{ + color: #666; + display:inline-block; +} +.ual-blade .navbar-nav>li>a:hover{ + color:#333; + text-decoration:none; +} +.ual-nav .navbar-brand{ + width:18rem; +} +.ual-blade-toggler{ + font-size:0.7em; + padding:0.1rem 0.2rem; + margin-right:1rem; + background:#FFDB05; +} +.ual-navbar-toggler{ + font-size:1rem; + padding:0.2rem 0.4rem; +} +.ual-stack{ + cursor: pointer; +} +.ual-stack .ual-circle{ + color:#7AB800; +} +.ual-stack:hover .ual-circle{ + color:#007C41; +} +.ual-nav .navbar-nav>li{ + border-top:1px solid #FFDB05; + text-align:center; + padding:0.5rem 0; +} +.ual-nav .navbar-nav>li>a{ + color:#284E36; + font-size:1.05em; + font-weight:bold; + display:block; +} +.ual-nav .navbar-nav>li>a:hover{ + color: #007C41; +} +.ual-nav .navbar-nav>li>a>br{ + display:none; +} +/* chat button pulse - must include animaation */ +.ual-pulse { + color:#fff; + display: block; + padding:5px 10px; + font-weight:bold; + background: #007C41; + cursor: pointer; + box-shadow: 0 0 0 rgba(204,169,44, 0.4); + animation: pulse 2s infinite; +} +.ual-pulse:hover { + animation: none; + color:#FCFCF0; + background:#7AB800; + text-decoration:none; +} +/* animation */ +@-webkit-keyframes pulse { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(122,184,0, 0.9); + } + 70% { + -webkit-box-shadow: 0 0 0 10px rgba(122,184,0, 0); + } + 100% { + -webkit-box-shadow: 0 0 0 0 rgba(122,184,0, 0); + } +} +@keyframes pulse { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(122,184,0, 0.9); + box-shadow: 0 0 0 0 rgba(122,184,0, 0.9); + } + 70% { + -moz-box-shadow: 0 0 0 10px rgba(122,184,0, 0); + box-shadow: 0 0 0 10px rgba(122,184,0, 0); + } + 100% { + -moz-box-shadow: 0 0 0 0 rgba(122,184,0, 0); + box-shadow: 0 0 0 0 rgba(122,184,0, 0); + } +} + +/* main container custom styles*/ +.ual-container{ + padding:2rem 1rem; + min-height:26rem; +} +.ual-container h1, h2, h3, h4, h5, h6{ + color: #284E36; +} +.ual-container h1{ + font-size: 1.8em; + border-bottom:0.1rem solid #FFDB05; + padding-bottom:0.8rem; + margin-bottom:2rem; +} +.ual-container h1>div{ + font-size:0.6em; + float:right; + margin-top:0.9em; +} +.ual-container h2{ + font-size: 1.4em; +} +.ual-container h3{ + font-size: 1.3em; +} +.ual-container h4{ + font-size: 1.2em; +} +.ual-container h5{ + font-size: 1.1em; +} +.ual-container p, .ual-container li{ + line-height: 1.8em; +} +.ual-container a, footer a{ + color: #007C41; + font-weight:bold; + text-decoration: underline; +} +.ual-container a:hover, footer a:hover{ + text-decoration: none; + color: #284E36; +} +.ual-container .card h2{ + font-size:1.2em; + margin-bottom:0; +} +.ual-large-text{ + font-size:1.3em; +} +.ual-btn-lang{ + margin-top:-2em; + padding:0 10px 3px 10px; + border-radius:0 0 5px 5px; +} +.ual-container a.ual-btn{ + color:#fff; + text-decoration:none; + font-weight:normal; +} + +/* footer styles */ +.ual-ft{ + border-top:0.3rem solid #00492c; + background-color:#FCFCF0; +} +.ual-ft-bottom{ + height:8rem; + background-color:#00492c; + background-image:url("/pattern-sm.svg"); + background-size:80%; +} +.ual-ft-nav{ + list-style:none; + font-size:0.9em; + padding-left: 0; +} +.ual-ft-nav li{ + padding:3px 0; +} +.ual-ft-logo{ + max-width:300px; +} +.ual-ft-list{ + padding:0; +} +/*darkmode styles */ +#dark-mode-toggle{ + margin-left:0.5rem; + color: #007C41; +} +.dark-mode{ + background:#333; +} +.dark-mode .ual-bg{ + background: #ddd7ae; +} +.dark-mode .ual-top{ + background:#00492c; +} +.dark-mode .ual-nav .navbar-nav>li>a{ + color:#FCF9E2; +} +.dark-mode .card-header{ + background:#5F3811; +} +.dark-mode .ual-blade, .dark-mode .card-body, .dark-mode .list-group-item, .dark-mode footer{ + background:#DDD7AE; +} +.dark-mode .ual-container h4, .dark-mode .ual-container h1, .dark-mode .ual-container h2 { + color:#FCF9E2; +} +.dark-mode .ual-container p, .dark-mode .ual-container li{ + color:#fff; +} +.dark-mode .ual-container p.small{ + color:#000; +} +.dark-mode .ual-container a{ + color:#7AB800; +} +.dark-mode .ual-container .card a, .dark-mode .ual-container .list-group a{ + color:#007C41; +} +.dark-mode .ual-container .card a.ual-btn{ + color:#fff; +} +.dark-mode .ual-blade .navbar-nav>li>a { + color: #222; +} +.dark-mode .card-body, .dark-mode .card-header{ + border:none; +} +.dark-mode .ual-container .card-body li, .dark-mode .ual-container .card-body p { + color: #000; +} +.dark-mode .ual-container p.small { + color: #fff; +} +.dark-mode .ual-container .card-body p.small { + color: #000; +} +.dark-mode .ual-about .alert-success{ + background-color:#284e36; +} +.dark-mode .ual-about .alert-success:hover{ + background-color:#007c41; +} +.dark-mode .ual-about a{ + color:#fff; +} + +/*homepage styles*/ +.ual-btn-advanced{ + font-size:0.85em; +} +.ual-container a.ual-btn-tips{ + background:#fff; + text-decoration:none; + font-size:1em; + display:block; + padding:0.25em 0; + border-radius:10px; +} +.ual-container a.ual-btn-tips:hover{ + background:#FCFCF0; + } +.ual-container a.ual-find-link{ + font-size:1.1em; + padding:1rem 0.3rem; + background-color:#007C41; + color:#fff; + text-decoration:none; + font-weight:normal; +} +.ual-container a.ual-find-link:hover{ + background-color:#7AB800; + color:#fff; +} +.ual-workshop-container{ + height:20em; + overflow:scroll; +} +.ual-sat{ + border:0.3em #00492c solid; + padding:4rem 0; +} +.ual-container .ual-sat a{ + display:block; + padding:1.5rem 0; + background-color:rgba(255,255,255, 0.9); + font-size:1.2em; + text-decoration:none; +} +.ual-container .ual-sat a:hover{ + background-color:rgba(255,255,255, 0.95); +} +.ual-bpsc{ + background-image: url(https://sites.library.ualberta.ca/wp-content/uploads/2020/06/BPSC.jpg); + background-size: cover; +} +.ual-dsc{ + background-image: url(https://sites.library.ualberta.ca/wp-content/uploads/2020/06/dsc.jpg); + background-size: cover; +} +/* homepage rss and twitter */ +.ual-rss{ + max-height:20rem; + overflow: hidden; +} +.ual-rss .rss-date, .ual-rss .s-lc-ea-date{ + font-style:italic; + font-size:0.8em; +} +.ual-rss ul{ + padding:0; +} +.ual-rss li{ + list-style:none; + border-bottom: 1px solid rgba(0,0,0,.125); + padding:1rem 0.5rem; +} +.ual-rss li:first-child{ + padding-top:0; +} +.ual-rss li:last-child{ + border-bottom:none; + padding-bottom:0; +} +.ual-rss .s-lc-ea-h3{ + display:none; +} +.ual-twitter{ + border:#00492c solid 3px; + border-radius: 5px; +} + + +/* sidebar layout styles */ +.ual-sidebar{ + background-color:#EEFEDD; + border-radius:10px; + padding:1rem 2rem; +} +.ual-sidebar li{ + list-style:none; +} + +/*other pages*/ +.ual-services .card-body, .ual-hours .card-body{ + padding:0; +} +.ual-container .ual-hours .card h2{ + font-size:1.5em; +} +.ual-about .alert-success{ + padding-top:4rem; + min-height:10rem; +} +.ual-about .alert-success:hover{ + background-color:#e6f0e8; +} + +/* Styles for Profile Application */ +.profile-padding{ + margin: 10px 0px 10px 20px; +} +.profile-nav{ + padding: 10px; + background-color: #fff; + margin-bottom: 10px; +} +.profile-nav ul{ + list-style: none; + padding-left: 0px; + margin-bottom: 0px; +} +.profile-nav li{ + display: inline; +} +.profile-nav li a{ + padding: 3px 10px; + background-color: #eceff4;; + display: inline-block; + margin-bottom: 1px; +} +.profile-nav li a:hover{ + background-color: #efefef; +} +.profile-form>li{ + list-style: none; + margin: 20px 0px; + font-family: 'Open Sans', Arial, sans-serif; +} +.profile-form>li>label{ + width: 150px; + text-align: right; + margin-right: 5px; + font-weight: bold; +} +.profile-form>li>textarea{ + width:600px; + height: 200px; + vertical-align: top; +} +.profile-form>li.radio>label{ + width:auto; + padding-left: 0px; + padding-right: 20px; +} +.profile-form .btn-success{ + margin-left: 160px; + font-size: 20px; +} +.staff{ + width: 94%; + table-layout: fixed; + border-collapse:collapse; + margin-top: 20px; +} +.staff tbody tr:nth-child(odd) td, +.staff tbody tr:nth-child(odd) th { + background-color: #f9f9f9; +} +.staff th{ + padding: 10px 40px 10px 10px; + border: 1px solid #fff; + border-width: 1px 1px 0px 1px; + cursor: pointer; +} +.staff th h3{ + font-size: 19px; + background: url("~images/sort.png") no-repeat right center; + padding-right: 31px; + display: inline; + font-weight:bold; +} +.staff th.email h3, .staff th.phone h3, .staff th.actions h3{ + background-image:none; +} +.staff th.blank{ + border: none; + background: none; + width: 100px; +} +.staff th.email{ + width: 200px; +} +.staff th.last-name{ + width: 140px; +} +.staff td{ + padding: 10px; + border:0px; + font-size: 15px; +} +.staff td h2{ + font-size: 25px; + text-transform: capitalize; + margin-bottom:0px; + padding-bottom:0px; +} +.staff td.photo{ + width: 60px; +} +.staff td.email{ + width: 200px; +} +.head td{ + background-color:#fcfccc !important; + border-bottom: 0.1rem solid #FFDB05; +} +.staff-images{ + width:110px; + height:110px; +} +.staff-images-h{ + width:110px; +} +.staff-images img{ + width:100%; +} +.moveover{ + margin-left:-100px; +} +.tinycolumn{ + width:10px; +} +.a-profile{ + font-size:20px; + margin-top: 20px; + margin-bottom:100px; +} +.a-profile .glyphicon{ + font-size:13px; +} +.a-profile .tel{ + display:block; + margin:10px 0; +} +.a-profile ul{ + list-style: none; + margin: 0; + padding: 0; +} +.a-profile h2{ + font-size: 50px; + padding-bottom: 0px; + padding-top: 10px; +} +.a-profile h3{ + margin-top: 0px; + font-size: 30px; + margin-bottom: 10px; +} +.a-profile li{ + padding-top: 15px; + line-height: 28px; +} +.a-profile h4{ + font-size: 24px; + font-weight: bold; + margin-bottom: 5px; + margin-top: 0px; +} +.a-profile h4.inline{ + display: inline; +} +.vcard span{ + display: block; +} +.vcard .fn span{ + display: inline; +} +.a-photo{ + float: right; + margin-left: 20px; + margin-bottom: 20px; +} +.in-nav{ + padding: 0; +} +.in-nav li{ + display: inline; + list-style: none; + margin-bottom: 15px; + margin-top: 30px; +} +.staff-back{ + padding: 5px 10px; + margin-right: 2px; + background-color: #efefef; + border-radius: 4px; +} +.staff-back:hover{ + background-color: #daded8; + text-decoration: none; +} +.staff-back span{ + font-size: 15px; +} +.unit-description{ + margin-bottom:60px; +} +/* large breakpoint */ +@media (min-width: 992px) { + .ual-container a.ual-find-link{ + font-size:1.25em; + padding:1.2rem 0.3rem; + } + .ual-nav .navbar-brand{ + width:28rem; + } + .ual-francaise{ + padding-left:1.5em; + } + .ual-blade li{ + padding-right:.5rem; + } + .ual-blade li:not(:last-child):after{ + content: "|"; + padding-left: .5rem; + color: #666; + } + .ual-nav .navbar-nav>li{ + border-top:0; + padding: 1rem 1.4rem; + text-align:left; + } + .ual-nav li.nav-item:last-child{ + padding-right:0; + padding-left:0; + } + .footer-top{ + padding-top:1.5rem; + } + .ual-ft-list{ + text-align:right; + } + .ual-rss{ + overflow: scroll; +} +.ual-nav .navbar-nav>li>a>br{ + display:block; +} +} +/* extra large breakpoint */ +@media (min-width: 1200px) { + .ual-about>a>.d-xl-block{ + display:inline!important; + } +} diff --git a/app/webpacker/src/stylesheets/2020main.css b/app/webpacker/src/stylesheets/2020main.css index 1eb2ebdb..43867324 100644 --- a/app/webpacker/src/stylesheets/2020main.css +++ b/app/webpacker/src/stylesheets/2020main.css @@ -1,4 +1,4 @@ -@import 'bootstrap'; +@import 'bootstrap-v462'; /* resets of existing classes and elements */ body, .sticky-footer-wrapper { @@ -43,9 +43,9 @@ body, .sticky-footer-wrapper { .list-group-item:hover{ background-color: #FCFCF0; } -.hp{ - display: none; -} +.hp{ + display: none; +} .form-control{ border-color:#00492c; } @@ -235,7 +235,7 @@ body, .sticky-footer-wrapper { } /* footer styles */ -.ual-ft{ +.ual-ft{ border-top:0.3rem solid #00492c; background-color:#FCFCF0; } @@ -680,8 +680,8 @@ body, .sticky-footer-wrapper { } } /* extra large breakpoint */ -@media (min-width: 1200px) { +@media (min-width: 1200px) { .ual-about>a>.d-xl-block{ display:inline!important; } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 987c7497..82490582 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,10 @@ "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^6.5.1", + "@popperjs/core": "^2.11.8", "@rails/webpacker": "^5.4.4", - "bootstrap": "^4.6.2", + "bootstrap": "^5.3.2", + "bootstrap-v462": "npm:bootstrap@4.6.2", "glob-parent": "^6.0.2", "jquery": "^3.7.1", "jquery-ui": "^1.13.2", diff --git a/yarn.lock b/yarn.lock index 3082e441..0a5b52d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1192,6 +1192,11 @@ mkdirp "^1.0.4" rimraf "^3.0.2" +"@popperjs/core@^2.11.8": + version "2.11.8" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" + integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== + "@rails/webpacker@^5.4.4": version "5.4.4" resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.4.4.tgz#971a41b987c096c908ce4088accd57c1a9a7e2f7" @@ -1873,7 +1878,12 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24= -bootstrap@^4.6.2: +bootstrap@^5.3.2: + version "5.3.2" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.2.tgz#97226583f27aae93b2b28ab23f4c114757ff16ae" + integrity sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g== + +"bootstrap-v462@npm:bootstrap@4.6.2": version "4.6.2" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.2.tgz#8e0cd61611728a5bf65a3a2b8d6ff6c77d5d7479" integrity sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==