Migrate portals and learn wiki to BS5 (#26852)

* Convert and add portals and learn wiki .less to .scss

* Convert learn wiki to BS5 and update search JS

* Convert portals to BS5

* Move gallery page padding to seperate class, to avoid forcing padding to the gallery included on portal pages

---------

Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
GitOrigin-RevId: 3a93d56280ccdcf7fb1837511a3efe54b2efd428

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")}

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")}… 
 

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()

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';

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
+    );
+  }
+}

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);

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 */
+
+  /*<![CDATA[*/
+  .source-latex {
+    line-height: normal;
+  }
+  .source-latex li,
+  .source-latex pre {
+    line-height: normal;
+    border: 0px none white;
+  }
+  /**
+	 * GeSHi Dynamically Generated Stylesheet
+	 * --------------------------------------
+	 * Dynamically generated stylesheet for latex
+	 * CSS class: source-latex, CSS id:
+	 * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann
+	 * (http://qbnz.com/highlighter/ and http://geshi.org/)
+	 * --------------------------------------
+	 */
+  .latex.source-latex .imp {
+    font-weight: bold;
+    color: red;
+  }
+  .latex.source-latex li,
+  .latex.source-latex .li1 {
+    font-weight: normal;
+    vertical-align: top;
+  }
+  .latex.source-latex .ln {
+    width: 1px;
+    text-align: right;
+    margin: 0;
+    padding: 0 2px;
+    vertical-align: top;
+  }
+  .latex.source-latex .li2 {
+    font-weight: bold;
+    vertical-align: top;
+  }
+  .latex.source-latex .kw1 {
+    color: #800000;
+  }
+  .latex.source-latex .co1 {
+    color: #2c922c;
+    font-style: italic;
+  }
+  .latex.source-latex .es0 {
+    color: #000000;
+    font-weight: bold;
+  }
+  .latex.source-latex .sy0 {
+    color: #e02020;
+  }
+  .latex.source-latex .st0 {
+    color: #000000;
+  }
+  .latex.source-latex .re1 {
+    color: #8020e0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re2 {
+    color: #c08020;
+    font-weight: normal;
+  }
+  .latex.source-latex .re3 {
+    color: #8020e0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re4 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re5 {
+    color: #00008b;
+    font-weight: bold;
+  }
+  .latex.source-latex .re6 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re7 {
+    color: #0000d0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re8 {
+    color: #c00000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re9 {
+    color: #2020c0;
+    font-weight: normal;
+  }
+  .latex.source-latex .re10 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re11 {
+    color: #e00000;
+    font-weight: normal;
+  }
+  .latex.source-latex .re12 {
+    color: #800000;
+    font-weight: normal;
+  }
+  .latex.source-latex .ln-xtra,
+  .latex.source-latex li.ln-xtra,
+  .latex.source-latex div.ln-xtra {
+    background-color: #ffc;
+  }
+  .latex.source-latex span.xtra {
+    display: block;
+  }
+
+  /*]]>*/
+  /* 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 */
+}