From 455159dbc5bd7b083e20429a1086e5a8aa8a45cb Mon Sep 17 00:00:00 2001
From: swag <swaggboi@slackware.uk>
Date: Sat, 20 May 2023 23:43:32 -0400
Subject: [PATCH] Moar style

---
 README.md                               |  1 +
 assets/css/post_text.css                | 41 +++++++++++++++----------
 t/remark.t                              |  4 +--
 t/thread.t                              |  4 +--
 templates/layouts/default.html.ep       | 18 +++++------
 templates/moderator/admin_reset.html.ep |  2 +-
 templates/moderator/create.html.ep      |  2 +-
 templates/moderator/demote.html.ep      |  2 +-
 templates/moderator/lock_acct.html.ep   |  2 +-
 templates/moderator/login.html.ep       |  2 +-
 templates/moderator/mod_reset.html.ep   |  2 +-
 templates/moderator/promote.html.ep     |  2 +-
 templates/moderator/unlock_acct.html.ep |  1 +
 templates/remark/by_id.html.ep          | 18 +++++++----
 templates/remark/create.html.ep         |  2 +-
 templates/thread/create.html.ep         |  2 +-
 16 files changed, 61 insertions(+), 44 deletions(-)

diff --git a/README.md b/README.md
index cf6bf7a..88a094e 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,7 @@ Run the tests locally (against development environment):
 ## TODOs
 
 1. CSS
+1. Create mod takes null input??
 1. Check status for items not found, should be 404 but getting 5xx
 1. "All new posts flagged" mode (require approval for new posts)
 1. Tests for mod-only user?
diff --git a/assets/css/post_text.css b/assets/css/post_text.css
index 28083f6..821a0b7 100644
--- a/assets/css/post_text.css
+++ b/assets/css/post_text.css
@@ -11,6 +11,7 @@
     --true-gray: #999999;
     --highlight-green: green;
     --highlight-red: red;
+    --transparent: #FFFFFFDD;
 
     box-sizing: border-box;
 }
@@ -41,6 +42,21 @@ pre > code {
  * Simple classes
  */
 
+.click {
+    color: black;
+    text-decoration: none;
+    border: outset var(--light-blue);
+    background-color: var(--light-blue);
+    white-space: nowrap; /* Prevent the button from going multi-line */
+}
+
+.click::first-letter { text-decoration: underline; }
+
+.click:active {
+    border: inset var(--dark-blue);
+    background-color: var(--dark-blue);
+}
+
 .site-header {
     display: flex;
     flex-flow: column wrap;
@@ -116,30 +132,23 @@ pre > code {
     text-align: left;
 }
 
+.form-button::first-letter { text-decoration: underline; }
+
+.form-button:active {
+    border: inset var(--dark-blue);
+    background-color: var(--dark-blue);
+}
+
 .field-with-info {
     border: dashed var(--highlight-green) 0.5em;
-    background-color: var(--true-gray);
     padding: 1em;
+    background-color: var(--transparent);
 }
 
 .field-with-error {
     border: dashed var(--highlight-red) 0.5em;
-    background-color: var(--true-gray);
     padding: 1em;
-}
-
-.click {
-    color: black;
-    text-decoration: none;
-    border: outset var(--light-blue);
-    background-color: var(--light-blue);
-}
-
-.click::first-letter { text-decoration: underline; }
-
-.click:active {
-    border: inset var(--dark-blue);
-    background-color: var(--dark-blue);
+    background-color: var(--transparent);
 }
 
 /*
diff --git a/t/remark.t b/t/remark.t
index 8aafb3e..fa28d6c 100644
--- a/t/remark.t
+++ b/t/remark.t
@@ -26,14 +26,14 @@ subtest 'Post new remark', sub {
     $t->get_ok('/remark/post/1')->status_is(200)
         ->element_exists('form input[name="author"]' )
         ->element_exists('form textarea[name="body"]')
-        ->element_exists('form input[type="submit"]' )
+        ->element_exists('form button[type="submit"]' )
         ->text_like(h2 => qr/New Remark/);
 
     # POST
     $t->post_ok('/remark/post/1')->status_is(200)
         ->element_exists('form input[name="author"]' )
         ->element_exists('form textarea[name="body"]')
-        ->element_exists('form input[type="submit"]' )
+        ->element_exists('form button[type="submit"]' )
         ->text_like(h2 => qr/New Remark/);
 
     $t->post_ok('/remark/post/1', form => \%valid_remark)->status_is(200)
diff --git a/t/thread.t b/t/thread.t
index 6577a72..8a539e3 100644
--- a/t/thread.t
+++ b/t/thread.t
@@ -54,7 +54,7 @@ subtest 'Post new thread', sub {
         ->element_exists('form input[name="author"]' )
         ->element_exists('form input[name="title"]'  )
         ->element_exists('form textarea[name="body"]')
-        ->element_exists('form input[type="submit"]' )
+        ->element_exists('form button[type="submit"]' )
         ->text_like(h2 => qr/New Thread/);
 
     # POST
@@ -62,7 +62,7 @@ subtest 'Post new thread', sub {
         ->element_exists('form input[name="author"]' )
         ->element_exists('form input[name="title"]'  )
         ->element_exists('form textarea[name="body"]')
-        ->element_exists('form input[type="submit"]' )
+        ->element_exists('form button[type="submit"]' )
         ->text_like(h2 => qr/New Thread/);
 
     $t->post_ok('/thread/post', form => \%invalid_title)->status_is(400)
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index af3acbb..e70f251 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -26,20 +26,20 @@
   <% if (is_mod) { =%>
   <nav class="site-nav">
     <span>Moderate:</span>
-    <%= link_to Flagged => 'flagged_list' %>
-    <%= link_to Hidden  => 'hidden_list'  %>
-    <%= link_to Reset   => 'mod_reset'    %>
+    <%= link_to Flagged => flagged_list => (class => 'click') %>
+    <%= link_to Hidden  => hidden_list  => (class => 'click') %>
+    <%= link_to Reset   => mod_reset    => (class => 'click') %>
   </nav>
   <% } =%>
   <% if (is_admin) { =%>
   <nav class="site-nav">
     <span>Admin:</span>
-    <%= link_to Create  => 'create_mod'   %>
-    <%= link_to Reset   => 'admin_reset'  %>
-    <%= link_to Lock    => 'lock_mod'     %>
-    <%= link_to Unlock  => 'unlock_mod'   %>
-    <%= link_to Promote => 'promote_mod'  %>
-    <%= link_to Demote  => 'demote_admin' %>
+    <%= link_to Create  => create_mod   => (class => 'click') %>
+    <%= link_to Reset   => admin_reset  => (class => 'click') %>
+    <%= link_to Lock    => lock_mod     => (class => 'click') %>
+    <%= link_to Unlock  => unlock_mod   => (class => 'click') %>
+    <%= link_to Promote => promote_mod  => (class => 'click') %>
+    <%= link_to Demote  => demote_admin => (class => 'click') %>
   </nav>
   <% } =%>
 </header>
diff --git a/templates/moderator/admin_reset.html.ep b/templates/moderator/admin_reset.html.ep
index 7a17150..583084f 100644
--- a/templates/moderator/admin_reset.html.ep
+++ b/templates/moderator/admin_reset.html.ep
@@ -10,5 +10,5 @@
     <%= label_for password => 'Password' %>
     <%= password_field password => (id => 'password') %>
   </div>
-  <%= submit_button Reset => (class => 'form-button') %>
+  <button type="submit" class="form-button">Reset</button>
 </form>
diff --git a/templates/moderator/create.html.ep b/templates/moderator/create.html.ep
index 8134f73..8c0b7b4 100644
--- a/templates/moderator/create.html.ep
+++ b/templates/moderator/create.html.ep
@@ -14,5 +14,5 @@
     <%= label_for password => 'Password' %>
     <%= password_field password => (id => 'password') %>
   </div>
-  <%= submit_button Create => (class => 'form-button') %>
+  <button type="submit" class="form-button">Create</button>
 </form>
diff --git a/templates/moderator/demote.html.ep b/templates/moderator/demote.html.ep
index c0acbd4..acbe9cf 100644
--- a/templates/moderator/demote.html.ep
+++ b/templates/moderator/demote.html.ep
@@ -6,5 +6,5 @@
     <%= label_for email => 'Email' %>
     <%= email_field email => (id => 'email') %>
   </div>
-  <%= submit_button Demote => (class => 'form-button') %>
+  <button type="submit" class="form-button">Demote</button>
 </form>
diff --git a/templates/moderator/lock_acct.html.ep b/templates/moderator/lock_acct.html.ep
index e534651..66d5a80 100644
--- a/templates/moderator/lock_acct.html.ep
+++ b/templates/moderator/lock_acct.html.ep
@@ -6,5 +6,5 @@
     <%= label_for email => 'Email' %>
     <%= email_field email => (id => 'email') %>
   </div>
-  <%= submit_button Lock => (class => 'form-button') %>
+  <button type="submit" class="form-button">Lock</button>
 </form>
diff --git a/templates/moderator/login.html.ep b/templates/moderator/login.html.ep
index e898395..7096419 100644
--- a/templates/moderator/login.html.ep
+++ b/templates/moderator/login.html.ep
@@ -10,5 +10,5 @@
     <%= label_for password => 'Password' %>
     <%= password_field password => (id => 'password') %>
   </div>
-  <%= submit_button Login => (class => 'form-button') %>
+  <button type="submit" class="form-button">Login</button>
 </form>
diff --git a/templates/moderator/mod_reset.html.ep b/templates/moderator/mod_reset.html.ep
index d7ee89f..0f85339 100644
--- a/templates/moderator/mod_reset.html.ep
+++ b/templates/moderator/mod_reset.html.ep
@@ -6,6 +6,6 @@
     <%= label_for password => 'Password' %>
     <%= password_field password => (id => 'password') %>
   </div>
-  <%= submit_button Reset => (class => 'form-button') %>
+  <button type="submit" class="form-button">Reset</button>
 </form>
 
diff --git a/templates/moderator/promote.html.ep b/templates/moderator/promote.html.ep
index acd4daa..b2e0a10 100644
--- a/templates/moderator/promote.html.ep
+++ b/templates/moderator/promote.html.ep
@@ -6,5 +6,5 @@
     <%= label_for email => 'Email' %>
     <%= email_field email => (id => 'email') %>
   </div>
-  <%= submit_button Promote => (class => 'form-button') %>
+  <button type="submit" class="form-button">Promote</button>
 </form>
diff --git a/templates/moderator/unlock_acct.html.ep b/templates/moderator/unlock_acct.html.ep
index a756d07..956d907 100644
--- a/templates/moderator/unlock_acct.html.ep
+++ b/templates/moderator/unlock_acct.html.ep
@@ -7,4 +7,5 @@
     <%= email_field email => (id => 'email') %>
   </div>
   <%= submit_button Unlock => (class => 'form-button') %>
+  <button type="submit" class="form-button">Unlock</button>
 </form>
diff --git a/templates/remark/by_id.html.ep b/templates/remark/by_id.html.ep
index 8f57017..3716972 100644
--- a/templates/remark/by_id.html.ep
+++ b/templates/remark/by_id.html.ep
@@ -12,15 +12,21 @@
       <%== markdown $remark->{'body'} =%>
     </div>
     <nav class="post__nav">
-      <%= link_to Thread => single_thread => {thread_id => $remark->{'thread_id'}} %>
-      <%= link_to Remark => post_remark   => {thread_id => $remark->{'thread_id'}} %>
-      <%= link_to Flag   => flag_remark   => {remark_id => $remark->{'id'}} %>
+      <%= link_to Thread => single_thread =>
+          {thread_id => $remark->{'thread_id'}}, (class => 'click') %>
+      <%= link_to Remark => post_remark =>
+          {thread_id => $remark->{'thread_id'}}, (class => 'click') %>
+      <%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}},
+          (class => 'click') %>
     </nav>
     <% if (is_mod) { =%>
     <nav class="post__nav">
-      <%= link_to Hide   => hide_remark   => {remark_id => $remark->{'id'}} %>
-      <%= link_to Unhide => unhide_remark => {remark_id => $remark->{'id'}} %>
-      <%= link_to Unflag => unflag_remark => {remark_id => $remark->{'id'}} %>
+      <%= link_to Hide => hide_remark => {remark_id => $remark->{'id'}},
+          (class => 'click') %>
+      <%= link_to Unhide => unhide_remark => {remark_id => $remark->{'id'}},
+          (class => 'click') %>
+      <%= link_to Unflag => unflag_remark => {remark_id => $remark->{'id'}},
+          (class => 'click') %>
     </nav>
     <% } =%>
   </article>
diff --git a/templates/remark/create.html.ep b/templates/remark/create.html.ep
index 1310d85..f28c47f 100644
--- a/templates/remark/create.html.ep
+++ b/templates/remark/create.html.ep
@@ -28,7 +28,7 @@
     <p class="field-with-error">Invalid text: Up to 4,000 characters only.</p>
     <% } =%>
   </div>
-  <%= submit_button 'Post', class => 'form-button' %>
+  <button type="submit" class="form-button">Post</button>
 </form>
 <section class="pager">
   <h3 class="page-title">Thread</h3>
diff --git a/templates/thread/create.html.ep b/templates/thread/create.html.ep
index 36c0e08..5d748fc 100644
--- a/templates/thread/create.html.ep
+++ b/templates/thread/create.html.ep
@@ -40,5 +40,5 @@
     <p class="field-with-error">Invalid text: Up to 4,000 characters only.</p>
     <% } =%>
   </div>
-  <%= submit_button 'Post', class => 'form-button' %>
+  <button type="submit" class="form-button">Post</button>
 </form>