-
Notifications
You must be signed in to change notification settings - Fork 0
Layout
The ez-on-rails administration backend provides views to manage the data of your application and administrate it without the need to manipulate the database directly.
You have a large set of possibilities to create your own backend application here, by either changing the default layout appearance or using the partials.
Every section of this pages describes how you can adjust the appearance of your page or what mechanics ez-on-rails provides to create your own custom pages.
The ez-on-rails layout renders a title and subtitle for every page, if it is given. You can either set them as instance variables @title and @subtitle or can pass the variables directly to the partial shared/title.
Example for setting the title and subtitle using instance variables:
class ArticlesController < EzOnRails::ResourceController
...
def publish
@title = 'Articles'
@subtitle = 'Publish the article.'
...
end
end
Example for calling the partial and passing as instance variables from the view (in slim):
= render partial: 'shared/title', locals: {\
title: 'Articles',
subtitle: 'Publish the article.'\
}
We recommend to use the same title for every action in the controller. This makes the user feel to be in some category of possible actions. The EzOnRails::ApplicationController provides a set_title method that is called before every action. Every controller in ez-on-rails inherits from this controller. Hence, you can override the method to set the title without the need to copy and paste the code.
class ArticlesController < EzOnRails::ResourceController
...
def publish
@subtitle = 'Publish the article'
...
end
def unpublish
@subtitle = 'Unpublish the article'
...
end
protected
def set_title
@title = 'Articles'
end
end
Ez-on-rails uses loaf to show breadcrumbs. The partial shared/breadcrumbs.html.erb is included by the layout, hence if you define breadcrumbs, they will be rendered.
You are able to define breadcrumbs in the controller and the action.
class ArticlesController < EzOnRails::ResourceController
breadcrumb 'Articles', :articles_path, only: [:show]
...
def show
breadcrumb @category.title, article_path(@article)
end
end
The breadcrumbs make use of the inheritance of the controllers to determine the path that is shown.
Since every controller inherits from the ApplicationController at the end, see the following example:
class ApplicationController < ActionController::Base
breadcrumb 'Home', :root_path
end
if the articles show action is called now, the breadcrumb will be shown as Home -> Articles -> show.
Tip: Use before_action to create the breadcrumb entries. Note that the EzOnRails::ResourceController already make use of this pattern. If you generated a resource using the ezscaff generator, you can change the content of the generated methods to change the breadcrumbs.
class ArticlesController < EzOnRails::ResourceController
before_action :breadcrumb_articles
...
def show
breadcrumb @category.title, article_path(@article)
end
protected
def breadcrumb_articles
breadcrumb 'Articles', :articles_path, only: [:show]
end
end
The layout is able to display content beside the main area. You can use content_for and show something on the left or right sidebar.
- content_for :sidebar_left
= render partial: 'shared/something_left'
= render partial: 'shared/something_main'
- content_for :siedbar_right
= render partial: 'shared/something_right'
Ez-on-rails provides the ability to show dialogs and modals. They can be created and shown using helper methods.
The modals are rendered in the partials shared/modals/modal, shared/modals/ok, shared/modals/yes_no and shared/modals/model_form. If you want to change their appearance, you need to eject them by using ezviews, like with every other partial. But note, this is not necessary to use the modals.
If you want to use a modal, you have to call one of the helpers that is defined in the next subsections. But note, those helpers only render the modal that is invisible at render time. To call the modal, you need either javascript or html buttons that interact with the modal. Since we use bootstrap, one example would be something like that:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_id">
show modal
</button>
The id that is used here is passed to the modal creation dialoges. And of course you don't need to render this yourself. Ez-on-rails provides a helper that can handle this for you:
= target_modal_button('show modal', 'modal_id')
= modal_yes_no 'Question',
'Isn't that too ez?',
'https://some-target-link',
label_yes: 'Ou yes',
label_no: 'Nononononono',
id: 'yes_no'
This example shows a yes-no dialoge if the modal is activated.
- The first parameter here is the title of the dialogue.
- The second parameter is the content of the modal (this can also be HTML).
- The third parameter defines a target that is called if the yes button is clicked. This can be anything the rails link_to helper can process.
- The fourth parameter is named and contains the label for the yes and no buttons and the id of the modal that can be used to access it in javascript. The id is also needed if you use multiple modals on one page. Hint: The buttons has the ids #{id}_button_yes und #{id}_button_no.
Every parameter except the title and content are optional. You also do not need to pass a target link, if you eg. want to make use of the onclick events in javascript.
= modal_ok 'Hint',
'Cool Hint!',
'https://some-target-link',
label_ok: 'Okay',
id: 'ok_modal'
This shows an ok hint.
- The first parameter is the title of the modal.
- The second parameter describes the content. This can also be HTML.
- The third parameter describes the target that is called if the user clicks the ok button. This can be anything the link_to method of rails can process.
- The last parameter is named and hold the label of the ok button and the id of the modal. The id is used to identify the model in javascript. Hint: The button has the id #{id}_button_ok.
Every parameter except the Title and the content are optional.
= modal_model_form('Create Tag',
{
render_info: render_info_tag,
obj: Tag.new\
},
{\
id: 'tag_form'
})
This renders a model form to edit or create records like you know it from the (render info)[https://github.com/D4uS1/ez-on-rails/wiki/Render-Info].
- The first parameter is the title of the modal
- The second parameter is named and needs the render info that should be rendered and the initial object of the form
- The third parameter is also named and takes the id of the modal, that can be used in javascript for interactions
The id parameter is optional.
= modal 'Custom modal',
'Custom modal content',
[{
id: 'first_button',
label: 'First button',
type: 'primary',
method: 'get',
target_link: 'https//some-url'
},{\
id: 'second_button',
label: 'Second button',
type: 'secondary',
method: 'post',
target_link: 'https//some-url'
}],
{\
id: 'custom_modal'
}
This renders a modal with custom buttons in the footer.
- The first parameter is the title of the modal
- The second Parameter is the modal content (This can also be HTML).
- The third parameter is an array of hashes, that define the buttons. Each button has the following parameters:
- :id - The id of the button that can be used to interact in javascript
- :label - The label shown on the button
- :type - The bootstrap type for design, like primary or secondary
- :method - :get, :post, ... the http method the target (if given) is requested with
- :target - link_to compatible target (optional)
- the fourth parameter is a named options hash, holding the optional id of the modal, that can be used to interact with the modal in javascript.
The ezapp generator creates the file helpers/ez_on_rails/layout_toggle_helper.rb. In this file you are able to disable some parts of the layout, by just changing the return type of the methods to false.
The following methods are available here:
- show_privacy_policy?
- show_contact_form?
- show_locale_switch?
Der ezapp generator creates the file helpers/ez_on_rails/layout_helper.rb. This file provides a module with methods you can change the appearance of the application. The following methods are available here:
- header_background_color
- header_text_color
- footer_background_color
- footer_text_color
The logo on the top left corner is copied to your assets during the ezapp generator execution. Just delete it to hide the logo. You can also just change it.