Merge pull request #66 from labhackercd/responsive-bill

Responsive bill
labhackercd · Apr 12, 2017 · b11d733 · b11d733
2 parents 109e184 + f4b76fe
commit b11d733
Show file tree

Hide file tree

Showing 15 changed files with 129 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "babel-preset-es2015": "^6.18.0",
     "babelify": "^7.3.0",
     "bower": "^1.8.0",
+    "breakpoint-sass": "^2.7.1",
     "browserify": "^13.3.0",
     "eslint": "^3.14.1",
     "eslint-config-airbnb-base": "^11.0.1",

diff --git a/wikilegis/core/templates/base.html b/wikilegis/core/templates/base.html
@@ -4,7 +4,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">
 
     {% block extrameta %}
     {% endblock %}

diff --git a/wikilegis/core/templates/bill/_amendment_wrapper.html b/wikilegis/core/templates/bill/_amendment_wrapper.html
@@ -8,13 +8,13 @@
 
     <nav class="amendments__nav">
       <a class="nav__item" data-tab-content="amendments" data-tab="1" data-tab-content-type="modifier" href="#tab_edit">
-        <i class="item__icon icon icon-pencil"></i>{% trans 'EDITION' %}
+        <i class="item__icon icon icon-pencil"></i><span class="item__text">{% trans 'EDITION' %}</span>
       </a>
       <a class="nav__item" data-tab-content="amendments" data-tab="2" data-tab-content-type="additive" href="#tab_add">
-        <i class="item__icon icon icon-plus"></i>{% trans 'ADDITION' %}
+        <i class="item__icon icon icon-plus"></i><span class="item__text">{% trans 'ADDITION' %}</span>
       </a>
       <a class="nav__item" data-tab-content="amendments" data-tab="3" data-tab-content-type="supress" href="#tab_remove">
-        <i class="item__icon icon icon-trash"></i>{% trans 'EXCLUSION' %}
+        <i class="item__icon icon icon-trash"></i><span class="item__text">{% trans 'EXCLUSION' %}</span>
       </a>
     </nav>
   </div>

diff --git a/wikilegis/static/styles/_widget.scss b/wikilegis/static/styles/_widget.scss
@@ -1,16 +1,25 @@
 .wikilegis-widget {
   display: flex;
 
+  .wikilegis__alert {
+    margin-top: 5em; // To compensate the widget-bar height
+  }
+
   .wikilegis__bill {
     left: 0;
     transform: translateX(0);
     width: 100%;
-    padding-top: 3em; // To compensate the widget-bar height
   }
 
-  .bill__content-wrapper {width: 100%;}
+  .bill__content-wrapper {
+    margin-top: 3em; // To compensate the widget-bar height
+    width: 100%;
+  }
 
-  .bill__amendments-wrapper {width: 100%;}
+  .bill__amendments-wrapper {
+    margin-top: 3em; // To compensate the widget-bar height
+    width: 100%;
+  }
 
   .widget-bar {
     align-items: center;
@@ -19,10 +28,14 @@
     display: flex;
     height: 3em;
     justify-content: center;
-    padding: 0 5em 0 4em;
+    padding: 0 4em;
     position: relative;
     width: 100%;
     z-index: 5;
+
+    @include breakpoint($medium-down) {
+      padding: 0 1em;
+    }
   }
 
   .widget-logos {
@@ -39,6 +52,18 @@
 
   .logo__text {
     height: 20px;
+
+    @include breakpoint($small-only) {
+      display: none;
+    }
+  }
+
+  .amendments__suggest-button {
+    bottom: 3.5em; // To compensate the widget-bar height
+  }
+
+  .amendments__form-wrapper {
+    bottom: 3em; // To compensate the widget-bar height
   }
 }
 

diff --git a/wikilegis/static/styles/ambience/_animations.scss b/wikilegis/static/styles/ambience/_animations.scss
@@ -11,7 +11,7 @@ $swift-out: cubic-bezier(.55, 0, .1, 1);
 }
 
 @keyframes slide-in-form-button {
-  0% { transform: translate(-50%, calc(110% + 2em)); }
-  25% { transform: translate(-50%, calc(110% + 2em)); }
-  100% { transform: translate(-50%, 0); }
+  0% { transform: translateY(calc(110% + 2em)); }
+  25% { transform: translateY(calc(110% + 2em)); }
+  100% { transform: translateY(-50%, 0); }
 }
diff --git a/wikilegis/static/styles/ambience/_breakpoints.scss b/wikilegis/static/styles/ambience/_breakpoints.scss
@@ -0,0 +1,21 @@
+// These are called using the breakpoint-sass plugin (http://breakpoint-sass.com/)
+// Basically: @include breakpoint(variable){}
+
+// Defining our breakpoints
+$tablet-breakpoint:  640px;
+$desktop-breakpoint: 1280px;
+$hd-breakpoint: 1600px;
+
+// Defining our media queries variables
+$small-only: max-width $tablet-breakpoint;
+$small-up: $tablet-breakpoint;
+
+$medium-only: $tablet-breakpoint $desktop-breakpoint;
+$medium-up: $tablet-breakpoint;
+$medium-down: max-width $desktop-breakpoint;
+
+$large-only: $desktop-breakpoint $hd-breakpoint;
+$large-up: $desktop-breakpoint;
+$large-down: max-width $hd-breakpoint;
+
+$xlarge-up: $hd-breakpoint;
diff --git a/wikilegis/static/styles/app.scss b/wikilegis/static/styles/app.scss
@@ -1,8 +1,12 @@
 // Normalize.css
 @import 'bower_components/normalize-css/normalize';
 
+// Breakpoint Sass
+@import 'breakpoint-sass/stylesheets/breakpoint';
+
 // Ambience
 @import 'ambience/animations';
+@import 'ambience/breakpoints';
 @import 'ambience/categories';
 @import 'ambience/colors';
 @import 'ambience/fonts';

diff --git a/wikilegis/static/styles/base/_structure.scss b/wikilegis/static/styles/base/_structure.scss
@@ -1,5 +1,10 @@
 html, body {
   height: 100%;
+  font-size: 16px;
+
+  @include breakpoint($small-only) {
+    font-size: 13px;
+  }
 }
 
 body {

diff --git a/wikilegis/static/styles/pages/_wikilegis.scss b/wikilegis/static/styles/pages/_wikilegis.scss
@@ -254,6 +254,7 @@
   display: flex;
   height: 100%;
   left: 150px;
+  overflow: hidden;
   position: absolute;
   transform: translateX(100%);
   transition: transform .5s linear;

diff --git a/wikilegis/static/styles/templates/amendments/_actions.scss b/wikilegis/static/styles/templates/amendments/_actions.scss
@@ -1,5 +1,6 @@
 .amendment__actions {
   display: flex;
+  flex-wrap: wrap;
 
   .actions__vote {
     align-items: center;

diff --git a/wikilegis/static/styles/templates/amendments/_content.scss b/wikilegis/static/styles/templates/amendments/_content.scss
@@ -9,7 +9,12 @@
     flex: 1 1 auto;
     overflow-y: auto;
     overflow-y: overlay; // Favor 'overlay' in the cascade for supported browsers
+    overflow-x: hidden;
     padding: 2em 4em 8em;
+
+    @include breakpoint($small-only) {
+      padding: 2em 1em 8em;
+    }
   }
 
   .content__amendments-list {
@@ -20,15 +25,14 @@
 }
 
 .amendments__suggest-button {
+  align-self: center;
   bottom: 2em;
   box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23);
   cursor: pointer;
   font-size: 1.2em;
   font-weight: 600;
-  left: 50%;
   padding: .7em 2em;
   position: absolute;
-  transform: translate(-50%, 0);
   z-index: 5;
 
   &.animate {
@@ -54,6 +58,11 @@
   width: calc(100% - 14em);
   z-index: 10;
 
+  @include breakpoint($small-only) {
+    left: 0;
+    width: calc(100% - 3.5em);
+  }
+
   .amendments__content--modifier & {
     border-color: $color-actions-edit;
   }

diff --git a/wikilegis/static/styles/templates/amendments/_index.scss b/wikilegis/static/styles/templates/amendments/_index.scss
@@ -36,6 +36,13 @@
   position: absolute;
   top: .5em;
   transition: color .2s $swift-out;
+  z-index: 1;
+
+  @include breakpoint($small-only) {
+    font-size: 1.5em;
+    left: 0.75em;
+    top: 0.25em;
+  }
 
   &:hover {
     color: $color-accent;
@@ -51,13 +58,22 @@
   z-index: 1;
   transition: margin-top .3s $swift-out;
 
+  @include breakpoint($small-only) {
+    margin: 0;
+    padding-left: 4em;
+  }
+
   .content__text {
     margin: 0;
   }
 }
 
 .amendment__text-wrapper {
   padding: 1em 1.5em;
+
+  @include breakpoint($small-only) {
+    display: none;
+  }
 }
 
 .amendments__nav {
@@ -91,7 +107,7 @@
     flex: 1 1 auto;
     font-weight: 700;
     justify-content: center;
-    padding: .5em 2em;
+    padding: .5em 0;
     text-decoration: none;
     transition: all .3s $swift-out;
 
@@ -108,7 +124,14 @@
   .item__icon {
     display: flex;
     font-size: 1.25em;
-    margin-right: .5em;
+  }
+
+  .item__text {
+    margin-left: .5em;
+
+    @include breakpoint($small-only) {
+      display: none;
+    }
   }
 }
 

diff --git a/wikilegis/static/styles/templates/bill/_content.scss b/wikilegis/static/styles/templates/bill/_content.scss
@@ -2,6 +2,8 @@
   background-color: $color-gray-95;
   flex: 1 1 auto;
   overflow-y: auto;
+  overflow-y: overlay; // Favor 'overlay' in the cascade for supported browsers
+  overflow-x: hidden;
   will-change: transform;
 
   .content__close {
@@ -24,18 +26,33 @@
 .bill__content {
   padding: 4em;
 
+  @include breakpoint($medium-down) {
+    padding: 1em;
+  }
+
   .content__header {
+    display: flex;
+    flex-direction: column;
     padding: 0 3em;
+
+    @include breakpoint($small-only) {
+      padding: 0;
+      align-items: center;
+    }
   }
 
   .header__section-top {
     display: flex;
-    margin-left: -.3em;
+    flex-wrap: wrap;
+
+    @include breakpoint($small-only) {
+      padding: 0;
+      justify-content: center;
+    }
   }
 
   .header__logo {
-    height: 100px;
-    width: 100px;
+    height: 6em;
   }
 
   .header__title {

diff --git a/wikilegis/static/styles/templates/segment/_actions.scss b/wikilegis/static/styles/templates/segment/_actions.scss
@@ -18,13 +18,15 @@
 
 .segment__actions--secondary {
   display: flex;
+  flex-wrap: wrap;
 
   [class^="actions__link"] {
     align-items: center;
-    color: $color-gray-55;
+    color: $color-gray-75;
     cursor: pointer;
     display: flex;
     font-weight: 700;
+    font-size: 0.9em;
     outline: none;
     padding: .5em 1em;
     text-decoration: none;

diff --git a/wikilegis/static/styles/templates/segment/_index.scss b/wikilegis/static/styles/templates/segment/_index.scss
@@ -22,7 +22,7 @@
 .section-top__section-left {
   align-items: center;
   display: flex;
-  margin: .7em 1.5em .7em 0;
+  margin: .7em .7em .7em 0;
 }
 
 .section-top__section-right {
@@ -35,6 +35,4 @@
 
 .segment__text {
   margin: 0;
-  padding-bottom: .5em;
-  padding-left: .5em;
 }