CODEWITHSUNDEEP
ruby-on-rails
Kristis
Kristis

Reputation: 377

Ruby on Rails using different footer styling in each page

I have a footer div in application.html.erb file. Footer position is relative, but for few pages, I want to set footer position as fixed. How can I do that, without adding footer code on each page?

Upvotes: 1

Views: 568

Answers (4)

Lars Böhm
Lars Böhm

Reputation: 21

In application.html.erb you can access the <body> opening tag and change it into something like this <body class="<%= params[:controller] %>-<%= params[:action] %>">

Then if you have for example a restaurant application, you'll have a restaurants controller with maybe an index and a show.

Now on these pages the body will have a class called .restaurants-index and .restaurants-show

If you're using SCSS you can then say

.restaurants-index {
  .navbar {
    position: fixed;
  }
}

.restaurants-show {
  .navbar {
    position: relative;
  }
}

Upvotes: 1

max
max

Reputation: 101831

You can also use ActionView::Helpers::CaptureHelper.

module ApplicationHelper
  def footer_tag(**kwargs)
    klass = "some-default-class " + (content_for(:footer_class) || ""
    content_tag(:footer, kwargs.merge(class: klass)) do
      yeild if block_given?
    end
  end
end

# app/views/shared/_footer.html.erb
<% footer_tag do %>
  <p>Copyright 2017, EvilCorp</p>
<% end %>

And you would then use provide or content_for in your views:

<% content_for(:footer_class, "fixed") %>
<% provide(:footer_class, "fixed") %>

The difference being that the first concats to the buffer while the later flushes straight to the layout and marks the yield as finished.

Upvotes: 1

max
max

Reputation: 101831

You can add classes to the <body> or <html> element:

module ApplicationHelper
  # takes an array or list of strings and makes a string suited
  # for a html class attribute.
  # @param [String*|Array] args
  # @return [String]
  def css_class(*args)
    [*args].flatten.compact.join(" ") 
  end
end

<body class="<%=  css_class(controller_name, action_name) %>">

This will let you attach styles to a certain controller or action:

.users #footer {
  height: 100px;
}

.users.show #footer {
  height: 150px;
}

Upvotes: 2

marmeladze
marmeladze

Reputation: 6564

A quick and nasty way might be,

Creating a partial (probably you've already done)

pages/_footer.html.erb

<div class='footer <%= @position||"relative" %>'>
  Lorem ipsum
</div>

Adding a private method to controller(s).

class PagesController < ApplicationController
  before_action :set_page, only: [:show, :edit, :update, :foo, :destroy]
  before_action :fixed_footer, only: [:show, :edit, :mission, :vision]

  def index
    @pages = Page.all
  end

  def show
  end

  def foo
    render 'show'
  end

  def about
    render 'some_static_page'
  end

  def mission
    render 'some_static_page' 
  end

  def vision
    render 'some_static_page' 
  end

  .....

  private
    def fixed_footer
      @position = "fixed"
    end
    # Use callbacks to share common setup or constraints between actions.
    def set_page
      @page = Page.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def page_params
      params.require(:page).permit(:title, :email, :comments)
    end
end

Then referencing to it in your layout file (as I've quickly created and scaffolded, I've only application layout).

<!DOCTYPE html>
<html>
  <head>
    <title>Simpleapp</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <%= render 'pages/footer' %>
  </body>
</html>

That's all. Actually not all, What you've to do is, to give some style to fixed and relative classes in your stylesheet file.

Results: [index, show, new, foo, edit]. 2 and 5 has fixed class. 

$ curl http://lvh.me:3000/pages | grep "div class='footer"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2815    0  2815    0     0  18599      0 --:--:-- --:--:-- --:--:-- 18642
    <div class='footer relative'>
$ curl http://lvh.me:3000/pages/1 | grep "div class='footer"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2388    0  2388    0     0  16032      0 --:--:-- --:--:-- --:--:-- 16135
    <div class='footer fixed'>
$ curl http://lvh.me:3000/pages/new | grep "div class='footer"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2833    0  2833    0     0  12242      0 --:--:-- --:--:-- --:--:-- 12264
    <div class='footer relative'>
$ curl http://lvh.me:3000/pages/1/foo | grep "div class='footer"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2391    0  2391    0     0  16165      0 --:--:-- --:--:-- --:--:-- 16265
    <div class='footer relative'>
$ curl http://lvh.me:3000/pages/1/edit | grep "div class='footer"
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  2959    0  2959    0     0  19393      0 --:--:-- --:--:-- --:--:-- 19467
    <div class='footer fixed'>

Upvotes: 1

Related Questions