From 7e4280d4512de817be34a5991c7f1401bdf4db65 Mon Sep 17 00:00:00 2001 From: Yannick Date: Tue, 7 Apr 2020 20:33:47 +0200 Subject: [PATCH 1/9] Add application layout styling Added application navbar and the page background styling --- app/assets/stylesheets/application.css.scss | 31 ++++++++---- app/views/home/index.html.erb | 6 ++- app/views/layouts/application.html.erb | 54 +++++++++++++++++---- 3 files changed, 69 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 0ac9955..463abf5 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -14,18 +14,29 @@ *= require_self */ @import "bulma/sass/utilities/initial-variables"; +@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Lobster&display=swap'); $family-sans-serif: "Helvetica", "Arial", sans-serif; -// https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a -$blue: #083d77; -$red: #dd1c1a; -$orange: #ee964b; -$yellow: #f4d35e; -$light: #f5fafe; // #ebebd3; -$primary: $blue; -$green: #007932; // hsl(141, 53%, 53%); -$footer-background-color: $light; +$family-primary: 'Quicksand', sans-serif; -@import 'bulma/bulma'; \ No newline at end of file +// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a +// $blue: #083d77; +// $red: #dd1c1a; +// $orange: #ee964b; +// $yellow: #f4d35e; +// $light: #f5fafe; // #ebebd3; +// $primary: $blue; +// $green: #007932; // hsl(141, 53%, 53%); +// $footer-background-color: $light; + +@import 'bulma/bulma'; + +.is-font-logo { + font-family: 'Lobster', cursive; +} + +body { + min-height: 100vh; +} \ No newline at end of file diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 2c2945f..93d8579 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,3 +1,5 @@ -

Welcome

+
+

Welcome

-<%= link_to "Login", login_url %> + <%= link_to "Login", login_url %> +
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d2e6710..1ad564b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,15 +1,49 @@ - - Tinyform - <%= csrf_meta_tags %> - <%= csp_meta_tag %> - <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> - <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - + + Tinyform + <%= csrf_meta_tags %> + <%= csp_meta_tag %> - + + <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> + <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> + + + +
+
+ +
+
+
<%= yield %> - - +
+ + + \ No newline at end of file From ab81cf9d5c41528e260198ad572fd1bac0d4153f Mon Sep 17 00:00:00 2001 From: Yannick Date: Tue, 7 Apr 2020 20:52:45 +0200 Subject: [PATCH 2/9] Added logout button Added logged_in helper to allow us to check whether a user is logged in to show the appropriate button --- app/controllers/application_controller.rb | 1 + app/views/layouts/application.html.erb | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index e288f36..1be493f 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -1,4 +1,5 @@ class ApplicationController < ActionController::Base + helper_method :current_user, :logged_in? def require_login redirect_to login_url unless current_user.present? diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 1ad564b..b48478b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -33,7 +33,11 @@
+ <% if !logged_in? -%> <%= link_to "Login", login_url, { :class => "button is-primary"} %> + <% else -%> + <%= link_to "Logout", logout_url, { :class => "button is-light"} %> + <% end -%>
From ff442443084733b82235571c545e8d3fb16353ff Mon Sep 17 00:00:00 2001 From: Yannick Date: Tue, 7 Apr 2020 21:28:03 +0200 Subject: [PATCH 3/9] Add new fonts for the platform --- app/assets/stylesheets/application.css.scss | 9 +++------ app/views/home/index.html.erb | 17 ++++++++++++----- app/views/layouts/application.html.erb | 2 +- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 463abf5..3f248e1 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -14,13 +14,10 @@ *= require_self */ @import "bulma/sass/utilities/initial-variables"; -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Lobster&display=swap'); - -$family-sans-serif: "Helvetica", -"Arial", -sans-serif; -$family-primary: 'Quicksand', sans-serif; +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap'); +$family-sans-serif: 'Roboto', sans-serif; +$family-secondary: 'Comfortaa', cursive; // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a // $blue: #083d77; // $red: #dd1c1a; diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 93d8579..5be9a9b 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,5 +1,12 @@ -
-

Welcome

- - <%= link_to "Login", login_url %> -
\ No newline at end of file +
+
+
+

+ Welcome +

+

+ Generate forms instantly +

+
+
+
\ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b48478b..d3a893c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -45,7 +45,7 @@ -
+
<%= yield %>
From 4550dc214ebf0a8b04a464fb27fb6eb7a426740e Mon Sep 17 00:00:00 2001 From: Yannick Date: Wed, 8 Apr 2020 13:59:08 +0200 Subject: [PATCH 4/9] Add bulma css helpers --- app/assets/stylesheets/application.css.scss | 3 ++- app/views/home/index.html.erb | 2 +- app/views/layouts/application.html.erb | 2 +- package.json | 1 + yarn.lock | 5 +++++ 5 files changed, 10 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 3f248e1..3ad7b6e 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -36,4 +36,5 @@ $family-secondary: 'Comfortaa', cursive; body { min-height: 100vh; -} \ No newline at end of file +} +@import 'bulma-helpers/bulma-helpers' \ No newline at end of file diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 5be9a9b..75d1488 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -1,6 +1,6 @@
-
+

Welcome

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index d3a893c..621f4d8 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -13,7 +13,7 @@
-
+
+ +
+ <%= yield %> +
-
- <%= yield %> -
\ No newline at end of file From 3c5e4ca0807ec20cd09b7c3d9cb24672d213b259 Mon Sep 17 00:00:00 2001 From: Yannick Date: Wed, 8 Apr 2020 19:48:08 +0200 Subject: [PATCH 8/9] Navbar restructuring --- app/views/layouts/application.html.erb | 50 +++++++++++++++++++------- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index feb59bb..7de3e64 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -21,22 +21,19 @@
+ + + \ No newline at end of file From 957473430435683a8e7e0cce3dba5afdd17d4504 Mon Sep 17 00:00:00 2001 From: Yannick Date: Thu, 9 Apr 2020 17:15:47 +0200 Subject: [PATCH 9/9] Remove javascript snippets from application layout Moved the javascript codes into the own application.js file --- app/javascript/packs/application.js | 27 ++++++++++++++++++++++++ app/views/layouts/application.html.erb | 29 -------------------------- 2 files changed, 27 insertions(+), 29 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 9cd55d4..472e587 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -15,3 +15,30 @@ require("channels") // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) + + +document.addEventListener('DOMContentLoaded', () => { + + // Get all "navbar-burger" elements + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + + // Check if there are any navbar burgers + if ($navbarBurgers.length > 0) { + + // Add a click event on each of them + $navbarBurgers.forEach(el => { + el.addEventListener('click', () => { + + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); + }); + } + + }); \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7de3e64..b421579 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -54,35 +54,6 @@ <%= yield %> - - - \ No newline at end of file