agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Migrate portals and learn wiki to BS5 (#26852)

Browse Source 
* 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
This commit is contained in:
Thomas
2025-07-24 15:43:09 +02:00
committed by Copybot
parent 898cdb00e1
commit ff4cf89fea
7 changed files with 585 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
services/web/app/views/_mixins/faq_search-marketing.pug
View File

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

7
services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug
View File

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

14
services/web/frontend/js/features/faq-search/index.js
View File

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

2
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
View File

@@ -55,3 +55,5 @@
@import 'add-secondary-email-prompt';
@import 'try-premium';
@import 'bonus';
@import 'portals';
@import 'wiki';

232
services/web/frontend/stylesheets/bootstrap-5/pages/portals.scss Normal file
View File

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

6
services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
View File

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

307
services/web/frontend/stylesheets/bootstrap-5/pages/wiki.scss Normal file
View File

@@ -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 */
}