Merge pull request #100 from broadinstitute/development

Updates to branding group form
broadinstitute · Mar 12, 2018 · 6c8ad2e · 6c8ad2e
2 parents 2ca79c0 + f613518
commit 6c8ad2e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/app/helpers/branding_groups_helper.rb b/app/helpers/branding_groups_helper.rb
@@ -1,2 +1,29 @@
 module BrandingGroupsHelper
+
+  def web_safe_fonts
+    [
+        ['Sans-serif',
+          [
+              ['Arial', 'Arial, sans-serif'], ['Arial Narrow', 'Arial Narrow, sans-serif'], ['Arial Rounded MT Bold','Arial Rounded MT Bold, sans-serif'],
+              ['Calibri', 'Calibri, sans-serif'], ['Candara','Candara, sans-serif'], ['Century Gothic','Century Gothic, sans-serif'],
+              ['Gill Sans','Gill Sans, sans-serif'], ['Helvetica','Helvetica, sans-serif'], ['Helvetica Neue','Helvetica Neue, sans-serif'],
+              ['Tahoma','Tahoma, sans-serif'], ['Trebuchet MS','Trebuchet MS, sans-serif'], ['Verdana','Verdana, sans-serif']
+          ]
+        ],
+        ['Serif',
+          [
+              ['Baskerville','Baskerville, serif'], ['Book Antiqua','Book Antiqua, serif'], ['Calisto MT','Calisto MT, serif'],
+              ['Cambria','Cambria, serif'], ['Garamond','Garamond, serif'], ['Georgia','Georgia, serif'], ['Goudy Old Style','Goudy Old Style, serif'],
+              ['Lucida Bright','Lucida Bright, serif'], ['Palatino','Palatino, serif'], ['Times New Roman','Times New Roman, serif']
+          ]
+        ],
+        ['Monospace',
+          [
+              ['Andale Mono','Andale Mono, monospace'], ['Consolas','Consolas, monospace'], ['Courier New','Courier New, monospace'],
+              ['Lucida Console','Lucida Console, monospace'], ['Lucida Sans Typewriter','Lucida Sans Typewriter, monospace'],
+              ['Monaco','Monaco, monospace']
+          ]
+        ]
+    ]
+  end
 end
diff --git a/app/models/branding_group.rb b/app/models/branding_group.rb
@@ -7,7 +7,7 @@ class BrandingGroup
   field :name_as_id, type: String
   field :tag_line, type: String
   field :background_color, type: String
-  field :font_family, type: String, default: 'Helvetica Neue'
+  field :font_family, type: String, default: 'Helvetica Neue, sans-serif'
   field :font_color, type: String, default: '#333333'
 
   has_many :studies

diff --git a/app/views/branding_groups/_form.html.erb b/app/views/branding_groups/_form.html.erb
@@ -17,21 +17,21 @@
       <%= f.text_field :name, class: 'form-control' %>
     </div>
     <div class="col-md-6">
-      <%= f.label :tag_line %><br>
+      <%= f.label :tag_line, 'Tag Line' %><br>
       <%= f.text_field :tag_line, class: 'form-control' %>
     </div>
   </div>
   <div class="form-group row">
     <div class="col-md-3">
-      <%= f.label :background_color %><br>
+      <%= f.label :background_color, 'Background Color' %><br>
       <%= f.color_field :background_color, class: 'form-control' %>
     </div>
     <div class="col-md-3">
-      <%= f.label :font_family %><br>
-      <%= f.text_field :font_family, class: 'form-control' %>
+      <%= f.label :font_family, "Font Family #{link_to "<i class='fa fa-fw fa-eye'></i>".html_safe, 'https://www.cssfontstack.com', title: 'View Options', data: {toggle: 'tooltip'}, target: :_blank}".html_safe %><br>
+      <%= f.select :font_family, grouped_options_for_select(web_safe_fonts, @branding_group.font_family), {}, class: 'form-control' %>
     </div>
     <div class="col-md-3">
-      <%= f.label :font_color %><br>
+      <%= f.label :font_color, 'Font Color' %><br>
       <%= f.color_field :font_color, class: 'form-control' %>
     </div>
     <div class="col-md-3">
@@ -41,16 +41,14 @@
     </div>
   </div>
   <div class="form-group row">
-    <div class="col-md-12">
-      <div class="col-md-3">
-        <%= f.label :splash_image, 'Splash Image' %><br/>
-        <%= f.file_field :splash_image, class: 'btn btn-default fileinput-button' %>
-        <% if @branding_group.splash_image.present? %>
-          <p class="help-block">Current file: <%= link_to "<i class='fa fa-download'></i> #{@branding_group.splash_image_file_name} (#{ number_to_human_size @branding_group.splash_image_file_size})".html_safe,
-                                                          @branding_group.splash_image.url, download: @branding_group.splash_image_file_name,
-                                                          class: 'btn btn-xs btn-primary' %></p>
-        <% end %>
-      </div>
+    <div class="col-md-3">
+      <%= f.label :splash_image, 'Splash Image' %><br/>
+      <%= f.file_field :splash_image, class: 'btn btn-default fileinput-button' %>
+      <% if @branding_group.splash_image.present? %>
+        <p class="help-block">Current file: <%= link_to "<i class='fa fa-download'></i> #{@branding_group.splash_image_file_name} (#{ number_to_human_size @branding_group.splash_image_file_size})".html_safe,
+                                                        @branding_group.splash_image.url, download: @branding_group.splash_image_file_name,
+                                                        class: 'btn btn-xs btn-primary' %></p>
+      <% end %>
     </div>
   </div>
 

diff --git a/app/views/branding_groups/show.html.erb b/app/views/branding_groups/show.html.erb
@@ -1,6 +1,6 @@
 
 <div id="branding-group-demo" style="font-family: <%= @branding_group.font_family %> !important; color: <%= @branding_group.font_color %> !important; background-color: <%= @branding_group.background_color %> !important;">
-  <h1><span id="branding_group_name"><%= @branding_group.name %></span> <%= link_to "<i class='fa fa-eye'></i> View Live".html_safe, site_path(brand: @branding_group.name_as_id), class: 'btn btn-default' %></h1>
+  <h1><span id="branding_group_name"><%= @branding_group.name %></span> <%= link_to "<i class='fa fa-eye'></i> View Live".html_safe, site_path(scpbr: @branding_group.name_as_id), class: 'btn btn-default' %></h1>
   <p class="lead" id="branding_group_tag_line"><%= @branding_group.tag_line %></p>
   <div class="row">
     <div class="col-md-3">
@@ -9,7 +9,7 @@
       <p>Background color: <span id="branding_group_background_color"><%= @branding_group.background_color %></span></p>
     </div>
     <div class="col-md-9">
-      <p>Splash Image <span id="branding_group_splash_image"><%= @branding_group.splash_image_file_name %></span></p>
+      <p>Splash Image: <span id="branding_group_splash_image"><%= @branding_group.splash_image_file_name %></span></p>
       <%= image_tag @branding_group.splash_image.url, class: 'img-thumbnail' %>
     </div>
   </div>