Add fixed footer

hpi-swt2 · Nov 15, 2018 · 55ffac4 · 55ffac4
1 parent fc9ae13
commit 55ffac4
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 8 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -10,4 +10,24 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  */
-@import "bootstrap";
+@import "bootstrap";
+
+html, body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+#content {
+  flex: 1 0 auto;
+}
+
+#footer {
+  flex-shrink: 0;
+  padding: 10px 0;
+  background-color: #212529;
+  color: #ffffff;
+}
diff --git a/app/assets/stylesheets/landing.scss b/app/assets/stylesheets/landing.scss
@@ -1,3 +1,3 @@
 // Place all the styles related to the Landing controller here.
 // They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb
@@ -0,0 +1,7 @@
+<div id="footer">
+  <div class="container">
+    <span>
+      This is our footer
+    </span>
+  </div>
+</div>
diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb
@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-offset navbar-dark bg-dark">
   <a class="navbar-brand" href="#">HART</a>
   <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>
@@ -7,7 +7,7 @@
   <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>
+        <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Link</a>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -9,9 +9,17 @@
   </head>
 
   <body>
-    <%= render "navbar" %>
-    <div class="container">
-      <%= yield %>
+    <div id="content">
+      <%= render "navbar" %>
+      <div class="container" style="margin-top: 50px">
+        <div class="col-md-12">
+          <%= yield %>
+        </div>
+        <%= yield :modals %>
+      </div>
+    </div>
+    <div id="footer">
+      <%= render "footer" %>
     </div>
   </body>
-</html>
+</html>
diff --git a/spec/features/layout_spec.rb b/spec/features/layout_spec.rb
@@ -0,0 +1,19 @@
+require 'rails_helper'
+
+describe "Index page", :type => :feature do
+
+  it "should have a navbar" do
+    visit root_path
+    expect(page).to have_css("nav")
+  end
+
+  it "should have content" do
+    visit root_path
+    expect(page).to have_css("#content")
+  end
+
+  it "should have a footer" do
+    visit root_path
+    expect(page).to have_css("#footer")
+  end
+end