feat: update the lock detail web page to use a modern grid layout (#3552

) Co-authored-by: PePe Amengual <jose.amengual@gmail.com>
runatlantis · Jun 28, 2023 · c680199 · c680199
1 parent d563366
commit c680199
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/server/controllers/templates/web_templates.go b/server/controllers/templates/web_templates.go
@@ -293,17 +293,15 @@ var LockTemplate = template.Must(template.New("lock.html.tmpl").Parse(`
     <div class="navbar-spacer"></div>
     <br>
     <section>
-      <div class="eight columns">
-        <h6><code>Repo Owner</code>: <strong>{{.RepoOwner}}</strong></h6>
-        <h6><code>Repo Name</code>: <strong>{{.RepoName}}</strong></h6>
-        <h6><code>Pull Request Link</code>: <a href="{{.PullRequestLink}}" target="_blank"><strong>{{.PullRequestLink}}</strong></a></h6>
-        <h6><code>Locked By</code>: <strong>{{.LockedBy}}</strong></h6>
-        <h6><code>Workspace</code>: <strong>{{.Workspace}}</strong></h6>
-        <br>
-      </div>
-      <div class="four columns">
-        <a class="button button-default" id="discardPlanUnlock">Discard Plan & Unlock</a>
+      <div class="lock-detail-grid">
+        <div><strong>Repo Owner:</strong></div><div>{{.RepoOwner}}</div>
+        <div><strong>Repo Name:</strong></div><div>{{.RepoName}}</div>
+        <div><strong>Pull Request Link:</strong></div><div><a href="{{.PullRequestLink}}" target="_blank">{{.PullRequestLink}}</a></div>
+        <div><strong>Locked By:</strong></div><div>{{.LockedBy}}</div>
+        <div><strong>Workspace:</strong></div><div>{{.Workspace}}</div>
       </div>
+      <br>
+        <a class="button button-primary" id="discardPlanUnlock">Discard Plan & Unlock</a>
     </section>
   </div>
   <div id="discardMessageModal" class="modal">

diff --git a/server/static/css/custom.css b/server/static/css/custom.css
@@ -311,6 +311,14 @@ tbody {
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
+.lock-detail-grid {
+  display: grid;
+  grid-template-columns: 130px auto;
+  border: 1px solid #dbeaf4;
+  width: 100%;
+  font-size: 14px;
+}
+
 /* Modal Header */
 .modal-header {
     padding: 8px 12px;