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

Compare commits

base: bucky:a0be5c699a4ff4e7d40b076e73af365a4fc73ade
Branches Tags
bucky:master
bucky:2023-10-15
...
compare: bucky:d3ab78b17d329c90f1659e596024066a60ece675
Branches Tags
bucky:master
bucky:2023-10-15

4 Commits
a0be5c699a ... d3ab78b17d

Author SHA1 Message Date
bucky d3ab78b17d Merge pull request 'more-ui-updates' (#13) from more-ui-updates into master 
Reviewed-on: #13
 2023-10-04 18:53:06 -07:00
Adam Townsend ce89b584cb 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
 2023-10-04 18:47:45 -07:00
Adam Townsend cfe2080509 added some more colorized styles for the UI to give it a little more 
interactive niceness
 2023-10-04 11:28:31 -07:00
Adam Townsend 9c5fa5366f ignore the coverage directory from simplecov output 2023-10-04 11:28:07 -07:00
4 changed files with 86 additions and 7 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
.bundle .bundle
*.db *.db
.env.rb .env.rb
coverage

3
views/create.erb
View File

@ -1,2 +1 @@
<h2><a href="/" style="color: #555555;">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" style="color: #555555;"><%= @new_link %></a></h3>

4
views/home.erb
View File

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

85
views/layout.erb
View File

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