Use JavaScript

AjuntamentdeBarcelona · Mar 19, 2018 · 4f7c041 · 4f7c041
1 parent 719c61a
commit 4f7c041
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 15 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -10,5 +10,5 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require_tree .
 //= require decidim
+//= require_tree .
diff --git a/app/assets/javascripts/consultations.js.es6 b/app/assets/javascripts/consultations.js.es6
@@ -0,0 +1,47 @@
+$(function() {
+  let consultations = $(".main-nav li:nth-child(4)").clone();
+  $(".main-nav li:nth-child(4)").remove();
+  let template = ``;
+
+  if (window.location.pathname === "/consultations") {
+    $(".navbar").addClass("consultations");
+    template = `
+    <li class="main-nav__link main-nav__link--active _has_childs">
+    <a href="https://multiconsulta.decidim.barcelona" class="active">Multiconsulta</a>
+    <nav class="_sub_nav">
+       <ul>
+          <li class="sub-nav__link sub-nav__link--active">
+             <a href="/consultations" class="active">Multiconsulta 2018</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/quan-i-com-votar">Quan i com votar</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/que-es-la-multiconsulta">Què és la multiconsulta?</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/lorem-ipsum">Lorem Ipsum</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/membres-comissions">Comissió de seguiment</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/dubtes">Dubtes</a>
+          </li>
+          <li class="sub-nav__link ">
+             <a href="https://multiconsulta.decidim.barcelona/ca/entitat-interessada">Entitats interessades</a>
+          </li>
+       </ul>
+    </nav>
+  </li>
+    `;
+  } else {
+    template = `
+    <li class="main-nav__link _has_childs">
+      <a href="https://multiconsulta.decidim.barcelona" class="active">Multiconsulta</a>
+    </li>
+    `;
+  }
+
+  $(template).insertAfter(".main-nav li:nth-child(2)");
+});
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -11,5 +11,6 @@
  * It is generally better to create a new file per style scope.
  *
  *= require decidim
+ *= require multiconsulta
  *= require_self
  */
diff --git a/app/assets/stylesheets/multiconsulta.scss b/app/assets/stylesheets/multiconsulta.scss
@@ -0,0 +1,136 @@
+$title-color: #dbe7e4;
+$link-color: #e5e5e5;
+
+$navbar-height: 119px;
+
+$sub-nav-position:49px;
+$sub-nav-color: #3a363e;
+$sub-nav-hover-focus: #403b44;
+
+
+@mixin transform($transforms) {
+       -moz-transform: $transforms;
+         -o-transform: $transforms;
+        -ms-transform: $transforms;
+    -webkit-transform: $transforms;
+          transform: $transforms;
+}
+
+
+/*._main-title {
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 20px;
+    color: $title-color;
+
+    span {
+        display: block;
+        font-weight: normal;
+    }
+}
+
+.off-canvas {
+    .close-button {
+        z-index: 1;
+    }
+}*/
+
+.navbar.consultations {
+
+    position: relative;
+    min-height: $navbar-height;
+
+    .main-nav__link {
+
+        &._has_childs {
+            a {
+                position: relative;
+            }
+        }
+
+        .active {
+            color: white;
+        }
+    }
+
+    ._sub_nav {
+
+        @media print, screen and (min-width: 40em) {
+            position: absolute;
+            left: 0;
+            top: $sub-nav-position;
+            width: 100%;
+
+            min-height: calc(#{$navbar-height} - #{$sub-nav-position});
+            background-color: $sub-nav-color;
+        }
+
+        @media print, screen and (max-width: 767px) {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding-right: 0.625rem;
+            padding-left: 0.625rem;
+            background-color: #2c2930;
+            transition: all ease .6s;
+            will-change: transform;
+            @include transform(translate(100%, 0));
+            &._visible {
+                @include transform(translate(0, 0));
+            }
+        }
+
+        ul {
+
+            max-width: 75rem;
+            margin: 0 auto;
+
+            @media print, screen and (min-width: 40em) {
+                padding-right: 0.9375rem;
+                padding-left: 0.9375rem;
+                padding-top: 20px;
+            }
+
+            .sub-nav__link {
+
+                &:hover, &:focus {
+                    @media print, screen and (min-width: 40em) {
+                        background-color: $sub-nav-hover-focus;
+                    }
+                }
+
+                &.sub-nav__link--active {
+                    a {
+                        @media print, screen and (max-width: 767px) {
+                            -webkit-box-shadow: inset 4px 0 0 0 #ef604d;
+                            box-shadow: inset 4px 0 0 0 #ef604d;
+                            color: #fff;
+                            background: rgba(255,255,255,0.02);
+                        }
+                    }
+                }
+
+                a {
+                    font-size: 16px;
+                    color: rgba(#FFFFFF, 0.5);
+                    box-shadow: none;
+                    background:none;
+                    @media print, screen and (min-width: 40em) {
+                        font-size: 14px;
+                        padding: 1em 2em;
+                        color: $link-color;
+                    }
+                }
+            }
+
+            ._back {
+                a {
+                    box-shadow: none;
+                    background: none;
+                }
+            }
+        }
+    }
+}
diff --git a/config/initializers/main_navigation.rb b/config/initializers/main_navigation.rb
@@ -4,17 +4,3 @@
             position: 4,
             active: :inclusive
 end
-
-Decidim.menu :menu do |menu|
-    menu.item I18n.t("menu.consultations_static"),
-              ENV.fetch("CONSULTATIONS_URL") { "http://example.org" },
-              position: 2.5,
-              active: :exact
-end
-
-Decidim.menu :menu do |menu|
-    menu.item I18n.t("menu.consultations_static"),
-              ENV.fetch("CONSULTATIONS_URL") { "http://example.org" },
-              position: 2.5,
-              active: :exact
-end