From a91fc8f729e1b690f5fea347b3293829be5eeba4 Mon Sep 17 00:00:00 2001 From: songtianlun Date: Mon, 30 Dec 2024 17:54:42 +0800 Subject: [PATCH] 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. --- app/assets/stylesheets/application.scss | 77 +++++++++++++++++++ app/helpers/application_helper.rb | 8 ++ app/views/layouts/_footer.html.erb | 13 ++++ app/views/layouts/_header.html.erb | 13 ++++ app/views/layouts/_rails_default.html.erb | 21 +++++ app/views/layouts/_shim.html.erb | 4 + app/views/layouts/application.html.erb | 42 ++-------- app/views/static_pages/home.html.erb | 2 +- .../static_pages_controller_test.rb | 1 - 9 files changed, 142 insertions(+), 39 deletions(-) create mode 100644 app/views/layouts/_footer.html.erb create mode 100644 app/views/layouts/_header.html.erb create mode 100644 app/views/layouts/_rails_default.html.erb create mode 100644 app/views/layouts/_shim.html.erb diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 4a19dbc..95ddea1 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -27,4 +27,81 @@ 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; } \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de6be79..648da92 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb new file mode 100644 index 0000000..f30de60 --- /dev/null +++ b/app/views/layouts/_footer.html.erb @@ -0,0 +1,13 @@ + \ No newline at end of file diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb new file mode 100644 index 0000000..c9ddf47 --- /dev/null +++ b/app/views/layouts/_header.html.erb @@ -0,0 +1,13 @@ +
+
+ <%= link_to "sample app", '#', id: "logo" %> + +
+ +
\ No newline at end of file diff --git a/app/views/layouts/_rails_default.html.erb b/app/views/layouts/_rails_default.html.erb new file mode 100644 index 0000000..90481a8 --- /dev/null +++ b/app/views/layouts/_rails_default.html.erb @@ -0,0 +1,21 @@ + + + + +<%= 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) %> + + + + + +<%# 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 %> \ No newline at end of file diff --git a/app/views/layouts/_shim.html.erb b/app/views/layouts/_shim.html.erb new file mode 100644 index 0000000..4a895f7 --- /dev/null +++ b/app/views/layouts/_shim.html.erb @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 09cfbda..6d1dfe5 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -2,48 +2,16 @@ - <%= yield(:title) %> | Ruby on Rails Tutorial Sample App - - - - <%= 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) %> - - - - - - <%# 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 %> - + <%= full_title(yield(:title)) %> + <%= render 'layouts/rails_default' %> + <%= render 'layouts/shim' %> -
-
- <%= link_to "sample app", '#', id: "logo" %> - -
- -
+ <%= render 'layouts/header' %>
<%= yield %> + <%= render 'layouts/footer' %>
diff --git a/app/views/static_pages/home.html.erb b/app/views/static_pages/home.html.erb index 2610cd1..3939179 100644 --- a/app/views/static_pages/home.html.erb +++ b/app/views/static_pages/home.html.erb @@ -11,6 +11,6 @@ <%= 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") %> diff --git a/test/controllers/static_pages_controller_test.rb b/test/controllers/static_pages_controller_test.rb index 6d5eeb0..3718937 100644 --- a/test/controllers/static_pages_controller_test.rb +++ b/test/controllers/static_pages_controller_test.rb @@ -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