diff --git a/services/web/app/views/_mixins/faq_search-marketing.pug b/services/web/app/views/_mixins/faq_search-marketing.pug index b45168ec70..c5a60685bb 100644 --- a/services/web/app/views/_mixins/faq_search-marketing.pug +++ b/services/web/app/views/_mixins/faq_search-marketing.pug @@ -7,34 +7,33 @@ mixin faq_search-marketing(headerText, headerClass) search.wiki form.project-search.form-horizontal(role='search' data-ol-faq-search) .form-group.has-feedback.has-feedback-left - .col-sm-12 - label.visually-hidden(for='search-help-library') Search help library… - input.form-control( - id='search-help-library' - type='search' - placeholder='Search help library…' - ) - +material-symbol('search').form-control-feedback-left( - aria-hidden='true' - ) - +material-symbol('clear').form-control-feedback( - data-ol-clear-search - hidden - ) - button.visually-hidden( - type='button' - hidden - data-ol-clear-search - aria-label=translate('clear_search') - ) + .col-12 + .form-control-wrapper + label.visually-hidden(for='search-help-library') Search help library… + span.form-control-start-icon + +material-symbol('search').form-control-feedback-left( + aria-hidden='true' + ) + input.form-control.form-control-offset-start.form-control-offset-end( + id='search-help-library' + type='text' + placeholder='Search help library…' + data-ol-search-input + ) + span.form-control-end-icon + button.form-control-search-clear-btn( + type='button' + hidden + data-ol-clear-search + aria-label=translate('clear_search') + ) + +material-symbol('clear') .row(role='region' aria-label='search results') - .col-md-12 + .col-12 div(data-ol-search-results-wrapper) span.visually-hidden(aria-live='polite' data-ol-search-sr-help-message) div(data-ol-search-results) - .row-spaced-small.search-result.card.card-thin( - hidden - data-ol-search-no-results - ) - p #{translate("no_search_results")} + .row-spaced-small.search-result.card(hidden data-ol-search-no-results) + .card-body + p #{translate("no_search_results")} diff --git a/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug b/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug index cc3fe756f2..d668ce2b8a 100644 --- a/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug +++ b/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug @@ -4,7 +4,7 @@ mixin reconfirmAffiliationNotification-marketing(userEmail, location) - var ssoEnabled = userEmail.affiliation && userEmail.affiliation.institution && userEmail.affiliation.institution.ssoEnabled if ssoEnabled - var institutionId = userEmail.affiliation && userEmail.affiliation.institution && userEmail.affiliation.institution.id - a.btn-reconfirm.btn.btn-sm.btn-info( + a.btn-reconfirm.btn.btn-sm.btn-secondary( data-ol-slow-link href=`${settings.saml.ukamf.initPath}?university_id=${institutionId}&reconfirm=${location}` ) @@ -12,7 +12,10 @@ mixin reconfirmAffiliationNotification-marketing(userEmail, location) span(hidden data-ol-inflight='pending') #{translate("pending")}… else - a.btn-reconfirm.btn.btn-sm.btn-info(data-ol-slow-link href='/user/settings') + a.btn-reconfirm.btn.btn-sm.btn-secondary( + data-ol-slow-link + href='/user/settings' + ) span(data-ol-inflight='idle') #{translate("go_to_account_settings")} span(hidden data-ol-inflight='pending') #{translate("redirecting")}… diff --git a/services/web/frontend/js/features/faq-search/index.js b/services/web/frontend/js/features/faq-search/index.js index 1ddf26beb4..f9e5195058 100644 --- a/services/web/frontend/js/features/faq-search/index.js +++ b/services/web/frontend/js/features/faq-search/index.js @@ -2,7 +2,7 @@ import _ from 'lodash' import { formatWikiHit, searchWiki } from '../algolia-search/search-wiki' function setupSearch(formEl) { - const inputEl = formEl.querySelector('input[type="search"]') + const inputEl = formEl.querySelector('[data-ol-search-input]') const resultsEl = formEl.querySelector('[data-ol-search-results]') const wrapperEl = formEl.querySelector('[data-ol-search-results-wrapper]') const noResultsEl = formEl.querySelector('[data-ol-search-no-results]') @@ -55,20 +55,26 @@ function setupSearch(formEl) { for (const hit of hits) { const { url, pageName, content } = formatWikiHit(hit) const linkEl = document.createElement('a') - linkEl.className = 'search-result card card-thin' + linkEl.className = 'search-result card' linkEl.href = url + const cardBodyEl = document.createElement('div') + cardBodyEl.className = 'card-body' + const headerEl = document.createElement('span') + headerEl.className = 'search-result-header' headerEl.innerHTML = pageName - linkEl.append(headerEl) + cardBodyEl.append(headerEl) if (content) { const contentEl = document.createElement('div') contentEl.className = 'search-result-content' contentEl.innerHTML = content - linkEl.append(contentEl) + cardBodyEl.append(contentEl) } + linkEl.append(cardBodyEl) + resultsEl.append(linkEl) } showResultsPane() diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss index 1efb360402..ad0ba4ad02 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss @@ -55,3 +55,5 @@ @import 'add-secondary-email-prompt'; @import 'try-premium'; @import 'bonus'; +@import 'portals'; +@import 'wiki'; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/portals.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/portals.scss new file mode 100644 index 0000000000..814b0b36c7 --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/portals.scss @@ -0,0 +1,232 @@ +.content-portal { + --link-color: var(--link-web); + --link-hover-color: var(--link-web-hover); + --link-visited-color: var(--link-web-visited); + --link-text-decoration: none; + --link-hover-text-decoration: underline; + + $btn-portal-width: 200px; + + padding-top: $header-height !important; + + .join-rider { + // previously in bs3 this was a calculated var ~= 12.5px + margin-top: var(--line-height-01); + } + + /* + Begin Header + */ + .banner-image { + background-size: cover; + background-position: 50% 50%; + background-repeat: no-repeat; + height: 375px; + } + + .image-fill { + display: inline-block; + height: 100%; + vertical-align: middle; + } + + .institution-logo { + left: 50%; + margin-left: -100px; + padding: 0; + position: absolute; + + div { + background-color: var(--white); + box-shadow: 1px 11px 22px -9px rgb(0 0 0 / 80%); + display: inline-block; + height: 125px; + overflow: hidden; + position: absolute; + text-align: center; + top: -110px; + white-space: nowrap; + width: $btn-portal-width; + } + + img { + max-height: 75px; + max-width: 150px; + vertical-align: middle; + } + } + + .portal-name { + background-color: var(--neutral-10); + padding-bottom: var(--line-height-03); // center header when no tabs + padding-top: var(--spacing-07); + text-align: center; + width: 100%; + } + + // End Header + + /* + Begin Layout + */ + .button-pull, + .content-pull { + float: left; + } + + .button-pull { + text-align: right; + + > a.btn { + white-space: normal; + width: $btn-portal-width; + text-align: center; + } + } + + .content-pull { + padding-right: var(--spacing-05); + width: calc(100% - #{$btn-portal-width}); + } + + // End Layout + + /* + Begin Card + */ + .card { + margin-bottom: var(--spacing-07); + } + + // End Card + + /* + Begin Actions + */ + .portal-actions { + i { + margin-bottom: var(--spacing-05); + } + } + + // End Actions + + /* + Begin Print + */ + @media print and (color) { + .basic-metrics { + margin-bottom: 50px; /* get Departments header on next page */ + } + + .container { + width: auto; + } + + .custom-donut-container svg { + max-width: 570px; /* safe width for printing */ + } + + .hidden-print { + display: none; + } + + .portal-col { + /* for firefox */ + margin: 0; + width: 100%; + } + + .portal-name { + padding: 0; + } + + .visible-print { + display: block !important; + } + } + + // End Print + + .nav-tabs { + background-color: var(--neutral-10); + } + + @include media-breakpoint-down(sm) { + .content-pull { + padding: 0; + width: auto; + } + + .button-pull { + > a.btn { + width: auto; + } + } + } +} + +.portal-share-icon { + color: var(--green-70); + font-size: 32px; +} + +/* + IEEE Portal page + Adapted from main-ieee-style.less +*/ + +$ieee-wedge: 30px; +$ieee-blue: #00629b; +$ieee-dark-blue: #002855; + +body > .portal-ieee { + padding-top: $header-height; +} + +.portal-ieee { + .ieee-header { + background-color: $ieee-blue; + margin-bottom: var(--spacing-10); + padding-bottom: var(--spacing-05); + padding-top: var(--spacing-05); + + h1 { + margin: 0; + } + + .ieee-logo { + width: var(--navbar-brand-width); + } + } + + .ieee-subheader { + background-color: $ieee-blue; + color: #fff; + line-height: 1; + padding: var(--spacing-07) $ieee-wedge; + position: relative; + + &::after { + content: ''; + display: block; + position: absolute; + border-style: solid; + left: -1px; + top: -1px; + border-color: var(--neutral-10) transparent; + border-width: $ieee-wedge $ieee-wedge 0 0; + } + } +} + +.btn { + &.btn-ieee { + @include ol-button-variant( + $color: var(--content-primary-dark), + $background: $ieee-blue, + $hover-background: $ieee-dark-blue, + $hover-border: $ieee-dark-blue + ); + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss index 15d885400c..881b294158 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss @@ -1,3 +1,7 @@ +.gallery-page { + padding-top: calc($header-height + var(--spacing-10)) !important; +} + .gallery.gallery-tagged { .gallery-title { display: block; @@ -21,8 +25,6 @@ } .gallery { - padding-top: calc($header-height + var(--spacing-10)) !important; - .gallery-tagged-tags-container-spacing { padding: 0 var(--spacing-09); margin-bottom: var(--spacing-16); diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/wiki.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/wiki.scss new file mode 100644 index 0000000000..11243da56f --- /dev/null +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/wiki.scss @@ -0,0 +1,307 @@ +.wiki { + --link-color: var(--link-web); + --link-hover-color: var(--link-web-hover); + --link-visited-color: var(--link-web-visited); + --link-text-decoration: none; + --link-hover-text-decoration: underline; + + .contents { + ul { + padding: 0; + + li { + font-size: var(--font-size-02); + list-style: none; + margin-bottom: var(--spacing-03); + } + } + + h2 { + font-size: 18px; + } + } + + .page-header { + a { + @include body-xs; + } + } + + .editsection { + display: none; + } + + .toctogglespan { + display: none; + } + + .toc { + ul { + list-style: none; + + .tocnumber::after { + content: '.'; + } + } + } + + table { + th, + td { + padding: var(--spacing-03) var(--spacing-05); + border-bottom: 1px solid var(--neutral-30); + } + + th { + font-weight: 700; + text-align: left; + font-family: $font-family-serif; + } + + margin-bottom: var(--spacing-03); + } + + .table-no-borders { + th, + td { + border: 0; + } + } + + .example { + max-width: 100%; + + .code { + pre { + background-color: var(--neutral-10); + border-radius: var(--border-radius-base); + padding: var(--spacing-03); + white-space: pre-wrap; + margin: 0; + } + } + + .output { + text-align: center; + padding-top: var(--spacing-05); + + img { + width: auto; + height: auto; + max-width: 100%; + box-shadow: 0 1px 3px var(--neutral-30); + border-radius: var(--border-radius-base); + } + } + } + + @include media-breakpoint-up(xxl) { + .example { + margin-right: -200px; + } + } + + @include media-breakpoint-down(md) { + .contents { + margin-top: var(--spacing-09); + } + } + + /* stylelint-disable */ + + /**/ + /* stylelint-enable */ + + a.search-result { + display: block; + margin-top: var(--spacing-05); + text-decoration: none; + + .search-result-header { + color: var(--link-color); + } + + .search-result-content { + margin-top: var(--spacing-05); + white-space: pre-wrap; + font-size: 0.8em; + color: var(--neutral-70); + + em { + font-weight: bold; + } + } + + &:hover, + &:active, + &:focus { + text-decoration: none; + + .search-result-content { + color: var(--neutral-90); + } + + box-shadow: 0 2px 4px rgb(0 0 0 / 35%); + } + } + + /* Keep the below rules in sync with the wiki pages */ + img { + height: auto; + max-width: 100%; + } + + img.add-vertical-space { + padding-bottom: 20px; + padding-top: 20px; + } + + th.no-wrap { + white-space: nowrap; + text-align: left; + } + + /* stylelint-disable selector-class-pattern */ + + /* LATEX and TEX artwork */ + span.TEX { + letter-spacing: -0.125em; + padding-right: 0.5ex; + } + + span.TEX span.E { + position: relative; + top: 0.5ex; + padding-right: 0.1ex; + } + + a span.TEX span.E { + text-decoration: none; + } + + span.LATEX span.A { + position: relative; + top: -0.5ex; + left: -0.4em; + font-size: 75%; + } + + span.LATEX span.TEX { + position: relative; + left: -0.4em; + margin-right: -0.5ex; + } + /* stylelint-enable selector-class-pattern */ +}