Merge pull request #815 from ElixirTeSS/fix-row-abuse

Alignment fixes
ElixirTeSS · Feb 9, 2023 · d1ed168 · d1ed168
2 parents 2add4b9 + f076de5
commit d1ed168
Show file tree

Hide file tree

Showing 45 changed files with 500 additions and 616 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -107,14 +107,12 @@ div.wrapper {
 }
 
 #content {
-  padding: 10px;
   flex-grow: 1;
   overflow: hidden;
 }
 
 #sidebar {
   width: $sidebar-width;
-  padding: 10px;
   margin-right: $layout-spacing-base * 2;
   margin-top: $layout-spacing-base;
   flex-shrink: 0;
@@ -194,7 +192,7 @@ div.wrapper {
 }
 
 ul.facet-sort-wrap {
-  margin-bottom: $layout-spacing-base * 2;
+  margin-bottom: $layout-spacing-base;
 }
 
 .facet-sort {
@@ -239,12 +237,6 @@ ul.facet-sort-wrap {
   margin-top: 5px;
 }
 
-// Bootstrap's row
-.row {
-  margin: 10px 0 10px 0;
-  //padding: 0px 0px 10px 0px;  // Do not add padding to the row - messes up sidebar etc.
-}
-
 // From https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
 .dont-break-out {
   /* These are technically the same, but use both */

diff --git a/app/assets/stylesheets/themes/default.scss b/app/assets/stylesheets/themes/default.scss
@@ -24,7 +24,7 @@ $light-05-color: rgba(244, 247, 251, 0.05); // Unused
 // TeSS variables
 //////////////////////////////
 // Misc
-$layout-spacing-base: 24px;
+$layout-spacing-base: 30px;
 $item-padding-base: 24px;
 $sidebar-width: 280px;
 $transition-time: 300ms;
@@ -115,6 +115,8 @@ $breadcrumb-bg: transparent;
 $breadcrumb-separator: "/";
 $breadcrumb-color: $dark-color !default;
 $breadcrumb-active-color: $dark-color !default;
+$breadcrumb-padding-horizontal: 5px;
+$breadcrumb-padding-vertical: $layout-spacing-base / 2;
 
 // Pagination
 $pagination-color: $primary-color;

diff --git a/app/views/bans/new.html.erb b/app/views/bans/new.html.erb
@@ -1,17 +1,15 @@
-<div class="row wrapper">
-  <div class="col-md-12">
-    <div class="page-header">
-      <%= page_title('Ban') %>
-    </div>
-    <div class="col-md-8">
-      <%= simple_form_for [@user, @ban], url: user_ban_path(@user) do |f| %>
-          <%= f.input :reason %>
-          <%= f.input :shadow, label: 'Shadowban?' %>
-          <div class="form-group">
-            <%= f.submit 'Submit', class: 'btn btn-primary' %>
-            <%= link_to t('.cancel', default: t("helpers.links.cancel")), :back, class: 'btn btn-default' %>
-          </div>
-      <% end %>
-    </div>
+<div class="page-header">
+  <%= page_title('Ban') %>
+</div>
+<div class="row">
+  <div class="col-md-8">
+    <%= simple_form_for [@user, @ban], url: user_ban_path(@user) do |f| %>
+      <%= f.input :reason %>
+      <%= f.input :shadow, label: 'Shadowban?' %>
+      <div class="form-group">
+        <%= f.submit 'Submit', class: 'btn btn-primary' %>
+        <%= link_to t('.cancel', default: t("helpers.links.cancel")), :back, class: 'btn btn-default' %>
+      </div>
+    <% end %>
   </div>
 </div>
diff --git a/app/views/collections/curate.html.erb b/app/views/collections/curate.html.erb
@@ -1,50 +1,49 @@
 <%- model_class = Collection -%>
-<div class="row wrapper">
-  <div class="col-md-12">
-    <div class="page-header row">
-      <%= page_title(t('.title', :default => [:'helpers.titles.curate', 'Curate %{type} in %{model} %{title}'], type: @item_class.table_name, model: model_class.model_name.human.titleize.downcase, title: @collection.title), class: 'col-md-8') %>
-      <div class="col-md-4" style="margin-top: 25px;">
-        <%= label_tag :since, t('.new_items_since', default: ['%{count} new items since'], count: @items.length) %>
-        <input id="since" type="date" value="<%= @since.strftime('%Y-%m-%d') %>" pattern="\d{4}-\d{2}-\d{2}" onchange="params = new URLSearchParams(window.location.search); params.set(since, this.value); window.location.search=params.toString();" />
-        <% if @item_class.name == "Event" %>
-          <%= label_tag :since, t('.show_past', default: ['show past events']) %>
-          <%= check_box_tag :past, true, @show_past.present?, onchange: "params = new URLSearchParams(window.location.search); this.checked ? params.set('past', true) : params.delete('past'); window.location.search = params.toString();" %> 
-        <% end %>
-      </div>
+<div class="page-header">
+  <div class="row">
+    <%= page_title(t('.title', :default => [:'helpers.titles.curate', 'Curate %{type} in %{model} %{title}'], type: @item_class.table_name, model: model_class.model_name.human.titleize.downcase, title: @collection.title), class: 'col-md-8') %>
+    <div class="col-md-4" style="margin-top: 25px;">
+      <%= label_tag :since, t('.new_items_since', default: ['%{count} new items since'], count: @items.length) %>
+      <input id="since" type="date" value="<%= @since.strftime('%Y-%m-%d') %>" pattern="\d{4}-\d{2}-\d{2}" onchange="params = new URLSearchParams(window.location.search); params.set(since, this.value); window.location.search=params.toString();" />
+      <% if @item_class.name == "Event" %>
+        <%= label_tag :since, t('.show_past', default: ['show past events']) %>
+        <%= check_box_tag :past, true, @show_past.present?, onchange: "params = new URLSearchParams(window.location.search); this.checked ? params.set('past', true) : params.delete('past'); window.location.search = params.toString();" %>
+      <% end %>
     </div>
-    <%= form_with url: request.url, local: true, method: :patch do |f| %>
-      <table class="table table-striped table-hover collection_curation_table">
-        <thead>
-          <tr>
-            <th></th>
-            <%- item_fields(@item_class).each do |field| -%>
-              <th><%= t field, default: field.to_s.titleize %></th>
-            <%- end %>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-        <% @items.each do |item| %>
-          <%- id = "item_#{item.id}" %>
-          <tr>
-            <td>
-              <%= label_tag id do %>
-                <%= hidden_field_tag "reviewed_item_ids[]", item.id %>
-                <input id="item_<%= item.id %>" type="checkbox" name="item_ids[]" value="<%= item.id %>" <%= @collection.send("#{@item_class.table_name.singularize}_ids").include?(item.id) ? 'checked' : '' %> />
-              <% end %>
-            </td>
-              <%- item_fields(@item_class).each do |field| -%>
-                <td><label for="<%= id %>"><%= [item.send(field)].flatten.join(', ') %></label></td>
-              <% end %>
-              <td><%= link_to t('.link', default: [:'helpers.titles.link', 'Link']), item %></td>
-          </tr>
-        <% end %>
-        </tbody>
-      </table>
+  </div>
+</div>
 
-      <div class="form-group actions">
-        <%= f.submit class: 'btn btn-primary' %>
-      </div>
+<%= form_with url: request.url, local: true, method: :patch do |f| %>
+  <table class="table table-striped table-hover collection_curation_table">
+    <thead>
+    <tr>
+      <th></th>
+      <%- item_fields(@item_class).each do |field| -%>
+        <th><%= t field, default: field.to_s.titleize %></th>
+      <%- end %>
+      <th></th>
+    </tr>
+    </thead>
+    <tbody>
+    <% @items.each do |item| %>
+      <%- id = "item_#{item.id}" %>
+      <tr>
+        <td>
+          <%= label_tag id do %>
+            <%= hidden_field_tag "reviewed_item_ids[]", item.id %>
+            <input id="item_<%= item.id %>" type="checkbox" name="item_ids[]" value="<%= item.id %>" <%= @collection.send("#{@item_class.table_name.singularize}_ids").include?(item.id) ? 'checked' : '' %> />
+          <% end %>
+        </td>
+        <%- item_fields(@item_class).each do |field| -%>
+          <td><label for="<%= id %>"><%= [item.send(field)].flatten.join(', ') %></label></td>
+        <% end %>
+        <td><%= link_to t('.link', default: [:'helpers.titles.link', 'Link']), item %></td>
+      </tr>
     <% end %>
+    </tbody>
+  </table>
+
+  <div class="form-group actions">
+    <%= f.submit class: 'btn btn-primary' %>
   </div>
-</div>
+<% end %>
diff --git a/app/views/collections/edit.html.erb b/app/views/collections/edit.html.erb
@@ -1,16 +1,12 @@
 <%- model_class = Collection -%>
-<div class="row wrapper">
-  <div class="col-md-12">
-    <div class="page-header">
-      <%= page_title(t('.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
-    </div>
-    <div class="row">
-      <div class="col-md-4 col-md-push-8">
-        <%= render :partial => 'collections/partials/general_collection_info' %>
-      </div>
-      <div class="col-md-8 col-md-pull-4">
-        <%= render :partial => 'form' %>
-      </div>
-    </div>
+<div class="page-header">
+  <%= page_title(t('.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
+</div>
+<div class="row">
+  <div class="col-md-4 col-md-push-8">
+    <%= render :partial => 'collections/partials/general_collection_info' %>
+  </div>
+  <div class="col-md-8 col-md-pull-4">
+    <%= render :partial => 'form' %>
   </div>
 </div>
diff --git a/app/views/collections/new.html.erb b/app/views/collections/new.html.erb
@@ -1,17 +1,12 @@
 <%- model_class = Collection -%>
-
-<div class="row wrapper">
-  <div class="col-md-12">
-    <div class="page-header">
-      <%= page_title(t('.title', :default => [:'helpers.titles.new', 'New %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
-    </div>
-    <div class="row">
-      <div class="col-md-4 col-md-push-8">
-        <%= render :partial => 'collections/partials/general_collection_info' %>
-      </div>
-      <div class="col-md-8 col-md-pull-4">
-        <%= render :partial => 'form' %>
-      </div>
-    </div>
+<div class="page-header">
+  <%= page_title(t('.title', :default => [:'helpers.titles.new', 'New %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
+</div>
+<div class="row">
+  <div class="col-md-4 col-md-push-8">
+    <%= render :partial => 'collections/partials/general_collection_info' %>
+  </div>
+  <div class="col-md-8 col-md-pull-4">
+    <%= render :partial => 'form' %>
   </div>
 </div>
diff --git a/app/views/collections/show.html.erb b/app/views/collections/show.html.erb
@@ -21,7 +21,7 @@
         <%= delete_button(@collection) if policy(@collection).destroy? %>
       </div>
     </div>
-    <div class="row">
+    <div class="my-3">
       <% materials = @collection.materials %>
       <% materials_count =  @collection.materials.count %>
       <% events = @collection.events %>

diff --git a/app/views/common/_associated_events.html.erb b/app/views/common/_associated_events.html.erb
@@ -12,27 +12,23 @@
 <% active = activator.check_pane(id) if activator %>
 
 <div id="<%= id %>" class="tab-pane fade<%= ' in active' if active -%>">
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="search-results-count">
-        Showing <%= pluralize(shown_count, name) -%>
-        <% all_btn_text = "Filter #{name.pluralize(shown_count)}" %>
-        <% if limit && total_count > limit %>
-          out of <%= total_count -%>
-          <% all_btn_text = "View all #{name.pluralize(shown_count)} & filter" %>
-        <% end %>
-        <% if past_count > 0 %>
-          <span class="muted">(also found <%= pluralize(past_count, 'past event') %>)</span>
-        <% end %>
-      </div>
-
-      <% if shown_count > 0 && view_all_link %>
-        <%= link_to all_btn_text, view_all_link, class: 'btn btn-xs btn-default' %>
-      <% elsif past_count > 0 && inc_expired_link %>
-        <%= link_to "View all #{name.pluralize(shown_count)} & filter", inc_expired_link, class: 'btn btn-xs btn-default' %>
-      <% end %>
-    </div>
+  <div class="search-results-count my-3">
+    Showing <%= pluralize(shown_count, name) -%>
+    <% all_btn_text = "Filter #{name.pluralize(shown_count)}" %>
+    <% if limit && total_count > limit %>
+      out of <%= total_count -%>
+      <% all_btn_text = "View all #{name.pluralize(shown_count)} & filter" %>
+    <% end %>
+    <% if past_count > 0 %>
+      <span class="muted">(also found <%= pluralize(past_count, 'past event') %>)</span>
+    <% end %>
   </div>
 
+  <% if shown_count > 0 && view_all_link %>
+    <%= link_to all_btn_text, view_all_link, class: 'btn btn-xs btn-default' %>
+  <% elsif past_count > 0 && inc_expired_link %>
+    <%= link_to "View all #{name.pluralize(shown_count)} & filter", inc_expired_link, class: 'btn btn-xs btn-default' %>
+  <% end %>
+
   <%= render partial: 'common/masonry_grid', locals: { objects: resources } %>
 </div>
diff --git a/app/views/common/_associated_resources.html.erb b/app/views/common/_associated_resources.html.erb
@@ -9,21 +9,17 @@
 <% active = activator.check_pane(id) if activator %>
 
 <div id="<%= id %>" class="tab-pane fade<%= ' in active' if active -%>">
-  <div class="row">
-    <div class="col-xs-12">
-      <div class="search-results-count">
-        Showing <%= pluralize(shown_count, name) -%>
-        <% if limit && total_count > limit %>
-          out of <%= total_count -%>
-          <% all_btn_text = 'View all & filter' %>
-        <% else %>
-          <% all_btn_text = 'Filter' %>
-        <% end %>
-      </div>
-
-      <%= link_to all_btn_text, view_all_link, class: 'btn btn-xs btn-default' if view_all_link %>
-    </div>
+  <div class="search-results-count my-3">
+    Showing <%= pluralize(shown_count, name) -%>
+    <% if limit && total_count > limit %>
+      out of <%= total_count -%>
+      <% all_btn_text = 'View all & filter' %>
+    <% else %>
+      <% all_btn_text = 'Filter' %>
+    <% end %>
   </div>
 
+  <%= link_to all_btn_text, view_all_link, class: 'btn btn-xs btn-default' if view_all_link %>
+
   <%= render partial: 'common/masonry_grid', locals: { objects: resources } %>
 </div>
diff --git a/app/views/common/_external_resource.html.erb b/app/views/common/_external_resource.html.erb
@@ -1,5 +1,5 @@
 <% api_url = external_resource.api_url_of_tool -%>
-<%= content_tag(:div, class: 'col-md-12 col-sm-12 bounding-box', data: { 'biotools-url': api_url }) do %>
+<%= content_tag(:div, class: 'bounding-box', data: { 'biotools-url': api_url }) do %>
   <%= link_to(external_resource.url, target: '_blank', rel: 'nofollow noopener') do %>
     <h5>
       <i class="fa fa-external-link"></i>

diff --git a/app/views/common/_external_resources_list.html.erb b/app/views/common/_external_resources_list.html.erb
@@ -1,4 +1,4 @@
-<div class="row bounding-box external-resources-box ">
+<div class="my-3 external-resources-box">
   <% external_resources.each do |external_resource| %>
     <% unless external_resource.failing? & !current_user&.is_admin? -%>
       <%= render partial: 'common/external_resource', object: external_resource %>

diff --git a/app/views/common/_mixed_resources.html.erb b/app/views/common/_mixed_resources.html.erb
@@ -28,13 +28,11 @@
 
   </div>
   <% if !TeSS::Config.feature['disabled'].include? 'topics' %>
-    <div class="row">
       <%= display_attribute(resource, :scientific_topics) { |values|
         values.map { |x| "<span class=\"scientific_topic\">#{x.preferred_label.to_s}</span>" }.join(', ')
       } %>
 
       <%= display_attribute(resource, :keywords) { |values| values.join(', ') } if resource.keywords.any? %>
       <%= yield %>
-    </div>
   <% end %>
 </div>
diff --git a/app/views/common/_topic_suggestions.html.erb b/app/views/common/_topic_suggestions.html.erb
@@ -2,7 +2,7 @@
   <div class="list-card">
     <%= link_to(suggestion.material.title, suggestion, class: 'list-card-heading') %>
 
-    <div class="row" style="margin: 0px;">
+    <div class="row">
       <div class="col-md-1">
         <div class="suggestion_type_icon">
           <%= icon_for(:suggestion, :large) %>

diff --git a/app/views/content_providers/edit.html.erb b/app/views/content_providers/edit.html.erb
@@ -1,16 +1,12 @@
 <%- model_class = ContentProvider -%>
-<div class="row wrapper">
-  <div class="col-md-12">
-    <div class="page-header">
-      <%= page_title(t('.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
-    </div>
-    <div class="row">
-      <div class="col-md-4 col-md-push-8">
-        <%= render :partial => 'content_providers/partials/general_content_provider_info' %>
-      </div>
-      <div class="col-md-8 col-md-pull-4">
-        <%= render :partial => 'form' %>
-      </div>
-    </div>
+<div class="page-header">
+  <%= page_title(t('.title', :default => [:'helpers.titles.edit', 'Edit %{model}'], :model => model_class.model_name.human.titleize.downcase)) %>
+</div>
+<div class="row">
+  <div class="col-md-4 col-md-push-8">
+    <%= render :partial => 'content_providers/partials/general_content_provider_info' %>
+  </div>
+  <div class="col-md-8 col-md-pull-4">
+    <%= render :partial => 'form' %>
   </div>
 </div>