Skip to content

Commit

Permalink
Final design Adjustments (#42)
Browse files Browse the repository at this point in the history 
* final layout updates per design qa
  • Loading branch information
@agirlnamedsophia
agirlnamedsophia committed Apr 5, 2017
1 parent 7ff4410 commit 18dd404
Show file tree
Hide file tree
Showing 18 changed files with 136 additions and 145 deletions.
4 changes: 4 additions & 0 deletions app/assets/stylesheets/components/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,7 @@
padding: 0.04em 0 0 0.04em;
}
}

.input-text input, .input-number input, .input-email input, .input-password input, .input-money input, .input-cents input, .input-percent input, .input-search input, .input-datepicker input, .input-file input, .input-text textarea, .input-number textarea, .input-email textarea, .input-password textarea, .input-money textarea, .input-cents textarea, .input-percent textarea, .input-search textarea, .input-datepicker textarea, .input-file textarea {
font-weight: $font-medium;
}
12 changes: 11 additions & 1 deletion app/assets/stylesheets/typography/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
body {
@include sc-responsive-typography;
background: $near-white;
font-family: $primary-font-stack;
min-width: $app-min-width;
}

.Body {
&--nearWhite {
background: $near-white;
}
&--white {
background: $white;
}
}

$font-medium: 400;
4 changes: 4 additions & 0 deletions app/assets/stylesheets/typography/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,9 @@
.u-white-link {
font-size: 1.4rem;
text-transform: uppercase;
font-weight: $font-heavy;
color: $white;
&:hover {
color: $light-blue;
}
}
27 changes: 7 additions & 20 deletions app/helpers/application_layout_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,6 @@ def site_layout_header_classes
classes.join ' '
end

def site_layout_section_classes
classes = ['sc-SiteLayout-section']
classes << "sc-SiteLayout-section--#{site_layout_body_color}" unless site_layout_body_color == 'white'
classes.join ' '
end

def site_layout_container_classes
classes = ['sc-SiteLayout-container']
classes.join ' '
end

def content_layout_classes
classes = ['sc-ContentLayout sc-ContentLayout--constrained']
classes << 'sc-ContentLayout--centered' if site_layout_content_layout == 'centered'
classes.join ' '
end

def site_layout_content_layout
content_for(:site_content_layout) || 'base'
end
Expand All @@ -38,12 +21,16 @@ def default_header_modifier
'blue'
end

def site_layout_body_color
content_for(:site_layout_body_color) || 'white'
def body_layout_body_color
content_for(:body_layout_body_color) || 'nearWhite'
end

def body_layout_body_color_class
"Body--#{body_layout_body_color}"
end

def site_layout_body_css_classes
[controller_action_css_class, controller_css_class].join(' ')
[controller_action_css_class, controller_css_class, body_layout_body_color_class].join(' ')
end

def controller_css_class
Expand Down
55 changes: 28 additions & 27 deletions app/views/admin/bulk_assignments/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
<% content_for :body_layout_body_color, 'white' %>
<% content_for :page_title, "Split Details: #{@split.name}" %>

<div class="TakeoverText">
<h1 class="TakeoverText-title sc-m-v--l">Reassign Visitors to <%= @split.name %></h1>
</div>

<div class="InfoCard">
<%= simple_form_for(@bulk_assignment_creation, url: admin_split_bulk_assignments_path) do |f| %>
<%= f.input :identifiers_listing, as: :text, label: 'IDs To Assign', :input_html => {:rows => 10} %>
<%= simple_form_for(@bulk_assignment_creation, url: admin_split_bulk_assignments_path) do |f| %>
<%= f.input :identifiers_listing, as: :text, label: 'IDs To Assign', :input_html => {:rows => 10} %>
<% if @bulk_assignment_creation.new_identifier_creation_ratio_above_warning_threshold? %>
<div id="identifier_creation_warning">
<p>
<%= percentage @bulk_assignment_creation.new_identifier_creation_ratio %>
(<%= @bulk_assignment_creation.new_identifier_count %> of <%= @bulk_assignment_creation.total_identifiers_to_assign_count %>)
of the identifiers provided will be <em>created</em> as part of this operation.
<br>
That's unusual. Please verify that you selected the correct <strong>Identified By</strong> below
and double-check that the IDs listed above are correct.
Do you still wish to proceed?
</p>
<% if @bulk_assignment_creation.new_identifier_creation_ratio_above_warning_threshold? %>
<div id="identifier_creation_warning">
<p>
<%= percentage @bulk_assignment_creation.new_identifier_creation_ratio %>
(<%= @bulk_assignment_creation.new_identifier_count %> of <%= @bulk_assignment_creation.total_identifiers_to_assign_count %>)
of the identifiers provided will be <em>created</em> as part of this operation.
<br>
</div>
<div class="sc-m-l--s">
<%= f.input :force_identifier_creation, as: :boolean, label: 'YES', wrapper_html: { class: "has-error" } %>
</div>
<% end %>
<div class="IdentifierTypeSelection sc-m-v--s">
<%= f.input :identifier_type_id, label: 'Identified By', collection: identifier_types, label_method: :name, value_method: :id, include_blank: true %>
That's unusual. Please verify that you selected the correct <strong>Identified By</strong> below
and double-check that the IDs listed above are correct.
Do you still wish to proceed?
</p>
<br>
</div>
<div class="fs-VariantOptions">
<%= f.input :variant, label: "To Variant", include_blank: false, collection: @split.variants, as: :radio_buttons %>
<div class="sc-m-l--s">
<%= f.input :force_identifier_creation, as: :boolean, label: 'YES', wrapper_html: { class: "has-error" } %>
</div>
<%= f.input :reason, placeholder: "e.g. Turn FeatureX on" %>
<%= render "shared/form_footer", f: f, submit_text: "Assign To Split", submit_disable_with_text: "Assigning..." %>
<% end %>
</div>
<div class="IdentifierTypeSelection sc-m-v--s">
<%= f.input :identifier_type_id, label: 'Identified By', collection: identifier_types, label_method: :name, value_method: :id, include_blank: true %>
</div>
<div class="fs-VariantOptions">
<%= f.input :variant, label: "To Variant", include_blank: false, collection: @split.variants, as: :radio_buttons %>
</div>
<%= f.input :reason, placeholder: "e.g. Turn FeatureX on" %>
<%= render "shared/form_footer", f: f, submit_text: "Assign To Split", submit_disable_with_text: "Assigning..." %>
<% end %>
33 changes: 17 additions & 16 deletions app/views/admin/decisions/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
<% content_for :body_layout_body_color, 'white' %>
<% content_for :page_title, "Split Details: #{@split.name}" %>

<div class="TakeoverText">
<h1 class="TakeoverText-title sc-m-v--l">Decide '<%= @split.name %>'</h1>
</div>

<div class="InfoCard">
<%= simple_form_for(@decision, url: admin_split_decisions_path) do |f| %>
<p class="title">Deciding this split in favor of a variant will have two immediate consequences:</p>
<ol class="ExplanationList sc-m-l--s sc-p-l--xs">
<li>This split will be re-weighted so that all <span class="u-emphasis">future</span> assignments will be to the variant specified.</li>
<li>All visitors currently assigned to any other variant in this split will be <span class="u-emphasis">re-assigned</span> to the variant specified.</li>
</ol>
<%= simple_form_for(@decision, url: admin_split_decisions_path) do |f| %>
<p class="title">Deciding this split in favor of a variant will have two immediate consequences:</p>
<ol class="ExplanationList sc-m-l--s sc-p-l--xs">
<li>This split will be re-weighted so that all <span class="u-emphasis">future</span> assignments will be to the variant specified.</li>
<li>All visitors currently assigned to any other variant in this split will be <span class="u-emphasis">re-assigned</span> to the variant specified.</li>
</ol>

<div class="InfoCard-row sc-m-t--m">
<strong>Current Population: <%= @split.assignments.count %></strong>
</div>
<div class="fs-VariantOptions">
<%= f.input :variant, label: 'Target Variant', collection: @split.variants, as: :radio_buttons, include_blank: false %>
</div>
<div class="sc-m-t--m">
<strong>Current Population: <%= @split.assignments.count %></strong>
</div>
<div class="fs-VariantOptions">
<%= f.input :variant, label: 'Target Variant', collection: @split.variants, as: :radio_buttons, include_blank: false %>
</div>

<%= render "shared/form_footer", f: f, submit_text: "Decide Split", submit_disable_with_text: "Saving your Split Decision...", confirm_text: "\nYou are deciding '#{@split.name}'.\nDo you wish to proceed?" %>
<% end %>
</div>
<%= render "shared/form_footer", f: f, submit_text: "Decide Split", submit_disable_with_text: "Saving your Split Decision...", confirm_text: "\nYou are deciding '#{@split.name}'.\nDo you wish to proceed?" %>
<% end %>
29 changes: 15 additions & 14 deletions app/views/admin/split_configs/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
<% content_for :body_layout_body_color, 'white' %>
<% content_for :page_title, "Split Details: #{@split_creation.name}" %>

<div class="TakeoverText">
<h1 class="TakeoverText-title sc-m-v--l">Split: <%= @split_creation.name %></h1>
</div>

<div class="InfoCard">
<%= simple_form_for(@split_creation, url: admin_split_split_config_path) do |f| %>
<% f.simple_fields_for :weighting_registry do |ff| %>
<% if @split_creation.errors.include? :weighting_registry %>
<div class="sc-flash sc-m-b--s error">
<%= @split_creation.errors.full_messages_for(:weighting_registry).join(', ') %>
</div>
<% end %>
<%= simple_form_for(@split_creation, url: admin_split_split_config_path) do |f| %>
<% f.simple_fields_for :weighting_registry do |ff| %>
<% @split_creation.weighting_registry.each do |variant, weight| %>
<%= ff.input variant, as: :percent, input_html: { value: weight, class: "weight-input" } %>
<% end %>
<% if @split_creation.errors.include? :weighting_registry %>
<div class="sc-flash sc-m-b--s error">
<%= @split_creation.errors.full_messages_for(:weighting_registry).join(', ') %>
</div>
<% end %>
<%= render "shared/form_footer", f: f, submit_text: "Edit", submit_disable_with_text: "Changing..." %>
<% @split_creation.weighting_registry.each do |variant, weight| %>
<%= ff.input variant, as: :percent, input_html: { value: weight, class: "weight-input" } %>
<% end %>
<%= render "shared/form_footer", f: f, submit_text: "Edit", submit_disable_with_text: "Changing..." %>
<% end %>
</div>
<% end %>
30 changes: 12 additions & 18 deletions app/views/admin/split_details/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,21 @@
<% content_for :page_title, @split_detail.split.name %>
<% content_for :body_layout_body_color, 'white' %>
<% content_for :page_title, "Split Details: #{@split_detail.split.name}" %>

<div class="TakeoverText">
<h1 class="TakeoverText-title">Context and outcomes</h1>
</div>

<div class="InfoCard">
<%= simple_form_for @split_detail, url: admin_split_details_path, method: :put do |f| %>
<%= f.error :base %>
<%= f.input :owner, label: "Squad Name" %>
<%= f.input :platform, collection: Split.platforms.keys %>
<%= f.input :location, label: "Location", hint: "Example: Sign Up" %>
<%= simple_form_for @split_detail, url: admin_split_details_path, method: :put do |f| %>
<%= f.error :base %>
<%= f.input :owner, label: "Owner" %>
<%= f.input :platform, collection: Split.platforms.keys %>
<%= f.input :location, label: "Location", hint: "Example: Sign Up" %>
<%= f.input :description, as: :text, hint: "Example: Users often get confused during the account creation process when reaching step 2, 'Personal Details'. We are testing two different versions of this page that aim to clear up that confusion." %>
<%= f.input :description, as: :text, hint: "Example: Users often get confused during the account creation process when reaching step 2, 'Personal Details'. We are testing two different versions of this page that aim to clear up that confusion." %>
<%= f.input :hypothesis, as: :text, hint: "Example: By rearranging some of the fields and adding helper text we can improve sign up completion rates and decrease the amount of support tickets we receive." %>
<%= f.input :hypothesis, as: :text, hint: "Example: By rearranging some of the fields and adding helper text we can improve sign up completion rates and decrease the amount of support tickets we receive." %>
<%= f.input :assignment_criteria, as: :text, hint: "Example: Assigned when any user enters the first step of the signup flow. Mobile users are not affected." %>
<%= f.input :assignment_criteria, as: :text, hint: "Example: Assigned when any user enters the first step of the signup flow. Mobile users are not affected." %>
<footer class="sc-TakeoverFooter">
<div class="sc-TakeoverFooter-content">
<%= link_to "Back", admin_split_path(id: @split_detail.split.id), class: 'sc-TakeoverFooter-ctaBack sc-Link sc-Link--arrowLeft ft-backButton' %>
<%= f.submit "Update Details", data: { disable_with: "Updating Split..." }, class: 'u-button ft-confirmButton' %>
</div>
</footer>
<% end %>
</div>
<%= render "shared/form_footer", f: f, back_path: admin_split_path(@split_detail.split.id), submit_text: "Update Details", submit_disable_with_text: "Updating Split...", submit_disable_with_text: "Assigning..." %>
<% end %>
4 changes: 2 additions & 2 deletions app/views/admin/splits/_split.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<%= split.name %>
</td>
<td>
<%= render partial: 'split_registry', locals: { registry: split.registry } %>
<%= split.owner_app.name.capitalize %>
</td>
<td>
<%= split.owner_app.name %>
<%= split.created_at.to_s(:slashed_full_date) %>
</td>
<td>
<%= link_to "View", admin_split_path(split) %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/admin/splits/_variants.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</div>
<hr class="InfoCard-divider">
<div class="InfoCard-description">
<table class="variants-table BasicTable">
<table class="fs-VariantsTable BasicTable">
<thead>
<th>Name</th>
<th>Weight</th>
Expand Down
12 changes: 6 additions & 6 deletions app/views/admin/splits/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class="InfoCard">
<div class="InfoCard-titleContainer">
<h1>Active Split Tests</h1>
</div>
<hr class="InfoCard-divider">
<div class="TakeoverText">
<h1 class="TakeoverText-title sc-m-v--l">Active Split Tests</h1>
</div>

<div class="sc-m-v--m">
<table class="BasicTable">
<thead>
<tr>
<th>Name</th>
<th>Weightings</th>
<th>Owner App</th>
<th>Date Migrated</th>
<th></th>
</tr>
</thead>
Expand Down
23 changes: 11 additions & 12 deletions app/views/admin/variant_details/edit.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
<% content_for :body_layout_body_color, 'white' %>
<% content_for :page_title, "Split Details: #{@split.name}" %>

<div class="TakeoverText">
<h1 class="TakeoverText-title">Details for variant: <%= @variant_detail.variant %></h1>
</div>

<div class="InfoCard"%>
<%= simple_form_for @variant_detail, url: admin_split_variant_detail_path(@split, @variant_detail.variant), method: :put do |f| %>
<%= f.error :base %>
<%= f.input :display_name %>
<%= f.input :description, label: 'Short description', hint: 'For example: There are FAQ links in a sidebar on the Activity Tab' %>
<%= simple_form_for @variant_detail, url: admin_split_variant_detail_path(@split, @variant_detail.variant), method: :put do |f| %>
<%= f.error :base %>
<%= f.input :display_name %>
<%= f.input :description, label: 'Short description', hint: 'For example: There are FAQ links in a sidebar on the Activity Tab' %>

<div class="sc-TakeoverFooter">
<div class="sc-TakeoverFooter-content">
<%= link_to 'Back', admin_split_path(@split), class: 'sc-TakeoverFooter-ctaBack sc-Link sc-Link--arrowLeft ft-backButton' %>
<%= f.submit 'Continue', data: { disable_with: 'Updating variant...' }, class: 'u-button ft-confirmButton' %>
</div>
<div class="sc-TakeoverFooter">
<div class="sc-TakeoverFooter-content">
<%= link_to 'Back', admin_split_path(@split), class: 'sc-TakeoverFooter-ctaBack sc-Link sc-Link--arrowLeft ft-backButton' %>
<%= f.submit 'Continue', data: { disable_with: 'Updating variant...' }, class: 'u-button ft-confirmButton' %>
</div>
<% end %>
</div>
</div>
<% end %>
6 changes: 4 additions & 2 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@
</div>

<section class="sc-SiteLayout-section">
<div class="sc-ContentLayout sc-ContentLayout--constrained <%= site_layout_container_classes %>">
<div class="sc-SiteLayout-container sc-SiteLayout-container--extraLeftPadding">
<%= render 'shared/flash' unless flash.empty? %>
<%= yield %>
<div class="sc-p-v--m">
<%= yield %>
</div>
</div>
</section>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/shared/_flash.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<% %w(error success).map do |type| %>
<% if flash[type.to_sym].present? %>
<div class="sc-flash sc-m-b--s <%= type %>">
<div class="sc-flash sc-m-t--l <%= type %>">
<span class="content"><%= flash[type.to_sym] %></span>
<figure class="close" data-behavior="close-flash">
<icon class="Icon-close"></icon>
Expand Down
2 changes: 1 addition & 1 deletion app/views/shared/_form_footer.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<footer class="sc-TakeoverFooter">
<div class="sc-TakeoverFooter-content">
<% if local_assigns.has_key? :back_path %>
<%= trackable_link_to back_text, back_path, class: 'sc-TakeoverFooter-ctaBack sc-Link sc-Link--arrowLeft ft-backButton', event_data: back_track_params.merge(name: 'BackButton') %>
<%= link_to back_text, back_path, class: 'sc-TakeoverFooter-ctaBack sc-Link sc-Link--arrowLeft ft-backButton', event_data: back_track_params.merge(name: 'BackButton') %>
<% end %>
<% if local_assigns.has_key? :f %>
<% if local_assigns.has_key? :confirm_text %>
Expand Down

0 comments on commit 18dd404

Please sign in to comment.