feat: Update Lock Index Page to Use a CSS Grid Layout (runatlantis#3509)

* Update Lock Index Page to Use a CSS Grid Layout * Update styles * Modify css
gocardless · Feb 13, 2024 · f526e08 · f526e08
1 parent d852005
commit f526e08
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 22 deletions.
diff --git a/server/controllers/templates/web_templates.go b/server/controllers/templates/web_templates.go
@@ -110,15 +110,34 @@ var IndexTemplate = template.Must(template.New("index.html.tmpl").Parse(`
     <p class="title-heading small"><strong>Locks</strong></p>
     {{ if .Locks }}
     {{ $basePath := .CleanedBasePath }}
+    <div class="lock-grid">
+    <div class="lock-header">
+      <span>Repository</span>
+      <span>Project</span>
+      <span>Workspace</span>
+      <span>Date/Time</span>
+      <span>Status</span>
+    </div>
     {{ range .Locks }}
-      <a href="{{ $basePath }}{{.LockPath}}">
-        <div class="twelve columns button content lock-row">
-        <div class="list-title">{{.RepoFullName}} <span class="heading-font-size">#{{.PullNum}}</span> <code>{{.Path}}</code> <code>{{.Workspace}}</code></div>
-        <div class="list-status"><code>Locked</code></div>
-        <div class="list-timestamp"><span class="heading-font-size">{{.TimeFormatted}}</span></div>
+        <div class="lock-row">
+        <a class="lock-link" href="{{ $basePath }}{{.LockPath}}">
+          <span class="lock-reponame">{{.RepoFullName}} #{{.PullNum}}</span>
+        </a>
+        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
+          <span class="lock-path">{{.Path}}</span>
+        </a>
+        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
+          <span><code>{{.Workspace}}</code></span>
+        </a>
+        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
+          <span class="lock-datetime">{{.TimeFormatted}}</span>
+        </a>
+        <a class="lock-link" tabindex="-1" href="{{ $basePath }}{{.LockPath}}">
+          <span><code>Locked</code></span>
+        </a>
         </div>
-      </a>
     {{ end }}
+    </div>
     {{ else }}
     <p class="placeholder">No locks found.</p>
     {{ end }}

diff --git a/server/static/css/custom.css b/server/static/css/custom.css
@@ -1,5 +1,5 @@
 .container {
-  max-width: 1000px; }
+  max-width: 1200px; }
 .header {
   margin-top: 2.5vh;
   text-align: center; }
@@ -200,19 +200,6 @@ tbody {
 .content {
   margin-bottom: 2px;
 }
-.list-title {
-  position: relative;
-  float: left;
-}
-.list-status {
-  position: relative;
-  float: right;
-}
-.list-timestamp {
-  position: relative;
-  float: right;
-  padding-right: 2px;
-}
 .unlock-discard-btn {
   border-color: red !important;
   background-color: red !important;
@@ -247,10 +234,68 @@ tbody {
 .list-unlock{
   float: right;
 }
-.lock-row{
-  cursor: default;
+
+/* Styles for the lock index */
+.lock-grid{
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
+  border: 1px solid #dbeaf4;
+  width: 100%;
+  font-size: 12px;
+}
+
+.lock-header {
+  display: contents;
+  font-weight: bold;
+}
+
+.lock-header span {
+  border-bottom: 1px solid #dbeaf4;
+  padding: 5px;
+}
+
+.lock-row {
+  display: contents;
+  text-transform: uppercase;
+}
+
+.lock-row a {
+  border-bottom: 1px solid #dbeaf4;
+  padding: 5px;
+}
+
+.lock-row:hover a {
+  background-color: #dbeaf4;
+  cursor: pointer;
+}
+
+.lock-row:hover a:hover {
+  color: initial
+}
+
+.lock-link {
+  text-decoration: none;
+  color: #555
 }
 
+.lock-reponame {
+  word-break: break-all;
+}
+
+.lock-path {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-family: monospace;
+  font-size: 90%;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px;
+  word-break: break-all;
+}
+
+.lock-datetime {
+  color: #999;
+}
 /* The Modal (background) */
 .modal {
     display: none; /* Hidden by default */