Change styling, add help text and placeholder text

app/assets/stylesheets/campaign.css.scss

@@ -1,4 +1,4 @@
-$medgray: #666;
+$medgray: #3A9AC9;
 
 .videolisting {
   label {
@@ -12,10 +12,37 @@ $medgray: #666;
   .odd {
     background-color: $medgray;
     padding: 10px;
+    .help-block{
+      color: #ccc;
+    }
+
   }
   .even {
     background-color: lighten($medgray, 50);
     padding: 10px;
   }
+
+  .even, .odd {
+    .help-block{
+      color: #ccc;
+    }
+  }
 }
 
+input {
+  width:100%;
+}
+
+input[type="submit"]{
+  width: 131px
+}
+
+
+textarea {
+  width:100%;
+  height: 5em;
+}
+
+select {
+  width:100%;
+}

app/controllers/campaigns_controller.rb

@@ -43,7 +43,7 @@ class CampaignsController < ApplicationController
     else
       respond_to do |format|
           format.json { render json: {error: @campaign.errors.full_messages } }
-          format.html {       render action: 'edit' }
+          format.html { render action: 'edit' }
       end
     end
   end

app/views/campaigns/_form.html.erb

@@ -1,4 +1,9 @@
-<%= simple_form_for(@campaign, url: @action, html: {class: 'form-horizontal'}) do |frm| %>
+<%= simple_form_for(@campaign, url: @action, wrapper_mappings: {
+        check_boxes: :vertical_radio_and_checkboxes,
+        radio_buttons: :vertical_radio_and_checkboxes,
+        file: :vertical_file_input,
+        boolean: :vertical_boolean
+}) do |frm| %>
     <div class="row">
       <div class="col-md-1"></div>
 
@@ -21,49 +26,112 @@
     <div class="row">
       <div class="col-md-1"></div>
       <div class="col-md-5">
-          <%= frm.input :clientid, label: 'Client ID' %>
-          <%= frm.input :listingcode, label: 'Listing Code' %>
-          <%= frm.input :websiteurl, label: 'Website URL'%>
-          <%= frm.input :advertisername, label: 'Advertiser Name' %>
-          <%= frm.input :billingcode, label: 'Billing Code' %>
-          <%= frm.input :emailaddress, label: 'Email Address' %>
-          <%= frm.input :businessphone, label: 'Business Phone' %>
-          <%= frm.input :contactphone, label: 'Contact Phone' %>
-          <%= frm.input :customerfirstname, label: 'Customer First Name' %>
-          <%= frm.input :customerlastname, label: 'Customer Last Name' %>
-          <%= frm.input :address, label: 'Address' %>
-          <%= frm.input :city, label: 'City' %>
-          <%= frm.input :state, label: 'State' %>
-          <%= frm.input :zip, label: 'ZIP' %>
-
-          <%= frm.input :awards, label: 'Awards' %>
-          <%= frm.input :background, label: 'Background' %>
-          <%= frm.input :categories, label: 'Categories' %>
-          <%= frm.input :companycolors, label: 'Company Colors' %>
-          <%= frm.input :description, label: 'Description' %>
-          <%= frm.input :facebookurl, label: 'Facebook URL' %>
-          <%= frm.input :productsandservices, label: 'Products & Services' %>
-          <%= frm.input :targetaudience, label: 'Target Audience' %>
-          <%= frm.input :tollfreephone, label: 'Tollfree Phone' %>
-          <%= frm.input :vpa, label: 'Client Service Rep' %>
 
+          <%= frm.input :clientid,
+                        label: 'Client ID', 
+                        hint: 'An identifier provided by BetterVideo.' %>
+          <%= frm.input :listingcode, 
+                        label: 'Listing Code', 
+                        hint: "This should be the same as Intake Form's Form Hash." %>
+          <%= frm.input :websiteurl, 
+                        label: 'Website URL',
+                        hint: "Used for script research and may be used in the video if they are including websites in the video graphics." %>
+          <%= frm.input :advertisername, 
+                        label: 'Advertiser Name',
+                        hint: "The name of the company." %>
+          <%= frm.input :vpa, 
+                        label: 'Client Service Rep',
+                        hint: "This is the full name of the client services representative, as entered in the BetteVideo system associated with this order. This feature is designed for sales reps that are well known to the system. This feature is typically used for automated communication." %>
 
+          <%= frm.input :billingcode, 
+                        label: 'Billing Code',
+                        hint: "Market or billing code. Should match a billing code in the BetterVideo system so it can be associated." %>
+          <%= frm.input :emailaddress, 
+                        label: 'Email Address' %>
+          <%= frm.input :businessphone, 
+                        label: 'Business Phone' %>
+          <%= frm.input :contactphone, 
+                        label: 'Contact Phone' %>
+          <%= frm.input :customerfirstname, 
+                        label: 'Customer First Name' %>
+          <%= frm.input :customerlastname,
+                        label: 'Customer Last Name' %>
+          <%= frm.input :address,
+                        label: 'Address' %>
+          <%= frm.input :city,
+                        label: 'City' %>
+          <%= frm.input :state,
+                        label: 'State' %>
+          <%= frm.input :zip,
+                        label: 'ZIP' %>
 
+          <%= frm.input :awards,
+                        label: 'Awards',
+                        hint: "Used in script and video research." %>
+          <%= frm.input :background,
+                        label: 'Background',
+                        hint: "This is the background of the company and is used for script research." %>
+          <%= frm.input :categories,
+                        label: 'Categories',
+                        hint: "Used in script and video research." %>
+          <%= frm.input :companycolors,
+                        label: 'Company Colors',
+                        hint: "Comma Separated.",
+                        placeholder: "ex: red, white, blue" %>
+          <%= frm.input :description,
+                        label: 'Description',
+                        hint: "Used for script research." %>
+          <%= frm.input :facebookurl,
+                        label: 'Facebook URL',
+                        hint: "Used for script and photo research." %>
+          <%= frm.input :productsandservices,
+                        label: 'Products & Services',
+                        hint: "Used in script and video research." %>
+          <%= frm.input :targetaudience,
+                        label: 'Target Audience',
+                        hint: "Used in script and video research." %>
+          <%= frm.input :tollfreephone,
+                        label: 'Tollfree Phone',
+                        hint: "Toll-free phone number of business. Used in video creation." %>
       </div>
 
       <div class="col-md-5">
         <div class="videolisting">
             <%= frm.simple_fields_for(:videolistings, html: {class: 'form-horizontal'}) do |vidlist| %>
               <div class="<%= cycle('odd','even') %>">
-                <%= vidlist.input :videocode, label: 'Video Code' %>
+                <%= vidlist.input :videocode,
-                <%= vidlist.input :producttypeid, label: "Product Type", collection: producttypeid_list %>
+                                  label: 'Video Code',
-                <%= vidlist.input :voiceoverselection, label: 'Voiceover Selection', collection: voiceoverselection_list %>
+                                  hint: "Unique identifier for every video." %>
-                <%= vidlist.input :musicselection, label: 'Music Selection', collection: musicselection_list %>
+                <%= vidlist.input :producttypeid,
-                <%= vidlist.input :clientprovidedscript, label: 'Client Provided Script' %>
+                                  label: "Product Type",
-                <%= vidlist.input :keywords, label: 'Keywords' %>
+                                  collection: producttypeid_list,
-                <%= vidlist.input :focus, label: 'Focus' %>
+                                  hint: "What type of content to create for this video. The types available are dependant on the pre-defined list of products." %>
-                <%= vidlist.input :notes, label: 'Notes' %>
+                <%= vidlist.input :voiceoverselection,
-                <%= vidlist.input :asseturls, label: 'Asset Urls' %>
+                                  label: 'Voiceover Selection',
+                                  collection: voiceoverselection_list,
+                                  hint: "What type of voiceover talent to use." %>
+                <%= vidlist.input :musicselection,
+                                  label: 'Music Selection',
+                                  collection: musicselection_list,
+                                  hint: "What type of music to use in the video." %>
+                <%= vidlist.input :clientprovidedscript,
+                                  label: 'Client Provided Script',
+                                  as: 'text',
+                                  hint: "If the customer has provided a script for BetterVideo to use. Formatting is text only." %>
+                <%= vidlist.input :keywords,
+                                  label: 'Keywords',
+                                  hint: "Keywords for use in VSEO campaigns or indexing such as Google or YouTube." %>
+                <%= vidlist.input :focus,
+                                  label: 'Focus',
+                                  hint: "Information used to guide BetterVideo in creating the video." %>
+                <%= vidlist.input :notes,
+                                  label: 'Notes',
+                                  hint: "Notes and/or instructions sent in this field are used by the editors to aid in production of the video." %>
+                <%= vidlist.input :asseturls,
+                                  as: 'text',
+                                  label: 'Asset Urls',
+                                  placeholder: "ex: http://www.company.com/logo.png, http://www.company.com/background.png",
+                                  hint: "A comma separated list of URLs of any assets." %>
               </div>
             <% end %>
         </div>

app/views/campaigns/edit.html.erb

@@ -1,6 +1,6 @@
+<%= link_to 'Show', @campaign %> |
+<%= link_to 'Back', campaigns_path %>
+
 <h1>Editing campaign</h1>
 
 <%= render 'form' %>
-
-<%= link_to 'Show', @campaign %> |
-<%= link_to 'Back', campaigns_path %>

app/views/campaigns/index.html.erb

@@ -2,14 +2,14 @@
 <table class="table table-striped">
   <thead>
     <tr>
+      <th>Listing Code(Form Hash)</th>
+      <th>Processed?</th>
       <th>Client ID</th>
-      <th>Listing Code</th>
       <th>Billing Code</th>
       <th>Address</th>
       <th>City</th>
       <th>State</th>
       <th>ZIP</th>
-      <th>Processed?</th>
       <th></th>
       <th></th>
     </tr>
@@ -19,13 +19,13 @@
     <% @campaigns.each do |campaign| %>
       <tr>
         <td><%= link_to campaign.listingcode, campaign_path(campaign.listingcode) %></td>
-        <td><%= campaign.listingcode %></td>
+        <td><i class="glyphicon glyphicon-<% if campaign.processed? %>ok<% else %>remove<% end %>"></i> </td>
+        <td><%= campaign.clientid %></td>
         <td><%= campaign.billingcode %></td>
         <td><%= campaign.address %></td>
         <td><%= campaign.city %></td>
         <td><%= campaign.state %></td>
         <td><%= campaign.zip %></td>
-        <td><%= campaign.processed? %></td>
         <td><%= link_to 'Edit', edit_campaign_path(campaign.listingcode) %></td>
         <td><%= link_to 'Destroy', campaign_path(campaign.listingcode), method: :delete, data: { confirm: 'Are you sure?' } %></td>
       </tr>

app/views/campaigns/new.html.erb

@@ -1,5 +1,6 @@
+<%= link_to 'Back', campaigns_path %>
+
 <h1>New campaign</h1>
 
 <%= render 'form' %>
 
-<%= link_to 'Back', campaigns_path %>

app/views/campaigns/show.html.erb

@@ -1,97 +1,70 @@
 <%= link_to 'Edit', edit_campaign_path(@campaign.listingcode) %> |
 <%= link_to 'Back', campaigns_path %>
 
-<div class="col-md-2"></div>
-<div class="col-md-4">
-    <p id="notice"><%= notice %></p>
 
-    <p>
+<div class="col-md-8">
-      <strong>Clientid:</strong>
+  <h1>
-      <%= @campaign.clientid %>
+    <%= @campaign.advertisername %>
-    </p>
+  </h1>
+  <p id="notice"><%= notice %></p>
 
-    <p>
-      <strong>Listingcode:</strong>
-      <%= @campaign.listingcode %>
-    </p>
-
-    <p>
-      <strong>Billingcode:</strong>
-      <%= @campaign.billingcode %>
-    </p>
-
-    <p>
-      <strong>Advertisername:</strong>
-      <%= @campaign.advertisername %>
-    </p>
-
-    <p>
-      <strong>Address1:</strong>
-      <%= @campaign.address %>
-    </p>
-
-    <p>
-      <strong>City:</strong>
-      <%= @campaign.city %>
-    </p>
-
-    <p>
-      <strong>State:</strong>
-      <%= @campaign.state %>
-    </p>
-
-    <p>
-      <strong>Zip:</strong>
-      <%= @campaign.zip %>
-    </p>
-
-    <p>
-      <strong>Emailaddress:</strong>
-      <%= @campaign.emailaddress %>
-    </p>
-
-    <p>
-      <strong>Customerfirstname:</strong>
-      <%= @campaign.customerfirstname %>
-    </p>
-
-    <p>
-      <strong>Customerlastname:</strong>
-      <%= @campaign.customerlastname %>
-    </p>
-
-
-    <p>
-      <strong>Businessphone:</strong>
-      <%= @campaign.businessphone %>
-    </p>
-
-    <p>
-        <strong>Description:</strong>
-        <%= @campaign.description %>
-    </p>
-
-
-    <p>
-      <strong>Contactphone:</strong>
-      <%= @campaign.contactphone %>
-    </p>
-
-    <p>
-      <strong>Websiteurl:</strong>
-      <%= @campaign.websiteurl %>
-    </p>
-  </div>
-  <div class="col-md-4">
-    <ul>
-    <% @campaign.videolistings.each do |videolisting| %>
-          <%= render 'videolisting', videolisting: videolisting %>
-    <% end %>
-
-    <% if @campaign.videolistings.empty? %>
-        <li>No Video Listings for this Campaign.</li>
-    <% end %>
-
-  </ul>
 </div>
+<div class="col-md-8">
+    <div class="col-md-2"></div>
+    <div class="col-md-4">
+          <strong>Clientid:</strong>
+          <%= @campaign.clientid %>
+
+          <strong>Listingcode:</strong>
+          <%= @campaign.listingcode %>
+
+          <strong>Billingcode:</strong>
+          <%= @campaign.billingcode %>
+
+          <strong>Address1:</strong>
+          <%= @campaign.address %>
+
+          <strong>City:</strong>
+          <%= @campaign.city %>
+
+          <strong>State:</strong>
+          <%= @campaign.state %>
+
+          <strong>Zip:</strong>
+          <%= @campaign.zip %>
+
+          <strong>Email Address:</strong>
+          <%= @campaign.emailaddress %>
+
+          <strong>Customer First Name:</strong>
+          <%= @campaign.customerfirstname %>
+
+          <strong>Customer Last Name:</strong>
+          <%= @campaign.customerlastname %>
+
+          <strong>Businessphone:</strong>
+          <%= @campaign.businessphone %>
+
+          <strong>Description:</strong>
+          <%= @campaign.description %>
+
+          <strong>Contactphone:</strong>
+          <%= @campaign.contactphone %>
+
+          <strong>Websiteurl:</strong>
+          <%= @campaign.websiteurl %>
+      </div>
+      <div class="col-md-4">
+        <ul>
+        <% @campaign.videolistings.each do |videolisting| %>
+              <%= render 'videolisting', videolisting: videolisting %>
+        <% end %>
+
+        <% if @campaign.videolistings.empty? %>
+            <li>No Video Listings for this Campaign.</li>
+        <% end %>
+      </ul>
+    </div>
 <div class="col-md-2"></div>
+
+    </div>