Add to Resources page, get rid of unnecessary classes, and update sto…

…rybook build (#1163) - Add to the Resources page - Get rid of unnecessary classes - Update storybook build
ifmeorg · Oct 15, 2018 · 00768b2 · 00768b2
1 parent 882bd29
commit 00768b2
Show file tree

Hide file tree

Showing 51 changed files with 306 additions and 261 deletions.
diff --git a/app/assets/stylesheets/core/containers.scss b/app/assets/stylesheets/core/containers.scss
@@ -5,17 +5,6 @@
   }
 }
 
-.spacer {
-  width: 100%;
-  height: $size-40;
-  @media screen and (max-width: $medium) {
-    height: $size-20;
-  }
-  @media screen and (max-width: $medium) {
-    height: $size-10;
-  }
-}
-
 .viewersIndicator {
   color: $dusty-rose;
   font-weight: bold;

diff --git a/app/assets/stylesheets/core/margins.scss b/app/assets/stylesheets/core/margins.scss
@@ -1,63 +1,35 @@
 .marginRight {
-  margin-right: $size-40 !important;
+  @include setMargin($size-0, $size-40, $size-0, $size-0);
 }
 
 .smallMarginRight {
-  margin-right: $size-20 !important;
-}
-
-.smallerMarginRight {
-  margin-right: $size-10 !important;
+  @include setMargin($size-0, $size-20, $size-0, $size-0);
 }
 
 .marginLeft {
-  margin-left: $size-40 !important;
+  @include setMargin($size-0, $size-0, $size-0, $size-40);
 }
 
 .smallMarginLeft {
-  margin-left: $size-20 !important;
-}
-
-.smallerMarginLeft {
-  margin-left: $size-10 !important;
+  @include setMargin($size-0, $size-0, $size-0, $size-20);
 }
 
 .marginTop {
-  margin-top: $size-40 !important;
+  @include setMargin($size-40, $size-0, $size-0, $size-0);
 }
 
 .smallMarginTop {
-  margin-top: $size-20 !important;
-}
-
-.smallerMarginTop {
-  margin-top: $size-10 !important;
+  @include setMargin($size-20, $size-0, $size-0, $size-0);
 }
 
 .marginBottom {
-  margin-bottom: $size-40 !important;
+  @include setMargin($size-0, $size-0, $size-40, $size-0);
 }
 
 .smallMarginBottom {
-  margin-bottom: $size-20 !important;
-}
-
-.smallerMarginBottom {
-  margin-bottom: $size-10 !important;
-}
-
-.noMarginTop{
-  margin-top: $size-0 !important;
+  @include setMargin($size-0, $size-0, $size-20, $size-0);
 }
 
 .noMarginBottom {
-  margin-bottom: $size-0 !important;
+  margin-bottom: $size-0;
 }
-
-.noMarginLeft {
-  margin-left: $size-0 !important;
-}
-
-.noMarginRight {
-  margin-right: $size-0 !important;
-}
diff --git a/app/assets/stylesheets/static/static_content.scss b/app/assets/stylesheets/static/static_content.scss
@@ -108,10 +108,9 @@
     }
   }
 
-  .purple_yay {
+  .purpleYay {
     @include setFontSize($size-30);
     color: $purple-yay;
-    text-align: center;
     text-shadow: $size-0 $size-0 $size-4 $purple-yay;
   }
 
@@ -144,6 +143,7 @@
   }
 
   .partner {
+    @include setMargin($size-0, $size-0, $size-40, $size-0);
     text-align: center;
     img {
       border-radius: $size-4;
@@ -153,6 +153,9 @@
         width: 100%;
       }
     }
+    &:last-of-type {
+      @include setMargin($size-0, $size-0, $size-0, $size-0);
+    }
   }
 
   .errorField {

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -109,7 +109,7 @@ def get_icon_class(icon)
   def get_icon_text(icon, text)
     html = ''
     if icon && text
-      html += "<i class=\"#{get_icon_class(icon)} smallerMarginRight\"></i>"
+      html += "<i class=\"#{get_icon_class(icon)} smallMarginRight\"></i>"
       html += text
     end
     html.html_safe

diff --git a/app/helpers/pages_helper.rb b/app/helpers/pages_helper.rb
@@ -13,16 +13,13 @@ def print_contributors(contributors)
 
   def print_partners(data)
     html = ''
-    data.each_with_index do |d, index|
+    data.each do |d|
       break unless valid_hash?('partners', d)
 
       image = image_tag(d['image_link'], alt: d['name'])
       link = link_to(image, d['link'], target: 'blank')
-
-      html += content_tag(:div, link, class: 'partner') +
-              spacer_tag?(index, data.size)
+      html += content_tag(:div, link, class: 'partner')
     end
-
     html.html_safe
   end
 
@@ -45,10 +42,4 @@ def data_type_check(data_type, data)
     end
     data_type_check
   end
-
-  def spacer_tag?(index, size)
-    return '' unless index + 1 != size
-
-    content_tag(:div, '', class: 'spacer')
-  end
 end
diff --git a/app/helpers/reminder_helper.rb b/app/helpers/reminder_helper.rb
@@ -20,7 +20,7 @@ def active_reminders?(data)
 
   def format_reminders(reminder_names)
     reminders = '<div>'
-    reminders += '<i class="fa fa-bell smallerMarginRight"></i>'
+    reminders += '<i class="fa fa-bell smallMarginRight"></i>'
     reminders += join_names(reminder_names)
     reminders += '</div>'
     reminders

diff --git a/app/views/allies/index.html.erb b/app/views/allies/index.html.erb
@@ -3,56 +3,52 @@
 <%= link_to t('allies.index.invite'), new_user_invitation_path, class: 'smallMarginTop buttonDarkM fullWidth center' %>
 
 <% if @outgoing_ally_requests.any? %>
-  <strong><%= t('allies.index.outgoing') %></strong>
-  <div class="spacer"></div>
-  <div class="gridThree">
-  <% @outgoing_ally_requests.each do |ally| %>
-    <div class="gridThreeItemBoxLight ally">
-      <%= link_to ProfilePicture.fetch(ally.avatar.url, name: ally.name), profile_index_path(uid: get_uid(ally.id)) %>
-      <div class="subtle"><%= ally.location %></div>
-      <%= link_to t('allies.index.cancel'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
+  <div class="marginTop">
+    <div class="title"><%= t('allies.index.outgoing') %></div>
+    <div class="gridThree">
+    <% @outgoing_ally_requests.each do |ally| %>
+      <div class="gridThreeItemBoxLight ally">
+        <%= link_to ProfilePicture.fetch(ally.avatar.url, name: ally.name), profile_index_path(uid: get_uid(ally.id)) %>
+        <div class="subtle"><%= ally.location %></div>
+        <%= link_to t('allies.index.cancel'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
+      </div>
+    <% end %>
     </div>
-  <% end %>
   </div>
 <% end %>
 
 <% if @incoming_ally_requests.any? %>
-  <% if @outgoing_ally_requests.any? %>
-    <div class="spacer"></div>
-  <% end %>
-  <strong><%= t('allies.index.incoming') %></strong>
-  <div class="spacer"></div>
-  <div class="gridThree">
-  <% @incoming_ally_requests.each do |ally| %>
-    <div class="gridThreeItemBoxLight ally">
-      <%= link_to ProfilePicture.fetch(ally.avatar.url, name: ally.name), profile_index_path(uid: get_uid(ally.id)) %>
-      <div class="subtle"><%= ally.location %></div>
-      <%= link_to t('allies.accept'), add_allies_path(ally_id: ally.id), method: :post %> | <%= link_to t('common.actions.remove'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
-    </div>
-  <% end %>
-  </div>
-<% end %>
-
-<% if @accepted_allies.present? %>
-  <div class="spacer"></div>
-  <strong><%= t('allies.index.title') %></strong>
-  <div class="spacer"></div>
-<% end %>
-
-<% if @accepted_allies.present? %>
-  <div class="gridThree">
-    <% @accepted_allies.each do |ally| %>
+  <div class="marginTop">
+    <div class="title"><%= t('allies.index.incoming') %></div>
+    <div class="gridThree">
+    <% @incoming_ally_requests.each do |ally| %>
       <div class="gridThreeItemBoxLight ally">
         <%= link_to ProfilePicture.fetch(ally.avatar.url, name: ally.name), profile_index_path(uid: get_uid(ally.id)) %>
         <div class="subtle"><%= ally.location %></div>
-        <%= link_to t('common.actions.remove'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
+        <%= link_to t('allies.accept'), add_allies_path(ally_id: ally.id), method: :post %> | <%= link_to t('common.actions.remove'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
       </div>
     <% end %>
+    </div>
+  </div>
+<% end %>
+
+<% if @accepted_allies.present? %>
+  <div class="marginTop">
+    <div class="title"><%= t('allies.index.title') %></div>
+    <div class="gridThree">
+      <% @accepted_allies.each do |ally| %>
+        <div class="gridThreeItemBoxLight ally">
+          <%= link_to ProfilePicture.fetch(ally.avatar.url, name: ally.name), profile_index_path(uid: get_uid(ally.id)) %>
+          <div class="subtle"><%= ally.location %></div>
+          <%= link_to t('common.actions.remove'), remove_allies_path(ally_id: ally.id), method: :post, data: { confirm: t('common.actions.confirm') } %>
+        </div>
+      <% end %>
+    </div>
   </div>
 <% end %>
 
 <% if @outgoing_ally_requests.empty? && @incoming_ally_requests.empty? && @accepted_allies.count == 0 %>
-  <div class="smallMarginTop">
+  <div class="marginTop">
     <%= t('allies.index.none') %>
   </div>
 <% end %>
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
@@ -17,10 +17,7 @@
 <% else %>
   <%= raw t('categories.index.instructions') %>
   <%= button_to t('common.actions.add_all'), premade_categories_path, class: 'smallMarginTop buttonDarkS' %>
-
-  <div class="spacer"></div>
-
-  <div class="gridTwo">
+  <div class="gridTwo marginTop">
     <% (1..4).each do |n| %>
       <div class="gridTwoItemBoxLight">
         <%= react_component('Story', html_options: html_options, props: {

diff --git a/app/views/categories/show.html.erb b/app/views/categories/show.html.erb
@@ -11,7 +11,7 @@
 <% end %>
 <div class="gridItemBoxDark gridRowSpaceBetween smallMarginTop">
 	<div class="gridRowSpaceBetween">
-		<div class="smallerMarginRight"><%= t('common.actions.plural') %>:</div>
+		<div class="smallMarginRight"><%= t('common.actions.plural') %>:</div>
 		<%= react_component('StoryActions', props: {
 			dark: true,
 			actions: {

diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -55,7 +55,7 @@
 
   <div class="label smallMarginTop"><%= t('devise.new_password') %></div>
   <%= f.password_field :password, autocomplete: 'off', placeholder: t('devise.password'), 'aria-label': t('devise.password') %>
-  <div class="smallerMarginTop">
+  <div class="smallMarginTop">
     <%= f.password_field :password_confirmation, autocomplete: 'off', placeholder: t('devise.registrations.placeholders.repeat_password'), 'aria-label': t('devise.registrations.placeholders.repeat_password') %>
   </div>
 

diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
@@ -7,11 +7,11 @@
     <%= f.text_field :name, 'aria-label': t('common.name') %>
 
     <div class="label smallMarginTop"><%= t('devise.registrations.new.label') %></div>
-    <%= f.text_field :location, class: 'smallerMarginBottom', placeholder: t('common.form.location'), 'aria-label': t('common.form.location') %>
+    <%= f.text_field :location, class: 'smallMarginBottom', placeholder: t('common.form.location'), 'aria-label': t('common.form.location') %>
     <%= f.email_field :email, placeholder: t('common.form.email'), 'aria-label': t('common.form.email') %>
 
     <div class="label smallMarginTop"><%= t('devise.password') %></div>
-    <%= f.password_field :password, autocomplete: 'off', class: 'smallerMarginBottom', placeholder: t('devise.password'), 'aria-label': t('devise.password') %>
+    <%= f.password_field :password, autocomplete: 'off', class: 'smallMarginBottom', placeholder: t('devise.password'), 'aria-label': t('devise.password') %>
     <%= f.password_field :password_confirmation, autocomplete: 'off', placeholder: t('devise.registrations.placeholders.repeat_password'), 'aria-label': ('devise.registrations.placeholders.repeat_password') %>
 
     <%= f.submit t('account.sign_up'), class: 'buttonGhostM smallMarginTop' %>

diff --git a/app/views/groups/_info.html.erb b/app/views/groups/_info.html.erb
@@ -8,7 +8,7 @@
 </div>
 <div class="gridItemBoxDark gridRowSpaceBetween smallMarginTop">
   <div class="gridRowSpaceBetween">
-    <div class="smallerMarginRight"><%= t('common.actions.plural') %>:</div>
+    <div class="smallMarginRight"><%= t('common.actions.plural') %>:</div>
     <%= react_component('StoryActions', props: {
       dark: true,
       actions: {

diff --git a/app/views/groups/index.html.erb b/app/views/groups/index.html.erb
@@ -37,20 +37,16 @@
   </div>
 <% else %>
   <%= raw t('groups.index.instructions') %>
-  <div class="spacer"></div>
-
-  <div class="title">
+  <div class="title marginTop">
     <%= t('pages.faq.group_question') %>
   </div>
-
   <%= raw t('pages.faq.group_answer', {
     group: link_to(t('groups.singular'), groups_path)
   }) %>
 <% end %>
 
 <% if @available_groups.any? %>
   <div class="title"><%= t('groups.index.available_groups') %></div>
-
   <div class="gridTwo">
     <% @available_groups.each do |group| %>
       <div class="gridTwoItemBoxLight">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -54,7 +54,7 @@
     <% end %>
   </head>
 
-  <body class="<%= controller_name %> <%= action_name %>">
+  <body>
     <div class="content <%= (user_signed_in? && !static_page?) || secret_share_path? ? 'dashboard' : 'static' %>" role="main">
       <%= react_component('Header', props: header_props) %>
       <%= render partial: 'shared/alerts' %>

diff --git a/app/views/medications/index.html.erb b/app/views/medications/index.html.erb
@@ -15,13 +15,9 @@
   <%= paginate @medications %>
 <% else %>
   <%= raw t('medications.index.instructions') %>
-
-  <div class="spacer"></div>
-
-  <div class="gridTwo">
+  <div class="gridTwo marginTop">
     <div class="gridTwoItemBoxLight noMarginBottom">
       <h1 class="medication_name"><%= t('medications.index.example_name') %></h1>
-
       <strong><%= t('medications.strength') %></strong> <%= t('medications.index.example_strength') %>
       <br><strong><%= t('medications.index.total') %></strong> <%= t('medications.index.example_total') %>
       <br><strong><%= t('medications.dosage') %></strong> <%= t('medications.index.example_dosage') %>

diff --git a/app/views/medications/show.html.erb b/app/views/medications/show.html.erb
@@ -6,7 +6,7 @@
 <div class="gridItemBoxDark smallMarginTop">
   <div class="gridRowSpaceBetween">
     <div class="gridRowSpaceBetween">
-      <div class="smallerMarginRight"><%= t('common.actions.plural') %>:</div>
+      <div class="smallMarginRight"><%= t('common.actions.plural') %>:</div>
       <%= react_component('StoryActions', props: {
         dark: true,
         actions: {

diff --git a/app/views/meetings/show.html.erb b/app/views/meetings/show.html.erb
@@ -13,7 +13,7 @@
 <% if user_is_leader_of?(@meeting) %>
   <div class="gridItemBoxDark gridRowSpaceBetween smallMarginTop">
     <div class="gridRowSpaceBetween">
-      <div class="smallerMarginRight"><%= t('common.actions.plural') %>:</div>
+      <div class="smallMarginRight"><%= t('common.actions.plural') %>:</div>
       <%= react_component('StoryActions', props: {
         dark: true,
         actions: {