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 {
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;
}

47
templates/sign.html.ep
View File

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

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>