Sort out spacing of tabs on thematical pages

unepwcmc · Aug 18, 2020 · 8f10682 · 8f10682
1 parent 3781660
commit 8f10682
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 43 deletions.
diff --git a/app/javascript/components/tabs/Tabs.vue b/app/javascript/components/tabs/Tabs.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="tabs">
-    <ul class="tabs__triggers">
-      <tab-trigger
-        v-for="tab, index in tabTriggers"
-        :key="`${tab.id}-${index}`"
-        :id="tab.id"
-        :selected-id="selectedId"
-        :title="tab.title"
-        v-on:click:tab="click"
-      />
-    </ul>
+    <div class="container">
+      <ul class="tabs__triggers">
+        <tab-trigger
+          v-for="tab, index in tabTriggers"
+          :key="`${tab.id}-${index}`"
+          :id="tab.id"
+          :selected-id="selectedId"
+          :title="tab.title"
+          v-on:click:tab="click"
+        />
+      </ul>
+    </div>
 
     <slot :selected-id="selectedId" />
   </div>

diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
@@ -7,11 +7,9 @@
   } 
 %>
 
-<section class="container">
-  <%= render partial: "partials/tabs/tabs-equity", locals: { 
-    tabs: tabs
-  } %>
-</section>
+<%= render partial: "partials/tabs/tabs-equity", locals: { 
+  tabs: tabs
+} %>
 
 <section class="container">
   <%= render "partials/cards/resources" %>

diff --git a/app/views/layouts/partials/_hero-area-types.html.erb b/app/views/layouts/partials/_hero-area-types.html.erb
@@ -5,7 +5,6 @@
   <% end %>
 >
   <div class="hero__container container">
-
     <div class="hero__content">
       <h1><%= title %></h1>
 

diff --git a/app/views/pame/index.html.erb b/app/views/pame/index.html.erb
@@ -1,19 +1,21 @@
 <%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
 
-<section class="container page-padding--bottom">
+<section class="page-padding--bottom">
   <tabs
     class="tabs--hero"
     :tab-triggers="<%= @tabs %>"
   >
     <template slot-scope="{ selectedId }">
       <tab-target :id="1" :selected-id="selectedId">
-        <filtered-table 
-          :attributes="<%= @table_attributes %>"
-          endpoint="/pame/list"
-          :filters="<%= @filters %>" 
-          :json="<%= @json %>" 
-        >
-        </filtered-table>
+        <div class="container">
+          <filtered-table 
+            :attributes="<%= @table_attributes %>"
+            endpoint="/pame/list"
+            :filters="<%= @filters %>" 
+            :json="<%= @json %>" 
+          >
+          </filtered-table>
+        </div>
       </tab-target>
 
       <tab-target :id="2" :selected-id="selectedId">

diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -8,7 +8,7 @@
         <%= cms_fragment_render("tab-content-1") %>
       </section>
 
-      <section class="section-padding--bottom">
+      <section class="container section-padding--bottom">
         <select-equity
           :protected-areas="<%= protected_areas.to_json %>"
         ><select-equity>

diff --git a/app/views/partials/tabs/_tabs-thematic-area-database.html.erb b/app/views/partials/tabs/_tabs-thematic-area-database.html.erb
@@ -4,15 +4,13 @@
 >
   <template slot-scope="{ selectedId }">
     <tab-target :id="1" :selected-id="selectedId">
-      <div class="container">
-        <section class="container--medium section-padding--bottom">
-          <%= cms_fragment_render("tab-content-1") %>
-        </section>
+      <section class="container--medium section-padding--bottom">
+        <%= cms_fragment_render("tab-content-1") %>
+      </section>
 
-        <section class="section-padding--bottom">
-          <%= render partial: "partials/search/protected-areas", locals: { config: config_search } %>
-        </section>
-      </div>
+      <section class="section-padding--bottom">
+        <%= render partial: "partials/search/protected-areas", locals: { config: config_search } %>
+      </section>
 
       <section class="map-section">
         <%= render partial: "partials/maps/main", locals: {
@@ -22,19 +20,15 @@
     </tab-target>
 
     <tab-target :id="2" :selected-id="selectedId">
-      <div class="container">
-        <section class="container--medium">
-          <%= cms_fragment_render("tab-content-2") %>
-        </section>
-      </div>
+      <section class="container--medium">
+        <%= cms_fragment_render("tab-content-2") %>
+      </section>
     </tab-target>
 
     <tab-target :id="3" :selected-id="selectedId">
-      <div class="container">
-        <section class="container--medium">
-          <%= cms_fragment_render("tab-content-3") %>
-        </section>
-      </div>
+      <section class="container--medium">
+        <%= cms_fragment_render("tab-content-3") %>
+      </section>
     </tab-target>
   </template>
 </tabs>