Fixed styles for carlogs homepage.

parkinglot/app/assets/stylesheets/application.css

@@ -2,17 +2,63 @@
 	font-family: 'Raleway';
 }
 
+
+.new-log {
+	position:absolute;
+    bottom:0;
+    right:0;
+    box-sizing: border-box;
+    padding: 20px 22px;
+    background: #fe9900;
+    color: black !important;
+    text-decoration: none;
+    margin: 30px;
+    transition: 0.3s ease-in-out;
+    border-radius: 50%;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+}
+
+.new-log:hover {
+	cursor: pointer;
+	background: black;
+	color: white !important;
+}
+
+nav {
+	padding: 20px;
+	display: flex;
+	justify-content: space-between;
+	align-content: center;
+}
+		
 body {
 	-webkit-font-feature-settings: "lnum";
 	font-family: 'Raleway';
-	background: rgba(20,20,20,0.9);
+	background: rgba(20,20,20,0.9) !important;
 	
 }
 
+.card {
+
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	max-width: 400px;
+    border: solid 1px;
+    padding: 20px;
+    margin: 10px;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    background: white;
+}
+
+.card label {
+	margin-top: 10px;
+}
+
 .form-container {
 	display: block;
 	margin: 0 auto;
-	margin-top: 20px;
+	margin-top: 30px;
 	background: white;
     box-sizing: border-box;
     padding: 10px 30px 21px;
@@ -21,8 +67,8 @@ body {
 }
 input {
 	box-sizing: border-box;
-	margin-top: 10px;
-	margin-bottom: 15px;
+	margin-top: 10px !important;
+	margin-bottom: 15px !important;
 	padding: 10px;
 	font-size: 13px;
 	font-family: Raleway;
@@ -30,13 +76,13 @@ input {
 
 label {
 	font-family: Raleway;
-	display: block;
+	display: block !important;
 }
 
 .select {
   position: relative;
   display: block;
-  margin-bottom: 15px;
+  margin-bottom: 15px !important;
   width: 300px;
 }
 

parkinglot/app/views/carlogs/index.html.erb

-<div style="margin:0px; padding:0px; height:100vh; width:100vw; background:white;  background-size:cover; position:absolute;overflow:scroll;">
-<div style="padding:20px; margin:20px; border:solid 1px; background-color:rgba(20,20,20,0.9); color:rgba(255,255,255,0.8)">
-<center>
-	<div style="font-size:70px; color:rgba(255,255,255,0.8)">
-	Park <div style="display:inline;  color:black; background:#fe9900; border-radius:5px; font-size:70px; padding:1px 5px;">hub</div>
+
+<nav>
+	<div class="logo">
+	<div style="font-size:50px; font-weight: bold; color:white;">
+	Park <div style="display:inline;  color:black; background:#fe9900; border-radius:5px; font-size:50px; padding:1px 5px;">hub</div>
+	</div>
 	</div>
-	<br>
-	<a href="/carlogs/new" style="color:rgba(255,255,255,0.6)">Add new Log</a>
 	
 	
-</center>
+</nav>
+<a class="new-log" href="/carlogs/new"><span class="glyphicon glyphicon-plus"></span></a>
+
 <hr>
 <% @cars.each do |car|%>
-<div style="display:inline-block; border: solid 1px; padding:20px; margin:10px;">
-Plate Number: <%=car.plate_number=%>
-<br>
-Color: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%=car.color=%>
-<br>
-Created at: <%=car.created_at=%>
-<br>
-Time in:  &nbsp; &nbsp;&nbsp;&nbsp;<%=car.time_in=%>
-<br>
-Time Out: &nbsp;&nbsp;<%=car.created_at=%>
-<br>
-<a href="/carlogs/delete/<%=car.id=%>" style="color:rgba(255,255,255,0.6)">Delete</a>
+<div class="card">
+
+<div class="column">
+<label>Brand</label><%=car.brand=%>
+<label>Plate Number</label><%=car.plate_number=%>
+
+<label>Color</label><%=car.color=%>
 </div>
-<%end%>
+<div class="column">
+<label>Created</label> <%=car.created_at=%>
+<br>
+<label>Time In</label><%=car.time_in=%>
+<label>Time Out</label><%=car.created_at=%>
 </div>
+
+<a href="/carlogs/delete/<%=car.id=%>" style="color:black; margin: 10px;">Delete</a>
 </div>
+<%end%>
+

parkinglot/app/views/layouts/application.html.erb

@@ -5,6 +5,8 @@
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+
 </head>
 <body>