Refactor & styling

wesweb01/crud-music-2020/app.rb

@@ -27,7 +27,6 @@ get "/albums" do
 	db = SQLite3::Database.new("db/chinook-crud.db")
 	db.results_as_hash = true
 	result = db.execute("SELECT * FROM albums")
-	p result
 	slim(:"albums/index", locals: {albums: result})
 end
 
@@ -78,9 +77,9 @@ get "/albums/:id" do
 	db = SQLite3::Database.new("db/chinook-crud.db")
 	db.results_as_hash = true
 	id = params[:id].to_i
-	result = db.execute("SELECT * FROM albums WHERE AlbumId = ?", id).first  
+	album = db.execute("SELECT * FROM albums WHERE AlbumId = ?", id).first  
 	artist = db.execute("SELECT Name FROM artists WHERE ArtistId IN (SELECT ArtistId FROM albums WHERE AlbumId = ?)", id).first
-	slim(:"albums/show", locals: {result: result, artist: artist})
+	slim(:"albums/show", locals: {album: album, artist: artist})
 end
 
 

wesweb01/crud-music-2020/public/css/style.css

@@ -1,56 +1,93 @@
 :root {
-  --magic-number:2vw;
+	--magic-number: 2vw;
+}
+
+* {
+	color: #111015;
+}
+
+
+html {
+	background-color: #f7edf0;
 }
 
 body{
-  margin:0;
+	margin: 0;
-  background: rgb(131,58,180);
+	font-family: "Source Code Pro", monospace;
-background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
+	font-weight: 1000;
-font-family:Arial, Helvetica, sans-serif;
+	color: #fefefe;
-font-weight:500;
+	position: relative;
-color:white;
-position:relative;
 }
 
 nav {
-  height:100px;
+	height: 60px;
-  background:rgba(80,80,80,0.2);
+	display: flex;
-  display:flex;
+	justify-content: space-around;
-  justify-content: space-around;
+	align-items: center;
-  align-items:center;
 }
 
 nav a, nav a:link {
-  color:black;
+	color: #111015;
-  text-decoration:none;
+	text-decoration: none;
-  text-transform:uppercase;
+	text-transform: uppercase;
-  font-size:1.2em;
+	font-size: 1.8rem;
-  font-weight:900;
+	font-weight: 900;
-  opacity:0.5;
+	opacity: 0.5;
 }
 
 
 img {
-  position:fixed;
+	position: fixed;
-  bottom:0;
+	bottom: 0;
-  right:0;
+	right: 0;
-  width:25vw;
+	width: 25vw;
-  margin:0 var(--magic-number) var(--magic-number) 0;
+	margin: 0 var(--magic-number) var(--magic-number) 0;
 }
 
 
 
 h1 {
-  margin:var(--magic-number);
+	margin: var(--magic-number);
 }
 
+a {
+	color: #40a0e5;
+	transition: opacity;
+	transition-duration: .2s;
+}
+a:hover { opacity: .4; }
 
+form.page {
+	width: 40%;
+	margin: auto;
+	display: flex;
+	flex-direction: column;
+}
 
-a, form {
+form input {
-  display:inline-block;
+	margin-bottom: 1rem;
-  margin:10px;
 }
 
+a, form.inline {
+	display: inline-block;
+	margin: 10px;
+}
 
+input, button {
+	border-radius: .2rem;
+	border: 1px solid black;
+	color: #111015;
+	padding-top: 0;
+	transition: opacity;
+	transition-duration: .2s;
+}
 
+input:hover, button:hover {
+	opacity: .5;
+}
 
+.center {
+	width: 80vw;
+	margin: auto;
+	text-align: center;
+}

wesweb01/crud-music-2020/views/albums/edit.slim

@@ -1,4 +1,6 @@
-form action="/albums/#{album['AlbumId']}/update" method="post"
+form.page action="/albums/#{album['AlbumId']}/update" method="post"
+  span Album Title
   input type="text" name="new_title" value="#{album['Title']}" placeholder="Album title"
+  span Artist ID
   input type="number" name="new_artistid" value="#{album['ArtistId']}" placeholder="Artist ID"
   input type="submit" value="Update"

wesweb01/crud-music-2020/views/albums/index.slim

@@ -5,8 +5,9 @@ ol
   - albums.each do |album|
     li 
       a href="albums/#{album['AlbumId']}" #{album["Title"]}
-      a href="albums/#{album['AlbumId']}/edit" Edit
+      form.inline action="albums/#{album['AlbumId']}/edit" method="get"
-      form action="albums/#{album['AlbumId']}/delete" method="post"
+        input type="submit" value="Edit"
+      form.inline action="albums/#{album['AlbumId']}/delete" method="post"
         input type="submit" value="Remove"
 
       

wesweb01/crud-music-2020/views/albums/show.slim

@@ -1,5 +1,8 @@
-h1 = result or ""
+h1 = "Album: #{album['Title']}"
+h2 Created by: #{artist["Name"]}.
 
-p Albumet som du har sökt efter heter #{result["Title"]}.
+
-// p Artisten som du har sökt efter heter #{result["ArtistId"]}.
+form.inline action="/albums/#{album['AlbumId']}/edit" method="get"
-p Artisten som du har sökt efter heter #{artist["Name"]}.
+  input type="submit" value="Edit"
+form.inline action="/albums/#{album['AlbumId']}/delete" method="post"
+  input type="submit" value="Remove"

wesweb01/crud-music-2020/views/layout.slim

@@ -5,13 +5,12 @@ html lang="en"
     meta name="viewport" content="width=device-width, initial-scale=1.0"/
     meta http-equiv="X-UA-Compatible" content="ie=edge"/
     link rel="stylesheet" href="/css/style.css"/
-    title Document
+    title Music Zite 
   body
-    img src="img/love.png" alt="musik listener"/
-
     nav
-      a href="/" Start it
+      a href="/" Home
-      a href="/albums" Visa alla album
+      a href="/albums" Albums 
       a href="/albums/new" New album
+    hr
     ==yield
   

wesweb01/crud-music-2020/views/start.slim

@@ -1 +1,8 @@
-h2 Welcome to Music zite!
+.center
+  h1 Welcome to Music zite!
+  p 
+    |This is a album database site. Add, delete, edit or view all of the albums
+    a href="/albums" target="_self" here
+  p  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices nibh, eu ultricies mauris ornare viverra. Curabitur ut metus semper, rhoncus justo at, egestas risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam consequat hendrerit risus eu eleifend. Aenean eget nulla non nulla tincidunt volutpat. Vestibulum aliquet ipsum in eros porta, at posuere purus mollis. Aenean lobortis dolor vitae bibendum ornare. Sed non gravida ex. Curabitur blandit mattis dictum. Ut eu magna et leo feugiat mattis quis sit amet justo. Curabitur id convallis lacus. Praesent tristique lorem et tristique finibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In gravida arcu metus, ac porttitor diam laoreet a. Duis fringilla tortor ut nunc finibus mollis. Vestibulum convallis ligula neque, at condimentum lectus egestas sed.
+
+  p Curabitur sed dolor ac quam maximus faucibus. Donec ullamcorper leo arcu. Maecenas aliquam pharetra egestas. Mauris ornare, ligula sit amet rutrum suscipit, nunc elit ultricies urna, nec scelerisque orci dui ut neque. Quisque non tellus ac lorem viverra efficitur eget at massa. Fusce hendrerit augue neque, sed tincidunt mauris congue vel. Morbi accumsan, dolor vel viverra imperdiet, purus augue sodales mi, a imperdiet tortor lectus ac dolor. Aliquam varius efficitur ligula tempus venenatis. Curabitur mollis velit ex, vitae euismod erat vestibulum pretium. Fusce eu gravida leo, nec cursus urna. Donec dictum, ligula id malesuada convallis, ex dui sollicitudin mi, nec mollis lorem odio laoreet velit. Integer nec ex urna. Fusce posuere ut odio quis vehicula.