From 55520ff65deb4926ad7cd182593f1afe3a573894 Mon Sep 17 00:00:00 2001
From: swag <swaggboi@slackware.uk>
Date: Fri, 31 Dec 2021 17:58:55 -0500
Subject: [PATCH] Implement CSS grid for the signing form

---
 assets/css/swagg.css        | 22 +++++++++++------
 templates/sign.html.ep      | 47 +++++++++++++++++--------------------
 templates/sign.html.ep.orig | 40 -------------------------------
 3 files changed, 37 insertions(+), 72 deletions(-)
 delete mode 100644 templates/sign.html.ep.orig

diff --git a/assets/css/swagg.css b/assets/css/swagg.css
index 598d87c..a93ddec 100644
--- a/assets/css/swagg.css
+++ b/assets/css/swagg.css
@@ -18,7 +18,7 @@ a:hover {
 
 form {
     cursor: auto;
-    text-align: center;
+    /* text-align: center; */
 }
 
 td {
@@ -63,20 +63,28 @@ hr {
 }
 
 .win95button {
-    border: 0.25em solid;
+    border: 0.25em outset;
     border-color: #000000;
     background-color: #BEBEBE;
     padding: 0.75em;
     width: 10em;
 }
 
+.win95button:active {
+    border: 0.25em inset;
+}
+
 img {
     vertical-align: middle;
 }
 
-.bordered, .bordered tr, .bordered th, .bordered td {
-    border-style: double;
-    border-collapse: collapse;
-    padding: 10px;
-    border-color: #00FF00;
+.field {
+    display: flex;
+    flex-flow: column;
+    margin-bottom: 1em;
+}
+
+.captcha {
+    display: grid;
+    grid-template-columns: 1fr 6fr;
 }
diff --git a/templates/sign.html.ep b/templates/sign.html.ep
index 800b452..d5fdb03 100644
--- a/templates/sign.html.ep
+++ b/templates/sign.html.ep
@@ -2,29 +2,26 @@
 % title 'Sign';
 <h2>Sign the Guestbook</h2>
 <form method="post">
-  <table class="bordered">
-    <tr>
-      <th>Name</th>
-      <td><%= input_tag 'name' %></td>
-    </tr>
-    <tr>
-      <th>Message</th>
-      <td><%= text_area 'message', cols => 40, rows => 6 %></td>
-    </tr>
-    <tr>
-      <th>SwaggCAPTCHA™</th>
-      <td>
-        <%= radio_button answer => 0 %>
-        <%= label_for answer => 'I don\'t want to sign (wrong answer)' %><br>
-        <%= radio_button answer => 'false' %>
-        <%= label_for answer => 'I\'m ready to sign (choose this one)' %><br>
-        <%= radio_button answer => undef %>
-        <%= label_for answer => 'This is spam/I\'m a bot, do not sign' %>
-      </td>
-    </tr>
-    <tr>
-      <th style="border: none;">&nbsp;</th>
-      <td style="border: none;"><%= submit_button 'Send it' %></td>
-    </tr>
-  </table>
+  <div class="name field">
+    <%= label_for name => 'Name' %>
+    <%= input_tag 'name' %>
+  </div>
+  <div class="url field">
+    <%= label_for url => 'Homepage URL (doesn\'t work yet 😩😭)' %>
+    <%= input_tag 'url' %>
+  </div>
+  <div class="message field">
+    <%= label_for message => 'Message' %>
+    <%= text_area 'message', rows => 6 %>
+  </div>
+  <h3>SwaggCAPTCHA™</h3>
+  <div class="captcha field">
+    <%= radio_button answer => 0 %>
+    <%= label_for answer => 'I don\'t want to sign (wrong answer)' %>
+    <%= radio_button answer => 'false' %>
+    <%= label_for answer => 'I\'m ready to sign (choose this one)' %>
+    <%= radio_button answer => undef %>
+    <%= label_for answer => 'This is spam/I\'m a bot, do not sign' %>
+  </div>
+  <%= submit_button 'Sign it', class => 'win95button' %>
 </form>
diff --git a/templates/sign.html.ep.orig b/templates/sign.html.ep.orig
deleted file mode 100644
index 0414dbe..0000000
--- a/templates/sign.html.ep.orig
+++ /dev/null
@@ -1,40 +0,0 @@
-% layout 'default';
-% title 'Sign';
-<h2>Sign the Guestbook</h2>
-<form method="post">
-  <table class="bordered">
-    <tr>
-      <th>Name</th>
-      <td><%= input_tag 'name' %></td>
-    </tr>
-    <tr>
-      <th>Message</th>
-      <td><%= text_area 'message', cols => 40, rows => 6 %></td>
-    </tr>
-    <tr>
-      <th>SwaggCAPTCHA™</th>
-      <td>
-        <%= radio_button answer => 0 %>
-        <%= label_for answer => 'I don\'t want to sign (wrong answer)' %>
-      </td>
-    </tr>
-    <tr>
-      <th>&nbsp;</th>
-      <td>
-        <%= radio_button answer => 'false' %>
-        <%= label_for answer => 'I\'m ready to sign (choose this one)' %>
-      </td>
-    </tr>
-    <tr>
-      <th>&nbsp;</th>
-      <td>
-        <%= radio_button answer => undef %>
-        <%= label_for answer => 'This is spam/I\'m a bot, do not sign' %>
-      </td>
-    </tr>
-    <tr>
-      <th>&nbsp;</th>
-      <td><%= submit_button 'Send it' %></td>
-    </tr>
-  </table>
-</form>