diff --git a/services/web/app/views/layout/fat-footer-website-redesign.pug b/services/web/app/views/layout/fat-footer-website-redesign.pug index f8f9f81994..c368210591 100644 --- a/services/web/app/views/layout/fat-footer-website-redesign.pug +++ b/services/web/app/views/layout/fat-footer-website-redesign.pug @@ -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 diff --git a/services/web/app/views/layout/fat-footer.pug b/services/web/app/views/layout/fat-footer.pug index bb34c73116..c17094b800 100644 --- a/services/web/app/views/layout/fat-footer.pug +++ b/services/web/app/views/layout/fat-footer.pug @@ -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 diff --git a/services/web/app/views/layout/navbar-marketing.pug b/services/web/app/views/layout/navbar-marketing.pug index 9e649496a8..8f8d34238d 100644 --- a/services/web/app/views/layout/navbar-marketing.pug +++ b/services/web/app/views/layout/navbar-marketing.pug @@ -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,26 +130,48 @@ 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" + event-tracking="menu-clicked-register" + event-tracking-action="clicked" + event-tracking-trigger="click" + event-tracking-mb="true" + event-segmentation={ page: currentUrl } + ) #{translate('Register')} + + // login link + if websiteRedesignActive li a( - href="/register" - event-tracking="menu-clicked-register" + href="/login" + event-tracking="menu-clicked-login" event-tracking-action="clicked" event-tracking-trigger="click" event-tracking-mb="true" event-segmentation={ page: currentUrl } - ) #{translate('register')} - - // login link - 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 } - ).text-capitalize #{translate('log_in')} + ) #{translate('log_in')} + else + 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 } + ).text-capitalize #{translate('log_in')} // projects link and account menu if getSessionUser() diff --git a/services/web/app/views/layout/navbar-website-redesign.pug b/services/web/app/views/layout/navbar-website-redesign.pug index be4c5ef8a2..5fa409a7d1 100644 --- a/services/web/app/views/layout/navbar-website-redesign.pug +++ b/services/web/app/views/layout/navbar-website-redesign.pug @@ -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", diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less index 44635b2271..cac47c841f 100644 --- a/services/web/frontend/stylesheets/components/footer.less +++ b/services/web/frontend/stylesheets/components/footer.less @@ -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); + } + } } diff --git a/services/web/frontend/stylesheets/components/navbar.less b/services/web/frontend/stylesheets/components/navbar.less index 12728dcdbd..a140eeb8a5 100755 --- a/services/web/frontend/stylesheets/components/navbar.less +++ b/services/web/frontend/stylesheets/components/navbar.less @@ -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; + } + } + } + } } } } diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less index cd24257f20..9bfc1dd4ae 100644 --- a/services/web/frontend/stylesheets/variables/all.less +++ b/services/web/frontend/stylesheets/variables/all.less @@ -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; diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 879176fee0..ccfec48277 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -609,6 +609,7 @@ "footer_navigation": "Footer navigation", "footer_plans_and_pricing": "Plans & pricing", "for_american_express": "For <0>American Express, the <1>4 digits on the <2>front 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, the <1>3 digits on the <2>back 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 log out from your __email1__ account and then log in with __email2__.", "with_premium_subscription_you_also_get": "With an Overleaf Premium subscription you also get", diff --git a/services/web/public/img/ol-brand/overleaf-black.svg b/services/web/public/img/ol-brand/overleaf-black.svg new file mode 100644 index 0000000000..ea0678438b --- /dev/null +++ b/services/web/public/img/ol-brand/overleaf-black.svg @@ -0,0 +1,9 @@ + + + + + + + + +