Skip to content

V
Venjob_HungNT
Commit 0635b633 by Ngo Trung Hung
Options

create fontend header

parent 2607524e
Showing with 318 additions and 88 deletions
Gemfile
......@@ -25,7 +25,7 @@ gem 'mechanize', '2.7.6'
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'therubyracer'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
......
Gemfile.lock
......@@ -88,6 +88,7 @@ GEM
io-like (0.3.1)
jbuilder (2.10.0)
activesupport (>= 5.0.0)
libv8 (3.16.14.19)
listen (3.1.5)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
......@@ -158,6 +159,7 @@ GEM
rb-fsevent (0.10.4)
rb-inotify (0.10.1)
ffi (~> 1.0)
ref (2.0.0)
regexp_parser (1.7.1)
ruby_dep (1.5.0)
rubyzip (2.3.0)
......@@ -186,6 +188,9 @@ GEM
actionpack (>= 4.0)
activesupport (>= 4.0)
sprockets (>= 3.0.0)
therubyracer (0.12.3)
libv8 (~> 3.16.14.15)
ref
thor (1.0.1)
thread_safe (0.3.6)
tilt (2.0.10)
......@@ -230,6 +235,7 @@ DEPENDENCIES
selenium-webdriver
spring
spring-watcher-listen (~> 2.0.0)
therubyracer
turbolinks (~> 5)
tzinfo-data
uglifier (>= 1.3.0)
......
app/assets/javascripts/homepage.coffee 0 → 100644
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
app/assets/stylesheets/application.css
......@@ -13,3 +13,5 @@
*= require_tree .
*= require_self
*/
app/assets/stylesheets/custom.scss 0 → 100644
body {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
$breakpoint-tablet: 922px;
$main-color: #221f20;
// Header
.cus_header {
height: 52px;
width: 100%;
background-color: $main-color;
position: fixed;
}
.header_top {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: auto;
}
.header_top_logo {
}
.logo_header {
margin-top: 5px;
height: 42px;
}
.header_top_menu_right {
}
.list_menu_header_right {
list-style: none;
display: flex;
}
.list_item_menu_header_right {
margin: 0 10px;
&:first-child {
margin-right: 4px;
position: relative;
}
&:first-child::before{
content: '';
position: absolute;
border-right: 1px solid #666;
width: 1px;
height: 16px;
right: -7px;
top: 50%;
transform: translateY(-50%);
}
&:nth-child(3) {
margin: 0px 4px 0 16px;
position: relative;
}
&:nth-child(3)::before{
content: '';
position: absolute;
border-right: 1px solid #666;
width: 1px;
height: 16px;
right: -7px;
top: 50%;
transform: translateY(-50%);
}
}
.link_item_menu_header_right {
font-size: 12px;
line-height: 52px;
color: white;
&:hover {
text-decoration: none;
color: #999;
}
}
.menu__mobile {
position: absolute;
height: 100vh;
transition: 0.3s;
// background-color: whitesmoke;
transform: translateX(-100%);
margin-top: 40px;
background-color: #2d2d2d;
overflow: hidden;
z-index: 1000;
}
.lbn-nav {
font-size: 26px;
line-height: 40px;
margin-left: 10px;
color: white;
position: absolute;
left: 0px;
display: none;
}
.avatar_manu {
height: 150px;
margin-top: 20px;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: none;
}
.menu_mobile_vertical {
transform: translateY(190px);
display: none;
}
.list_menu_mobile_vertical {
padding-left: 0px !important;
}
.item_menu_mobile_vertical {
list-style: none;
text-align: center;
margin: 18px 0;
}
.link_item_menu_mobile {
font-size: 14px;
color: white;
&:hover {
text-decoration: none;
color: #999;
}
}
.padding_header_to_body {
padding-top: 52px;
}
@media only screen and (max-width: $breakpoint-tablet) {
.cus_header {
height: 40px;
transition: 0.2s;
}
.padding_header_to_body {
padding-top: 40px;
}
.header_top_logo {
width: 100%;
text-align: center;
}
.logo_header {
height: 34px;
margin-top: 3px;
width: 70px;
}
.header_top_menu_right {
display: none;
transition: 0.2s;
}
.menu__mobile {
width: 40vw;
}
.lbn-nav {
display: block;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
display: none;
transition: 0.1s;
}
.check-nav-mobile:checked ~ .overlay {
display: block;
}
.check-nav-mobile:checked ~ .menu__mobile {
display: block;
transform: translateX(0);
transition: 0.2s;
}
.avatar_manu {
display: block;
}
.menu_mobile_vertical {
display: block;
}
}
@media only screen and (max-width: 568px) {
.menu__mobile {
width: 65vw;
}
}
// end header
// footer
.custom_footer {
width: 100%;
height: 120px;
background-color: $main-color;
position: relative;
}
.copyright {
font-size: 13px;
color: white;
margin-bottom: 20px;
position: absolute;
bottom: 0px;
right: 10%;
}
// end footer
.xxx {
width: 100%;
height: 140vh;
}
\ No newline at end of file
app/assets/stylesheets/test.scss → app/assets/stylesheets/homepage.scss
// Place all the styles related to the test controller here.
// Place all the styles related to the homepage controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
app/assets/stylesheets/scaffolds.scss deleted 100644 → 0
body {
background-color: #fff;
color: #333;
margin: 33px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
p, ol, ul, td {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 13px;
line-height: 18px;
}
pre {
background-color: #eee;
padding: 10px;
font-size: 11px;
}
a {
color: #000;
&:visited {
color: #666;
}
&:hover {
color: #fff;
background-color: #000;
}
}
th {
padding-bottom: 5px;
}
td {
padding: 0 5px 7px;
}
div {
&.field, &.actions {
margin-bottom: 10px;
}
}
#notice {
color: green;
}
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px 7px 0;
margin-bottom: 20px;
background-color: #f0f0f0;
h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px -7px 0;
background-color: #c00;
color: #fff;
}
ul li {
font-size: 12px;
list-style: square;
}
}
label {
display: block;
}
app/controllers/homepage_controller.rb 0 → 100644
class HomepageController < ApplicationController
def index
end
end
app/helpers/homepage_helper.rb 0 → 100644
module HomepageHelper
end
app/views/homepage/index.html.erb 0 → 100644
<h1>Homepage#index</h1>
<p>Find me in app/views/homepage/index.html.erb</p>
app/views/layouts/_footer.html.erb
<footer class = "custom_footer">
<div class = "container">
<div class = "copyright">
Copyright &copy; ZIGExN VeNtura 2020
</div>
</div>
</footer>
\ No newline at end of file
app/views/layouts/_header.html.erb
<header class="cus_header">
<div class="header_top">
<div class="header_top_logo">
<%= link_to image_tag("logo.png", alt: "logo", class: "logo_header"), '#' %>
</div>
<input class="check-nav-mobile" type="checkbox" name="" id="mobile-nav" hidden>
<label for="mobile-nav" class="lbn-nav">&#9776</label>
<label for="mobile-nav" class="overlay"></label>
<div class = "override"></div>
<div class="header_top_menu_right">
<ul class="list_menu_header_right">
<li class="list_item_menu_header_right">
<%= link_to 'Favorite', '#', class: 'link_item_menu_header_right' %>
</li>
<li class="list_item_menu_header_right">
<%= link_to 'History', '#', class: 'link_item_menu_header_right' %>
</li>
<li class="list_item_menu_header_right">
<%= link_to 'Login', '#', class: 'link_item_menu_header_right' %>
</li>
<li class="list_item_menu_header_right">
<%= link_to 'Register', '#', class: 'link_item_menu_header_right' %>
</li>
</ul>
</div>
<%# mobile %>
<div class = "menu__mobile">
<div class = "content_menu_mobile">
<%= link_to image_tag("avatar.png", alt: "avatar", class: "avatar_manu"), '#' %>
<div class = "menu_mobile_vertical">
<ul class = "list_menu_mobile_vertical">
<li class = "item_menu_mobile_vertical">
<%= link_to 'Favorite', '#', class: 'link_item_menu_mobile' %>
</li>
<li class = "item_menu_mobile_vertical">
<%= link_to 'History', '#', class: 'link_item_menu_mobile' %>
</li>
<li class = "item_menu_mobile_vertical">
<%= link_to 'Login', '#', class: 'link_item_menu_mobile' %>
</li>
<li class = "item_menu_mobile_vertical">
<%= link_to 'Register', '#', class: 'link_item_menu_mobile' %>
</li>
</ul>
</div>
<div>
</div>
</div>
</header>
\ No newline at end of file
app/views/layouts/_padding.html.erb 0 → 100644
<div class = "padding_header_to_body">
<div>
\ No newline at end of file
app/views/layouts/application.html.erb
......@@ -10,6 +10,13 @@
</head>
<body>
<div class = "app">
<%= render 'layouts/header' %>
<%= render 'layouts/padding' %>
<%= yield %>
jbesdjlqwdn.qw
<div class = "xxx"></div>
<%= render 'layouts/footer' %>
</div>
</body>
</html>
config/database.yml
......@@ -14,7 +14,7 @@ default: &default
encoding: utf8
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password: '1'
password: '12345678'
socket: /var/run/mysqld/mysqld.sock
development:
......
config/routes.rb
Rails.application.routes.draw do
get 'test/index'
get 'homepage/index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
test/controllers/homepage_controller_test.rb 0 → 100644
require 'test_helper'
class HomepageControllerTest < ActionDispatch::IntegrationTest
test "should get index" do
get homepage_index_url
assert_response :success
end
end
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment