From 56aa08a943086b0116e3cd9ec6ba93a69e6c8a37 Mon Sep 17 00:00:00 2001
From: kd00506 <kd00506@surrey.ac.uk>
Date: Sat, 28 Nov 2020 13:39:21 +0000
Subject: [PATCH] Finished all styling

---
 app/assets/javascripts/HomePage.js      | 20 +++------
 app/assets/stylesheets/application.scss | 57 +++++++++++++++++++++++--
 app/assets/stylesheets/listview.scss    | 18 ++++++++
 app/controllers/contact_controller.rb   |  3 ++
 app/controllers/home_controller.rb      | 10 ++++-
 app/controllers/listview_controller.rb  |  4 +-
 app/views/contact/contact.html.haml     | 16 +++----
 app/views/home/homepage.html.haml       | 38 ++++++-----------
 app/views/listview/listview.html.haml   | 27 ++++++------
 app/views/shared/_header.html.haml      |  3 ++
 config/routes.rb                        |  2 +-
 11 files changed, 128 insertions(+), 70 deletions(-)

diff --git a/app/assets/javascripts/HomePage.js b/app/assets/javascripts/HomePage.js
index 6e9a904..95f769f 100644
--- a/app/assets/javascripts/HomePage.js
+++ b/app/assets/javascripts/HomePage.js
@@ -1,19 +1,13 @@
-let listFormActive = false;
-
-function removeList(id, elem){
+function removeList(id, elem) {
     getButton("/del_lst", "list_id", id);
     elem.closest(".listCon").remove();
 }
 
-function toggleNewListForm(button){
-    let listForm = document.getElementById("newListForm");
+function removeProd(id, elem) {
+    getButton("/del_prod", "product_id", id);
+    elem.closest(".prodCon").remove();
+}
 
-    if(!listFormActive) {
-        listForm.style.display = "block";
-        button.innerText = "Cancel"
-    } else {
-        listForm.style.display = "none";
-        button.innerText = "New List"
-    }
-    listFormActive = !listFormActive
+function newListCheck(elem) {
+    document.getElementById("newListSubmit").disabled = elem.value.length == 0;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 695e92a..5a4d6cb 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -15,11 +15,13 @@
  */
 
 $buttonColor: #545eba;
+$buttonDisabledColor: #b9b9bf;
 $inputBackground: #eeeeee;
+$inputBackgroundAlt: #ffffff;
 $borderRad1: 5px;
 $textSize: 20px;
 $padding: 10px;
-$footerHeight: 100px;
+$footerHeight: 60px;
 
 .iconButton {
   border: 0;
@@ -28,16 +30,49 @@ $footerHeight: 100px;
   color: #434343;
 }
 
+.checkbox1 {
+  display: none;
+}
+
+.checkCon .checkbox1:not(:checked) ~ .check {
+  color: #a5a5a5;
+}
+
+.checkCon {
+  display: flex;
+}
+
+.check {
+  margin: auto;
+}
+
+header {
+  width: 100%;
+  height: $footerHeight;
+  position: fixed;
+  top: 0;
+  background-color: $buttonColor;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0px 10px;
+}
+
+header > p {
+  color: white;
+  font-size: 30px;
+}
+
 footer {
   width: 100%;
   height: $footerHeight;
   position: fixed;
   bottom: 0;
-  left: 0;
   background-color: $inputBackground;
   box-sizing: border-box;
-  text-align: center;
   padding-top: 20px;
+  padding-left: 10px;
   color: #6f6f6f;
   font-size: 30px;
 }
@@ -46,6 +81,16 @@ footer {
   font-size: $textSize;
 }
 
+.inputTextAlt {
+  background-color: $inputBackgroundAlt;
+  border: 0px;
+  border-radius: $borderRad1;
+  font-size: $textSize;
+  padding: $padding;
+  margin: 5px;
+  font-family: Arial, serif;
+}
+
 .inputText {
   background-color: $inputBackground;
   border: 0px;
@@ -53,6 +98,7 @@ footer {
   font-size: $textSize;
   padding: $padding;
   margin: 5px;
+  font-family: Arial, serif;
 }
 
 .button1 {
@@ -65,7 +111,12 @@ footer {
   margin: 5px;
 }
 
+.button1:disabled {
+  background-color: $buttonDisabledColor;
+}
+
 .everything {
+  padding-top: $footerHeight;
   padding-bottom: $footerHeight;
 }
 
diff --git a/app/assets/stylesheets/listview.scss b/app/assets/stylesheets/listview.scss
index c99b410..181c5b5 100644
--- a/app/assets/stylesheets/listview.scss
+++ b/app/assets/stylesheets/listview.scss
@@ -1,3 +1,21 @@
 // Place all the styles related to the listview controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+@import "application";
+
+.prodCon > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.prodCon {
+  background-color: #edeffa;
+  display: flex;
+  font-size: $textSize;
+  padding: 5px;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  align-items: center;
+  max-width: 100%;
+}
\ No newline at end of file
diff --git a/app/controllers/contact_controller.rb b/app/controllers/contact_controller.rb
index 63c2d53..df4c904 100644
--- a/app/controllers/contact_controller.rb
+++ b/app/controllers/contact_controller.rb
@@ -5,6 +5,9 @@ class ContactController < ApplicationController
     else
       @email = User.find(session[:user_id]).email
     end
+
+    @username = User.find(session[:user_id]).name
+    @pagename = 'Contact Us'
   end
 
   def sendmessage
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index f7af4e1..22f2c95 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -15,7 +15,10 @@ class HomeController < ApplicationController
     redirect_to homepage_path
   end
 
-  def login; end
+  def login;
+    @username = ''
+    @pagename = 'Login'
+  end
 
   def logincheck
     if params[:email].blank? || params[:password].blank?
@@ -33,7 +36,10 @@ class HomeController < ApplicationController
       redirect_to root_path
     else
       user = User.find(session[:user_id])
-      @name = user.name
+
+      @username = user.name
+      @pagename = 'My Lists'
+
       @user_id = user.id
     end
   end
diff --git a/app/controllers/listview_controller.rb b/app/controllers/listview_controller.rb
index a8bbc9f..18f41f4 100644
--- a/app/controllers/listview_controller.rb
+++ b/app/controllers/listview_controller.rb
@@ -27,7 +27,9 @@ class ListviewController < ApplicationController
     else
       session[:list_id] = params[:list_id] if params[:list_id]
 
-      @name = List.find(session[:list_id]).name
+      @username = User.find(session[:user_id]).name
+      @pagename = List.find(session[:list_id]).name
+
       @list_id = session[:list_id]
     end
   end
diff --git a/app/views/contact/contact.html.haml b/app/views/contact/contact.html.haml
index e73398d..37125ee 100644
--- a/app/views/contact/contact.html.haml
+++ b/app/views/contact/contact.html.haml
@@ -1,22 +1,16 @@
-%h1= "Contact Us"
-
 - flash.each do |key, value|
   = content_tag :div, content_tag(:p, value), id: "#{key}" unless value.blank?
 
 = form_tag sendmessage_path, method: 'post' do
 
-  = label_tag :name, "Email"
-  = email_field_tag :email, @email, required: true, pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+  = email_field_tag :email, @email, required: true, pattern: "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$", class: "inputText", placeholder: "Email"
   %br
-
-  = label_tag :name, "Message"
-  = text_area_tag :message, "", required: true
+  = text_area_tag :message, "", required: true, class: "inputText", placeholder: "Message"
   %br
-
-  %input{:type => "submit", :value => "Send"}
+  %input{:type => "submit", :value => "Send", class: "button1"}
 
   %br
   %br
 
-  = form_tag homepage_path, method: 'get' do
-  %input{:type => "submit", :value => "Back"}
+= form_tag homepage_path, method: 'get' do
+  %input{:type => "submit", :value => "Back", class: "button1"}
\ No newline at end of file
diff --git a/app/views/home/homepage.html.haml b/app/views/home/homepage.html.haml
index a0c1c84..c272707 100644
--- a/app/views/home/homepage.html.haml
+++ b/app/views/home/homepage.html.haml
@@ -1,42 +1,32 @@
-%h1= "Welcome " + @name
 %br
-%h2= "My Lists"
 %br
-%br
-
-#lists
-  - List.all.user(@user_id).each do |list|
-    .listCon
-      %p{class: "text"}= list.name
-      .listButtons
-        = form_tag listview_path, method: 'get' do
-          %input{type: "hidden", value: list.id, name: :list_id}
-          %input{type: "submit", value: "View list", class: "button1"}
+- List.all.user(@user_id).each do |list|
+  .listCon
+    %p{class: "text"}= list.name
+    .listButtons
+      = form_tag listview_path, method: 'get' do
+        %input{type: "hidden", value: list.id, name: :list_id}
+        %input{type: "submit", value: "View list", class: "button1"}
 
-        = button_tag(class: "iconButton", onclick: "removeList(" + String(list.id) + ", this)") do
-          %i.fas.fa-trash
+      = button_tag(class: "iconButton", onclick: "removeList(" + String(list.id) + ", this)") do
+        %i.fas.fa-trash
 
 %br
 %br
 
-%button#newlistButton{onclick: "toggleNewListForm(this);"}= "New List"
-
-= form_tag new_lst_path, method: 'post', id: "newListForm", remote: true, style: "display: none" do
-  = label_tag :name, "Name"
-  = text_field_tag :name, "", required: true
-  %br
-  %br
-  %input{:type => "submit", :value => "Add"}
+= form_tag new_lst_path, method: 'post', id: "newListForm", remote: true do
+  = text_field_tag :name, "", class: "inputText", placeholder: "New List", oninput: "newListCheck(this)"
+  %input{type: "submit", value: "Add", class: "button1", id: "newListSubmit", disabled: ""}
 
 %br
 %br
 %br
 
 = form_tag contact_path, method: 'get' do
-  %input{:type => "submit", :value => "Contact Us"}
+  %input{type: "submit", value: "Contact Us", class: "button1"}
 
 %br
 %br
 
 = form_tag root_path, method: 'get' do
-  %input{:type => "submit", :value => "Logout"}
+  %input{type: "submit", value: "Logout", class: "button1"}
diff --git a/app/views/listview/listview.html.haml b/app/views/listview/listview.html.haml
index d35af16..33d183a 100644
--- a/app/views/listview/listview.html.haml
+++ b/app/views/listview/listview.html.haml
@@ -1,30 +1,27 @@
-%h1= @name
-
-
 - Product.list(@list_id).all.each do |product|
-  %input{type: "text", value: product.name, required: true, onchange: "updateProduct(this, " + String(product.id) + ", 'name')"}
-  %input{type: "number", value: product.quantity, min: 1, onchange: "updateProduct(this, " + String(product.id) + ", 'quantity')"}
-  %input{type: "checkbox", value: product.acquired, onchange: "updateProduct(this, " + String(product.id) + ", 'acquired')"}
+  .prodCon
+    %input{type: "text", class: "inputTextAlt", value: product.name, required: true, onchange: "updateProduct(this, " + String(product.id) + ", 'name')"}
+    %input{type: "number", class: "inputTextAlt", style: "max-width: 100px", value: product.quantity, min: 1, onchange: "updateProduct(this, " + String(product.id) + ", 'quantity')"}
+    %label.checkCon
+      %input{type: "checkbox", class: "checkbox1", checked: ("" if product.acquired), onchange: "updateProduct(this, " + String(product.id) + ", 'acquired')"}
+      %i.fas.fa-check.check
 
-  = form_tag del_prod_path, remote: true, method: 'post' do
-    =hidden_field_tag :product_id, product.id
-    %input{:type => "submit", :value => "Remove"}
+    = button_tag(class: "iconButton", onclick: "removeProd(" + String(product.id) + ", this)") do
+      %i.fas.fa-trash
 
 %br
 %br
 
 = form_tag new_prod_path, method: "post", remote: true, id: "newProductForm" do
-  = label_tag :name, "Name"
-  = text_field_tag :name, "", required: true
+  = text_field_tag :name, "", required: true, class: "inputText", placeholder: "Name"
   %br
-  = label_tag :quantity, "Quantity"
-  = number_field_tag :quantity, "", min: 1
+  = number_field_tag :quantity, "", min: 1, class: "inputText", placeholder: "Quantity"
 
   =hidden_field_tag :list_id, @list_id
-  %input{:type => "submit", :value => "Add"}
+  %input{type: "submit", value: "Add", class: "button1"}
 
 %br
 %br
 
 = form_tag homepage_path, method: 'get' do
-  %input{:type => "submit", :value => "Back"}
+  %input{type: "submit", value: "Back", class: "button1"}
diff --git a/app/views/shared/_header.html.haml b/app/views/shared/_header.html.haml
index e69de29..34649e6 100644
--- a/app/views/shared/_header.html.haml
+++ b/app/views/shared/_header.html.haml
@@ -0,0 +1,3 @@
+%header
+  %p= @pagename
+  %p= @username
\ No newline at end of file
diff --git a/config/routes.rb b/config/routes.rb
index cc8d667..06e9cf0 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -11,7 +11,7 @@ Rails.application.routes.draw do
 
   get 'listview', to: 'listview#listview'
   post 'new_prod', to: 'listview#new_prod'
-  post 'del_prod', to: 'listview#del_prod'
+  get 'del_prod', to: 'listview#del_prod'
   get 'change_prods', to: 'listview#change_prods'
 
   get 'contact', to: 'contact#contact'
-- 
GitLab