From d1e83cd9e92f0f8c8769a74005bb7f7367a48338 Mon Sep 17 00:00:00 2001 From: Phillippa Date: Thu, 1 Aug 2019 15:25:28 +0200 Subject: [PATCH 1/7] header: styling landing page header for mobile with no donate btn --- .../templates/a4_candy_users/indicator.html | 3 + liqd_product/assets/scss/_variables.scss | 8 +- .../assets/scss/components/_button.scss | 4 +- .../assets/scss/components/_dropdown.scss | 5 +- .../scss/components/_language_switch.scss | 3 +- .../assets/scss/components/_main_header.scss | 116 ++++++++---------- .../assets/scss/components/_navi.scss | 1 - .../scss/components/_userindicator.scss | 17 +-- liqd_product/templates/header.html | 72 +++++------ liqd_product/templates/header_dashboard.html | 2 +- 10 files changed, 114 insertions(+), 117 deletions(-) diff --git a/apps/users/templates/a4_candy_users/indicator.html b/apps/users/templates/a4_candy_users/indicator.html index dacf24107..060081103 100644 --- a/apps/users/templates/a4_candy_users/indicator.html +++ b/apps/users/templates/a4_candy_users/indicator.html @@ -44,6 +44,9 @@
  • {% trans "Login" %}
    • +
  • + / +
  • {% trans "Register" %}
    • diff --git a/liqd_product/assets/scss/_variables.scss b/liqd_product/assets/scss/_variables.scss index 25253fa96..8fa0fb7ea 100644 --- a/liqd_product/assets/scss/_variables.scss +++ b/liqd_product/assets/scss/_variables.scss @@ -75,10 +75,10 @@ $padding: 1rem !default; $wrapper-width: 79rem !default; // use for min-width media-queries -$breakpoint-xs: 32rem !default; -$breakpoint: 50rem !default; -$breakpoint-md: 64rem !default; -$breakpoint-lg: 90rem !default; +$breakpoint-xs: 32rem !default; //512px +$breakpoint: 50rem !default; //800px +$breakpoint-md: 64rem !default; //1024px +$breakpoint-lg: 90rem !default; //1440px // use for max-width media queries $breakpoint-xs-down: $breakpoint-xs - 0.1rem !default; diff --git a/liqd_product/assets/scss/components/_button.scss b/liqd_product/assets/scss/components/_button.scss index b0c1fe6a5..e91b0e663 100644 --- a/liqd_product/assets/scss/components/_button.scss +++ b/liqd_product/assets/scss/components/_button.scss @@ -195,8 +195,8 @@ } .btn--attached-top { - border-top-left-radius: 0; - border-top-right-radius: 0; + // border-top-left-radius: 0; + // border-top-right-radius: 0; } .btn-group { diff --git a/liqd_product/assets/scss/components/_dropdown.scss b/liqd_product/assets/scss/components/_dropdown.scss index ba79e9e75..b161a9dd9 100644 --- a/liqd_product/assets/scss/components/_dropdown.scss +++ b/liqd_product/assets/scss/components/_dropdown.scss @@ -70,9 +70,8 @@ &:hover, &:focus { - text-decoration: none; - background-color: $bg-secondary; - color: $brand-primary; + text-decoration: underline; + background-color: inherit; } i { diff --git a/liqd_product/assets/scss/components/_language_switch.scss b/liqd_product/assets/scss/components/_language_switch.scss index 354038f4e..a27d08a31 100644 --- a/liqd_product/assets/scss/components/_language_switch.scss +++ b/liqd_product/assets/scss/components/_language_switch.scss @@ -1,6 +1,5 @@ .lang__switch { - margin-top: 0.5*$padding; - margin-right: $padding; + margin-right: 2*$r-spacer; } .lang__btn--right, diff --git a/liqd_product/assets/scss/components/_main_header.scss b/liqd_product/assets/scss/components/_main_header.scss index 10d5f45eb..9732d0029 100644 --- a/liqd_product/assets/scss/components/_main_header.scss +++ b/liqd_product/assets/scss/components/_main_header.scss @@ -1,40 +1,43 @@ .main-header { + background-color: $bg-light; + margin: $r-spacer; + + @media screen and (min-width: $breakpoint-lg) { + margin: 2*$r-spacer; + } + a { text-decoration: none; } -} - -.main-header__border-top { - background: linear-gradient(to right, $brand-primary, $brand-primary 33%, $bg-tertiary 66%, $bg-tertiary); - height: 0.5em; -} - -.main-header__border-top--platform { - background: linear-gradient(to right, $brand-primary, $brand-primary 33%, $brand-secondary 66%, $brand-secondary); -} -.main-header__brand { - float: left; - margin: (3 * $spacer) 0 $spacer; -} - -.main-header__nav { - clear: left; + .navbar-brand { + font-family: $font-family-base; + font-weight: bold; + } } -.main-header__logo-box { - display: inline-block; - margin-right: $spacer; - margin-bottom: -2em; - padding: $padding; - vertical-align: middle; - - background-color: $body-bg; - z-index: 1; - position: relative; - - box-shadow: 0 0 8px 0 $shadow; -} +// .main-header__brand { +// float: left; +// margin: (3 * $spacer) 0 $spacer; +// } + +// .main-header__nav { +// clear: left; +// } + +// .main-header__logo-box { +// display: inline-block; +// margin-right: $spacer; +// margin-bottom: -2em; +// padding: $padding; +// vertical-align: middle; +// +// background-color: $body-bg; +// z-index: 1; +// position: relative; +// +// box-shadow: 0 0 8px 0 $shadow; +// } .main-header__logo-img { display: block; @@ -42,7 +45,7 @@ width: auto; } -.main-header__mobile-menu { +.main-header__menu { border-bottom: 1px solid $body-bg; position: absolute; @@ -50,8 +53,7 @@ right: 0; top: 0; - background-color: $bg-tertiary; - color: contrast-color($bg-tertiary); + background-color: $body-bg; z-index: 2; button, @@ -65,35 +67,35 @@ @media screen and (max-width: $breakpoint - 0.1rem) { // overwrite link style on mobile li :hover { - background-color: $bg-secondary; - color: $brand-primary; + text-decoration: underline; } } } -.main-header__mobile-menu--platform { - background-color: $brand-secondary; - color: contrast-color($brand-secondary); -} - .main-header__mobile-toggle { - position: absolute; - right: $padding; - top: 0; + position: relative; + right: 0; z-index: 2; - - font-weight: bold; + background-color: $bg-light; } -.show + .main-header__mobile-toggle { - background-color: $bg-secondary; +.main-header__mobile-toggle:before { + font-family: "Font Awesome 5 Free", sans-serif; + font-style: normal; + font-weight: 900; + content: '\f0c9'; } -.show + .main-header__mobile-toggle--platform { - // use same color as used for hover styles - // (defined in meinberlin's _button.scss) - background-color: mix($brand-secondary, $body-bg, 50%); +.show + .main-header__mobile-toggle:before { + font-family: "Font Awesome 5 Free", sans-serif; + font-style: normal; + font-weight: 900; + content: '\f00d'; } +// +// .show + .main-header__mobile-toggle--platform { +// background-color: $bg-light; +// } .main-header__partner-nav { list-style: none; @@ -114,12 +116,6 @@ } } -.main-header__lang { - position: absolute; - top: 0; - right: 100px; -} - @media screen and (min-width: $breakpoint) { .main-header__brand { margin-top: 2 * $spacer; @@ -129,7 +125,7 @@ line-height: 4em; } - .main-header__mobile-menu { + .main-header__menu { padding: 0; border: 0; position: static; @@ -163,10 +159,6 @@ top: 0; right: 80px; } - - .main-header__lang { - right: 0; - } } .main-header__user { diff --git a/liqd_product/assets/scss/components/_navi.scss b/liqd_product/assets/scss/components/_navi.scss index 61949cbe3..79b9e67a3 100644 --- a/liqd_product/assets/scss/components/_navi.scss +++ b/liqd_product/assets/scss/components/_navi.scss @@ -34,6 +34,5 @@ } .navi__link { - font-weight: 600; color: contrast-color($body-bg); } diff --git a/liqd_product/assets/scss/components/_userindicator.scss b/liqd_product/assets/scss/components/_userindicator.scss index e4ccb1166..58ae56ced 100644 --- a/liqd_product/assets/scss/components/_userindicator.scss +++ b/liqd_product/assets/scss/components/_userindicator.scss @@ -7,6 +7,10 @@ padding: 0.5em 1em; } + .dropdown-item { + font-family: $font-family-serif; + } + i { margin-left: 2 * $padding; display: inline-block; @@ -37,18 +41,17 @@ } .userindicator__dropdown-menu { - background-color: $bg-tertiary; - color: contrast-color($bg-tertiary); + // background-color: $bg-tertiary; + // color: contrast-color($bg-tertiary); border: 1px solid $body-bg; a, button { border-bottom: 1px solid $body-bg; - font-weight: bold; } } -.userindicator__dropdown-menu--platform { - background-color: $brand-secondary; - color: contrast-color($brand-secondary); -} +// .userindicator__dropdown-menu--platform { +// background-color: $brand-secondary; +// color: contrast-color($brand-secondary); +// } diff --git a/liqd_product/templates/header.html b/liqd_product/templates/header.html index c07f1c94d..70f1bc692 100644 --- a/liqd_product/templates/header.html +++ b/liqd_product/templates/header.html @@ -2,14 +2,15 @@ {% get_current_language as LANGUAGE_CODE %}
    -
    -
    -
    - {% spaceless %} - {% if ORGANISATION %}

    {{ ORGANISATION.name }}

    {% else %}Beteiligung.in{% endif %}     - {% endspaceless %} -
    -
    diff --git a/liqd_product/templates/header_dashboard.html b/liqd_product/templates/header_dashboard.html index 36c66e3a5..7891be8b5 100644 --- a/liqd_product/templates/header_dashboard.html +++ b/liqd_product/templates/header_dashboard.html @@ -11,7 +11,7 @@