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

more updates! 

+ disable autocomplete on the url field
+ added custom colors to make styling a little easier
+ moved body to style block, and added a nice gradient
+ made header a link, removed the "home" link on created route
+ added some nice ui changes for button and input
pull/13/head
Adam Townsend 2023-10-04 18:47:45 -07:00
parent cfe2080509
commit ce89b584cb
3 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
views/create.erb
View File

@ -1,2 +1 @@
<h2><a href="/">Home</a></h2>
<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;"><a href="<%= @new_link %>" target="_blank"><%= @new_link %></a></h3>

1
views/home.erb
View File

@ -3,6 +3,7 @@
name="url" name="url"
pattern="https?://.+" pattern="https?://.+"
placeholder="http://www.example.com/" placeholder="http://www.example.com/"
autocomplete="off"
required /> required />
<button type="submit">Submit</button> <button type="submit">Submit</button>
</form> </form>

62
views/layout.erb
View File

@ -3,22 +3,41 @@
<title><%= @page_title || "URL Shortener" %></title> <title><%= @page_title || "URL Shortener" %></title>
<link rel="icon" href="data:,"> <link rel="icon" href="data:,">
<style> <style>
input[type=url] { :root {
padding: 1rem; --white: #FEFEFE;
border-radius: 5px; --shadow: #333;
border: 2px solid #99b1ff; --black: #555;
margin-right: 1rem; --darker-blue: #809DFF;
--dark-blue: #99b1ff;
--medium-blue: #B3C6FF;
--light-blue: #CCD8FF;
--lightest-blue: #E6EBFF;
} }
input[type=url]:focus, input[type=url]:hover, input[type=url]:active { body {
border: 2px solid #809DFF; background: var(--white);
background-image: linear-gradient(to bottom right, var(--lightest-blue), var(--white), var(--lightest-blue));
font-family: Helvetica, sans-serif;
color: var(--black);
}
input {
padding: 1rem;
border-radius: 5px;
border: 3px solid var(--dark-blue);
margin-right: 1rem;
outline: none;
}
input:focus, input:hover {
border: 3px solid var(--darker-blue);
} }
button { button {
color: var(--white);
padding: 1rem; padding: 1rem;
border-radius: 5px; border-radius: 5px;
border: 2px solid #99b1ff; border: 2px solid var(--dark-blue);
background: #e6ecff; background: var(--dark-blue);
font-weight: bold; font-weight: bold;
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;
@ -26,43 +45,46 @@
} }
button:hover { button:hover {
border: 2px solid #809DFF; background: var(--darker-blue);
background: #CCD8FF;
} }
button:active { button:active {
background: #809DFF; background: var(--light-blue);
color: #FEFEFE; color: var(--black);
} }
a { a {
color: #809DFF; color: var(--black);
text-decoration: none;
border-bottom: 4px solid var(--white);
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;
-webkit-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out;
} }
a:hover, a:active, a:focus { a:hover, a:active, a:focus {
color: #555; color: var(--darker-blue);
border-bottom: 4px solid var(--darker-blue);
} }
main { main {
max-width: 30rem; max-width: 30rem;
min-width: 18rem; min-width: 18rem;
border: 5px solid #B3C6FF; border: 5px solid var(--medium-blue);
border-radius: 20px; border-radius: 20px;
margin: auto; margin: auto;
padding: 1rem; padding: 1rem;
margin-top: 5rem; margin-top: 5rem;
text-align: center; text-align: center;
min-height: 175px; min-height: 200px;
box-shadow: 3px 2px 10px #333; box-shadow: 3px 2px 10px var(--shadow);
background: var(--white);
} }
</style> </style>
</head> </head>
<body style="background: #FEFEFE; font-family: Helvetica, sans-serif; color: #555555;"> <body style="">
<main> <main>
<h1>URL Shortener</h1> <h1><a href="/">URL Shortener</a></h1>
<h4 id="message"><%== @message %></h4> <h4 id="message"><%== @message %></h4>
<%== yield %> <%== yield %>
</main> </main>