Moar style

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?

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);
 }
 
 /*

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)

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)

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>

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>

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>

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>

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>

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>

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>
 

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>

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>

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>

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>

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>