swaggboi/guestbook-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement CSS grid for the signing form

Browse Source
This commit is contained in:
swag 2021-12-31 17:58:55 -05:00
parent 524097727c
commit 55520ff65d
3 changed files with 37 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/swagg.css
View File

@ -18,7 +18,7 @@ a:hover {
form { form {
cursor: auto; cursor: auto;
text-align: center; /* text-align: center; */
} }
td { td {
@ -63,20 +63,28 @@ hr {
} }
.win95button { .win95button {
border: 0.25em solid; border: 0.25em outset;
border-color: #000000; border-color: #000000;
background-color: #BEBEBE; background-color: #BEBEBE;
padding: 0.75em; padding: 0.75em;
width: 10em; width: 10em;
} }
.win95button:active {
border: 0.25em inset;
}
img { img {
vertical-align: middle; vertical-align: middle;
} }
.bordered, .bordered tr, .bordered th, .bordered td { .field {
border-style: double; display: flex;
border-collapse: collapse; flex-flow: column;
padding: 10px; margin-bottom: 1em;
border-color: #00FF00; }
.captcha {
display: grid;
grid-template-columns: 1fr 6fr;
} }

39
templates/sign.html.ep
View File

@ -2,29 +2,26 @@
% title 'Sign'; % title 'Sign';
<h2>Sign the Guestbook</h2> <h2>Sign the Guestbook</h2>
<form method="post"> <form method="post">
<table class="bordered"> <div class="name field">
<tr> <%= label_for name => 'Name' %>
<th>Name</th> <%= input_tag 'name' %>
<td><%= input_tag 'name' %></td> </div>
</tr> <div class="url field">
<tr> <%= label_for url => 'Homepage URL (doesn\'t work yet 😩😭)' %>
<th>Message</th> <%= input_tag 'url' %>
<td><%= text_area 'message', cols => 40, rows => 6 %></td> </div>
</tr> <div class="message field">
<tr> <%= label_for message => 'Message' %>
<th>SwaggCAPTCHA™</th> <%= text_area 'message', rows => 6 %>
<td> </div>
<h3>SwaggCAPTCHA™</h3>
<div class="captcha field">
<%= radio_button answer => 0 %> <%= radio_button answer => 0 %>
<%= label_for answer => 'I don\'t want to sign (wrong answer)' %><br> <%= label_for answer => 'I don\'t want to sign (wrong answer)' %>
<%= radio_button answer => 'false' %> <%= radio_button answer => 'false' %>
<%= label_for answer => 'I\'m ready to sign (choose this one)' %><br> <%= label_for answer => 'I\'m ready to sign (choose this one)' %>
<%= radio_button answer => undef %> <%= radio_button answer => undef %>
<%= label_for answer => 'This is spam/I\'m a bot, do not sign' %> <%= label_for answer => 'This is spam/I\'m a bot, do not sign' %>
</td> </div>
</tr> <%= submit_button 'Sign it', class => 'win95button' %>
<tr>
<th style="border: none;">&nbsp;</th>
<td style="border: none;"><%= submit_button 'Send it' %></td>
</tr>
</table>
</form> </form>

40
templates/sign.html.ep.orig
View File

@ -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>