From 35ac4fcc74117524ef8b4ae7ac5e4a877e50d900 Mon Sep 17 00:00:00 2001 From: Vidya Ramakrishnan Date: Fri, 22 Jan 2021 13:39:20 +0530 Subject: [PATCH 01/11] new project header and navbar design --- funnel/static/css/app.css | 146 +++++++++++------- funnel/static/sass/_card.scss | 2 +- funnel/static/sass/_header.scss | 2 +- funnel/static/sass/_project.scss | 150 +++++++++++++------ funnel/static/sass/_update.scss | 4 - funnel/templates/macros.html.jinja2 | 203 ++++++++++++++------------ funnel/templates/project.html.jinja2 | 39 ++++- funnel/templates/proposal.html.jinja2 | 2 +- 8 files changed, 342 insertions(+), 206 deletions(-) diff --git a/funnel/static/css/app.css b/funnel/static/css/app.css index de44c0878..15d8a2378 100644 --- a/funnel/static/css/app.css +++ b/funnel/static/css/app.css @@ -1684,7 +1684,7 @@ a.loginbutton.hidden, position: sticky; top: 50px; order: 1; - z-index: 2; + z-index: 6; } .sub-navbar { @@ -3247,7 +3247,7 @@ a.loginbutton.hidden, .card--upcoming .card__body .card__body__bookmark { position: absolute; right: 16px; - top: 18px; + top: 16px; z-index: 4; line-height: 1; } @@ -3469,8 +3469,91 @@ a.loginbutton.hidden, border-bottom: 1px solid rgba(121, 129, 139, 0.48); } +.project-header { + display: flex; + align-items: center; + margin: 0; + padding: 0 0 0 16px; +} +.project-header .project-links, +.project-header .hg-link-btn { + padding-right: 16px; +} +.project-header .settings { + padding-left: 16px; +} +.project-header .hg-link-btn.hide { + display: none; +} +.project-header .mui-btn--nostyle + .mui-btn--nostyle { + margin: 0; +} + +.register-block { + display: flex; + align-items: baseline; + justify-content: space-between; +} +.register-block .register-block__txt { + margin: 0 16px 0 0; +} +.register-block .register-block__right { + min-width: 155px; +} +.register-block .register-block__right__btn { + margin-right: 8px; +} + +.project-footer { + position: fixed; + width: calc(100% - 32px); + bottom: 0; + padding: 16px; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); + background-color: #ffffff; + z-index: 1000; +} +.project-footer .mui-dropdown__menu { + top: -66px !important; + border-radius: 16px 16px 0px; +} + +@media (min-width: 768px) { + .project-footer { + display: none; + } +} +.sub-navbar-container__inner .desktop-navbar-items { + display: none; +} + +@media (min-width: 768px) { + .sub-navbar-container__inner { + display: flex; + justify-content: space-between; + align-items: center; + } + .sub-navbar-container__inner .sub-navbar { + max-width: calc(100% - 480px); + margin-left: 0; + } + .sub-navbar-container__inner .desktop-navbar-items { + display: flex; + min-width: 450px; + justify-content: space-around; + align-items: center; + } + .sub-navbar-container__inner .desktop-navbar-items .project-header { + margin: 0 16px 0 0; + } +} +@media (min-width: 768px) { + .sub-navbar-container__inner .desktop-navbar-items { + justify-content: flex-end; + } +} .project-banner { - margin-top: 16px; + padding-top: 80px; } .project-banner .project-banner__profile-details { display: flex; @@ -3542,40 +3625,15 @@ a.loginbutton.hidden, margin: 0; display: block; } -.project-banner .project-banner__footer { - display: flex; - align-items: baseline; - margin: 16px 0 0; - padding: 0 16px; -} -.project-banner .project-banner__footer .bookmark { - padding-right: 8px; -} -.project-banner .project-banner__footer .bookmark a { - text-decoration: none !important; -} -.project-banner .project-banner__footer .hg-link-btn.hide { - display: none; -} -.project-banner .project-banner__footer .bookmark .txt, -.project-banner .project-banner__footer .bookmark .login-txt { - position: relative; - top: -2px; -} -.project-banner .project-banner__footer .bookmark .animate-btn { - height: 20px; -} -.project-banner .project-banner__footer .bookmark .animate-btn--animate { - -webkit-animation: none; - animation: none; -} -.project-banner .project-banner__footer .mui-btn--nostyle + .mui-btn--nostyle { - margin: 0; -} .project-banner .project-details__box { margin-top: 16px; position: relative; } +.project-banner .project-details__box .bookmark { + position: absolute; + right: 14px; + z-index: 3; +} .project-banner .project-details__box .card__calendar { padding: 0 16px 10px; margin: 0 0 25px; @@ -3642,11 +3700,11 @@ a.loginbutton.hidden, .project-banner .project-details__box--ticketbox { margin-bottom: 16px; } -.project-banner .project-details__box--ticketbox .check-icon { - margin-right: 8px; -} @media (min-width: 768px) { + .project-banner { + padding-top: 35px; + } .project-banner .project-banner__box { padding: 0 16px; } @@ -3656,15 +3714,6 @@ a.loginbutton.hidden, .project-banner .project-banner__box .project-banner__box__add-btn--second { right: 60px; } - .project-banner .project-banner__footer { - padding: 0; - justify-content: unset; - } - .project-banner .project-banner__footer .bookmark, - .project-banner .project-banner__footer .project-links, - .project-banner .project-banner__footer .hg-link-btn { - padding-right: 24px !important; - } .project-banner .project-details__box .propose .propose__txt { font-size: 14px; } @@ -3782,7 +3831,7 @@ a.loginbutton.hidden, @media (min-width: 768px) { .pinned { position: sticky; - top: 56px; + top: 128px; display: block; } } @@ -5451,11 +5500,6 @@ body > .proposal-box.ui-draggable { } } @media (min-width: 768px) { - .pinned { - top: 110px; - margin-bottom: -10px; - } - .update { padding: 32px 16px; margin-bottom: 16px; diff --git a/funnel/static/sass/_card.scss b/funnel/static/sass/_card.scss index a863f3582..e6803c284 100644 --- a/funnel/static/sass/_card.scss +++ b/funnel/static/sass/_card.scss @@ -473,7 +473,7 @@ .card__body__bookmark { position: absolute; right: $mui-grid-padding; - top: 18px; + top: $mui-grid-padding; z-index: 4; line-height: 1; } diff --git a/funnel/static/sass/_header.scss b/funnel/static/sass/_header.scss index 2f9a248f4..ffbcc802a 100644 --- a/funnel/static/sass/_header.scss +++ b/funnel/static/sass/_header.scss @@ -519,7 +519,7 @@ position: sticky; top: 50px; order: 1; - z-index: 2; + z-index: 6; } .sub-navbar { diff --git a/funnel/static/sass/_project.scss b/funnel/static/sass/_project.scss index 973b78289..f94c502f6 100644 --- a/funnel/static/sass/_project.scss +++ b/funnel/static/sass/_project.scss @@ -3,8 +3,100 @@ padding: $mui-grid-padding/2 0; border-bottom: 1px solid rgba(121, 129, 139, 0.48); } + +.project-header { + display: flex; + align-items: center; + margin: 0; + padding: 0 0 0 $mui-grid-padding; + .project-links, + .hg-link-btn { + padding-right: $mui-grid-padding; + } + .settings { + padding-left: $mui-grid-padding; + } + .hg-link-btn.hide { + display: none; + } + .mui-btn--nostyle + .mui-btn--nostyle { + margin: 0; + } +} +.register-block { + display: flex; + align-items: baseline; + justify-content: space-between; + .register-block__txt { + margin: 0 $mui-grid-padding 0 0; + } + + .register-block__right { + min-width: 155px; + } + .register-block__right__btn { + margin-right: $mui-grid-padding/2; + } +} + +.project-footer { + position: fixed; + width: calc(100% - 32px); + bottom: 0; + padding: 16px; + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); + background-color: #ffffff; + z-index: 1000; + + .mui-dropdown__menu { + top: -66px !important; + border-radius: 16px 16px 0px; + } +} + +@media (min-width: 768px) { + .project-footer { + display: none; + } +} + +.sub-navbar-container__inner { + .desktop-navbar-items { + display: none; + } +} + +@media (min-width: 768px) { + .sub-navbar-container__inner { + display: flex; + justify-content: space-between; + align-items: center; + .sub-navbar { + max-width: calc(100% - 480px); + margin-left: 0; + } + .desktop-navbar-items { + display: flex; + min-width: 450px; + justify-content: space-around; + align-items: center; + .project-header { + margin: 0 16px 0 0; + } + } + } +} + +@media (min-width: 768px) { + .sub-navbar-container__inner { + .desktop-navbar-items { + justify-content: flex-end; + } + } +} + .project-banner { - margin-top: $mui-grid-padding; + padding-top: 80px; .project-banner__profile-details { display: flex; @@ -80,44 +172,16 @@ } } - .project-banner__footer { - display: flex; - align-items: baseline; - margin: $mui-grid-padding 0 0; - padding: 0 $mui-grid-padding; - - .bookmark { - padding-right: 8px; - a { - text-decoration: none !important; - } - } - .hg-link-btn.hide { - display: none; - } - .bookmark { - .txt, - .login-txt { - position: relative; - top: -2px; - } - .animate-btn { - height: 20px; - } - .animate-btn--animate { - -webkit-animation: none; - animation: none; - } - } - .mui-btn--nostyle + .mui-btn--nostyle { - margin: 0; - } - } - .project-details__box { margin-top: $mui-grid-padding; position: relative; + .bookmark { + position: absolute; + right: 14px; + z-index: 3; + } + .card__calendar { padding: 0 $mui-grid-padding 10px; margin: 0 0 25px; @@ -165,14 +229,13 @@ } .project-details__box--ticketbox { margin-bottom: $mui-grid-padding; - .check-icon { - margin-right: 8px; - } } } @media (min-width: 768px) { .project-banner { + padding-top: 35px; + .project-banner__box { padding: 0 $mui-grid-padding; .project-banner__box__add-btn { @@ -182,15 +245,6 @@ right: 60px; } } - .project-banner__footer { - padding: 0; - justify-content: unset; - .bookmark, - .project-links, - .hg-link-btn { - padding-right: 24px !important; - } - } .project-details__box { .propose { .propose__txt { @@ -322,7 +376,7 @@ @media (min-width: 768px) { .pinned { position: sticky; - top: 56px; + top: 128px; display: block; } } diff --git a/funnel/static/sass/_update.scss b/funnel/static/sass/_update.scss index c85a2fa61..2d8cc0294 100644 --- a/funnel/static/sass/_update.scss +++ b/funnel/static/sass/_update.scss @@ -54,10 +54,6 @@ } @media (min-width: 768px) { - .pinned { - top: 110px; - margin-bottom: -10px; - } .update { padding: $mui-grid-padding-double $mui-grid-padding; margin-bottom: $mui-grid-padding; diff --git a/funnel/templates/macros.html.jinja2 b/funnel/templates/macros.html.jinja2 index 54575b5bd..5d1278d36 100644 --- a/funnel/templates/macros.html.jinja2 +++ b/funnel/templates/macros.html.jinja2 @@ -59,24 +59,24 @@ {% endmacro %} -{% macro saveprojectform(project, formid='save-form', txt=false) %} +{% macro saveprojectform(project, formid='save-form') %}
{{ current_view.SavedProjectForm().hidden_tag() }} -

+

{%- if current_auth.is_anonymous %} - {{ faicon(icon='bookmark', baseline=true, css_class='mui--text-light') }}{% trans %}Login{% endtrans %} {% trans %}to save{% endtrans %} + {{ faicon(icon='bookmark', icon_size='title', baseline=true, css_class='mui--text-light') }} {%- else %} - - + {%- endif %} -

+
{% endmacro %} -{% macro share_dropdown(url, title) %} -