scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-28 19:24:10 +08:00
Code Issues Projects Releases Packages Wiki Activity

Move open mobile app button to main navigation

Browse source
This commit is contained in:
Mojca Lorber 2020-10-26 09:28:44 +01:00
parent 9f2b7f962b
commit ec41bdd414
8 changed files with 49 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/my_modules/pwa_mobile_app.js
View file

@ -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();
}

44
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -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;
}
}

25
app/assets/stylesheets/shared_styles/elements/buttons.scss
View file

@ -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;

12
app/assets/stylesheets/themes/main_navigation.scss
View file

@ -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 {

18
app/views/my_modules/_open_mobile_app.html.erb
View file

@ -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>

9
app/views/my_modules/protocols.html.erb
View file

@ -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>

5
app/views/shared/_navigation.html.erb
View file

@ -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? %>

4
config/locales/en.yml
View file

@ -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:
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'