bucky
/
url-shortener
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

adjusted UI more 

+ set input and button to be wider
+ set min height on the main to be longer to look better between views
+ bumped shortened url down some to fill the gap more
pull/17/head
Adam Townsend 2023-10-05 08:44:41 -07:00
parent 9ca0e9ca48
commit 8430e828e9
3 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
views/create.erb
View File

@ -1 +1 @@
<h3 style="overflow-wrap: break-word; word-wrap: break-word;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3> <h3 style="overflow-wrap: break-word; word-wrap: break-word; line-height: 120px;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>

18
views/home.erb
View File

@ -1,9 +1,13 @@
<form method="POST" action="/create"> <form method="POST" action="/create">
<input type="url" <div style="margin-bottom: 1rem;">
name="url" <input type="url"
pattern="https?://.+" name="url"
placeholder="http://www.example.com/" pattern="https?://.+"
autocomplete="off" placeholder="http://www.example.com/"
required /> autocomplete="off"
<button type="submit">Submit</button> required />
</div>
<div>
<button type="submit">Submit</button>
</div>
</form> </form>

11
views/layout.erb
View File

@ -30,16 +30,19 @@
padding: 1rem; padding: 1rem;
margin-top: 5rem; margin-top: 5rem;
text-align: center; text-align: center;
min-height: 200px; min-height: 260px;
box-shadow: 3px 2px 10px var(--shadow); box-shadow: 3px 2px 10px var(--shadow);
background: var(--white); background: var(--white);
} }
input, button {
width: 80%;
}
input { input {
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;
border: 3px solid var(--dark-blue); border: 3px solid var(--dark-blue);
margin-right: 1rem;
outline: none; outline: none;
transition: all .25s ease-in-out; transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out;
@ -55,7 +58,7 @@
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;
border: 2px solid var(--darker-blue); border: 2px solid var(--darker-blue);
background: var(--darker-blue); background: var(--dark-blue);
font-weight: bold; font-weight: bold;
transition: background .25s ease-in-out; transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out;
@ -63,7 +66,7 @@
} }
button:hover { button:hover {
background: var(--dark-blue); background: var(--darker-blue);
} }
button:active { button:active {