Tidy

Gemfile

@@ -12,6 +12,10 @@ gem 'rails', '~> 5.1.6'
 gem 'sqlite3'
 # Use Puma as the app server
 gem 'puma', '~> 3.7'
+# Use jQuery rails
+gem 'jquery-rails'
+# Use jQuery UI rails
+gem 'jquery-ui-rails'
 # Use SCSS for stylesheets
 gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets

Gemfile.lock

@@ -79,6 +79,12 @@ GEM
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
       multi_json (>= 1.2)
+    jquery-rails (4.3.3)
+      rails-dom-testing (>= 1, < 3)
+      railties (>= 4.2.0)
+      thor (>= 0.14, < 2.0)
+    jquery-ui-rails (6.0.1)
+      railties (>= 3.2.16)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -193,6 +199,8 @@ DEPENDENCIES
   coffee-rails (~> 4.2)
   devise (= 4.3.0)
   jbuilder (~> 2.5)
+  jquery-rails
+  jquery-ui-rails
   listen (>= 3.0.5, < 3.2)
   puma (~> 3.7)
   rails (~> 5.1.6)

app/assets/javascripts/application.js

@@ -13,3 +13,10 @@
 //= require rails-ujs
 //= require turbolinks
 //= require_tree .
+//= require jquery3
+//= require jquery_ujs
+
+document.addEventListener("turbolinks:load", function() {
+  // whatever you want to make sure is loaded on each page
+
+})

app/assets/stylesheets/application.css

@@ -1,24 +1,27 @@
 /* General */
 
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
+
 html,
 body {
     margin: 0;
     padding: 0;
-     background-color: rgba(100, 68, 100, 0.1);
-
+    font-family: 'Roboto', sans-serif;
+    background-color: rgba(100, 68, 100, 0.1);
 }
 
 .mainCont {
-    margin: auto;
-    width: 100%;
-    border: solid 3px #b3200f;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
     text-align: center;
-    padding: 10px;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 .button {
     background-color: rgba(100, 68, 100, 0.7);
-    border: none;
+    border: 1px solid rgba(100, 68, 100, 0.7);
     color: white;
     padding: 10px 10px;
     text-align: center;
@@ -29,7 +32,13 @@ body {
     cursor: pointer;
     min-width: 5em;
 }
-
+.button:hover {
+    background-color: white;
+    border: 1px solid rgb(100, 68, 100);
+    color: rgb(100, 68, 100);
+    text-decoration: none;
+    min-width: 5em;
+
 .buttonfull {
     background-color: rgb(222, 62, 62);
     border: none;
@@ -65,26 +74,24 @@ body {
     width:5em;
     opacity: 0.5;
 }
-.iconsdiv{
-      width:200px;
-      text-align:center;
-      display:block;
-      background-color: transparent;
-      border: 1px solid transparent;
-      margin-right: 10px;
-      margin-bottom: 1px;
-      float:left;
-    padding:2em;
 
+
+.icon {
+    width: 5em;
+    opacity: 0.5;
 }
-#freeIconsCredits{
-   color:grey;
-   font-size: 0.4em;
-    position:fixed;
-    width:80%;
-    left:10%;
-    bottom:1%;
-
+
+.iconsdiv {
+    width: 23%;
+    text-align: center;
+    display: block;
+    background-color: transparent;
+    border: 1px solid transparent;
+    margin-right: 0;
+    margin-bottom: 1px;
+    float: left;
+    padding: 2em;
+    padding-left: 0;
 }
 
 /* Header */
@@ -129,7 +136,7 @@ body {
 /* Footer */
 
 .foot {
-    min-height: 4em;
+    min-height: 100px;
     background: url("/assets/Site/gameland.jpg") no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
@@ -140,8 +147,59 @@ body {
     overflow: auto;
 }
 
+.footer-buttons {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    text-align: center;
+}
+
+.team {
+    text-align: center;
+    padding-top: 10px;
+    width: 100%;
+    margin-bottom: 20px;
+    font-size: 18px;
+    font-weight: 700;
+    color: black;
+}
+
+#freeIconsCredits {
+    color: grey;
+    font-size: 0.4em;
+    width: 100%;
+    padding-bottom: 15px;
+}
+
+.credit {
+    text-align: center;
+}
 
+/* Home */
 
+.search {
+    padding-top: 10px;
+    margin-right: 30px;
+    margin-bottom: 30px;
+    text-align: right;
+}
+
+@media only screen and (max-width: 1024px) {
+    .iconsdiv {
+        width: 21%;
+    }
+}
+
+/* Details(Show)*/
+
+.details {
+    text-align: left;
+    padding: 2%;
+    padding-top: .5%;
+    font-size: 18px;
+}
+
+/* Games(Items)*/
 
 #itemsContainer {
     width: 100%;
@@ -156,8 +214,6 @@ h1 {
     text-decoration: none;
 }
 
-/* Item */
-
 .item {
     margin-left: auto;
     margin-right: auto;
@@ -191,37 +247,33 @@ h1 {
     display: block;
 }
 
-
-
 #itemsContainer h2 {
-   display: block;
+    display: block;
     color: #555;
     text-align: justify;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 20px
-
 }
 
 
 .itemhols p {
-   display: block;
+    display: block;
     color: #4CAF50;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 16px
-
 }
 
 
 
 .itemholsIm {
-    width: 30%; 
-    margin-left: auto; 
-    margin-right: auto; 
+    width: 30%;
+    margin-left: auto;
+    margin-right: auto;
     display: block;
-    
+
 }
 
 
@@ -236,14 +288,19 @@ h1 {
     width: 100%;
 }
 
-#customers td, #customers th {
+#customers td,
+#customers th {
     border: 1px solid #ddd;
     padding: 8px;
 }
 
-#customers tr:nth-child(even){background-color: rgba(100, 68, 100, 0.1);}
+#customers tr:nth-child(even) {
+    background-color: rgba(100, 68, 100, 0.1);
+}
 
-#customers tr:hover {background-color:rgba(100, 68, 100, 0.3);}
+#customers tr:hover {
+    background-color: rgba(100, 68, 100, 0.3);
+}
 
 #customers th {
     padding-top: 12px;

app/controllers/static_pages_controller.rb

@@ -31,4 +31,5 @@ def genre
      @items = Item.where("genre like ?", genreName)
     #@items= Item.all
   end
+
 end

app/views/cart/createOrder.html.erb

@@ -30,7 +30,7 @@
         <tr>
 
             <% item = Orderitem.find_by_id(id) %>
-            <td><%= item.title %></td>
+            <td>Product: <%= item.title %></td>
             <td><%= item.quantity %></td>
             <td><%= number_to_currency(item.price, :unit => "€") %></td>
             <td><%= number_to_currency(item.quantity * item.price, :unit => "€") %></td>
@@ -48,7 +48,7 @@
             <tr>
 
 
-            <td colspan="4">Order Total: <%= @total %></td>
+            <td colspan="4">Order Total: € <%= @total %></td>
         </tr>
 
 <% shipping = 10 %>

app/views/items/index.html.erb

@@ -1,7 +1,7 @@
 <p id="notice"><%= notice %></p>
 <div id="itemsContainer">
 
-<h1>Games</h1>
+<h1>All Games</h1>
 
     <% @items.each do |item| %>
       <div class="item">
@@ -15,15 +15,13 @@
          Brand: <%= item.brand %>
           <br>
          Genre: <%= item.genre %>
-        </p>
-
-        <p><%= item.description %></p>
-
-        <p><%= item.price %></p>
+         <br>
+         <br>
+          € <%= item.price %></p>
 
         <p>
           <a href = "/cart/<%= item.id %>" class = "button">Add to cart</a>
-        <%= link_to 'Show', item, :class => "button", :role => "button" %>
+        <%= link_to 'Details', item, :class => "button", :role => "button" %>
 
         <% if session[:login] == 1 %> 
         <%= link_to 'Edit', edit_item_path(item), :class => "button", :role => "button" %>

app/views/items/show.html.erb

@@ -1,5 +1,7 @@
 <p id="notice"><%= notice %></p>
 
+<div class="mainCont details">
+
 <p>
   <strong>Title:</strong>
   <%= @item.title %>
@@ -27,13 +29,17 @@
 
 <p>
   <strong>Price:</strong>
-  <%= @item.price %>
+  € <%= @item.price %>
 </p>
 
 <p>
   <strong>Image url:</strong>
   <%= @item.image_url %>
 </p>
 
-<%= link_to 'Edit', edit_item_path(@item) %> |
-<%= link_to 'Back', items_path %>
+<% if session[:login] == 1 %>
+<%= link_to 'Edit', edit_item_path(@item), :class => "button", :role => "button" %>
+<% end %>
+<%= link_to 'Back', items_path, :class => "button", :role => "button" %>
+
+</div>

app/views/layouts/_consoles.html.erb

@@ -2,7 +2,7 @@
 
 
  <% @consoles.each do |console| %>
-
+ <div class="mainCont">
  <div class = "iconsdiv">
 
 
@@ -12,8 +12,7 @@
         <p><a href="/console/<%= console.title %>" class="button"><%= console.title %></a></p>
 
         </div>
-
+        </div> 
     <% end %>
 
-
-
+