From 7fa4cdd16ff3604b90bb58dbd3d099bd2a91169a Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 10 Jun 2024 09:36:09 -0500
Subject: Simplify 'View-Resource page' UI

Get rid of the resource role details and provide button-like elements
to help navigate to view more details.
---
 gn2/wqflask/static/new/css/pills.css            | 25 ++++++++++
 gn2/wqflask/static/new/css/resource-roles.css   |  5 ++
 gn2/wqflask/templates/oauth2/view-resource.html | 63 +++++--------------------
 3 files changed, 41 insertions(+), 52 deletions(-)
 create mode 100644 gn2/wqflask/static/new/css/pills.css
 create mode 100644 gn2/wqflask/static/new/css/resource-roles.css

(limited to 'gn2')

diff --git a/gn2/wqflask/static/new/css/pills.css b/gn2/wqflask/static/new/css/pills.css
new file mode 100644
index 00000000..57c84204
--- /dev/null
+++ b/gn2/wqflask/static/new/css/pills.css
@@ -0,0 +1,25 @@
+a.pill{
+    border: 1px;
+    color: #3071A9;
+    text-decoration: none;
+    border: 1px solid #3071A9;
+    border-radius: 5px;
+    padding: 0.3em;
+    box-shadow: 3px 3px #DEDEDE;
+    text-align: center;
+}
+
+a.pill:active {
+    box-shadow: 1px 1px aquamarine;
+    position: relative;
+    left: 2px;
+    top: 2px;
+}
+
+a.pill:hover {
+    text-decoration: none;
+}
+
+a.pill:focus {
+    text-decoration: none;
+}
diff --git a/gn2/wqflask/static/new/css/resource-roles.css b/gn2/wqflask/static/new/css/resource-roles.css
new file mode 100644
index 00000000..f6f5e54b
--- /dev/null
+++ b/gn2/wqflask/static/new/css/resource-roles.css
@@ -0,0 +1,5 @@
+.resource_roles {
+    display: grid;
+    grid-template-columns: 150px 150px 150px 150px 150px;
+    grid-gap: 5px;
+}
diff --git a/gn2/wqflask/templates/oauth2/view-resource.html b/gn2/wqflask/templates/oauth2/view-resource.html
index 2d11a302..451bfbd7 100644
--- a/gn2/wqflask/templates/oauth2/view-resource.html
+++ b/gn2/wqflask/templates/oauth2/view-resource.html
@@ -2,6 +2,10 @@
 {%from "oauth2/profile_nav.html" import profile_nav%}
 {%from "oauth2/display_error.html" import display_error%}
 {%block title%}View User{%endblock%}
+{%block css%}
+<link rel="stylesheet" href="/static/new/css/pills.css" />
+<link rel="stylesheet" href="/static/new/css/resource-roles.css" />
+{%endblock%}
 {%block content%}
 <div class="container" style="min-width: 1250px;">
   {{profile_nav("resources", user_privileges)}}
@@ -231,58 +235,13 @@
 
     <div class="row">
       <h3>Available Resource Roles</h3>
-        <table class="table">
-          <caption>Roles Acting on this Resource</caption>
-          <thead>
-            <tr>
-              <th>Role Name</th>
-              <th>Privilege</th>
-              <th>Privilege Description</th>
-              <th colspan="2">Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-          {%for role in resource_roles%}
-          {%for priv in role.privileges%}
-          {%if loop.index == 1%}
-          <tr>
-            <td rowspan="{{role.privileges | length}}"
-                style="text-align: center;vertical-align: middle;">
-              {{role.role_name}}
-            </td>
-            <td>{{priv.privilege_id}}</td>
-            <td>{{priv.privilege_description}}</td>
-            <td rowspan="{{role.privileges | length}}"
-                style="text-align: center;vertical-align: middle;">
-              <a href="" class="btn btn-danger"
-                 title="Not implemented: Would delete role.">Delete</a>
-            </td>
-            <td rowspan="{{role.privileges | length}}"
-                style="text-align: center;vertical-align: middle;">
-              <a href="" class="btn btn-info"
-                 title="Not implemented: Would edit role.">Edit</a>
-            </td>
-          </tr>
-          {%else%}
-          <tr>
-            <td>{{priv.privilege_id}}</td>
-            <td>{{priv.privilege_description}}</td>
-          </tr>
-          {%endif%}
-          {%endfor%}
-          {%else%}
-          <tr>
-            <td colspan="4">
-              <p class="text-info">
-                <span
-                  class="glyphicon glyphicon-exclamation-sign text-info"></span>
-                No roles defined for this resource.
-              </p>
-              </td>
-          </tr>
-          {%endfor%}
-          </tbody>
-        </table>
+      <div class="resource_roles">
+        {%for role in resource_roles%}
+        <a class="pill" href="#" title="Role page for role named '{{role.role_name}}'">
+          {{role.role_name}}
+        </a>
+        {%endfor%}
+      </div>
     </div>
 
     <div class="row">
-- 
cgit 1.4.1