add layout header and footer

7bf75241 · Mai Hoang Thai Ha · aa1b7f6c · 7bf75241 · 7bf75241 · 7bf75241
Commit 7bf75241 authored Jul 01, 2021 by Mai Hoang Thai Ha
16 changed files
--- a/Gemfile
+++ b/Gemfile
@@ -10,7 +10,7 @@ gem 'sqlite3', '~> 1.4'
 # Use Puma as the app server
 gem 'puma', '~> 5.0'
 # Use SCSS for stylesheets
-gem 'sass-rails', '>= 6'
+gem 'sass-rails', '~> 6.0'
 # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
 gem 'webpacker', '~> 5.0'
 # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -208,7 +208,7 @@ DEPENDENCIES
  puma (~> 5.0)
  rack-mini-profiler (~> 2.0)
  rails (~> 6.1.3, >= 6.1.3.2)
-  sass-rails (>= 6)
+  sass-rails (~> 6.0)
  selenium-webdriver
  spring
  sqlite3 (~> 1.4)

--- a/app/assets/images/logo.png
+++ b/app/assets/images/logo.png
--- a/app/assets/stylesheets/custom.scss
+++ b/app/assets/stylesheets/custom.scss
 // @import "bootstrap";
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;

-.name {
-  font-size: 100px;
+// reset css
+*{ 
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  text-decoration: none;
+  box-sizing: border-box;
+ }
+
+
+//  header
+
+header {
+  background-color: black;
+  .container {
+    padding: 8px 0;
+    nav {
+      ul {
+        flex-direction: row;
+        li {
+          margin-left: 18px;
+          a {
+            color: $gray-400;
+            font-size: 18px;
+            text-decoration: none;
+            font-weight: 500;
+            &:hover{
+              color: $white;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+// footer
+
+footer {
+  margin-top: 45px;
+  padding-top: 5px;
+  border-top: 1px solid #eaeaea;
+  color: #777;
+  a {
+    text-decoration:none;
+    color: $gray-600;
+    &:hover {
+      color: $gray-900;
+    }
+  }
+  small {
+    float: left;
+  }
+  ul {
+    float: right;
+    list-style: none;
+    li {
+      float: left;
+      margin-left: 15px;
+    }
+  }
 }
\ No newline at end of file
--- a/app/assets/stylesheets/static_pages.scss
+++ b/app/assets/stylesheets/static_pages.scss
+// Place all the styles related to the StaticPages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
 class ApplicationController < ActionController::Base
  
-  def hello
-    render html: "Welcome to VenJob"
-  end
 end
--- a/app/controllers/static_pages_controller.rb
+++ b/app/controllers/static_pages_controller.rb
+class StaticPagesController < ApplicationController
+  def home
+  end
+
+  def help
+  end
+end
--- a/app/helpers/static_pages_helper.rb
+++ b/app/helpers/static_pages_helper.rb
+module StaticPagesHelper
+end
--- a/app/views/layouts/_footer.html.erb
+++ b/app/views/layouts/_footer.html.erb
+<footer class="footer">
+  <small>
+    The <%= link_to "VenJob", root_path %>
+    by Mai Hoàng Thái Hà
+  </small>
+  <nav>
+    <ul>
+      <li><%= link_to "About",       '#' %></li>
+      <li><%= link_to "Contact",     '#' %></li>
+    </ul>
+  </nav>
+</footer>
\ No newline at end of file
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
+<header class="navbar navbar-fixed-top navbar-inverse">
+  <div class="container">
+    <%= link_to image_tag("logo.png", alt: "Zigexn logo", width: "150"),
+                                            root_path %>
+    <nav>
+      <ul class="nav navbar-nav navbar-right">
+        <li><%= link_to "Log in",       '#' %></li>
+        <li><%= link_to "Sign up",       '#' %></li>
+      </ul>
+    </nav>
+  </div>
+</header>
\ No newline at end of file
--- a/app/views/layouts/_shim.html.erb
+++ b/app/views/layouts/_shim.html.erb
+<!--[if lt IE 9]>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
+  </script>
+<![endif]-->
\ No newline at end of file
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
 <!DOCTYPE html>
 <html>
  <head>
-    <title>VenJob</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>hi</title> 
+    <%# <%= full_title(yield(:title)) %> 
+    <meta name="viewport" content="width=device-width,initial-scale=1" charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= render 'layouts/shim' %>
  </head>

  <body>
-    <%= yield %>
+    <%= render 'layouts/header' %>
+    <div class="container">
+      <%= yield %>
+      <%= render 'layouts/footer' %>
+    </div>
  </body>
 </html>
--- a/app/views/static_pages/help.html.erb
+++ b/app/views/static_pages/help.html.erb
+<h1>StaticPages#help</h1>
+<p>Find me in app/views/static_pages/help.html.erb</p>
--- a/app/views/static_pages/home.html.erb
+++ b/app/views/static_pages/home.html.erb
+<h1>StaticPages#home</h1>
+<p>Find me in app/views/static_pages/home.html.erb</p>
--- a/config/routes.rb
+++ b/config/routes.rb
 Rails.application.routes.draw do
-  root 'application#hello'
+  root  'static_pages#home'
+  get   'help'    => 'static_pages#help'
+  get   'about'   => 'static_pages#about'
+  # get   'contact' => 'static_pages#contact'
 end
--- a/test/controllers/static_pages_controller_test.rb
+++ b/test/controllers/static_pages_controller_test.rb
+require "test_helper"
+
+class StaticPagesControllerTest < ActionDispatch::IntegrationTest
+  test "should get home" do
+    get static_pages_home_url
+    assert_response :success
+  end
+
+  test "should get help" do
+    get static_pages_help_url
+    assert_response :success
+  end
+end