forever_style_guide 2.0.3 → 3.0.0

data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown.erb

@@ -0,0 +1,37 @@
+<!-- Show cart in navbar right on desktop: see nav.erb for mobile  -->
+<!-- TODO show item count in cart -->
+<li class='navbar-account_item navbar-account_item-cart' id='mini-cart' data-turbolinks-temporary>
+  <%= link_to cart_url, class: "nav-icon-stack hidden-grid-float-breakpoint" do %>
+    <i class='fa fa-shopping-cart'></i>
+    <span class="nav-icon-label">Cart</span>
+  <% end %>
+</li>
+
+<% if defined?(current_user) && current_user.present?  %>
+  <li class='navbar-account_item-inbox navbar-account_item'>
+    <%= link_to library_url, class: "nav-icon-stack hidden-grid-float-breakpoint" do %>
+      <i class='fa fa-inbox'></i>
+      <span class="nav-icon-label">Inbox</span>
+    <% end %>
+  </li>
+
+  <li class='dropdown navbar-account_item'>
+    <%= link_to nil, class: 'nav-icon-stack dropdown-toggle dropdown-toggle-account', :data => { :toggle => 'dropdown' } do %>
+      <i class='fa fa-user hidden-grid-float-breakpoint'></i>
+      <span class="nav-icon-label">Account</span>
+      <i class='fa fa-chevron-down visible-grid-float-breakpoint'></i>
+    <% end %>
+
+    <div class='dropdown-menu dropdown-menu-nav dropdown-menu-account color_block-gray-700'>
+      <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_dropdown_menu" %>
+    </div>
+  </li>
+
+<% else %>
+  <li class='dropdown navbar-account_item hidden-grid-float-breakpoint'>
+    <%= link_to login_url, class: 'nav-icon-stack' do %>
+      <i class='fa fa-user hidden-grid-float-breakpoint'></i>
+      <span class='nav-icon-label'>Log In</span>
+    <% end %>
+  </li>
+<% end %>

data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb

@@ -0,0 +1,61 @@
+<div class='container-fluid'>
+  <div class='row'>
+    <div class='col-xs-12 l-padded-thin'>
+
+      <ul class="list-unstyled">
+        <li class="dropdown-menu-account-item">
+          <% if current_user.avatar_url_small %>
+            <%= image_tag current_user.avatar_url_small, class: "dropdown-menu-account-avatar avatar avatar-sm pull-left", alt: current_user.name, title: current_user.name %>
+          <% else %>
+            <%= image_tag "default_avatar.jpg", class: "dropdown-menu-account-avatar avatar avatar-sm pull-left", alt: current_user.name, title: current_user.name %>
+          <% end %>
+
+          <div class="dropdown-menu-account-user">
+            <p class="dropdown-menu-account-user-intro color-gray-300">Signed in as</p>
+            <h4 class="page-title color-gray-300"><%= current_user.name %></h4>
+          </div>
+        </li>
+
+        <li class="dropdown-menu-account-divider"></li>
+
+        <li class="dropdown-menu-account-item">
+          <p class="color-gray-300">
+
+            <!-- TODO actually display storage -->
+            <span class="dropdown-menu-account-storage">40% of 50Gb</span>
+            <%= link_to "Upgrade", upgrade_url, class: 'small', title: "Upgrade your Forever Guaranteed Permanent Storage" %>
+          </p>
+
+          <div class="progress progress-thin color_block-primary">
+            <div class="progress-bar color_block-gray-400" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
+          </div>
+        </li>
+
+        <li class="dropdown-menu-account-divider"></li>
+
+        <li class="dropdown-menu-account-item">
+          <%= link_to user_settings_url, class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'View User Settings' do %>
+            <i class='fa fa-cog'></i>Settings
+          <% end %>
+        </li>
+
+        <% if current_user.linked_ambassador %>
+          <li class="dropdown-menu-account-item">
+            <%= link_to back_office_url, class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Ambassador Back Office Reports' do %>
+              <i class='fa fa-suitcase'></i>My Back Office
+            <% end %>
+          </li>
+        <% end %>
+
+        <li class="dropdown-menu-account-divider hidden-xs hidden-sm"></li>
+
+        <li class="dropdown-menu-account-item">
+          <%= link_to log_out_url, class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Log Out of Forever' do %>
+            <i class='fa fa-share'></i>Log Out
+          <% end %>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+</div>

data/app/views/forever_style_guide/sections/components/navigation/_nav_account_signed_out_mobile.erb

@@ -0,0 +1,6 @@
+<% if !(defined?(current_user) && current_user.present?) %>
+  <%= link_to login_url, class: 'visible-grid-float-breakpoint btn btn-action btn-primary navbar-account-signed_out_btn is_fixed_bottom' do %>
+    <span class="btn-action-label">Log In or Sign Up</span>
+    <%= fa_icon "chevron-right", class: "btn-action-icon" %>
+  <% end %>
+<% end %>

data/app/views/forever_style_guide/sections/components/navigation/_nav_ambassador_dropdown.erb

@@ -0,0 +1,112 @@
+<li class='dropdown dropdown-full_width dropdown-ambassador navbar-account_item'>
+  <%= link_to nil, class: 'dropdown-toggle dropdown-toggle-ambassador', :data => { :toggle => 'dropdown' } do %>
+    <div>
+      <small class="dropdown-ambassador-intro_text">
+        <%= defined?(ambassador) && ambassador.present? ? 'Your Ambassador' : 'Find or join Forever' %>
+      </small>
+    </div>
+    <span class="dropdown-ambassador-primary_text">
+      <%= defined?(ambassador) && ambassador.present? ? ambassador.name : 'Ambassadors' %>
+    </span>
+    <i class='fa fa-chevron-down'></i>
+  <% end %>
+
+  <div class='dropdown-menu dropdown-menu-nav color_block-gray-700'>
+    <div class='container dropdown-menu-nav-container dropdown-ambassador-container'>
+      <div class='row'>
+
+        <div class='col-grid-float-6  col-grid-float-push-6 l-padded-thin'>
+          <h3 class='dropdown-menu-nav-title page-title color-ambassador-light'>Your Ambassador</h3>
+
+          <% if defined?(ambassador) && ambassador.present? %>
+
+            <%= link_to 'change', '/find-an-ambassador', title: 'Change Your Forever Ambassador', class: 'pull-right dropdown-ambassador-edit_btn' %>
+            <div class='dropdown-menu-account-divider'></div>
+
+            <div>
+              <% if ambassador.avatar_url_small %>
+                <%= image_tag ambassador.avatar_url_small, class: "dropdown-menu-account-avatar avatar avatar-sm pull-left", alt: ambassador.name, title: ambassador.name %>
+              <% else %>
+                <%= image_tag "default_avatar.jpg", class: "dropdown-menu-account-avatar avatar avatar-sm pull-left", alt: ambassador.name, title: ambassador.name %>
+              <% end %>
+            </div>
+
+            <div class="dropdown-ambassador-basic_info">
+              <h4 class="color-ambassador-light dropdown-ambassador-name"><%= ambassador.email %></h4>
+              <p class="color-gray-300 page-title dropdown-ambassador-rank"><%= ambassador.rank %></p>
+              <p class="color-gray-300 page-title dropdown-ambassador-city"><%= ambassador.city %>, <%= ambassador.region %></p>
+            </div>
+
+            <div class='dropdown-menu-account-divider'></div>
+
+            <div class="row">
+              <% if ambassador.email %>
+                <div class="col-grid-float-6">
+                  <%= mail_to ambassador.email,  title: ambassador.email, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-envelope btn-action-icon"></i><span class="btn-action-label"><%= ambassador.email %></span>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <% if ambassador.phone %>
+                <div class="col-grid-float-6">
+                  <%= link_to ('tel:+' + ambassador.phone),  title: 'Call' + ambassador.name, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-phone btn-action-icon"></i><span class="btn-action-label"><%= ambassador.phone %></span>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <% if ambassador.website %>
+                <div class="col-grid-float-6">
+                  <%= link_to ambassador.website,  title: ambassador.website, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-link btn-action-icon"></i><span class="btn-action-label">ambassador.website</span>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <% if ambassador.facebook_url %>
+                <div class="col-grid-float-6">
+                  <%= link_to ambassador.facebook_url,  title: ambassador.facebook_url, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-facebook btn-action-icon"></i><span class="btn-action-label">ambassador.facebook_url</span>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <% if ambassador.twitter_handle %>
+                <div class="col-grid-float-6">
+                  <%= link_to ambassador.twitter_handle,  title: ambassador.twitter_handle, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-twitter btn-action-icon"></i><span class="btn-action-label">ambassador.twitter_handle</span>
+                  <% end %>
+                </div>
+              <% end %>
+
+              <% if ambassador.instagram_url %>
+                <div class="col-grid-float-6">
+                  <%= link_to ambassador.instagram_url,  title: ambassador.instagram_url, class: 'btn btn-default btn-link btn-action dropdown-ambassador-contact_btn' do %>
+                    <i class="fa fa-instagram btn-action-icon"></i><span class="btn-action-label">ambassador.instagram_url</span>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+
+          <% else %>
+
+            <div class='dropdown-menu-account-divider'></div>
+            <p class="dropdown-menu-nav-description">Ambassadors provide <strong><u>free</u></strong> training, product consultations, and advance knowledge of sales and new products!</p>
+            <%= link_to find_ambassador_url, class: 'btn btn-ambassador btn-inverse btn-lg l-section-close', title: 'Get Free Training and Support from Certified Ambassadors' do %>
+              Find <span class="hidden-xs">a Local</span><span class="hidden-sm hidden-md hidden-lg">an</span> Ambassador
+            <% end %>
+
+          <% end %>
+        </div>
+
+        <div class='col-grid-float-6 l-padded-thin'>
+          <h3 class='dropdown-menu-nav-title page-title color-ambassador-light'>Join our team!</h3>
+          <div class='dropdown-menu-account-divider'></div>
+          <p class="dropdown-menu-nav-description">To reach the Forever vision, we need brand ambassadors who love helping people capture and share their life's stories.</p>
+          <%= link_to 'Learn More', opportunity_url, class: 'btn btn-ambassador btn-inverse btn-lg l-section-close', title: 'Make Money Helping People Save & Print their Photos' %>
+        </div>
+      </div>
+    </div>
+  </div>
+</li>

data/app/views/forever_style_guide/sections/components/navigation/_nav_community_dropdown.erb

@@ -0,0 +1,99 @@
+<%= link_to nil, class: 'dropdown-toggle dropdown-toggle-community', :data => { :toggle => 'dropdown' } do %>
+  Community
+  <i class='fa fa-chevron-down'></i>
+<% end %>
+
+<div class='dropdown-menu dropdown-menu-nav color_block-gray-700'>
+  <div class='container dropdown-menu-nav-container'>
+    <div class='row'>
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-primary'>Customer Support</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to 'Help Center', help_center_url, class: 'dropdown-menu-nav-link', title: 'Forever Help Center' %>
+          </li>
+
+          <li>
+            <%= link_to 'Web & Mobile App FAQ', web_faq_url, class: 'dropdown-menu-nav-link', title: 'Forever Artisan Frequently Asked Questions' %>
+          </li>
+
+          <li>
+            <%= link_to 'Artisan FAQ', artisan_faq_url, class: 'dropdown-menu-nav-link', title: 'Forever Artisan Frequently Asked Questions' %>
+          </li>
+
+          <li>
+            <%= link_to 'Historian FAQ', historian_faq_url, class: 'dropdown-menu-nav-link', title: 'Forever Historian Frequently Asked Questions' %>
+          </li>
+
+          <li>
+            <%= link_to 'Customer Commitments', customer_commitments_url, class: 'dropdown-menu-nav-link', title: 'Forever Customer Commitments' %>
+          </li>
+
+          <li>
+            <%= link_to 'Contact Us', contact_us_url, class: 'dropdown-menu-nav-link', title: 'Contact Us' %>
+          </li>
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-ambassador-light'>Ambassadors</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to 'Become an Ambassador', opportunity_url, class: 'dropdown-menu-nav-link', title: 'Make Money Helping People Save & Print their Photos' %>
+          </li>
+
+          <li>
+            <%= link_to 'Find an Ambassador', find_ambassador_url, class: 'dropdown-menu-nav-link', title: 'Get Free Training and Support from Certified Ambassadors' %>
+          </li>
+
+          <li class="hide">
+            <%= link_to 'Ambassador Direct', ambassador_direct_url, class: 'dropdown-menu-nav-link', title: 'Make Money as a Forever Business Partner' %>
+          </li>
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-secondary'>Events</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to 'Forever Live!', forever_live_url, class: 'dropdown-menu-nav-link', title: 'Scrapbooking and Memory Keeping Conference' %>
+          </li>
+
+          <li>
+            <%= link_to 'Forever Retreats', retreats_url, class: 'dropdown-menu-nav-link', title: 'Creative Weekend Events for Scrapbooking and Memory Keeping' %>
+          </li>
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-services'>Connect</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to 'Facebook', facebook_url, target: '_blank', class: 'dropdown-menu-nav-link', title: 'Follow us on Facebook' %>
+          </li>
+
+          <li>
+            <%= link_to 'Twitter', twitter_url, target: '_blank', class: 'dropdown-menu-nav-link', title: 'Follow us on Twitter' %>
+          </li>
+
+          <li>
+            <%= link_to 'Instagram', instagram_url, target: '_blank', class: 'dropdown-menu-nav-link', title: 'Follow us on Instagram' %>
+          </li>
+
+          <li>
+            <%= link_to 'Blog', blog_url, class: 'dropdown-menu-nav-link', title: 'Learn more at the Forever Blog' %>
+          </li>
+
+          <li>
+            <%= link_to 'Press', press_url, class: 'dropdown-menu-nav-link', title: 'View Press Releases and News Stories' %>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</div>

data/app/views/forever_style_guide/sections/components/navigation/_nav_my_forever_dropdown.erb

@@ -0,0 +1,142 @@
+<%= link_to nil, class: 'dropdown-toggle dropdown-toggle-my_forever', :data => { :toggle => 'dropdown' } do %>
+  My Forever
+  <i class='fa fa-chevron-down'></i>
+<% end %>
+
+<div class='dropdown-menu dropdown-menu-nav color_block-gray-700'>
+  <div class='container dropdown-menu-nav-container'>
+    <div class='row'>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-primary'>My Forever App</h3>
+
+        <ul class="list-unstyled">
+          <% if defined?(current_user) && current_user.present? %>
+
+            <li>
+              <%= link_to library_url, class: 'dropdown-menu-nav-link', title: 'Organize Photos in Your Forever Library' do %>
+                <i class='fa fa-th-large'></i>Library
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to projects_url, class: 'dropdown-menu-nav-link', title: 'Create Print Projects' do %>
+                <i class='fa fa-paint-brush'></i>Projects
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to people_url, class: 'dropdown-menu-nav-link', title: 'Share Photos with Friends and Family' do %>
+                <i class='fa fa-users'></i>People
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to app_home_url, class: 'dropdown-menu-nav-link', title: 'View Your Shared Photo Albums' do %>
+                <i class='fa fa-home'></i>Home
+              <% end %>
+            </li>
+
+          <% else %>
+
+            <li>
+              <%= link_to login_url, class: 'dropdown-menu-nav-link', title: 'Log in to your Forever account' do %>
+                <i class='fa fa-user'></i>Log In
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to sign_up_url, class: 'dropdown-menu-nav-link', title: 'Sign up for Forever' do %>
+                <i class='fa fa-user-plus'></i>Sign Up Free!
+              <% end %>
+            </li>
+
+          <% end %>
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-secondary'>About</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to 'The Forever Guarantee', guarantee_url, class: 'dropdown-menu-nav-link', title: 'Forever Guarantee' %>
+          </li>
+
+          <li>
+            <%= link_to 'About Us', about_url, class: 'dropdown-menu-nav-link', title: 'About Forever' %>
+          </li>
+
+          <li>
+            <%= link_to 'Our Team', team_url, class: 'dropdown-menu-nav-link', title: 'Meet the Forever Team' %>
+          </li>
+
+          <li>
+            <%= link_to 'Our Beliefs', beliefs_url, class: 'dropdown-menu-nav-link', title: 'Forever Beliefs and Values' %>
+          </li>
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin'>
+        <h3 class='dropdown-menu-nav-title page-title color-services'>Get Started</h3>
+
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to zendesk_overview_video_url, class: 'dropdown-menu-nav-link', title: 'View the Forever Overview Video', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Forever Overview
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_uploading_video_url, class: 'dropdown-menu-nav-link', title: 'View the Uploading Photos Tutorial Video', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Uploading Photos
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_organizing_video_url, class: 'dropdown-menu-nav-link', title: 'View the Organizing Photos Tutorial Video', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Getting Organized
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_sharing_video_url, class: 'dropdown-menu-nav-link', title: 'View the Sharing Photos Tutorial Video', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Sharing
+            <% end %>
+          </li>
+
+        </ul>
+      </div>
+
+      <div class='col-grid-float-3 l-padded-thin dropdown-menu-nav-extra_column'>
+        <div class="hidden-grid-float-breakpoint l-section-far"></div>
+        <ul class="list-unstyled">
+          <li>
+            <%= link_to zendesk_tour_video_url, class: 'dropdown-menu-nav-link', title: 'Video Tour of a Well Curated Forever Account', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Account Tour
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_albums_video_url, class: 'dropdown-menu-nav-link', title: 'Organizing Photos with Albums in Forever - Video Tutorial', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Albums
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_tags_video_url, class: 'dropdown-menu-nav-link', title: 'Organizing Photos with Tags in Forever - Video Tutorial', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Tags
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to zendesk_dates_video_url, class: 'dropdown-menu-nav-link', title: 'Organizing Photos by Date in Forever - Video Tutorial', target: '_blank' do %>
+              <i class='fa fa-video-camera'></i>Dates
+            <% end %>
+          </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</div>