From 989c10872cd0da5ed6f067f6811922b4b944fa55 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mlorber@biosistemika.com>
Date: Thu, 4 Jul 2019 18:22:51 +0200
Subject: [PATCH 1/2] Fixes visual bugs on protocols.io and home page

---
 app/assets/stylesheets/protocol_management.scss          | 9 ++++-----
 app/assets/stylesheets/themes/scinote.scss               | 8 +++++++-
 .../protocols/index/_external_protocols_tab.html.erb     | 3 ++-
 app/views/shared/_navigation.html.erb                    | 4 +++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index cfe41640f..e4c2d18dc 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -86,7 +86,6 @@
     }
 
     .protocolsio-title {
-      color: $brand-primary;
       font-size: 14px;
       margin-left: 3px;
       vertical-align: middle;
@@ -135,8 +134,8 @@
 
   .protocol-list-side-panel {
     background-color: $color-white;
-    border-right: 1px solid $color-silver-chalice;
-    border-top: 1px solid $color-silver-chalice;
+    border-right: 1px solid $color-alto;
+    border-top: 1px solid $color-alto;
     height: 600px;
     padding-right: 0;
 
@@ -165,7 +164,7 @@
       &.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;
       }
 
@@ -200,7 +199,7 @@
 
   .protocol-preview-panel {
     background-color: $color-concrete;
-    border-top: 1px solid $color-silver-chalice;
+    border-top: 1px solid $color-alto;
     height: 600px;
     padding-left: 0;
     padding-right: 0;
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 311ebd57b..af2b7496d 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -154,6 +154,13 @@ body {
   width: 100% !important;
 }
 
+.input-group {
+  .form-control:not(:focus) {
+    -webkit-box-shadow: inset 0 1px 1px $color-white;
+    box-shadow: inset 0 1px 1px $color-white;
+  }
+}
+
 // Makes blue selected element line fill parent (as it should, fixes sci-2672)
 .repository-dropdown {
   .selected {
@@ -403,7 +410,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 {
diff --git a/app/views/protocols/index/_external_protocols_tab.html.erb b/app/views/protocols/index/_external_protocols_tab.html.erb
index 20044e4e2..000e56097 100644
--- a/app/views/protocols/index/_external_protocols_tab.html.erb
+++ b/app/views/protocols/index/_external_protocols_tab.html.erb
@@ -8,7 +8,8 @@
         <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='https://www.protocols.io/' target='_blank'>
+            <%= t('protocols.index.external_protocols.protocolsio_title') %></a>
           <%= hidden_field_tag 'protocol_source', 'protocolsio/v3' %>
         </div>
 
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index 3d42fb328..41754d4da 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -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') %>"

From 7bb82e2fc26c107a1c987268bb4ad81d276347d1 Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mlorber@biosistemika.com>
Date: Tue, 9 Jul 2019 14:35:40 +0200
Subject: [PATCH 2/2] Fix eternal protocols tab visuals

---
 .../protocols/external_protocols_tab.js       |   2 +-
 .../stylesheets/protocol_management.scss      | 179 ++++++++++++------
 app/assets/stylesheets/themes/scinote.scss    |   7 -
 .../index/_external_protocols_tab.html.erb    |  64 +++----
 config/initializers/constants.rb              |   2 +
 5 files changed, 159 insertions(+), 95 deletions(-)

diff --git a/app/assets/javascripts/protocols/external_protocols_tab.js b/app/assets/javascripts/protocols/external_protocols_tab.js
index 5f42bd52c..09cc4b998 100644
--- a/app/assets/javascripts/protocols/external_protocols_tab.js
+++ b/app/assets/javascripts/protocols/external_protocols_tab.js
@@ -80,8 +80,8 @@ function applySearchCallback() {
         resetPreviewPanel();
         $('.empty-text').hide();
         $('.list-wrapper').show();
-
         $('.list-wrapper').html(data.html);
+        new PerfectScrollbar($('.list-wrapper')[0], { wheelSpeed: 0.5 });
         applyClickCallbackOnProtocolCards();
         initLoadProtocolModalPreview();
       } else {
diff --git a/app/assets/stylesheets/protocol_management.scss b/app/assets/stylesheets/protocol_management.scss
index e4c2d18dc..766ec63d7 100644
--- a/app/assets/stylesheets/protocol_management.scss
+++ b/app/assets/stylesheets/protocol_management.scss
@@ -57,6 +57,7 @@
 
   .tab-pane-settings {
     border: 0;
+    height: calc(100vh - 167px);
   }
 }
 
@@ -65,78 +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 {
-      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;
-        color: $color-silver-chalice;
+      .protocolsio-logo {
+        height: 30px;
+        width: 30px;
       }
-    }
-  }
 
-  .protocol-sort {
-    padding-left: 7px;
+      .protocolsio-title {
+        font-size: 14px;
+        margin-left: 3px;
+        vertical-align: middle;
+      }
 
-    span {
-      color: $color-silver-chalice;
-      font-size: 14px;
-    }
+      .input-group {
+        margin-bottom: 0;
+        width: calc(100% - 130px);
 
-    .btn-group {
-      margin-bottom: 10px;
-      margin-top: 6px;
-      padding-left: 3px;
+        .form-control {
+          border-radius: 4px;
+          padding-right: 34px;
+        }
 
-      label {
-        padding-bottom: 0;
-        padding-top: 0;
-
-        &.active {
-          background: $color-gainsboro;
-          border-radius: 5px !important;
-          color: $color-emperor;
+        .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;
+      }
+
+      .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;
+          }
+        }
+      }
+    }
+  }
+  .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-alto;
     border-top: 1px solid $color-alto;
-    height: 600px;
+    flex-basis: 400px;
+    height: 100%;
     padding-right: 0;
 
     .row {
@@ -154,11 +182,12 @@
     .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 {
@@ -200,7 +229,8 @@
   .protocol-preview-panel {
     background-color: $color-concrete;
     border-top: 1px solid $color-alto;
-    height: 600px;
+    flex-grow: 1;
+    height: 100%;
     padding-left: 0;
     padding-right: 0;
 
@@ -278,10 +308,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);
+      }
+    }
+  }
 }
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index af2b7496d..3f7c529d1 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -154,13 +154,6 @@ body {
   width: 100% !important;
 }
 
-.input-group {
-  .form-control:not(:focus) {
-    -webkit-box-shadow: inset 0 1px 1px $color-white;
-    box-shadow: inset 0 1px 1px $color-white;
-  }
-}
-
 // Makes blue selected element line fill parent (as it should, fixes sci-2672)
 .repository-dropdown {
   .selected {
diff --git a/app/views/protocols/index/_external_protocols_tab.html.erb b/app/views/protocols/index/_external_protocols_tab.html.erb
index 000e56097..92bcdb55f 100644
--- a/app/views/protocols/index/_external_protocols_tab.html.erb
+++ b/app/views/protocols/index/_external_protocols_tab.html.erb
@@ -1,14 +1,14 @@
 <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' %>
-          <a class='protocolsio-title' href='https://www.protocols.io/' target='_blank'>
+          <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' %>
         </div>
@@ -24,45 +24,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 +95,8 @@
       </div>
     </div>
   </div>
-</div>
+
+  <div class='footer'></div>
 </div>
 
 <%= javascript_include_tag "protocols/external_protocols_tab.js" %>
diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb
index 67f6045f1..e4386ee5e 100644
--- a/config/initializers/constants.rb
+++ b/config/initializers/constants.rb
@@ -209,6 +209,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,