Merge pull request #1887 from kbase/DATAUP-246_css_to_css-error_pages

DATAUP-246: error pages

kbase-extension/kbase_templates/403.html

@@ -5,12 +5,7 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
@@ -22,11 +17,11 @@
 
 {% block site %}
 
-<div class="error" data-code={{status_code}}>
-    <p style="font-weight: bold">You do not have permission to access this Narrative.</p>
-    <p style="font-size: 150%">You can request access from the Narrative owners using the controls below.</p>
+<div id="error_container" class="access-error__container" data-code={{status_code}}>
+    <p class="access-error__heading">You do not have permission to access this Narrative.</p>
+    <p class="access-error__text">You can request access from the Narrative owners using the controls below.</p>
 
-    <div id="perm-request" class="form-group form-inline" style="margin-top: 2em">
+    <div id="perm-request" class="form-group form-inline access-request-form__container">
         <label for="req-level">Access Level</label>
         <select id="req-level" class="form-control">
             <option value="r">View only</option>
@@ -35,10 +30,10 @@
         </select>
         <button id="req-btn" type="button" class="btn btn-sm btn-primary">Request</button>
     </div>
-    <div id="loader" style="display: none; margin-top: 1em">
+    <div id="loader" class="access-request-progress__container">
         <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
     </div>
-    <div id="request-result" style="font-size: 125%; margin-top: 2em"></div>
+    <div id="request-result" class="access-request-result"></div>
 </div>
 
 {% endblock %}

kbase-extension/kbase_templates/error.html

@@ -5,20 +5,15 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
 {% endblock %}
 
 {% block site %}
 
-<div class="error">
+<div id="error_container" class="error">
     {% block h1_error %}
     <h1>{{status_code}} : {{status_message}}</h1>
     {% endblock h1_error %}

kbase-extension/kbase_templates/generic_error.html

@@ -5,12 +5,7 @@
 
 {% block stylesheet %}
 {{super()}}
-<style type="text/css">
-/* disable initial hide */
-div#header, div#site {
-    display: block;
-}
-</style>
+    <link rel="stylesheet" href="{{ static_url("kbase/css/errorPage.css") }}" type="text/css" />
 {% endblock %}
 
 {% block loading_message %}
@@ -22,15 +17,15 @@
 
 {% block site %}
 
-<div class="error" data-code={{status_code}}>
+<div id="error_container" class="generic-error__container" data-code={{status_code}}>
     {% block h1_error %}
-    <p style="font-weight: bold">
+    <p class="generic-error__heading">
         An error occurred while loading this Narrative
     </p>
     {% endblock h1_error %}
     {% block error_detail %}
         {% if message %}
-            <p>{{message}}</p>
+            <p class="generic-error__text">{{message}}</p>
         {% endif %}
     {% endblock %}
 </div>

kbase-extension/kbase_templates/notebook.html

@@ -96,17 +96,15 @@
     </div>
     <div id="content-column">
         <span id="kb-add-code-cell"
-              class="kb-data-list-add-data-button fa fa-terminal fa-2x"
-              style="position:fixed; bottom:15px; right:75px; z-index:5"
+              class="fa fa-terminal fa-2x"
               data-toggle="tooltip" data-placement="top" Title="Add Code Cell"></span>
         <span id="kb-add-md-cell"
-              class="kb-data-list-add-data-button fa fa-paragraph fa-2x"
-              style="position:fixed; bottom:15px; right:10px; z-index:5"
+              class="fa fa-paragraph fa-2x"
               data-toggle="tooltip" data-placement="top" Title="Add Markdown Cell"></span>
 
         <div id="ipython-main-app">
             <div id="notebook_panel">
-                <div id="notebook"></div>
+                <div id="notebook" class="notebook__container"></div>
                 <div id='tooltip' class='ipython_tooltip' style='display:none'></div>
                 <div id="kb-ws-progress"></div>
             </div>
@@ -140,8 +138,4 @@
 <!-- Because the narrative (in this version) requires that some Javascript is loaded before
     running the main IPython stack, a little wrapper script had to be written. More details there. -->
 <script src="{{ static_url("narrativeMain.js") }}" charset="utf-8"></script>
-
-<!-- not used in this version, but left behind for posterity.
-    <script src="{{ static_url("notebook/js/main.js") }}" charset="utf-8"></script>
--->
 {% endblock %}

kbase-extension/static/errorMain.js

@@ -21,7 +21,7 @@ require([
             return Login.init($('#signin-button'), true);
         })
         .then(function () {
-            let statusCode = document.getElementsByClassName('error')[0].getAttribute('data-code');
+            const statusCode = document.getElementById('error_container').getAttribute('data-code');
             if (statusCode === '403') {
                 buildRequestControl();
             }

kbase-extension/static/kbase/css/advancedViewCell.css

@@ -1,14 +1,3 @@
-/*
-To change this license header, choose License Headers in Project Properties.
-To change this template file, choose Tools | Templates
-and open the template in the editor.
-*/
-
-/*
-    Created on : Jul 14, 2016, 2:31:08 PM
-    Author     : erik
-*/
-
 .kb-advanced-view-cell .kb-panel-container[data-element=parameters-group] > div.panel-collapse > .panel-body {
   padding: 0;
 }

kbase-extension/static/kbase/css/errorPage.css

@@ -0,0 +1,37 @@
+#header,
+#site {
+  display: block;
+}
+
+.access-error__container,
+.generic-error__container {
+  text-align: center;
+  margin: 2rem;
+}
+
+.access-error__heading,
+.generic-error__heading {
+  font-weight: bold;
+  font-size: 200%;
+  line-height: 1.5;
+}
+
+.access-error__text,
+.generic-error__text {
+  font-size: 150%;
+  line-height: 2;
+}
+
+.access-request-form__container {
+  margin-top: 2rem;
+}
+
+.access-request-progress__container {
+  display: none;
+  margin-top: 1rem;
+}
+
+.access-request-result {
+  font-size: 125%;
+  margin-top: 2rem;
+}

kbase-extension/static/kbase/css/kbaseNarrative.css

@@ -2701,22 +2701,35 @@ button.kb-data-obj {
 /* specialize buttons that hover over narrative */
 #kb-add-code-cell,
 #kb-add-md-cell {
+  background-color: #2196f3;
+  border-radius: 50%;
+  bottom: 15px;
   box-shadow: #cecece 2px 2px 1px;
+  cursor: pointer;
+  color: #fff;
   height: 40px;
-  width: 40px;
-  background-color: #2196f3;
   opacity: 0.5;
+  padding-top: 5px;
+  position: fixed;
+  width: 40px;
+  z-index: 5;
 }
 
 #kb-add-code-cell {
-  right: 100px;
+  right: 75px;
+  padding-left: 7px;
 }
 
 #kb-add-md-cell {
   margin-right: 20px;
+  right: 10px;
+  padding-left: 8px;
 }
 
+#kb-add-code-cell:hover,
+#kb-add-md-cell:hover,
 .kb-data-list-add-data-button:hover {
+  opacity: 1;
   cursor: pointer;
   background-color: #36618e;
 }

kbase-extension/static/kbase/custom/custom.css

@@ -122,7 +122,7 @@ div.cell.selected.kb-error {
   border-left: 5px solid #d9534f;
 }
 
-#notebook {
+div#notebook {
   padding: 0;
 }