From ec41bdd4144e14be495130e5bed0ee01e6f9ea5b Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Mon, 26 Oct 2020 09:28:44 +0100 Subject: [PATCH] Move open mobile app button to main navigation --- .../javascripts/my_modules/pwa_mobile_app.js | 6 +-- .../my_modules/protocols/index.scss | 44 ------------------- .../shared_styles/elements/buttons.scss | 25 +++++++++++ .../stylesheets/themes/main_navigation.scss | 12 ++++- .../my_modules/_open_mobile_app.html.erb | 18 -------- app/views/my_modules/protocols.html.erb | 9 +++- app/views/shared/_navigation.html.erb | 5 ++- config/locales/en.yml | 6 +-- 8 files changed, 49 insertions(+), 76 deletions(-) delete mode 100644 app/views/my_modules/_open_mobile_app.html.erb diff --git a/app/assets/javascripts/my_modules/pwa_mobile_app.js b/app/assets/javascripts/my_modules/pwa_mobile_app.js index 6fd9a2edf..e9f4755ea 100644 --- a/app/assets/javascripts/my_modules/pwa_mobile_app.js +++ b/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() { - $('.open-mobile-app-container').hide(); - }); - - // Show banner only on mobile devices + // Show button only on mobile devices if ('ontouchstart' in window) { $('.open-mobile-app-container').show(); } diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 86b538094..03b8f1520 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/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; - } -} diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss index 7ff6adf26..51364b734 100644 --- a/app/assets/stylesheets/shared_styles/elements/buttons.scss +++ b/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; diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss index f3c406d97..4c0843fe8 100644 --- a/app/assets/stylesheets/themes/main_navigation.scss +++ b/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 { diff --git a/app/views/my_modules/_open_mobile_app.html.erb b/app/views/my_modules/_open_mobile_app.html.erb deleted file mode 100644 index 823cb1f16..000000000 --- a/app/views/my_modules/_open_mobile_app.html.erb +++ /dev/null @@ -1,18 +0,0 @@ -
-
-

<%= t('my_modules.open_mobile_app.title') %>

- <%= t('my_modules.open_mobile_app.description') %> -
-
- - - <%= t('my_modules.open_mobile_app.open_mobile_app') %> - - - - <%= t('my_modules.open_mobile_app.dismiss') %> - -
-
diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index 405f16bd4..10cdaaa6a 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/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 %> + + <%= 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 %> + +<% end %> <%= render partial: 'shared/drag_n_drop_overlay' %> <%= render partial: "shared/sidebar", locals: { current_task: @my_module, page: 'task' } %> @@ -103,7 +111,6 @@ -<%= render partial: "open_mobile_app" %> diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb index f6c330f7b..d330e3bb0 100644 --- a/app/views/shared/_navigation.html.erb +++ b/app/views/shared/_navigation.html.erb @@ -12,8 +12,11 @@ <% end %> <%= link_to(root_path, class: 'navbar-brand', title: t('nav.label.scinote')) do %> - <%= image_tag('/images/scinote_icon.svg', id: 'logo') %> + + <%= image_tag('/images/scinote_icon.svg', id: 'logo') %> <% end %> + <%= yield :open_mobile_app_button %> + <% if user_signed_in? %> diff --git a/config/locales/en.yml b/config/locales/en.yml index f9ab2a436..a789a1c80 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -869,11 +869,7 @@ en: unshared_inventory: title_html: The inventory %{inventory_name} 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 %{team_name} team administrator %{admin_name} (%{admin_email}). - 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" + open_mobile_app: "Open mobile app" experiments: new: create: 'New Experiment'