diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx
index 49913d40cf..361a3afbdb 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/fat-footer.tsx
@@ -1,7 +1,6 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import FatFooterBase from './fat-footer-base'
-import { FatFooterMetadata } from '../../types/fat-footer-metadata'
type FooterLinkProps = {
href: string
@@ -13,7 +12,7 @@ type FooterSectionProps = {
links: FooterLinkProps[]
}
-function FatFooter(props: FatFooterMetadata) {
+function FatFooter() {
const { t } = useTranslation()
const hideFatFooter = false
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/footer.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/footer.tsx
new file mode 100644
index 0000000000..f3a0479f90
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/footer.tsx
@@ -0,0 +1,9 @@
+import { FooterMetadata } from '@/features/ui/components/types/footer-metadata'
+import ThinFooter from '@/features/ui/components/bootstrap-5/footer/thin-footer'
+import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer'
+
+function Footer(props: FooterMetadata) {
+ return props.showThinFooter ?
:
+}
+
+export default Footer
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/footer/thin-footer.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/thin-footer.tsx
new file mode 100644
index 0000000000..11c84aaf1a
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/footer/thin-footer.tsx
@@ -0,0 +1,90 @@
+import type {
+ FooterItem,
+ FooterMetadata,
+} from '@/features/ui/components/types/footer-metadata'
+import OLRow from '@/features/ui/components/ol/ol-row'
+import LanguagePicker from '@/features/ui/components/bootstrap-5/language-picker'
+import React from 'react'
+
+function FooterItemLi({
+ text,
+ translatedText,
+ url: href,
+ class: className,
+ label,
+}: FooterItem) {
+ const textToDisplay = translatedText || text
+
+ if (!href) {
+ return
{textToDisplay}
+ }
+
+ const linkProps = {
+ href,
+ className,
+ 'aria-label': label,
+ }
+
+ return (
+
+
+
+ )
+}
+
+function Separator() {
+ return (
+
+ |
+
+ )
+}
+
+function ThinFooter({
+ showPoweredBy,
+ subdomainLang,
+ leftItems,
+ rightItems,
+}: FooterMetadata) {
+ const showLanguagePicker = Boolean(
+ subdomainLang && Object.keys(subdomainLang).length > 1
+ )
+
+ const hasCustomLeftNav = Boolean(leftItems && leftItems.length > 0)
+
+ return (
+
+ )
+}
+
+export default ThinFooter
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
index 9827648da3..0ae53c807c 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/language-picker.tsx
@@ -4,12 +4,13 @@ import {
DropdownItem,
DropdownMenu,
DropdownToggle,
+ DropdownHeader,
} from './dropdown-menu'
import { useTranslation } from 'react-i18next'
import getMeta from '@/utils/meta'
-import Icon from '@/shared/components/icon'
+import MaterialIcon from '@/shared/components/material-icon'
-function LanguagePicker() {
+function LanguagePicker({ showHeader } = { showHeader: false }) {
const { t } = useTranslation()
const currentLangCode = getMeta('ol-i18n').currentLangCode
@@ -26,18 +27,18 @@ function LanguagePicker() {
className="btn-inline-link"
variant="link"
>
-
- {translatedLanguages?.[currentLangCode]}
+
+
+
+ {translatedLanguages?.[currentLangCode]}
+
+ {showHeader ? {t('language')} : null}
{subdomainLang &&
Object.entries(subdomainLang).map(([subdomain, subdomainDetails]) => {
if (
diff --git a/services/web/frontend/js/features/ui/components/types/fat-footer-metadata.ts b/services/web/frontend/js/features/ui/components/types/fat-footer-metadata.ts
deleted file mode 100644
index 1d695f91d2..0000000000
--- a/services/web/frontend/js/features/ui/components/types/fat-footer-metadata.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { SubdomainLang } from '@/features/ui/components/types/fat-footer'
-
-export type FatFooterMetadata = {
- subdomainLang?: SubdomainLang
- translatedLanguages: { [key: string]: string }
- currentLangCode: string
-}
diff --git a/services/web/frontend/js/features/ui/components/types/footer-metadata.ts b/services/web/frontend/js/features/ui/components/types/footer-metadata.ts
new file mode 100644
index 0000000000..6f0dbb40a1
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/types/footer-metadata.ts
@@ -0,0 +1,18 @@
+import type { SubdomainLang } from '@/features/ui/components/types/fat-footer'
+
+export type FooterItem = {
+ text: string
+ translatedText?: string
+ url?: string
+ class?: string
+ label?: string
+}
+
+export type FooterMetadata = {
+ showThinFooter: boolean
+ translatedLanguages: { [key: string]: string }
+ showPoweredBy?: boolean
+ subdomainLang?: SubdomainLang
+ leftItems?: FooterItem[]
+ rightItems?: FooterItem[]
+}
diff --git a/services/web/frontend/js/utils/meta.ts b/services/web/frontend/js/utils/meta.ts
index 3516969ece..09df91cdef 100644
--- a/services/web/frontend/js/utils/meta.ts
+++ b/services/web/frontend/js/utils/meta.ts
@@ -49,7 +49,7 @@ import { ThirdPartyIds } from '../../../types/third-party-ids'
import { Publisher } from '../../../types/subscription/dashboard/publisher'
import { SubscriptionChangePreview } from '../../../types/subscription/subscription-change-preview'
import { DefaultNavbarMetadata } from '@/features/ui/components/types/default-navbar-metadata'
-import { FatFooterMetadata } from '@/features/ui/components/types/fat-footer-metadata'
+import { FooterMetadata } from '@/features/ui/components/types/footer-metadata'
export interface Meta {
'ol-ExposedSettings': ExposedSettings
'ol-allInReconfirmNotificationPeriods': UserEmailData[]
@@ -89,7 +89,7 @@ export interface Meta {
'ol-error': { name: string } | undefined
'ol-expired': boolean
'ol-features': Features
- 'ol-footer': FatFooterMetadata
+ 'ol-footer': FooterMetadata
'ol-fromPlansPage': boolean
'ol-galleryTagName': string
'ol-gitBridgeEnabled': boolean
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss
index 8e24f4c800..109cf7cb6c 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss
@@ -1,10 +1,14 @@
-// Footer
-$footer-height: 50px;
-
// Header
$header-height: 68px;
$toolbar-height: 40px;
$toolbar-small-height: 32px;
+// Footer
+$thin-footer-height: 50px;
+$fat-footer-content-height: calc(100vh - $header-height);
+$thin-footer-content-height: calc(
+ 100vh - ($header-height + $thin-footer-height)
+);
+
// List of allowed themes
$themes: ('default', 'light');
diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss b/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss
index 268cb8cff4..211f384d61 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss
@@ -1,7 +1,15 @@
+body {
+ position: relative;
+}
+
.content {
min-height: 100vh;
padding-top: $header-height + $spacing-08;
padding-bottom: $spacing-08;
+
+ .thin-footer & {
+ min-height: calc(100vh - #{$thin-footer-height});
+ }
}
.content-alt {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
index 7f5d390c0b..dc20dea1d3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
@@ -8,11 +8,13 @@
--link-color-dark: var(--link-ui-dark);
--link-hover-color-dark: var(--link-ui-hover-dark);
--link-visited-color-dark: var(--link-ui-visited-dark);
+ --link-text-decoration: underline;
--link-hover-text-decoration: none;
}
a {
color: var(--link-color);
+ text-decoration: var(--link-text-decoration);
&:visited {
color: var(--link-visited-color);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
index f1ab5477da..3b782ed1f8 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
@@ -137,7 +137,7 @@
// Make a button look and behave like a link
.btn-link {
- color: var(--link-ui);
+ color: var(--link-color);
font-weight: normal;
cursor: pointer;
text-decoration: underline;
@@ -156,7 +156,7 @@
&:hover,
&:focus {
- color: var(--link-ui-hover);
+ color: var(--link-hover-color);
text-decoration: none;
background-color: transparent;
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
index f312630bef..93491f0fbd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
@@ -1,3 +1,5 @@
+$dropdown-item-min-height: 36px;
+
.dropdown {
display: inline-flex;
@@ -20,6 +22,9 @@
.dropdown-header {
@include body-xs;
+ display: flex;
+ align-items: center;
+ min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
padding: var(--spacing-05) var(--spacing-06) var(--spacing-02)
var(--spacing-04);
}
@@ -55,7 +60,7 @@
display: grid;
grid-auto-flow: column;
place-content: center start;
- min-height: 36px; // a minimum height of 36px to be accessible for touch screens
+ min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
position: relative;
&:active {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
index 4c72cd283c..3f6b829a37 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
@@ -56,56 +56,33 @@ $footer-width-delta: 320px;
}
footer.site-footer {
+ --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;
+
background-color: var(--bg-light-primary);
border-top: 1px solid var(--border-primary-dark);
- position: absolute;
- bottom: 0;
- width: 100%;
@include body-sm;
- height: $footer-height;
+ min-height: $thin-footer-height;
+ line-height: $thin-footer-height - 1; // Hack — in Chrome, using the full $footer-height would generate vertical scrolling
- ul {
+ ul.site-footer-items {
list-style: none;
- margin: var(--spacing-00);
+ margin: 0;
- li {
+ > li {
display: inline-block;
- margin: var(--spacing-07) var(--spacing-04);
+ margin: 0 var(--spacing-04);
}
i {
font-size: var(--font-size-05);
}
}
-
- li.lng-option {
- text-align: left;
- display: list-item;
-
- img {
- vertical-align: text-bottom;
- }
-
- a:hover,
- a:focus {
- color: var(--content-primary-dark);
-
- &:visited {
- color: var(--content-primary-dark);
- }
- }
- }
-
- a {
- color: var(--content-secondary-dark);
-
- &:hover,
- &:focus {
- color: var(--content-secondary-dark);
- }
- }
}
.site-footer-content {
@@ -117,7 +94,44 @@ footer.site-footer {
vertical-align: middle;
}
+#language-picker-toggle {
+ text-decoration: none;
+ cursor: pointer;
+
+ &::after {
+ display: none;
+ }
+
+ &:hover {
+ .language-picker-text {
+ text-decoration: var(--link-hover-text-decoration);
+ }
+ }
+
+ .material-symbols {
+ vertical-align: -0.1875rem;
+ }
+}
+
+.language-picker .dropdown-menu {
+ .dropdown-item {
+ &.active {
+ color: var(--green-70);
+ }
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
+
.fat-footer {
+ --link-color: var(--content-secondary-dark);
+ --link-hover-color: var(--content-secondary-dark);
+ --link-visited-color: var(--content-secondary-dark);
+ --link-text-decoration: none;
+ --link-hover-text-decoration: underline;
+
container-name: fatfooter;
container-type: inline-size;
background: var(--bg-dark-primary);
@@ -133,20 +147,6 @@ footer.site-footer {
}
}
- a {
- color: var(--content-secondary-dark);
- text-decoration: none;
-
- &:hover {
- color: var(--content-secondary-dark);
- text-decoration: underline;
- }
-
- &:visited {
- color: var(--content-secondary-dark);
- }
- }
-
.footer-brand-container {
flex: 1;
}
@@ -196,16 +196,6 @@ footer.site-footer {
#language-picker-toggle {
color: var(--content-secondary-dark);
- cursor: pointer;
- text-decoration: none;
-
- &::after {
- display: none;
- }
-
- &:hover {
- text-decoration: underline;
- }
}
.fat-footer-base-meta a:not(.dropdown-toggle) {
@@ -216,16 +206,6 @@ footer.site-footer {
.dropdown-header {
display: none; /* hiding rather than removing as still needed in the thin footer */
}
-
- .dropdown-item {
- &.active {
- color: var(--green-70);
- }
-
- &:hover {
- text-decoration: none;
- }
- }
}
}
@@ -406,17 +386,13 @@ footer.site-footer {
}
&.fat-footer {
+ --link-color: var(--content-primary);
+ --link-hover-color: var(--content-primary);
+ --link-visited-color: var(--content-primary);
+
background: var(--content-primary-dark);
color: var(--content-primary);
- a {
- color: var(--content-primary);
-
- &:visited {
- color: var(--content-primary);
- }
- }
-
.footer-section-heading {
color: var(--content-primary);
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
index 92d0db7b62..caa4437773 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-default.scss
@@ -1,24 +1,30 @@
.project-list-react {
+ --project-list-content-height: #{$fat-footer-content-height};
+
#project-list-root > &.content {
padding-top: $header-height;
padding-bottom: 0;
- min-height: calc(100vh - #{$header-height});
+ min-height: var(--project-list-content-height);
display: flex;
flex-direction: column;
+
+ .thin-footer & {
+ --project-list-content-height: #{$thin-footer-content-height};
+ }
}
.project-list-wrapper {
display: flex;
align-items: stretch;
width: 100%;
- min-height: calc(100vh - #{$header-height});
+ min-height: var(--project-list-content-height);
}
.project-list-sidebar-wrapper-react {
position: relative;
background-color: var(--bg-dark-secondary);
flex: 0 0 15%;
- min-height: calc(100vh - #{$header-height});
+ min-height: var(--project-list-content-height);
max-width: 320px;
min-width: 200px;
@@ -121,7 +127,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
- min-height: calc(100vh - #{$header-height});
+ min-height: var(--project-list-content-height);
.loading-screen-brand-container {
margin: 0 auto;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index 4ca5d50df2..a23189d688 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -579,18 +579,6 @@
}
}
}
-
- .loading-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- min-height: calc(100vh - #{$header-height});
-
- .loading-screen-brand-container {
- margin: 0 auto;
- }
- }
}
.current-plan {
diff --git a/services/web/test/frontend/components/shared/language-picker.spec.tsx b/services/web/test/frontend/components/shared/language-picker.spec.tsx
index 867fc8e612..b681a1086c 100644
--- a/services/web/test/frontend/components/shared/language-picker.spec.tsx
+++ b/services/web/test/frontend/components/shared/language-picker.spec.tsx
@@ -10,6 +10,7 @@ describe('LanguagePicker', function () {
currentLangCode: 'en',
})
window.metaAttributesCache.set('ol-footer', {
+ showThinFooter: false,
translatedLanguages: {
en: 'English',
fr: 'Français',
@@ -26,12 +27,12 @@ describe('LanguagePicker', function () {
})
it('renders the language picker with the current language', function () {
- cy.mount()
+ cy.mount()
cy.get('#language-picker-toggle').should('contain', 'English')
})
it('opens the dropdown and lists available languages', function () {
- cy.mount()
+ cy.mount()
cy.get('#language-picker-toggle').click()
cy.get('.dropdown-menu').within(() => {
@@ -42,7 +43,7 @@ describe('LanguagePicker', function () {
})
it('changes the language and updates the URL when a language is selected', function () {
- cy.mount()
+ cy.mount()
cy.get('#language-picker-toggle').should('exist').click()
cy.contains('Français').click()
cy.url().should('include', 'fr.overleaf.com')
diff --git a/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx b/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
index b01e86b426..2c5e3f6dc7 100644
--- a/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/project-list-root.test.tsx
@@ -55,6 +55,7 @@ describe('', function () {
window.metaAttributesCache.set('ol-user', {})
window.metaAttributesCache.set('ol-user_id', userId)
window.metaAttributesCache.set('ol-footer', {
+ showThinFooter: false,
translatedLanguages: { en: 'English' },
subdomainLang: { en: { lngCode: 'en', url: 'overleaf.com' } },
})
diff --git a/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx b/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx
index 44bc7e0fed..5a301a3200 100644
--- a/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/table/project-tools/project-tools-rename.test.tsx
@@ -65,6 +65,7 @@ describe('', function () {
})
window.metaAttributesCache.set('ol-footer', {
+ showThinFooter: false,
translatedLanguages: { en: 'English' },
subdomainLang: { en: { lngCode: 'en', url: 'overleaf.com' } },
})