Merge 1320cd9 into b1d31fb

liqd · Aug 8, 2019 · 6ac5ac8 · 6ac5ac8
2 parents b1d31fb + 1320cd9
commit 6ac5ac8
Show file tree

Hide file tree

Showing 14 changed files with 204 additions and 208 deletions.
diff --git a/apps/users/templates/a4_candy_users/indicator.html b/apps/users/templates/a4_candy_users/indicator.html
@@ -4,19 +4,14 @@
     <div class="dropdown dropdown--right userindicator__dropdown">
         <button
                 type="button"
-                class="dropdown-toggle btn {% if ORGANISATION %}btn--bg-tertiary{% else %}btn--secondary-filled{% endif %} btn--square btn--align-left"
+                class="dropdown-toggle btn btn--link--big btn--align-left"
                 data-toggle="dropdown"
                 data-flip="false"
                 aria-haspopup="true"
                 aria-expanded="false"
                 id="user-actions"
         >
-            <div class="userindicator__btn-img" style="background-image: {% if request.user.avatar %} url({{ request.user.avatar|thumbnail_url:'avatar'}}) {% else %}  url({% static 'images/avatar_00.png' %}) {% endif %}"></div>
-            <div class="userindicator__btn-text">
-                <span class="userindicator__hello">{% trans "Hello" %}</span>
-                <br>
-                <span>{{ request.user.username }}</span>
-            </div>
+            <span class="userindicator__text">{% trans "Hello " %}{{ request.user.username }}</span>
             <i class="fa fa-angle-down" aria-hidden="true"></i>
         </button>
         <div class="dropdown-menu dropdown-menu-right userindicator__dropdown-menu {% if not ORGANISATION %}userindicator__dropdown-menu--platform{% endif %}" aria-labelledby="user-actions">
@@ -40,12 +35,9 @@
         </div>
     </div>
 {% else %}
-    <ul class="navi__list">
-        <li class="navi__item">
-            <a class="navi__link" href="{% url 'account_login' %}?next={{ redirect_field_value }}">{% trans "Login" %}</a>
-        </li>
-        <li class="navi__item">
-            <a class="navi__link" href="{% url 'account_signup' %}?next={{ redirect_field_value }}">{% trans "Register" %}</a>
-        </li>
-    </ul>
+    <div class="navi">
+        <span class="navi__item"><a href="{% url 'account_login' %}?next={{ redirect_field_value }}">{% trans "Login" %}</a></span>
+            <span class="d-none d-md-inline">/</span>
+        <span class="navi__item"><a href="{% url 'account_signup' %}?next={{ redirect_field_value }}">{% trans "Register" %}</a></span>
+    </div>
 {% endif %}
diff --git a/liqd_product/assets/scss/_utility.scss b/liqd_product/assets/scss/_utility.scss
@@ -130,3 +130,12 @@
 .u-fontweight-normal {
     font-weight: normal;
 }
+
+.u-page-ribbon {
+    background: linear-gradient(to right, $brand-primary, $brand-primary 33%, $bg-tertiary 66%, $bg-tertiary);
+    height: 0.5em;
+}
+
+.u-page-ribbon--platform {
+    background: linear-gradient(to right, $brand-primary, $brand-primary 33%, $brand-secondary 66%, $brand-secondary);
+}
diff --git a/liqd_product/assets/scss/components/_button.scss b/liqd_product/assets/scss/components/_button.scss
@@ -160,6 +160,28 @@
     }
 }
 
+.btn--link--big {
+    border-color: transparent;
+    background-color: transparent;
+
+    color: $link-color;
+    font-weight: normal;
+
+    &:hover,
+    &:focus {
+        color: $link-hover-color;
+        border-color: transparent;
+        background-color: transparent;
+        text-decoration: underline;
+    }
+
+    &.is-disabled,
+    &:disabled {
+        color: $text-color;
+        cursor: not-allowed;
+    }
+}
+
 .btn--none {
     @include button-color(transparent, transparent);
 }
@@ -194,11 +216,6 @@
     margin-bottom: $spacer;
 }
 
-.btn--attached-top {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-}
-
 .btn-group {
     .dropdown {
         display: inline-block;

diff --git a/liqd_product/assets/scss/components/_dropdown.scss b/liqd_product/assets/scss/components/_dropdown.scss
@@ -1,7 +1,6 @@
 .dropdown {
     position: relative;
     text-align: left;
-    // margin-bottom: $spacer / 2; for bootstrap
 }
 
 .dropdown-item {
@@ -70,9 +69,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/_footer.scss b/liqd_product/assets/scss/components/_footer.scss
@@ -1,9 +1,9 @@
 .footer {
-    margin: $r-spacer;
+    margin: 0 $r-spacer $r-spacer $r-spacer;
     background-color: $bg-light;
 
-    @media screen and (min-width: $breakpoint-xl) {
-        margin: 2*$r-spacer;
+    @media screen and (min-width: $breakpoint-lg) {
+        margin: 0 2*$r-spacer 2*$r-spacer 2*$r-spacer;
     }
 }
 

diff --git a/liqd_product/assets/scss/components/_homepage.scss b/liqd_product/assets/scss/components/_homepage.scss
@@ -1,11 +1,11 @@
 $spacer-xl: 7.5rem;
 
 .homepage__wrapper {
-    background-color: $body-bg;
-    margin: $r-spacer;
+    background-color: $bg-light;
+    margin: 0 $r-spacer 0 $r-spacer;
 
     @media screen and (min-width: $breakpoint-xl) {
-        margin: 2*$r-spacer;
+        margin: 0 2*$r-spacer 0 2*$r-spacer;
     }
 
     .block {

diff --git a/liqd_product/assets/scss/components/_language_switch.scss b/liqd_product/assets/scss/components/_language_switch.scss
@@ -1,6 +1,9 @@
 .lang__switch {
-    margin-top: 0.5*$padding;
-    margin-right: $padding;
+    margin-right: 2*$r-spacer;
+
+    @media screen and (min-width: $breakpoint) and (max-width: $breakpoint-md) {
+        margin-right: 14*$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
@@ -1,39 +1,20 @@
 .main-header {
+    background-color: $bg-light;
+    margin: $r-spacer $r-spacer 0 $r-spacer;
+
+    @media screen and (min-width: $breakpoint-xl) {
+        font-size: $font-size-md;
+        margin: 2*$r-spacer 2*$r-spacer 0 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;
-}
-
-.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;
+    .navbar-brand {
+        font-family: $font-family-base;
+        font-weight: bold;
+    }
 }
 
 .main-header__logo-img {
@@ -42,21 +23,17 @@
     width: auto;
 }
 
-.main-header__mobile-menu {
-    border-bottom: 1px solid $body-bg;
-
+.main-header__menu {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
 
-    background-color: $bg-tertiary;
-    color: contrast-color($bg-tertiary);
+    background-color: $body-bg;
     z-index: 2;
 
     button,
     a {
-        border-bottom: 1px solid $body-bg;
         display: block;
         width: 100%;
         padding: 0.5em;
@@ -65,34 +42,31 @@
     @media screen and (max-width: $breakpoint-down) {
         // 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: inherit;
 }
 
-.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';
+    background-color: inherit;
 }
 
-.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';
 }
 
 .main-header__organisation-nav {
@@ -105,21 +79,6 @@
     }
 }
 
-.main-header__organisation-nav__item {
-    display: block;
-
-    .is-active {
-        padding-bottom: 0.1em;
-        border-bottom: 0.2em solid $brand-primary;
-    }
-}
-
-.main-header__lang {
-    position: absolute;
-    top: 0;
-    right: 100px;
-}
-
 @media screen and (min-width: $breakpoint) {
     .main-header__brand {
         margin-top: 2 * $spacer;
@@ -129,7 +88,7 @@
         line-height: 4em;
     }
 
-    .main-header__mobile-menu {
+    .main-header__menu {
         padding: 0;
         border: 0;
         position: static;
@@ -160,12 +119,14 @@
 
     .main-header__user {
         position: absolute;
-        top: 0;
-        right: 80px;
+        top: 0.75rem;
+        right: 0;
     }
+}
 
+@media screen and (min-width: $breakpoint-md) {
     .main-header__lang {
-        right: 0;
+        margin-right: 17%;
     }
 }
 

diff --git a/liqd_product/assets/scss/components/_navi.scss b/liqd_product/assets/scss/components/_navi.scss
@@ -1,13 +1,8 @@
 .navi {
-    padding: $padding 0;
-}
-
-.navi__list {
-    list-style: none;
-    padding: 0;
+    padding: 0 $padding;
 }
 
 .navi__item {
+    display: inline-block;
     font-family: $font-family-serif;
-    padding: 0.25*$padding 0.75*$padding;
 }