Merge pull request #32 from okfn-brasil/feature/topbar_responsive

Work on topbar responsiveness and CSS adjustments
okfn-brasil · Jan 10, 2024 · ae246e9 · ae246e9
2 parents 9f52082 + 72daf7a
commit ae246e9
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 18 deletions.
diff --git a/app/packs/stylesheets/okbr/_nav.scss b/app/packs/stylesheets/okbr/_nav.scss
@@ -1,7 +1,11 @@
 #okbr-link {
-  flex: 1 0 auto;
+  flex: 2 0 auto;
+  align-self: center;
 }
 
+.org-logo {
+  flex: 2 0 auto;
+}
 .navbar {
   background-color: white;
   color: black;
@@ -24,7 +28,7 @@
 }
 
 .main-nav ul > li > a {
-  padding: 0 1rem;
+  padding: 0 2rem;
 }
 
 .main-nav ul > li:not(:last-child) a {
@@ -55,4 +59,35 @@
     .topbar__dropmenu > ul > li > a {
         color: white;
     }
+
+    .topbar > div.logo-wrapper {
+      flex-direction: column;
+    }
+    #okbr-link {
+      margin: 1.2rem 0 0;
+      align-self: flex-start;
+    }
+
+    .okbr-search {
+      width: 100%;
+    }
+
+    .main-nav ul > li > a {
+      margin: 1rem auto;
+    }
+
+    .main-nav ul > li:not(:last-child) a {
+      border-right: 0px;
+    }
 }
+
+@media all and (max-width: 820px) {
+  .topbar > div.logo-wrapper {
+    flex-direction: column;
+  }
+
+  #okbr-link {
+    margin: 1.2rem 0 0;
+    align-self: flex-start;
+  }
+}
diff --git a/app/packs/stylesheets/okbr/application.scss b/app/packs/stylesheets/okbr/application.scss
@@ -49,3 +49,7 @@ body {
 .floating-helper__content {
   border-top: none;
 }
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+  font-family: "Hanken Grotesk", Helvetica, Roboto, Arial, sans-serif;
+}
diff --git a/app/views/layouts/decidim/_topbar_search.html.erb b/app/views/layouts/decidim/_topbar_search.html.erb
@@ -1,10 +1,15 @@
-<div class="okbr-search">
-  <%= form_tag(decidim.search_path, method: :get, class: "okbr-search__form") do %>
-    <div class="okbr-search__button-wrapper">
-      <%= submit_tag icon("magnifying-glass", aria_label: t("decidim.search.term_input_placeholder"), role: "img"), title: t("decidim.search.term_input_placeholder"), id: :submit, class: "okbr-search__button" %>
-    </div>
-    <%= label_tag :term do %>
-      <%= text_field_tag :term, nil, class: "okbr-search__input", placeholder: t("decidim.search.term_input_placeholder"), title: t("decidim.search.term_input_placeholder") %>
+<div class="show-for-medium" data-set="nav-search-holder">
+  <div class=" js-append okbr-search">
+    <%= form_tag(decidim.search_path, method: :get, class: "okbr-search__form") do %>
+
+        <div class="okbr-search__button-wrapper">
+          <%= submit_tag icon("magnifying-glass", aria_label: t("decidim.search.term_input_placeholder"), role: "img"), title: t("decidim.search.term_input_placeholder"), id: :submit, class: "okbr-search__button" %>
+        </div>
+
+        <%= label_tag :term do %>
+          <%= text_field_tag :term, nil, class: "okbr-search__input", placeholder: t("decidim.search.term_input_placeholder"), title: t("decidim.search.term_input_placeholder") %>
+        <% end %>
+
     <% end %>
-  <% end %>
-</div>
+  </div>
+</div>
diff --git a/app/views/layouts/decidim/_wrapper.html.erb b/app/views/layouts/decidim/_wrapper.html.erb
@@ -44,11 +44,14 @@ end
             <% end %>
             <div class="row column topbar">
               <div class="logo-wrapper">
-                <%= render partial: "layouts/decidim/logo", locals: { organization: current_organization } %>
-              </div>
-              <div id="okbr-link">
-                <%= link_to "open knowledge brasil", "https://ok.org.br", target: "_blank", rel: "nofollow" %>
-              </div>
+                <div class="org-logo">
+                  <%= render partial: "layouts/decidim/logo", locals: { organization: current_organization } %>
+                </div>
+                <div id="okbr-link">
+                  <%= link_to "open knowledge brasil", "https://ok.org.br/", target: "_blank", rel: "nofollow" %>
+                </div> 
+              </div>            
+
               <%= render partial: "layouts/decidim/topbar_search" %>
               <%= render partial: "layouts/decidim/language_chooser" %>
               <div class="hide-for-medium topbar__menu">
@@ -119,4 +122,4 @@ end
       </div>
     </div>
   </div>
-</div>
+</div>
diff --git a/config/locales/pt-BR.yml b/config/locales/pt-BR.yml
@@ -702,7 +702,7 @@ pt-BR:
         creator: Administrador
     links:
       warning:
-        body_1: Você está prestes a sair do %{organization_name}.
+        body_1: Você está prestes a sair do cominutas.
         body_2: Como medida de precaução, por favor verifique o link no qual clicou e certifique-se que o reconhece.
     log:
       base_presenter: