github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16254 from overleaf/tm-website-redesign-navbar-footer-base

Browse source 
Implement navbar and footer changes for website redesign, and for existing pages for treatment users

GitOrigin-RevId: d91328e3928bc0e249e19eff34c6f9423784ccbf
This commit is contained in:
Thomas 2023-12-15 16:43:40 +01:00 committed by Copybot
parent ede42bb016
commit abd2974469
9 changed files with 223 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
services/web/app/views/layout/fat-footer-website-redesign.pug
View file

@ -1,4 +1,4 @@
footer.fat-footer.hidden-print.website-redesign
footer.fat-footer.hidden-print.website-redesign-fat-footer
.fat-footer-container(role="navigation" aria-label=translate('footer_navigation'))
.fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined)
.footer-section#footer-brand
@ -45,7 +45,7 @@ footer.fat-footer.hidden-print.website-redesign
li
a(href="/user/subscription/plans?itm_referrer=footer-for-indv-groups") !{translate('for_individuals_and_groups')}
li
a(href="/for/enterprises") #{translate('for_enterprise')}
a(href="/for/enterprises") #{translate('for_business')}
li
a(href="/for/universities") #{translate('for_universities')}
li
@ -69,6 +69,8 @@ footer.fat-footer.hidden-print.website-redesign
h2.footer-section-heading #{translate('help')}
ul.list-unstyled
li
a(href="/about/why-latex") #{translate('why_latex')}
li
a(href="/learn") #{translate('Documentation')}
li

5
services/web/app/views/layout/fat-footer.pug
View file

@ -1,3 +1,5 @@
- var websiteRedesignActive = splitTestVariants && (splitTestVariants['website-redesign'] === 'new-design' || splitTestVariants['website-redesign'] === 'new-design-registration')
footer.fat-footer.hidden-print
.fat-footer-container(role="navigation" aria-label=translate('footer_navigation'))
.fat-footer-sections(class=hideFatFooter ? 'hidden' : undefined)
@ -69,6 +71,9 @@ footer.fat-footer.hidden-print
h2.footer-section-heading #{translate('help')}
ul.list-unstyled
if websiteRedesignActive
li
a(href="/about/why-latex") #{translate('why_latex')}
li
a(href="/learn") #{translate('Documentation')}
li

29
services/web/app/views/layout/navbar-marketing.pug
View file

@ -1,3 +1,5 @@
- var websiteRedesignActive = splitTestVariants && (splitTestVariants['website-redesign'] === 'new-design' || splitTestVariants['website-redesign'] === 'new-design-registration')
nav.navbar.navbar-default.navbar-main
.container-fluid
.navbar-header
@ -64,7 +66,8 @@ nav.navbar.navbar-default.navbar-main
a(href="/admin/survey") Manage Surveys
// loop over header_extras
each item in nav.header_extras
- var headerExtras = websiteRedesignActive ? nav.header_extras_website_redesign : nav.header_extras
each item in headerExtras
-
if ((item.only_when_logged_in && getSessionUser())
|| (item.only_when_logged_out && (!getSessionUser()))
@ -127,6 +130,17 @@ nav.navbar.navbar-default.navbar-main
if !getSessionUser()
// register link
if hasFeature('registration-page')
if websiteRedesignActive
li.primary
a(
href="/register"
event-tracking="menu-clicked-register"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('sign_up')}
else
li
a(
href="/register"
@ -135,9 +149,20 @@ nav.navbar.navbar-default.navbar-main
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('register')}
) #{translate('Register')}
// login link
if websiteRedesignActive
li
a(
href="/login"
event-tracking="menu-clicked-login"
event-tracking-action="clicked"
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('log_in')}
else
li
a(
href="/login"

14
services/web/app/views/layout/navbar-website-redesign.pug
View file

@ -1,4 +1,4 @@
nav.navbar.navbar-default.navbar-main.website-redesign
nav.navbar.navbar-default.navbar-main.website-redesign-navbar
.container-fluid
.navbar-header
if (typeof(suppressNavbarRight) == "undefined")
@ -64,7 +64,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign
a(href="/admin/survey") Manage Surveys
// loop over header_extras
each item in nav.header_extras
each item in nav.header_extras_website_redesign
-
if ((item.only_when_logged_in && getSessionUser())
|| (item.only_when_logged_out && (!getSessionUser()))
@ -127,7 +127,7 @@ nav.navbar.navbar-default.navbar-main.website-redesign
if !getSessionUser()
// register link
if hasFeature('registration-page')
li
li.primary
a(
href="/register"
event-tracking="menu-clicked-register"
@ -135,10 +135,10 @@ nav.navbar.navbar-default.navbar-main.website-redesign
event-tracking-trigger="click"
event-tracking-mb="true"
event-segmentation={ page: currentUrl }
) #{translate('register')}
) #{translate('sign_up')}
// login link
li
li.secondary
a(
href="/login"
event-tracking="menu-clicked-login"
@ -150,9 +150,9 @@ nav.navbar.navbar-default.navbar-main.website-redesign
// projects link and account menu
if getSessionUser()
li
li.secondary
a(href="/project") #{translate('Projects')}
li.dropdown
li.secondary.dropdown
a.dropdown-toggle(
href="#",
role="button",

21
services/web/frontend/stylesheets/components/footer.less
View file

@ -298,7 +298,7 @@ footer.site-footer {
}
}
.website-redesign {
.website-redesign-fat-footer {
&.fat-footer {
background: @white;
color: @neutral-90;
@ -306,9 +306,28 @@ footer.site-footer {
a {
color: @neutral-90;
}
.footer-section-heading {
color: @neutral-90;
}
h2 {
font-weight: 400;
}
.fat-footer-base {
color: @neutral-90;
}
}
.footer-brand {
background-image: @navbar-brand-image-url-website-redesign;
}
@media (max-width: @screen-xs-max) {
.fat-footer-sections {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, auto);
}
}
}

152
services/web/frontend/stylesheets/components/navbar.less
View file

@ -488,6 +488,16 @@
}
}
> li.primary > a {
.btn-borderless();
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
}
@media (min-width: @grid-float-breakpoint) {
> li > a {
border-color: @navbar-default-link-border-color;
@ -615,7 +625,7 @@
}
}
.website-redesign {
.website-redesign-navbar {
&.navbar-default {
background-color: @navbar-default-bg-website-redesign;
@ -627,36 +637,23 @@
color: @navbar-default-color-website-redesign;
}
// There is this -15px margin hack that is needed on the original
// This causes inconsistency with the website redesign navbar,
// so reset it to 0 for now
@media (min-width: @grid-float-breakpoint) {
.navbar-right:last-child {
margin-right: 0;
}
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color-website-redesign;
// border: 2px solid transparent;
font-size: @navbar-btn-font-size; // TODO
font-weight: @navbar-btn-font-weight; // TODO
line-height: @navbar-btn-line-height; // TODO
background-color: @navbar-default-link-bg; // TODO
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg; // TODO
// border: 2px solid @navbar-default-link-hover-color; // TODO
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color; // TODO
background-color: @navbar-default-link-active-bg; // TODO
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color; // TODO
background-color: @navbar-default-link-disabled-bg; // TODO
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-btn-border-radius;
padding: @navbar-btn-padding;
}
}
@ -674,6 +671,109 @@
padding: @navbar-subdued-padding;
}
}
> li.primary > a {
.btn-borderless();
}
> li.secondary > a {
.btn-bordered();
border-width: @border-radius-small;
border-color: transparent;
@media (min-width: @grid-float-breakpoint) {
border-color: @btn-bordered-border-color;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color-website-redesign;
color: @navbar-default-link-color-website-redesign;
&:hover,
&.active {
background-color: @navbar-default-toggle-hover-bg-website-redesign;
border-color: @navbar-default-toggle-hover-bg-website-redesign;
color: #fff;
}
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
background-color: @navbar-default-bg-website-redesign;
border-bottom: solid 1px @navbar-default-border;
}
// Dropdown menu items
.navbar-nav {
.dropdown-menu-button,
.dropdown-menu > li > a {
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @btn-secondary-hover-bg-color; // force secondary button style
color: @navbar-default-link-active-color-website-redesign;
}
}
> .open.subdued > a {
&,
&:hover,
&:focus {
color: @navbar-subdued-hover-color-website-redesign;
background-color: @navbar-subdued-hover-bg-website-redesign;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: darken(@navbar-default-bg-website-redesign, 5%);
> li > div.subdued {
color: mix(
@navbar-default-link-color-website-redesign,
@navbar-default-bg-website-redesign
);
}
> li > a,
> li > form > button {
// padding: 12px 12px 13px 30px;
color: @navbar-default-link-color-website-redesign;
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg-website-redesign;
}
}
> .active > a,
> .active > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color-website-redesign;
background-color: @navbar-default-link-active-bg-website-redesign;
}
}
> .disabled > a,
> .disabled > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color-website-redesign;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
}
}

10
services/web/frontend/stylesheets/variables/all.less
View file

@ -400,9 +400,13 @@
@navbar-default-link-border-color: @navbar-default-link-color;
@navbar-default-link-hover-color: @green;
@navbar-default-link-hover-bg: @green;
@navbar-default-link-hover-bg-website-redesign: @neutral-90;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-color-website-redesign: @neutral-90;
@navbar-default-link-active-bg: @green;
@navbar-default-link-active-bg-website-redesign: @neutral-90;
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-color-website-redesign: @neutral-80;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@ -412,7 +416,9 @@
// Navbar toggle
@navbar-default-toggle-hover-bg: @link-hover-color;
@navbar-default-toggle-hover-bg-website-redesign: @neutral-90;
@navbar-default-toggle-border-color: @link-color;
@navbar-default-toggle-border-color-website-redesign: @neutral-90;
//== Navs
//
@ -765,9 +771,9 @@
@navbar-subdued-hover-bg: #fff;
@navbar-subdued-hover-bg-website-redesign: @neutral-90;
@navbar-subdued-hover-color: @green;
@navbar-subdued-hover-color-website-redesign: @green; // TODO
@navbar-subdued-hover-color-website-redesign: #fff;
@navbar-brand-image-url: url(../../../public/img/ol-brand/overleaf-white.svg);
@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf.svg);
@navbar-brand-image-url-website-redesign: url(../../../public/img/ol-brand/overleaf-black.svg);
@dropdown-divider-margin: 6px;
@dropdown-item-padding: 4px 20px;

4
services/web/locales/en.json
View file

@ -609,6 +609,7 @@
"footer_navigation": "Footer navigation",
"footer_plans_and_pricing": "Plans & pricing",
"for_american_express": "For <0>American Express</0>, the <1>4 digits</1> on the <2>front</2> of your card.",
"for_business": "For business",
"for_enterprise": "For enterprise",
"for_enterprises": "For Enterprises",
"for_groups": "For Groups",
@ -620,6 +621,7 @@
"for_students_only": "For students only",
"for_teaching": "For Teaching",
"for_universities": "For Universities",
"for_universities_lowercase": "For universities",
"for_visa_mastercard_and_discover": "For <0>Visa, MasterCard and Discover</0>, the <1>3 digits</1> on the <2>back</2> of your card.",
"for_writing": "For Writing",
"forgot_your_password": "Forgot your password",
@ -1672,6 +1674,7 @@
"showing_x_out_of_n_projects": "Showing __x__ out of __n__ projects.",
"showing_x_results": "Showing __x__ results",
"showing_x_results_of_total": "Showing __x__ results of __total__",
"sign_up": "Sign up",
"sign_up_now": "Sign Up Now",
"signature_algorithm": "Signature Algorithm",
"single_sign_on_sso": "Single Sign-On (SSO)",
@ -2104,6 +2107,7 @@
"what_happens_when_sso_is_enabled": "What happens when SSO is enabled?",
"what_should_we_call_you": "What should we call you?",
"when_you_tick_the_include_caption_box": "When you tick the box “Include caption” the image will be inserted into your document with a placeholder caption. To edit it, you simply select the placeholder text and type to replace it with your own.",
"why_latex": "Why LaTeX?",
"wide": "Wide",
"will_need_to_log_out_from_and_in_with": "You will need to <b>log out</b> from your <b>__email1__</b> account and then log in with <b>__email2__</b>.",
"with_premium_subscription_you_also_get": "With an Overleaf Premium subscription you also get",

9
services/web/public/img/ol-brand/overleaf-black.svg Normal file
View file

@ -0,0 +1,9 @@
<svg width="129" height="38" viewBox="0 0 129 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_2579_355" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="72" height="38">
<path d="M71.7643 37.6327H0.0244141V0.0717773H71.7643V37.6327Z" fill="white"/>
</mask>
<g mask="url(#mask0_2579_355)">
<path d="M47.2509 26.4555C47.3948 27.7507 47.8985 28.7821 48.81 29.5257C49.6974 30.2692 50.8487 30.653 52.2638 30.653C53.1993 30.653 54.0387 30.4611 54.7823 30.0773C55.5258 29.6696 56.1255 29.1419 56.5572 28.4223H61.0664C60.2989 30.3891 59.1716 31.9002 57.6365 33.0035C56.1255 34.0829 54.3506 34.6345 52.3598 34.6345C51.0166 34.6345 49.7934 34.3947 48.666 33.915C47.5387 33.4352 46.5314 32.7397 45.6199 31.8043C44.7804 30.9168 44.1089 29.9094 43.6531 28.7341C43.1974 27.5589 42.9576 26.3836 42.9576 25.1603C42.9576 23.9131 43.1734 22.7138 43.6052 21.6105C44.0369 20.5072 44.6605 19.4998 45.5 18.6124C46.4114 17.629 47.4668 16.8854 48.6181 16.3817C49.7694 15.8541 50.9686 15.5902 52.1919 15.5902C53.7509 15.5902 55.214 15.95 56.5572 16.6456C57.9004 17.3651 59.0517 18.3485 60.0111 19.6437C60.5867 20.4113 61.0185 21.2747 61.3063 22.2581C61.5941 23.2175 61.714 24.3209 61.714 25.5681C61.714 25.664 61.714 25.8079 61.69 26.0238C61.69 26.2397 61.6661 26.3836 61.6661 26.4795H47.2509V26.4555ZM57.2048 23.1216C56.845 21.9223 56.2454 21.0109 55.4059 20.3873C54.5664 19.7637 53.4871 19.4519 52.2159 19.4519C51.0886 19.4519 50.1052 19.7876 49.2177 20.4592C48.3303 21.1308 47.7306 22.0183 47.4188 23.1216H57.2048ZM71.7638 19.7637C70.1328 19.8836 69.0055 20.3153 68.3579 21.0349C67.7103 21.7544 67.3985 23.0496 67.3985 24.9205V34.1068H63.2011V16.1179H67.1347V18.2046C67.7583 17.3891 68.4539 16.8135 69.2214 16.4297C69.9649 16.0459 70.8284 15.8541 71.7638 15.8541V19.7637ZM32.428 1.24705C27.3432 -0.743722 8.9465 -1.46328 8.92251 9.52196C3.54982 12.9519 0 18.5404 0 24.5367C0 31.7803 5.87638 37.6567 13.1199 37.6567C20.3635 37.6567 26.2399 31.7803 26.2399 24.5367C26.2399 18.9482 22.738 14.1511 17.797 12.2803C16.8376 11.9205 14.7749 11.2729 13.1439 11.4168C10.7934 12.9039 7.91513 15.974 6.57196 19.0441C8.58672 16.6216 11.7288 15.5662 14.5351 16.022C18.6365 16.6936 21.7786 20.2434 21.7786 24.5607C21.7786 29.3338 17.917 33.1954 13.1439 33.1954C10.5055 33.1954 8.15498 32.0201 6.57196 30.1733C4.19742 27.415 3.59779 24.4408 4.07749 21.5386C5.73247 11.3688 17.797 5.58838 26.7675 3.35775C23.8413 4.9168 18.5646 7.45923 14.8708 10.2175C25.6402 14.391 27.3911 5.30056 32.428 1.24705ZM36.7934 34.1308H33.5074L26.6716 16.1179H31.1328L35.3303 28.0865L39.6476 16.1179H43.9889L36.7934 34.1308Z" fill="#1B222C"/>
</g>
<path d="M83.6127 26.4556C83.7567 27.7508 84.2843 28.7822 85.1718 29.5257C86.0592 30.2692 87.2105 30.653 88.6257 30.653C89.5611 30.653 90.4006 30.4611 91.1441 30.0774C91.8877 29.6696 92.4873 29.1419 92.919 28.4224H97.4282C96.6607 30.3892 95.5334 31.9002 93.9984 33.0036C92.4873 34.0829 90.7124 34.6346 88.7216 34.6346C87.3784 34.6346 86.1552 34.3947 85.0279 33.915C83.9006 33.4353 82.8932 32.7397 81.9817 31.8043C81.1423 30.9168 80.4707 29.9095 80.015 28.7342C79.5353 27.5829 79.3194 26.3836 79.3194 25.1604C79.3194 23.9131 79.5353 22.7139 79.967 21.6106C80.3987 20.5072 81.0223 19.4999 81.8618 18.6124C82.7733 17.629 83.8286 16.8855 84.9799 16.3818C86.1312 15.8541 87.3305 15.5903 88.5537 15.5903C90.1128 15.5903 91.5758 15.95 92.919 16.6456C94.2622 17.3652 95.4135 18.3486 96.3729 19.6438C96.9485 20.4113 97.3803 21.2748 97.6681 22.2582C97.9559 23.2176 98.0758 24.3209 98.0758 25.5681C98.0758 25.6641 98.0758 25.808 98.0519 26.0238C98.0519 26.2397 98.0279 26.3836 98.0279 26.4796H83.6127V26.4556ZM93.5426 23.1216C93.1829 21.9224 92.5832 21.0109 91.7437 20.3873C90.9043 19.7637 89.8249 19.4519 88.5537 19.4519C87.4264 19.4519 86.443 19.7877 85.5556 20.4593C84.6681 21.1309 84.0685 22.0183 83.7567 23.1216H93.5426ZM114.698 34.1309V31.9242C114.194 32.8117 113.498 33.4833 112.587 33.915C111.675 34.3467 110.5 34.5626 109.085 34.5626C106.423 34.5626 104.192 33.6512 102.417 31.8283C100.642 30.0054 99.7308 27.7508 99.7308 25.0644C99.7308 23.7932 99.9467 22.594 100.402 21.4667C100.858 20.3393 101.482 19.332 102.321 18.4685C103.209 17.5091 104.216 16.8135 105.295 16.3578C106.375 15.9021 107.622 15.6862 108.989 15.6862C110.308 15.6862 111.436 15.9021 112.371 16.3338C113.306 16.7655 114.074 17.4371 114.65 18.3246V16.1419H118.727V34.1548H114.698V34.1309ZM104.024 24.9685C104.024 26.4796 104.528 27.7508 105.535 28.7822C106.543 29.8135 107.766 30.3172 109.229 30.3172C110.548 30.3172 111.699 29.8135 112.707 28.7822C113.714 27.7508 114.218 26.5515 114.218 25.1844C114.218 23.7213 113.714 22.474 112.707 21.4187C111.699 20.3633 110.524 19.8357 109.157 19.8357C107.742 19.8357 106.543 20.3393 105.535 21.3227C104.528 22.3301 104.024 23.5294 104.024 24.9685ZM129.904 16.1179V19.8596H126.882V34.1309H122.829V19.8596H120.694V16.1179H122.709V15.6382C122.709 13.7434 123.236 12.3283 124.268 11.3929C125.323 10.4574 126.906 10.0017 129.041 10.0017C129.113 10.0017 129.257 10.0017 129.449 10.0257C129.64 10.0257 129.784 10.0497 129.904 10.0497V13.8154H129.616C128.657 13.8154 127.985 13.9833 127.578 14.2711C127.17 14.5829 126.954 15.0866 126.954 15.8301V16.1659H129.904V16.1179ZM73.5869 34.1309H77.6884V10.2895H73.5869V34.1309Z" fill="#1B222C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB