fix(ui): style variables table

leg100 · Jul 26, 2023 · ed67d57 · ed67d57
1 parent 2b42dfd
commit ed67d57
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/internal/http/html/static/css/output.css b/internal/http/html/static/css/output.css
@@ -842,6 +842,22 @@ select {
   width: 24rem;
 }
 
+.w-\[10\%\] {
+  width: 10%;
+}
+
+.w-\[15\%\] {
+  width: 15%;
+}
+
+.w-\[25\%\] {
+  width: 25%;
+}
+
+.w-\[50\%\] {
+  width: 50%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -862,6 +878,14 @@ select {
   flex-basis: 13rem;
 }
 
+.table-fixed {
+  table-layout: fixed;
+}
+
+.border-collapse {
+  border-collapse: collapse;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1123,6 +1147,10 @@ select {
   text-align: left;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -1220,6 +1248,11 @@ select {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.even\:bg-gray-100:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));

diff --git a/internal/http/html/static/templates/content/variable_list.tmpl b/internal/http/html/static/templates/content/variable_list.tmpl
@@ -11,22 +11,22 @@
 {{ define "content" }}
   {{ $canCreate := $.CurrentUser.CanAccessWorkspace .CreateVariableAction .Policy }}
   {{ $canDelete := $.CurrentUser.CanAccessWorkspace .DeleteVariableAction .Policy }}
-  <table id="variables-table">
-    <thead>
+  <table class="table-fixed w-full text-left break-words border-collapse text-sm" id="variables-table">
+    <thead class="bg-gray-200 border-t border-b border-slate-900">
       <tr>
-        <th class="row-key">Key</th>
-        <th class="row-value">Value</th>
-        <th class="row-category">Category</th>
-        <th class="row-delete-button"></th>
+        <th class="p-2 w-[25%]">Key</th>
+        <th class="p-2 w-[50%]">Value</th>
+        <th class="p-2 w-[15%]">Category</th>
+        <th class="p-2 w-[10%]"></th>
       </tr>
     </thead>
-    <tbody>
+    <tbody class="border-b border-slate-900">
       {{ range .Variables }}
-        <tr>
-          <td><a class="show-underline" href="{{ editVariablePath .ID }}">{{ .Key }}</a></td>
-          <td>{{ if .Sensitive }}<span class="data">hidden</span>{{ else }}{{ .Value }}{{ end }}</td>
-          <td>{{ .Category }}</td>
-          <td>
+        <tr class="even:bg-gray-100">
+          <td class="p-2"><a class="show-underline" href="{{ editVariablePath .ID }}">{{ .Key }}</a></td>
+          <td class="p-2">{{ if .Sensitive }}<span class="data">hidden</span>{{ else }}{{ .Value }}{{ end }}</td>
+          <td class="p-2">{{ .Category }}</td>
+          <td class="p-2 text-right">
             <form action="{{ deleteVariablePath .ID }}" method="POST">
               <button id="delete-variable-button" class="btn-danger" onclick="return confirm('Are you sure you want to delete?')" {{ insufficient $canDelete }} >Delete</button>
             </form>