Merge pull request #4013 from PopulateTools/sass-migrations-todos

Sass migrations todos

app/javascript/gobierto_budgets/modules/application.js

@@ -1,5 +1,5 @@
 import "devbridge-autocomplete";
-import { AUTOCOMPLETE_DEFAULTS, isDesktop } from "lib/shared";
+import { AUTOCOMPLETE_DEFAULTS } from "lib/shared";
 import {
   VisBubbleLegend,
   VisBubbles,
@@ -45,7 +45,7 @@ $(document).on("turbolinks:load ajax:complete ajaxSuccess", function() {
 });
 
 $(document).on("turbolinks:load", function() {
-  if (!isDesktop()) {
+  if (!($(window).width() > 740)) {
     $(".open_line_browser").hide();
   }
 

app/javascript/gobierto_exports/index.js

@@ -1,2 +1 @@
 import "../stylesheets/gobierto-exports.scss"
-import './modules/application.js'

app/javascript/lib/shared/index.js

@@ -2,7 +2,6 @@
 import { AUTOCOMPLETE_DEFAULTS } from "./modules/autocomplete_settings.js";
 import { URLParams } from "./modules/URLParams.js";
 import d3locale from "./modules/d3-locale.js";
-import { isDesktop, isMobile } from "./modules/globals.js";
 import { createScaleColors } from "./modules/createScaleColors.js";
 import { slugString } from "./modules/slugString.js";
 import accounting from "accounting";
@@ -24,8 +23,6 @@ export {
   accounting,
   createScaleColors,
   d3locale,
-  isDesktop,
-  isMobile,
   URLParams,
   RangeSlider,
   Datepicker,

app/javascript/lib/shared/modules/globals.js

@@ -1,14 +1,5 @@
 import "tipsy-1a";
 
-// Global util functions
-export function isDesktop() {
-  return $(window).width() > 740;
-}
-
-export function isMobile() {
-  return !isDesktop();
-}
-
 /* Toggle text method */
 $.fn.extend({
   toggleText: function(a, b) {

app/javascript/stylesheets/_comp-breadcrumbs.scss

@@ -17,6 +17,16 @@
   a:first-child {
     margin-left: 0;
   }
+
+  @include screen(740) {
+    padding: 0.75em 0;
+    margin: 0 0 0.5em 0;
+
+    .bread_links {
+      line-height: 1.3em;
+      font-size: 0.75em;
+    }
+  }
 }
 
 .breadcrumb.is_stuck {

app/javascript/stylesheets/_comp-budget_vis.scss

@@ -46,6 +46,34 @@
   small {
     line-height: 0.5em;
   }
+
+  @include screen(740) {
+    .cont {
+      padding: 2em 1em;
+      text-align: center;
+    }
+
+    .title {
+      padding: 0;
+      border: 0;
+      text-align: center;
+      margin: 0 0 1em 0;
+      font-size: 1.1em;
+    }
+
+    .ic {
+      margin: 0 0 0.5em 0;
+
+      label {
+        height: initial;
+        display: block;
+      }
+    }
+
+    .highlight {
+      margin: 0.25em 0;
+    }
+  }
 }
 
 .explore_detail {
@@ -98,6 +126,12 @@
       }
     }
   }
+
+  @include screen(740) {
+    [data-budget-lines] {
+      padding: 0;
+    }
+  }
 }
 
 /*
@@ -125,6 +159,15 @@
     }
   }
 
+  @include screen(740) {
+    .line_description {
+      p {
+        font-size: 0.85em;
+        line-height: 1.3em;
+      }
+    }
+  }
+
   .metric_boxes {
     margin-bottom: 2em;
   }
@@ -517,4 +560,3 @@
     margin-top: 20px;
   }
 }
-

app/javascript/stylesheets/_comp-forms.scss

@@ -862,6 +862,16 @@ select {
     height: 40px;
     width: 300px;
   }
+
+  @include screen(740) {
+    text-align: center;
+    margin: 0 0 1em 0;
+
+    input[type=text] {
+      width: calc(100%);
+      margin: 0;
+    }
+  }
 }
 
 .attach_file input[type=file] {

app/javascript/stylesheets/_comp-graph-dc.scss

@@ -1,3 +1,5 @@
+@import "dc/dist/style/dc.css";
+
 .graph-title {
   text-transform: uppercase;
   border-bottom: 2px solid $color_main_soft;

app/javascript/stylesheets/_comp-headings_blocks.scss

@@ -110,6 +110,17 @@ h4 {
       top: -0.5em;
     }
   }
+
+  @include screen(740) {
+    h2 {
+      margin: 0.5em 0;
+    }
+
+    .description {
+      width: 100%;
+      margin: 0 0 1em 0;
+    }
+  }
 }
 
 .with_separator {

app/javascript/stylesheets/_comp-layout.scss

@@ -6,6 +6,11 @@
   width: calc(100% - 6rem);
   max-width: 1400px;
   margin: auto;
+
+  @include screen(740) {
+    width: initial;
+    margin: auto 1em;
+  }
 }
 
 .main_content {
@@ -35,6 +40,10 @@ footer {
 
   .logo {
     max-width: 275px;
+
+    @include screen(740) {
+      max-width: 100%;
+    }
   }
 
   ul {

app/javascript/stylesheets/_comp-metric_boxes.scss

@@ -161,3 +161,62 @@
     }
   }
 }
+
+@include screen(740) {
+  .metric_boxes {
+    margin: 0 0 2em 0;
+
+    .metric_box {
+      .inner {
+        margin: 0;
+        min-height: initial;
+        padding: 0.5em;
+      }
+
+      h3 {
+        font-size: 0.85em;
+        min-height: initial;
+        line-height: 1em;
+      }
+
+      .metric {
+        font-size: 1.6em;
+      }
+
+      .explanation {
+        bottom: 0.2em;
+      }
+
+      span.not_av {
+        font-size: 0.6em;
+      }
+    }
+
+    .metric_box:nth-child(1n) {
+      .inner {
+        margin: 0 0.5em 1em 0;
+      }
+    }
+
+    .metric_box:nth-child(2n) {
+      .inner {
+        margin: 0 0 1em 0.5em;
+      }
+    }
+
+    .metric_box:last-child {
+      width: 100%;
+
+      .inner {
+        margin: 0;
+        min-height: initial;
+      }
+    }
+
+    .metric_box.cta {
+      a {
+        padding: 0.5em;
+      }
+    }
+  }
+}