scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-11 09:26:37 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1898 from mlorb/ml-sci-3634

Browse source 
Fixes visual bugs on protocols.io and home page [SCI-3634]
This commit is contained in:
mlorb 2019-07-09 14:38:19 +02:00 committed by GitHub
commit f2690883aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 166 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/protocols/external_protocols_tab.js
View file

@ -92,7 +92,6 @@ function applySearchCallback() {
resetPreviewPanel();
$('.empty-text').hide();
$('.list-wrapper').show();
$('.list-wrapper').html(data.html);
$('.list-wrapper').scrollTo(0);
} else {

188
app/assets/stylesheets/protocol_management.scss
View file

@ -57,6 +57,7 @@
.tab-pane-settings {
border: 0;
height: calc(100vh - 167px);
}
}
@ -65,79 +66,105 @@
}
.external-protocols-tab {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.protocols-search-bar-panel {
align-items: center;
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 15px;
padding-right: 0;
flex-wrap: wrap;
.service-provider {
display: flex;
.protocols-search-bar-panel {
align-items: center;
width: 50%;
}
display: flex;
flex-basis: 500px;
flex-direction: row;
justify-content: space-between;
margin-bottom: 15px;
padding-right: 0;
.protocolsio-logo {
height: 30px;
width: 30px;
}
.protocolsio-title {
color: $brand-primary;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
.input-group {
margin-bottom: 0;
max-width: 50%;
.form-control {
border-right: 0;
.service-provider {
align-items: center;
display: flex;
width: 120px;
}
.input-group-addon {
background: $color-white;
.protocolsio-logo {
height: 30px;
width: 30px;
}
.protocolsio-title {
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
.input-group {
margin-bottom: 0;
width: calc(100% - 130px);
.form-control {
border-radius: 4px;
padding-right: 34px;
}
.input-group-addon {
align-items: center;
background: transparent;
border: 0;
color: $color-silver-chalice;
display: flex;
height: 34px;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 34px;
z-index: 5;
}
}
}
.protocol-sort {
padding-left: 7px;
span {
color: $color-silver-chalice;
font-size: 14px;
}
}
}
.protocol-sort {
padding-left: 7px;
.btn-group {
margin-bottom: 10px;
margin-top: 6px;
padding-left: 3px;
span {
color: $color-silver-chalice;
font-size: 14px;
}
label {
padding-bottom: 0;
padding-top: 0;
.btn-group {
margin-bottom: 10px;
margin-top: 6px;
padding-left: 3px;
label {
padding-bottom: 0;
padding-top: 0;
&.active {
background: $color-gainsboro;
border-radius: 5px !important;
color: $color-emperor;
&.active {
background: $color-gainsboro;
border-radius: 5px !important;
color: $color-emperor;
}
}
}
}
}
.main-protocol-panel {
display: flex;
flex-grow: 1;
width: calc(100% + 15px);
}
.protocol-list-side-panel {
background-color: $color-white;
border-right: 1px solid $color-silver-chalice;
border-top: 1px solid $color-silver-chalice;
height: 600px;
border-right: 1px solid $color-alto;
border-top: 1px solid $color-alto;
flex-basis: 400px;
height: 100%;
padding-right: 0;
.row {
@ -155,17 +182,18 @@
.list-wrapper {
height: 100%;
overflow: auto;
position: relative;
}
.protocol-card {
border-bottom: 1px solid $color-gainsboro;
margin-right: 20px;
margin-right: 15px;
padding: 12px 11px;
&.active {
border: 2px solid $brand-primary;
border-radius: 2px;
box-shadow: 0 1px 4px 0 $color-black;
box-shadow: 0 1px 4px 0 $color-alto;
padding-bottom: 7px;
}
@ -205,8 +233,9 @@
.protocol-preview-panel {
background-color: $color-concrete;
border-top: 1px solid $color-silver-chalice;
height: 600px;
border-top: 1px solid $color-alto;
flex-grow: 1;
height: 100%;
padding-left: 0;
padding-right: 0;
@ -284,10 +313,51 @@
.external-import-btn {
background-color: $brand-primary;
border: none;
border: 0;
color: $color-white;
font-size: 12px;
padding-bottom: 3px;
padding-top: 3px;
}
.footer {
background: $color-white;
bottom: -30px;
box-shadow: 0 -1px 4px 0 $color-gainsboro;
height: 30px;
left: -15px;
position: absolute;
width: calc(100% + 30px);
}
}
@media (max-width: 900px) {
.external-protocols-tab {
.header {
.protocol-sort {
padding-left: 0;
}
.protocols-search-bar-panel {
flex-basis: 100%;
}
}
.main-protocol-panel {
display: block;
.protocol-list-side-panel {
border-right: 0;
height: 200px;
width: 100%;
}
.protocol-preview-panel {
height: calc(100% - 200px);
left: -15px;
position: relative;
width: calc(100% + 15px);
}
}
}
}

1
app/assets/stylesheets/themes/scinote.scss
View file

@ -403,7 +403,6 @@ a[data-toggle="tooltip"] {
border-left: 1px solid $color-alto;
border-right: 1px solid $color-alto;
border-bottom: 1px solid $color-alto;
margin-bottom: 50px;
}
.breadcrumb-teams {

65
app/views/protocols/index/_external_protocols_tab.html.erb
View file

@ -1,14 +1,15 @@
<div class='external-protocols-tab'>
<div class='row'>
<%= form_tag team_list_external_protocol_path(@current_team.id),
method: :get,
class: 'protocols-search-bar',
remote: true do %>
<div class='col-md-5 protocols-search-bar-panel'>
<%= form_tag team_list_external_protocol_path(@current_team.id),
method: :get,
class: 'protocols-search-bar',
remote: true do %>
<div class='header'>
<div class='protocols-search-bar-panel'>
<div class='service-provider'>
<%= image_tag 'external_protocols/protocolsio_logo.png',
class: 'protocolsio-logo' %>
<span class='protocolsio-title'><%= t('protocols.index.external_protocols.protocolsio_title') %></span>
<a class='protocolsio-title' href='<%= Constants::PROTOCOLS_IO_URL %>' target='_blank'>
<%= t('protocols.index.external_protocols.protocolsio_title') %></a>
<%= hidden_field_tag 'protocol_source', 'protocolsio/v3' %>
<%= hidden_field_tag 'page_id', 1, id: 'page-id' %>
</div>
@ -24,45 +25,42 @@
</div>
</div>
<div class='col-md-7'>
<div class='protocol-sort'>
<span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
<div class='btn-group' data-toggle='buttons'>
<label class='btn btn-link active'>
<input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='newest' value='newest'>
<%= t('protocols.index.external_protocols.sort_by.newest') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='oldest' value='oldest'>
<%= t('protocols.index.external_protocols.sort_by.oldest') %>
</label>
<div class='protocol-sort'>
<span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
<div class='btn-group' data-toggle='buttons'>
<label class='btn btn-link active'>
<input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='newest' value='newest'>
<%= t('protocols.index.external_protocols.sort_by.newest') %>
</label>
<label class='btn btn-link'>
<input type='radio' name='sort_by' id='oldest' value='oldest'>
<%= t('protocols.index.external_protocols.sort_by.oldest') %>
</label>
</div>
</div>
</div>
<% end %>
</div>
<div class='row main-protocol-panel'>
<div class='col-md-5 protocol-list-side-panel'>
<div class='main-protocol-panel'>
<div class='protocol-list-side-panel'>
<div class='row empty-text'>
<%= t('protocols.index.external_protocols.list_panel.empty_text') %>
</div>
<div class='list-wrapper'></div>
<div class='list-wrapper perfect-scrollbar'></div>
</div>
<div class='col-md-7 protocol-preview-panel'>
<div class='protocol-preview-panel'>
<div class='empty-preview-panel'>
<div class='row'>
@ -98,7 +96,8 @@
</div>
</div>
</div>
</div>
<div class='footer'></div>
</div>
<%= javascript_include_tag "protocols/external_protocols_tab.js" %>

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

@ -53,7 +53,9 @@
<% if current_user.teams.length > 0 %>
<li id="team-switch">
<div class="btn-group">
<button type="button" class="btn btn-default"><%= truncate_team_name(current_team.name) %></button>
<button type="button" class="btn btn-default" data-toggle="dropdown">
<%= truncate_team_name(current_team.name) %>
</button>
<button type="button"
class="btn btn-default dropdown-toggle"
title="<%= t('nav.label.teams') %>"

2
config/initializers/constants.rb
View file

@ -213,6 +213,8 @@ class Constants
}
}.freeze
PROTOCOLS_IO_URL = 'https://www.protocols.io/'
PROTOCOLS_IO_V3_API = {
base_uri: 'https://www.protocols.io/api/v3/',
default_timeout: 10,