scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-02-11 17:36:13 +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(); resetPreviewPanel();
$('.empty-text').hide(); $('.empty-text').hide();
$('.list-wrapper').show(); $('.list-wrapper').show();
$('.list-wrapper').html(data.html); $('.list-wrapper').html(data.html);
$('.list-wrapper').scrollTo(0); $('.list-wrapper').scrollTo(0);
} else { } else {

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

@ -57,6 +57,7 @@
.tab-pane-settings { .tab-pane-settings {
border: 0; border: 0;
height: calc(100vh - 167px);
} }
} }
@ -65,79 +66,105 @@
} }
.external-protocols-tab { .external-protocols-tab {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.protocols-search-bar-panel { .header {
align-items: center;
display: flex; display: flex;
flex-direction: row; flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 15px;
padding-right: 0;
.service-provider { .protocols-search-bar-panel {
display: flex;
align-items: center; 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 { .service-provider {
height: 30px; align-items: center;
width: 30px; display: flex;
} width: 120px;
.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;
} }
.input-group-addon { .protocolsio-logo {
background: $color-white; 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; color: $color-silver-chalice;
font-size: 14px;
} }
}
}
.protocol-sort { .btn-group {
padding-left: 7px; margin-bottom: 10px;
margin-top: 6px;
padding-left: 3px;
span { label {
color: $color-silver-chalice; padding-bottom: 0;
font-size: 14px; padding-top: 0;
}
.btn-group { &.active {
margin-bottom: 10px; background: $color-gainsboro;
margin-top: 6px; border-radius: 5px !important;
padding-left: 3px; color: $color-emperor;
}
label {
padding-bottom: 0;
padding-top: 0;
&.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 { .protocol-list-side-panel {
background-color: $color-white; background-color: $color-white;
border-right: 1px solid $color-silver-chalice; border-right: 1px solid $color-alto;
border-top: 1px solid $color-silver-chalice; border-top: 1px solid $color-alto;
height: 600px; flex-basis: 400px;
height: 100%;
padding-right: 0; padding-right: 0;
.row { .row {
@ -155,17 +182,18 @@
.list-wrapper { .list-wrapper {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
position: relative;
} }
.protocol-card { .protocol-card {
border-bottom: 1px solid $color-gainsboro; border-bottom: 1px solid $color-gainsboro;
margin-right: 20px; margin-right: 15px;
padding: 12px 11px; padding: 12px 11px;
&.active { &.active {
border: 2px solid $brand-primary; border: 2px solid $brand-primary;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 4px 0 $color-black; box-shadow: 0 1px 4px 0 $color-alto;
padding-bottom: 7px; padding-bottom: 7px;
} }
@ -205,8 +233,9 @@
.protocol-preview-panel { .protocol-preview-panel {
background-color: $color-concrete; background-color: $color-concrete;
border-top: 1px solid $color-silver-chalice; border-top: 1px solid $color-alto;
height: 600px; flex-grow: 1;
height: 100%;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
@ -284,10 +313,51 @@
.external-import-btn { .external-import-btn {
background-color: $brand-primary; background-color: $brand-primary;
border: none; border: 0;
color: $color-white; color: $color-white;
font-size: 12px; font-size: 12px;
padding-bottom: 3px; padding-bottom: 3px;
padding-top: 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-left: 1px solid $color-alto;
border-right: 1px solid $color-alto; border-right: 1px solid $color-alto;
border-bottom: 1px solid $color-alto; border-bottom: 1px solid $color-alto;
margin-bottom: 50px;
} }
.breadcrumb-teams { .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='external-protocols-tab'>
<div class='row'> <%= form_tag team_list_external_protocol_path(@current_team.id),
<%= form_tag team_list_external_protocol_path(@current_team.id), method: :get,
method: :get, class: 'protocols-search-bar',
class: 'protocols-search-bar', remote: true do %>
remote: true do %> <div class='header'>
<div class='col-md-5 protocols-search-bar-panel'> <div class='protocols-search-bar-panel'>
<div class='service-provider'> <div class='service-provider'>
<%= image_tag 'external_protocols/protocolsio_logo.png', <%= image_tag 'external_protocols/protocolsio_logo.png',
class: 'protocolsio-logo' %> 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 'protocol_source', 'protocolsio/v3' %>
<%= hidden_field_tag 'page_id', 1, id: 'page-id' %> <%= hidden_field_tag 'page_id', 1, id: 'page-id' %>
</div> </div>
@ -24,45 +25,42 @@
</div> </div>
</div> </div>
<div class='col-md-7'> <div class='protocol-sort'>
<div class='protocol-sort'> <span><%= t('protocols.index.external_protocols.sort_by.title') %></span>
<span><%= t('protocols.index.external_protocols.sort_by.title') %></span> <div class='btn-group' data-toggle='buttons'>
<div class='btn-group' data-toggle='buttons'> <label class='btn btn-link active'>
<label class='btn btn-link active'> <input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked>
<input type='radio' name='sort_by' id='alphabetically-asc' value='alpha_asc' checked> <%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-asc') %> </label>
</label> <label class='btn btn-link'>
<label class='btn btn-link'> <input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'>
<input type='radio' name='sort_by' id='alphabetically-desc' value='alpha_desc'> <%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %>
<%= t('protocols.index.external_protocols.sort_by.alphabetically-desc') %> </label>
</label> <label class='btn btn-link'>
<label class='btn btn-link'> <input type='radio' name='sort_by' id='newest' value='newest'>
<input type='radio' name='sort_by' id='newest' value='newest'> <%= t('protocols.index.external_protocols.sort_by.newest') %>
<%= t('protocols.index.external_protocols.sort_by.newest') %> </label>
</label> <label class='btn btn-link'>
<label class='btn btn-link'> <input type='radio' name='sort_by' id='oldest' value='oldest'>
<input type='radio' name='sort_by' id='oldest' value='oldest'> <%= t('protocols.index.external_protocols.sort_by.oldest') %>
<%= t('protocols.index.external_protocols.sort_by.oldest') %>
</label>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
<% end %> <% end %>
</div>
<div class='row main-protocol-panel'> <div class='main-protocol-panel'>
<div class='col-md-5 protocol-list-side-panel'> <div class='protocol-list-side-panel'>
<div class='row empty-text'> <div class='row empty-text'>
<%= t('protocols.index.external_protocols.list_panel.empty_text') %> <%= t('protocols.index.external_protocols.list_panel.empty_text') %>
</div> </div>
<div class='list-wrapper'></div> <div class='list-wrapper perfect-scrollbar'></div>
</div> </div>
<div class='col-md-7 protocol-preview-panel'> <div class='protocol-preview-panel'>
<div class='empty-preview-panel'> <div class='empty-preview-panel'>
<div class='row'> <div class='row'>
@ -98,7 +96,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class='footer'></div>
</div> </div>
<%= javascript_include_tag "protocols/external_protocols_tab.js" %> <%= 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 %> <% if current_user.teams.length > 0 %>
<li id="team-switch"> <li id="team-switch">
<div class="btn-group"> <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" <button type="button"
class="btn btn-default dropdown-toggle" class="btn btn-default dropdown-toggle"
title="<%= t('nav.label.teams') %>" title="<%= t('nav.label.teams') %>"

2
config/initializers/constants.rb
View file

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