Add Get Started Bar to Spree Storefront. (spree#11287)

* Add get started bar to Spree Storefront. * Add arrow icon, set bold button text. * Update footer copyright text + Remove spark-logo * Make get started bar scroll off screen under main nav.
saleembasit · Aug 26, 2021 · a120cbf · a120cbf
1 parent ef2343a
commit a120cbf
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/frontend/app/assets/images/arrow-right-circle-fill.svg b/frontend/app/assets/images/arrow-right-circle-fill.svg
diff --git a/frontend/app/assets/images/[email protected] b/frontend/app/assets/images/[email protected]
diff --git a/frontend/app/views/spree/layouts/spree_application.html.erb b/frontend/app/views/spree/layouts/spree_application.html.erb
@@ -8,6 +8,7 @@
     <%= render partial: 'spree/shared/head' %>
   </head>
   <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
+    <%= render partial: 'spree/shared/get_started' %>
     <%= render partial: 'spree/shared/header' %>
     <div id="overlay" class="overlay hide-on-esc"></div>
 

diff --git a/frontend/app/views/spree/shared/_copyright.html.erb b/frontend/app/views/spree/shared/_copyright.html.erb
@@ -1,17 +1,8 @@
 <div class="border-top footer-spree-copyright">
   <div class="container">
     <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center py-3 footer-spree-copyright-content">
-      <div>Designed and developed by</div>
-      <div class="mb-1 mb-lg-0">
-        <%= link_to 'https://sparksolutions.co/', target: :_blank, 'aria-label': 'Go to Spark Solutions', rel: :follow do %>
-          <%= image_tag '[email protected]', class: 'footer-spree-copyright-logo-spark mx-2', alt: 'Spree Commerce & Ruby on Rails developers', title: 'Spree Commerce & Ruby on Rails developers' %>
-        <% end %>
-      </div>
-      <div class="d-none d-lg-inline-block mr-2">|</div>
       <div>
-        © <%= Time.current.year %>
-        <%= link_to current_store.name, "https://#{current_store.url}" %>.
-        <%= Spree.t(:all_rights_reserved) %>.
+        Designed and developed by <%= link_to 'Spark Solutions', 'https://sparksolutions.co/', target: :_blank, 'aria-label': 'Go to Spark Solutions', rel: :follow %> | © <%= Time.current.year %> <%= link_to current_store.name, current_store.formatted_url %>. <%= Spree.t(:all_rights_reserved) %>.
       </div>
     </div>
   </div>

diff --git a/frontend/app/views/spree/shared/_get_started.html.erb b/frontend/app/views/spree/shared/_get_started.html.erb
@@ -0,0 +1,32 @@
+<!-- Styles And Script In A View Partial
+  If this view partial is removed from the spree_application.html.erb layout file, the storefront
+  will instantly snap back to the original look and feel with no hangover CSS or JavaScript related
+  to this partial.
+
+  Please do not transfer styles and JavaScript found here
+  into the main stylesheets or JavaScript files.
+-->
+<style>
+  #getStartedBar {
+    background: #33ba6f;
+    color: white;
+    z-index: 10;
+  }
+
+  #getStartedBar svg {
+    vertical-align: text-top;
+  }
+</style>
+
+<div id="getStartedBar" class="d-flex justify-content-center align-items-center p-1">
+  <div class="row">
+    <div class="col-12 text-center">
+      <h5 class="m-0">
+        <span style="font-weight: 200;">Create your own Spree project</span> <a href="https://spreecommerce.org/contact/" class="btn btn-outline-light btn-sm m-2" style="font-size: 1em; font-weight:800;">Get Started
+             <%= icon(name: 'arrow-right-circle-fill',
+                      width: 22,
+                      height: 22) %></a>
+      </h5>
+    </div>
+  </div>
+</div>