Move open mobile app button to main navigation

app/assets/javascripts/my_modules/pwa_mobile_app.js

@@ -1,9 +1,5 @@
 (function() {
-  $('.open-mobile-app-container').on('click', '.dismiss-mobile-app-container', function() {
+  // Show button only on mobile devices
-    $('.open-mobile-app-container').hide();
-  });
-
-  // Show banner only on mobile devices
   if ('ontouchstart' in window) {
     $('.open-mobile-app-container').show();
   }

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -553,47 +553,3 @@
     }
   }
 }
-
-.open-mobile-app-container {
-  @include font-main;
-  background-color: $brand-focus;
-  border-radius: 8px 8px 0 0;
-  bottom: 0;
-  color: $color-white;
-  display: none;
-  left: .5em;
-  padding: 0 2em;
-  position: fixed;
-  right: .5em;
-  z-index: 1001;
-}
-
-.open-mobile-app-buttons {
-  padding-bottom: 1em;
-}
-
-.open-mobile-app-text {
-  padding-bottom: 4em;
-}
-
-.dismiss-mobile-app-container {
-  color: $color-concrete;
-  cursor: pointer;
-  display: inline-block;
-  font-size: $font-size-h2;
-  height: 3.1em;
-  margin: .5em;
-  padding: 1em 3em;
-  width: fit-content;
-
-  &:hover {
-    color: $color-concrete;
-    text-decoration: none;
-  }
-}
-
-@media (max-width:568px) {
-  .open-mobile-app-buttons {
-    text-align: center;
-  }
-}

app/assets/stylesheets/shared_styles/elements/buttons.scss

@@ -106,6 +106,30 @@
     }
   }
 
+  &.btn-light-link {
+    background: transparent;
+    border: $border-transparent;
+    color: $brand-primary;
+
+    &:hover {
+      background: $color-concrete;
+      border: $border-transparent;
+      color: $brand-primary;
+    }
+
+    &:active,
+    &.active {
+      background: $color-alto;
+      border: $border-transparent;
+      color: $brand-primary;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 1px $brand-focus;
+      color: $brand-primary;
+    }
+  }
+
   &.btn-danger {
     background: $brand-danger;
     border: $border-danger;
@@ -184,6 +208,7 @@
 
     &.btn-secondary,
     &.btn-light,
+    &.btn-light-link,
     &.btn-dark-background {
       background: $color-white;
 

app/assets/stylesheets/themes/main_navigation.scss

@@ -46,13 +46,21 @@
 .navbar-default .navbar-brand {
   align-items: center;
   display: flex;
-  padding: 0 15px;
+  padding: 0 .3em 0 .8em;
 
   #logo {
     max-height: 22px;
   }
 }
 
+.open-mobile-app-container {
+  display: none;
+}
+
+.open-mobile-app-button {
+  margin-top: 8px;
+}
+
 .dropdown-notifications {
   max-height: 500px;
   overflow-x: hidden;
@@ -306,7 +314,7 @@
     text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: 250px;
+    width: 230px;
   }
 
   .btn-group {

app/views/my_modules/_open_mobile_app.html.erb

@@ -1,18 +0,0 @@
-<div class="open-mobile-app-container">
-  <div class="open-mobile-app-text">
-    <h1><%= t('my_modules.open_mobile_app.title') %></h1>
-    <span><%= t('my_modules.open_mobile_app.description') %></span>
-  </div>
-  <div class="open-mobile-app-buttons">
-    <a type="button"
-       class="btn btn-dark-background btn-large"
-       href="<%= pwa_mobile_app_url(@current_team.id, @project.id, @experiment.id, @my_module.id, @protocol.id, @protocol.first_step_id, request.host) %>">
-      <i class="fas fa-mobile-alt"></i>
-      <%= t('my_modules.open_mobile_app.open_mobile_app') %>
-    </a>
-    <a type="button" class="dismiss-mobile-app-container">
-      <i class="fas fa-times"></i>
-      <%= t('my_modules.open_mobile_app.dismiss') %>
-    </a>
-  </div>
-</div>

app/views/my_modules/protocols.html.erb

@@ -1,4 +1,12 @@
 <% provide(:head_title, t("my_modules.protocols.head_title", project: h(@project.name), module: h(@my_module.name)).html_safe) %>
+<% content_for :open_mobile_app_button do %>
+  <span class="open-mobile-app-container">
+    <%= link_to(pwa_mobile_app_url(@current_team.id, @project.id, @experiment.id, @my_module.id, @protocol.id, @protocol.first_step_id, request.host),
+              class: 'btn btn-light-link open-mobile-app-button') do %>
+      <%= t('my_modules.open_mobile_app') %>
+    <% end %>
+  </span>
+<% end %>
 
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %>
@@ -103,7 +111,6 @@
     </div>
   </div>
 </div>
-<%= render partial: "open_mobile_app" %>
 
 <!-- URL for status bar refreshing -->
 <div class="hidden" data-role="protocol-status-bar-url" data-url="<%= protocol_status_bar_protocol_path(@protocol) %>"></div>

app/views/shared/_navigation.html.erb

@@ -12,8 +12,11 @@
         </button>
       <% end %>
       <%= link_to(root_path, class: 'navbar-brand', title: t('nav.label.scinote')) do %>
-        <%= image_tag('/images/scinote_icon.svg', id: 'logo') %>
+        <span class="hidden-lg"><%= image_tag('/images/sn-icon.svg', id: 'logo') %></span>
+        <span class="visible-lg-block"><%= image_tag('/images/scinote_icon.svg', id: 'logo') %></span>
       <% end %>
+      <%= yield :open_mobile_app_button %>
+
     </div>
 
     <% if user_signed_in? %>

config/locales/en.yml

@@ -869,11 +869,7 @@ en:
     unshared_inventory:
       title_html: The inventory <b>%{inventory_name}</b> is no longer shared with your team.
       body_html: This inventory has been ushared with your team by the inventory’s owner. To view the item/s that are assigned to your task/s contact the <b>%{team_name}</b> team administrator <b>%{admin_name}</b> (<b>%{admin_email}</b>).
-    open_mobile_app:
+    open_mobile_app: "Open mobile app"
-      title: "Protocol step-by-step execution on your touch device"
-      description: "Try the improved touch experience"
-      open_mobile_app: "Open mobile app"
-      dismiss: "Dismiss"
   experiments:
     new:
       create: 'New Experiment'