Remove inline styles from error pages and create new css file

kbase · Oct 23, 2020 · be56aab · be56aab
1 parent 0322e93
commit be56aab
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 40 deletions.
diff --git a/kbase-extension/kbase_templates/403.html b/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 %}

diff --git a/kbase-extension/kbase_templates/error.html b/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 %}

diff --git a/kbase-extension/kbase_templates/generic_error.html b/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>

diff --git a/kbase-extension/static/errorMain.js b/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');
+            let statusCode = document.getElementById('error_container').getAttribute('data-code');
             if (statusCode === '403') {
                 buildRequestControl();
             }

diff --git a/kbase-extension/static/kbase/css/advancedViewCell.css b/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;
 }
diff --git a/kbase-extension/static/kbase/css/errorPage.css b/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;
+}