adds simple styling using materialize

Gemfile

@@ -29,6 +29,8 @@ gem 'pg'
 gem 'paperclip'
 gem 'aws-sdk', '~> 2.3'
 
+gem 'materialize-sass'
+
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

Gemfile.lock

@@ -109,6 +109,8 @@ GEM
       nokogiri (>= 1.5.9)
     mail (2.6.5)
       mime-types (>= 1.16, < 4)
+    materialize-sass (0.98.2)
+      sass (~> 3.3)
     method_source (0.8.2)
     mime-types (3.1)
       mime-types-data (~> 3.2015)
@@ -261,6 +263,7 @@ DEPENDENCIES
   jbuilder (~> 2.5)
   jquery-rails
   listen (~> 3.0.5)
+  materialize-sass
   paperclip
   pg
   puma (~> 3.0)

app/assets/stylesheets/application.scss

@@ -0,0 +1,6 @@
+@import "materialize";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
+
+h1,h5 {
+    text-align: center;
+}

app/views/application/index.html.erb

@@ -1 +1,3 @@
 <h1>WebShop</h1>
+
+<h1><%= link_to "See all Items", items_path, class: "waves-effect waves-light btn" %></h1>

app/views/items/index.html.erb

@@ -1,17 +1,22 @@
-<div class="container">
-<h2>Items</h2>
+<h1>Items</h1>
 
-<% if @items.any? %>
-  <% @items.each do |i| %>
-    <p> <%= i.name %></p>
-    <p> <%= i.description %></p>
-    <%= image_tag i.avatar.url(:medium) %>
-  <% end %>
-  <% else %>
-    <h2>No items yet!</h2>
-  <% end %>
 
-  <%= link_to "Add a new Item", new_item_path %>
 
+  <% if @items.any? %>
+    <% @items.each do |i| %>
+    <div class="row">
+      <div class="col s3 offset-s1">
+      <p><b> <%= i.name %> </b></p>
+      <p> <%= i.description %></p>
+      <p> £<%= i.price %></p>
+      <p> <%= image_tag i.avatar.url(:medium), class: "responsive-img" %> </p>
+      </div>
+    <% end %>
+
+    <% else %>
+      <h5>No items yet!</h5>
+    <% end %>
 
 </div>
+
+<h1><%= link_to "Add a new Item", new_item_path, class: "waves-effect waves-light btn" %></h1>

app/views/items/new.html.erb

@@ -1,10 +1,11 @@
 <h1>Adding Items</h1>
-
+<div class="container">
 <%= form_for(@item, html: {multipart: true}) do |f| %>
     Name: <%= f.text_field :name %>
     Description: <%= f.text_field :description %>
     Price: <%= f.number_field :price %>
     <%= f.label :avatar %>
     <%= f.file_field :avatar %>
-  <p><%= f.submit %></p>
+  <p><%= f.submit(class: "waves-effect waves-light btn") %>
   <% end %>
+</div>