From c1130c84e585db24f52c4ca10d14511a702b6ad6 Mon Sep 17 00:00:00 2001
From: Dinis <dinis@lage.pw>
Date: Thu, 20 Aug 2020 17:20:58 +0100
Subject: [PATCH] Some battling with the layout...

---
 README.md                                   |  2 ++
 app/javascript/stylesheets/application.scss | 24 +++++++++++++++++----
 app/views/layouts/_content.html.erb         |  4 ++--
 app/views/layouts/_footer.html.erb          |  5 +++++
 app/views/layouts/_top_navigation.html.erb  | 24 ++++++++++++---------
 app/views/layouts/application.html.erb      |  4 +++-
 app/views/pages/home.html.erb               |  1 +
 7 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 7db80e4..839fa0b 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # README
 
+[![Build Status](https://travis-ci.com/dlage/ss-calculator.svg?branch=master)](https://travis-ci.com/dlage/ss-calculator)
+
 This README would normally document whatever steps are necessary to get the
 application up and running.
 
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 7f834ef..7975214 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -1,9 +1,25 @@
 @import 'toastr';
 
-body {
-  height: 100%;
-  padding-top: 5rem;
-}
 #toast-container {
   padding-top: 5rem;
+}
+.footer {
+  background-color: #f5f5f5;
+}
+
+main > .container {
+  padding: 60px 15px 0;
+}
+
+.footer {
+  background-color: #f5f5f5;
+}
+
+.footer > .container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+code {
+  font-size: 80%;
 }
\ No newline at end of file
diff --git a/app/views/layouts/_content.html.erb b/app/views/layouts/_content.html.erb
index 63df87f..94db2a8 100644
--- a/app/views/layouts/_content.html.erb
+++ b/app/views/layouts/_content.html.erb
@@ -1,5 +1,5 @@
-<main role="main" class="container">
-  <div class="text-center">
+<main role="main" class="flex-shrink-0">
+  <div class="container text-center">
     <%= yield %>
   </div>
 </main>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
index e69de29..5856fee 100644
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
@@ -0,0 +1,5 @@
+<footer class="footer py-3 fixed-bottom">
+  <div class="container">
+    <span class="text-muted">Place sticky footer content here.</span>
+  </div>
+</footer>
diff --git a/app/views/layouts/_top_navigation.html.erb b/app/views/layouts/_top_navigation.html.erb
index b22f1c2..6788fbe 100644
--- a/app/views/layouts/_top_navigation.html.erb
+++ b/app/views/layouts/_top_navigation.html.erb
@@ -1,10 +1,11 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+<!-- Sticky navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="#">Navbar</a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -12,21 +13,24 @@
       <li class="nav-item">
         <a class="nav-link" href="#">Link</a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-      </li>
       <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu" aria-labelledby="dropdown01">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Dropdown
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="#">Action</a>
           <a class="dropdown-item" href="#">Another action</a>
+          <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Something else here</a>
         </div>
       </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
 </nav>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b954ebe..9a9379e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -12,7 +12,9 @@
   <body>
 
   <%= render 'layouts/toasts' %>
-  <%= render 'layouts/top_navigation' %>
+  <header>
+    <%= render 'layouts/top_navigation' %>
+  </header>
   <%= render 'layouts/content' %>
   <%= render 'layouts/footer' %>
 
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index 3453cf2..c5764c6 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -1,2 +1,3 @@
 <h1>Pages#home</h1>
 <p>Find me in app/views/pages/home.html.erb</p>
+<p>Find me in app/views/pages/home.html.erb</p>