adjust ui theme + address codacy issues (fix #168)

Ouranosinc · Jul 30, 2020 · 3b98cc5 · 3b98cc5
1 parent f327155
commit 3b98cc5
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 79 deletions.
diff --git a/magpie/ui/home/static/style.css b/magpie/ui/home/static/style.css
@@ -5,21 +5,28 @@ html,body {
     font-family: "Open Sans", sans-serif;
 }
 
+/* generic theme employed for buttons, headers, etc. unless using other variable for specific use-case */
+.theme {
+    border: 1px solid #2C8F30;
+    background-color: #4CAF50;
+}
+
 .content {
     margin: 5em;
 }
 
 .img_button {
     padding: 0.7em;
-    margin: 1em 0em 1em;
+    margin: 1em 0 1em;
 }
 
 a {
     color: #337ab7;
     text-decoration: none;
 }
 
-a:focus, a:hover {
+a:focus,
+a:hover {
     color: #23527c;
     text-decoration: underline;
 }
@@ -102,8 +109,6 @@ a.tab:visited,
 .admin_button,
 input[type="submit"],
 input[type="submit"].button.normal {
-    border: 1px solid #2C8F30;
-    background-color: #4CAF50;
     vertical-align: center;
     cursor:pointer;
     text-decoration: none;
@@ -149,14 +154,9 @@ td, th {
 }
 
 table thead {
-    background-color: #4CAF50;
     color: white;
 }
 
-table tr:nth-child(even) {
-    background-color: #F2F2F2;
-}
-
 .checkbox_align label {
   display: block;
   /*float: left;*/
@@ -187,7 +187,6 @@ table tr:nth-child(even) {
     border-bottom: 1px solid transparent;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
-    border-color: #ddd;
     color: #333;
     padding: 10px 15px;
 }
@@ -348,6 +347,7 @@ table tr:nth-child(even) {
 
 /*---View users & groups pages ---*/
 
+/* note: use explicit row classes instead of 'tr:nth-child(even)' because generated code doesn't handle it well */
 table.simple_list tr.list_row_odd {
     background-color: white;
 }
@@ -378,7 +378,7 @@ table.simple_list input[type="submit"] {
 }
 
 .tree_header {
-    padding: 5em 0em 2em;
+    padding: 5em 0 2em;
     font-weight: bold;
 }
 
@@ -482,22 +482,22 @@ ul.breadcrumb li a:hover {
     background: -moz-linear-gradient(bottom top, black, gray); /* Firefox 3.6 to 15 */
     background: -ms-linear-gradient(bottom top, black, gray); /* IE10+ */
     background: linear-gradient(to bottom top, black, gray); /* Standard syntax (must be last) */
-    padding: 1em 1em 0em 1em;
+    padding: 1em 1em 0 1em;
 }
 
 .header{
     vertical-align: center;
 }
 
-.header>div>a{
+.header>div>a {
     color: white;
     font-size: 3em;
     text-decoration: none;
     float: left;
     vertical-align: center;
 }
 
-.header>button{
+.header>button {
     height: 40px;
     width: 100px;
     float: right;
@@ -641,7 +641,8 @@ table.request_details thead tbody td th {
     min-height: 10em;
 }
 
-a.current_tab:link, a.current_tab:visited {
+a.current_tab:link,
+a.current_tab:visited {
     background-color: white;
     color: black;
     padding: 1em 1em 1.4em 1em;
@@ -651,7 +652,8 @@ a.current_tab:link, a.current_tab:visited {
     font-weight: bold;
 }
 
-a.tab:link, a.tab:visited {
+a.tab:link,
+a.tab:visited {
     padding: 1em;
     text-align: center;
     text-decoration: none;
@@ -672,7 +674,8 @@ table.service_details {
     min-width: 500px;
 }
 
-table.fields_table th, table.fields_table td {
+table.fields_table th,
+table.fields_table td {
     border: 0;
 }
 

diff --git a/magpie/ui/home/templates/error.mako b/magpie/ui/home/templates/error.mako
@@ -22,7 +22,7 @@
                     </button>)
                 </div>
                 <table id="request_details" class="request_details" style="visibility: hidden">
-                    <thead>
+                    <thead class="theme">
                         <tr><th>Field</th><th>Value</th></tr>
                     </thead>
                     <tbody>

diff --git a/magpie/ui/home/templates/home.mako b/magpie/ui/home/templates/home.mako
@@ -5,15 +5,15 @@
 </%block>
 
 <div class="admin_content">
-    <a href="${request.route_url('view_users')}" class="admin_button">
+    <a href="${request.route_url('view_users')}" class="admin_button theme">
         <img src="${request.static_url('magpie.ui.home:static/users.png')}" alt="">
         <br>Edit Users
     </a>
-    <a href="${request.route_url('view_groups')}" class="admin_button">
+    <a href="${request.route_url('view_groups')}" class="admin_button theme">
         <img src="${request.static_url('magpie.ui.home:static/groups.png')}" alt="">
         <br>Edit Groups
     </a>
-    <a href="${request.route_url('view_services', cur_svc_type='default')}" class="admin_button">
+    <a href="${request.route_url('view_services', cur_svc_type='default')}" class="admin_button theme">
         <img src="${request.static_url('magpie.ui.home:static/services.png')}" alt="">
         <br>Edit Services
     </a>

diff --git a/magpie/ui/home/templates/template.mako b/magpie/ui/home/templates/template.mako
@@ -28,12 +28,12 @@
         </a>
         <div style="float: right;">
             %if MAGPIE_LOGGED_USER:
-            <button class="img_button" type="button"
+            <button class="img_button theme" type="button"
                     onclick="location.href='${request.route_url('edit_current_user')}'">Account</button>
-            <button class="img_button" type="button"
+            <button class="img_button theme" type="button"
                     onclick="location.href='${request.route_url('logout')}'">Log Out</button>
             %else:
-            <button class="img_button" type="button"
+            <button class="img_button theme" type="button"
                     onclick="location.href='${request.route_url('login')}'">Log In</button>
             %endif
         </div>

diff --git a/magpie/ui/login/templates/login.mako b/magpie/ui/login/templates/login.mako
@@ -38,19 +38,31 @@
     <table class="fields_table">
         <tr>
             <td>Username:</td>
-            <div class="input_container">
-                <td><input type="text" name="user_name" value="${user_name_internal}" class="equal_width"></td>
-            </div>
+            <td>
+                <div class="input_container">
+                <label>
+                <input type="text" name="user_name" value="${user_name_internal}" class="equal_width">
+                </label>
+                </div>
+            </td>
             <td><p class="alert_form_error">&nbsp;</p></td> <!-- empty cell to keep table shape consistent -->
         </tr>
         <tr>
             <td>Password:</td>
-            <div class="input_container">
-                <td><input type="password" name="password" value="" class="equal_width"></td>
-            </div>
+            <td>
+                <div class="input_container">
+                <label>
+                <input type="password" name="password" value="" class="equal_width">
+                </label>
+                </div>
+            </td>
             <td><p class="alert_form_error">&nbsp;</p></td> <!-- empty cell to keep table shape consistent -->
         </tr>
-        <tr><td class="centered" colspan="2"><input type="submit" value="Sign In" name="submit" id="submit"></td></tr>
+        <tr>
+            <td class="centered" colspan="2">
+                <input class="button theme" type="submit" value="Sign In" name="submit" id="submit">
+            </td>
+        </tr>
     </table>
 </form>
 
@@ -61,26 +73,38 @@
     <table class="fields_table">
         <tr>
             <td>Username:</td>
-            <div class="input_container">
-                <td><input type="text" name="user_name" value="${user_name_external}" class="equal_width"></td>
-            </div>
+            <td>
+                <label>
+                <div class="input_container">
+                    <input type="text" name="user_name" value="${user_name_external}" class="equal_width">
+                </div>
+                </label>
+            </td>
             <td><p class="alert_form_error">&nbsp;</p></td> <!-- empty cell to keep table shape consistent -->
         </tr>
         <tr>
             <td>Provider:</td>
-            <div class="input_container">
-                <td><select name="provider_name" class="equal_width">
+            <td>
+                <div class="input_container">
+                <label>
+                <select name="provider_name" class="equal_width">
                     %for provider in external_providers:
                         <option value="${provider}">${provider}</option>
                         %if provider == provider_name:
                         <option selected="selected">${provider}</option>
                         %endif
                     %endfor
-                </select></td>
-            </div>
+                </select>
+                </label>
+                </div>
+            </td>
             <td><p class="alert_form_error">&nbsp;</p></td> <!-- empty cell to keep table shape consistent -->
         </tr>
-        <tr><td class="centered" colspan="2"><input type="submit" value="Sign In" name="submit"></td></tr>
+        <tr>
+            <td class="centered" colspan="2">
+                <input class="button theme" type="submit" value="Sign In" name="submit">
+            </td>
+        </tr>
     </table>
 </form>
 

diff --git a/magpie/ui/management/templates/edit_group.mako b/magpie/ui/management/templates/edit_group.mako
@@ -51,15 +51,15 @@
 <h3>Group Information</h3>
 
 <div class="panel_box">
-    <form id="delete_group" action="${request.path}" method="post">
-        <div class="panel_heading">
+    <div class="panel_heading theme">
+        <form id="delete_group" action="${request.path}" method="post">
             <span class="panel_title">Group: </span>
             <span class="panel_value">${group_name}</span>
             <span class="panel_heading_button">
                 <input type="submit" value="Delete" name="delete" class="button delete">
             </span>
-        </div>
-    </form>
+        </form>
+    </div>
     <form id="edit_info" action="${request.path}" method="post">
         <div class="panel_body">
             <div class="panel_box">
@@ -92,7 +92,7 @@
 <h3>Members</h3>
 
 <form id="edit_members" action="${request.path}" method="post">
-<table>
+<table class="simple_list">
 %for user in users:
 <tr>
     <td>

diff --git a/magpie/ui/management/templates/edit_service.mako b/magpie/ui/management/templates/edit_service.mako
@@ -2,28 +2,32 @@
 <%namespace name="tree" file="ui.management:templates/tree_scripts.mako"/>
 
 <%def name="render_item(key, value, level)">
-    % if level > 0:
-        <div class="tree_button"><input type="submit" value="Delete" name="delete_child"
-                                        class="button delete"></div>
-    % else:
-        <div class="tree_button"><input type="submit" value="Delete" name="delete_child"
-                                        class="button disabled" disabled></div>
-    % endif
-    % if "id" in value.keys():
-        % if int(value["id"]) in resources_id_type.keys():
-            % if not resources_id_type[int(value["id"])] in resources_no_child:
-                <div class="tree_button"><input type="submit" value="Add child" name="add_child"></div>
-            % else:
-                <div class="tree_button"><input type="submit" value="Add child" name="add_child"
-                                                class="button disabled" disabled></div>
+    <div class="tree_button">
+        <input type="submit" value="Delete" name="delete_child"
+        %if level > 0:
+               class="button delete"
+        %else:
+               class="button disabled" disabled
+        %endif
+        >
+    </div>
+    %if "id" in value.keys():
+        <div class="tree_button">
+            <input type="submit" value="Add child" name="add_child"
+            %if int(value["id"]) in resources_id_type.keys():
+                %if not resources_id_type[int(value["id"])] in resources_no_child:
+                    class="button disabled" disabled
+                %else:
+                    class="button theme"
+                %endif
+            %elif not service_no_child:
+                    class="button theme"
+            %else:
+                class="button disabled" disabled
             % endif
-        % elif not service_no_child:
-            <div class="tree_button"><input type="submit" value="Add child" name="add_child"></div>
-        % else:
-            <div class="tree_button"><input type="submit" value="Add child" name="add_child"
-                                            class="button disabled" disabled></div>
-        % endif
-    % endif
+            >
+        </div>
+    %endif
 </%def>
 
 <%block name="breadcrumb">
@@ -86,7 +90,7 @@
 </script>
 
 <div class="panel_box">
-    <div class="panel_heading">
+    <div class="panel_heading theme">
         <span class="panel_title">Service: </span>
         <span class="panel_value">${service_name}</span>
         <span class="panel_heading_button">

diff --git a/magpie/ui/management/templates/edit_user.mako b/magpie/ui/management/templates/edit_user.mako
@@ -62,15 +62,15 @@
 
 
 <div class="panel_box">
-    <form id="delete_user" action="${request.path}" method="post">
-        <div class="panel_heading">
+    <div class="panel_heading theme">
+        <form id="delete_user" action="${request.path}" method="post">
             <span class="panel_title">User: </span>
             <span class="panel_value">${user_name}</span>
             <span class="panel_heading_button">
                 <input type="submit" value="Delete" name="delete" class="button delete">
             </span>
-        </div>
-    </form>
+        </form>
+    </div>
     <div class="panel_body">
         <div class="panel_box">
             <div class="panel_heading">
@@ -141,7 +141,7 @@
 
 <form id="edit_membership" action="${request.path}" method="post">
     <input type="hidden" value="True" name="edit_group_membership"/>
-    <table>
+    <table class="simple_list">
     %for group in groups:
     <tr>
         <td>