Merge pull request City-of-Helsinki#3 from terotic/feature/turku-styling

Fix Turku styling and add default styles for Helsinki & Espoo adfs
terotik · Sep 26, 2019 · 08f69d8 · 08f69d8
2 parents a064c12 + 5af75ac
commit 08f69d8
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 169 deletions.
diff --git a/themes/static/svg/espoo.svg b/themes/static/svg/espoo.svg
diff --git a/themes/static/svg/helsinki-vaakuna-sininen.svg b/themes/static/svg/helsinki-vaakuna-sininen.svg
diff --git a/themes/static/svg/helsinki_adfs.svg b/themes/static/svg/helsinki_adfs.svg
diff --git a/themes/static/svg/yletunnus.svg b/themes/static/svg/yletunnus.svg
diff --git a/themes/styles/_common.scss b/themes/styles/_common.scss
@@ -77,8 +77,10 @@
 
 .login-method {
   .btn {
+    background-color: $gray-500;
     color: #fff;
     text-align: left;
+    font-weight: 600;
 
     &-facebook {
       background-color: #4172B8;
@@ -96,23 +98,59 @@
     &-github {
       background-color: #181717;
       &:hover {
-        background-color: darken(#181717, 7%);
+        background-color: lighten(#181717, 7%);
+      }
+    }
+    &-tumblr {
+      background-color: #36465D;
+      &:hover {
+        background-color: darken(#36465D, 7%);
+      }
+    }
+    &-yletunnus {
+      background-color: #00b5c8;
+      &:hover {
+        background-color: darken(#00b4c8, 7%);
+      }
+    }
+    &-helsinki, &-helsinki_adfs {
+      background-color: #0000bf;
+      &:hover {
+        background-color: darken(#0000bf, 7%);
+      }
+    }
+    &-espoo, &-espoo_adfs {
+      background-color: #00A0E2;
+      &:hover {
+        background-color: darken(#00A0E2, 7%);
       }
     }
   }
 
-  .icon {
+  .icon, .ext-icon {
     display: inline-block;
-    height: 1.2em;
-    width: 1.7em;
-    border-right: 1px solid #fff;
-    padding-right: .5em;
-    margin-right: .5em;
+    border-right: 2px solid #fff;
+    padding-right: .75rem;
+    margin-right: .5rem;
+    vertical-align: middle;
 
     svg {
       display: block;
-      height: 1.2em;
+      height: 1.5rem;
+      max-width: 1.5rem;
       fill: #fff;
     }
+
+    img {
+      height: 1.5rem;
+      max-width: 1.5rem;
+    }
+  }
+
+  .method-name {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
   }
+
 }
diff --git a/themes/styles/themes/turku/variables.scss b/themes/styles/themes/turku/variables.scss
@@ -52,6 +52,9 @@ $brand-warning:   $theme-warning;
 $brand-danger:    $theme-danger;
 
 $font-family-sans-serif: "Open Sans", Arial, sans-serif;
+$font-family-base:       $font-family-sans-serif;
+
+$headings-font-weight:   700;
 
 $navbar-default-color:            $white;
 $navbar-default-link-color:       $white;

diff --git a/themes/templates/tunnistamo/base.html b/themes/templates/tunnistamo/base.html
@@ -18,7 +18,7 @@
 <body class="bg-brand-light">
   <div class="container content-container">
     <div class="row justify-content-center">
-      <div class="col-sm-8 col-md-6">
+      <div class="col-sm-10 col-md-8 mt-5">
         <div class="card content-card">
           <header class="card-title">
             <div class="logo theme-logo"></div>

diff --git a/tunnistamo/settings.py b/tunnistamo/settings.py
@@ -237,6 +237,7 @@
 
 SVG_DIRS = [
     os.path.join(NODE_MODULES_ROOT, 'simple-icons', 'icons'),
+    os.path.join(BASE_DIR, 'themes', 'static', 'svg'),
 ]
 
 COMPRESS_PRECOMPILERS = (

diff --git a/users/templates/login.html b/users/templates/login.html
@@ -18,7 +18,9 @@
           <span class="icon icon-{{ method.provider_id }}" aria-hidden="true">
             {% svg method.provider_id %}
           </span>
-          {{ method.name }}
+          <span class="method-name">
+            {{ method.name }}
+          </span>
       </a>
       {% else %}
       <a href="{{ method.login_url }}"
@@ -28,7 +30,9 @@
           <span class="ext-icon">
               <img src="{{ method.logo_url }}" />
           </span>
-          {{ method.name }}
+          <span class="method-name">
+            {{ method.name }}
+          </span>
       </a>
       {% endif %}
       {% if method.short_description %}