feat: add header and footer layout components
- Implement header and footer partials for better layout - Create a full_title helper method for dynamic page titles - Update application layout to use new header and footer - Add typography styles for improved text presentation These changes enhance the overall structure of the application by introducing reusable header and footer components, which improves maintainability. The full_title helper method allows for dynamic titles across different pages, providing a consistent user experience. Additionally, typography styles have been added to improve readability and aesthetics.
This commit is contained in:
parent
12e39e2eb4
commit
a91fc8f729
@ -28,3 +28,80 @@ textarea {
|
||||
.center h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
letter-spacing: -2px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
/* header */
|
||||
#logo {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
font-size: 1.7em;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -1px;
|
||||
padding-top: 9px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#logo:hover {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
footer {
|
||||
margin-top: 45px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid #eaeaea;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
footer small {
|
||||
float: left;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
float: right;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer ul li {
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
}
|
||||
@ -1,2 +1,10 @@
|
||||
module ApplicationHelper
|
||||
def full_title(page_title = '')
|
||||
base_title = "Ruby on Rails Tutorial Sample App"
|
||||
if page_title.empty?
|
||||
base_title
|
||||
else
|
||||
page_title + " | " + base_title
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
13
app/views/layouts/_footer.html.erb
Normal file
13
app/views/layouts/_footer.html.erb
Normal file
@ -0,0 +1,13 @@
|
||||
<footer class="footer">
|
||||
<small>
|
||||
The <a href="https://www.railstutorial.org">Ruby on Rails Tutorial</a>
|
||||
by <a href="https://www.michaelhartl.com">Michael Hartl</a>
|
||||
</small>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><%= link_to "About", '#' %></li>
|
||||
<li><%= link_to "Contact", '#' %></li>
|
||||
<li><a href="https://news.railstutorial.org">News</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
13
app/views/layouts/_header.html.erb
Normal file
13
app/views/layouts/_header.html.erb
Normal file
@ -0,0 +1,13 @@
|
||||
<header class="navbar navbar-fixed-top navbar-inverse">
|
||||
<div class="container">
|
||||
<%= link_to "sample app", '#', id: "logo" %>
|
||||
<nav>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><%= link_to "Home", '#' %></li>
|
||||
<li><%= link_to "Help", '#' %></li>
|
||||
<li><%= link_to "Login in", '#' %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
21
app/views/layouts/_rails_default.html.erb
Normal file
21
app/views/layouts/_rails_default.html.erb
Normal file
@ -0,0 +1,21 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
|
||||
<%= yield :head %>
|
||||
|
||||
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
|
||||
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
|
||||
|
||||
<link rel="icon" href="/icon.png" type="image/png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/icon.png">
|
||||
|
||||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
|
||||
<%#= javascript_pack_tag 'application', 'data-turbo-track': 'reload' %>
|
||||
<%= javascript_importmap_tags %>
|
||||
4
app/views/layouts/_shim.html.erb
Normal file
4
app/views/layouts/_shim.html.erb
Normal file
@ -0,0 +1,4 @@
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
|
||||
</script>
|
||||
<![endif]-->
|
||||
@ -2,48 +2,16 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- <title><%#= content_for(:title) || "Sample App" %></title>-->
|
||||
<title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
|
||||
<%= yield :head %>
|
||||
|
||||
<%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
|
||||
<%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
|
||||
|
||||
<link rel="icon" href="/icon.png" type="image/png">
|
||||
<link rel="icon" href="/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/icon.png">
|
||||
|
||||
<%# Includes all stylesheet files in app/assets/stylesheets %>
|
||||
<%#= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
|
||||
<%= stylesheet_link_tag "application", media: 'all', 'data-turbo-track': 'reload' %>
|
||||
<%= javascript_importmap_tags %>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
|
||||
</script>
|
||||
<![endif]-->
|
||||
<title><%= full_title(yield(:title)) %></title>
|
||||
<%= render 'layouts/rails_default' %>
|
||||
<%= render 'layouts/shim' %>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="navbar navbar-fixed-top navbar-inverse">
|
||||
<div class="container">
|
||||
<%= link_to "sample app", '#', id: "logo" %>
|
||||
<nav>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><%= link_to "Home", '#' %></li>
|
||||
<li><%= link_to "Help", '#' %></li>
|
||||
<li><%= link_to "Login in", '#' %></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<%= render 'layouts/header' %>
|
||||
<div class="container">
|
||||
<%= yield %>
|
||||
<%= render 'layouts/footer' %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
</div>
|
||||
<%= link_to image_tag("rails.svg", alt:"Rails logo", width: "200"),
|
||||
"https://rubyonrails.org/" %>
|
||||
<%= link_to image_tag("kitten.jpg", alt:"Kitten", width:"200") %>
|
||||
<%#= link_to image_tag("kitten.jpg", alt:"Kitten", width:"200") %>
|
||||
|
||||
|
||||
|
||||
@ -16,7 +16,6 @@ class StaticPagesControllerTest < ActionDispatch::IntegrationTest
|
||||
get static_pages_home_url
|
||||
assert_response :success
|
||||
assert_select "title", "Home | #{@base_title}"
|
||||
assert_select "h1", "Sample App"
|
||||
end
|
||||
|
||||
test "should get help" do
|
||||
|
||||
Loading…
Reference in New Issue
Block a user