Skip to content

Directives

Jump to bottom
Technopathic edited this page Jul 3, 2016 · 2 revisions

##Directives Guide

#Introduction ReMark features many directives which are designed to make styling and customizing ReMark easier. If you're unfamiliar with Directives, Directives are similar to HTML tags, but a single Directive tag will render a lot of HTML markup, JavaScript, and CSS styling. For example the directive will render the entire replies section of a topic. Directives can also hold attributes to customize the style of the layout. Their full HTML can be found in the views/templates folder. Without further ado, here's the list of Directives currently featured in ReMark.

#Directives

#####Navbar

  • Description: Displays the top navigation bar. This bar is broken into three sections, a left nav, a right nav, and a center nav. The left nav contains the logo and website name. The center nav contains nothing. The right nav contains the navigation buttons.
  • Attributes:
  • Template: navbar.html

#####Banner

  • Description: Displays the animated banner that is located on the Home page by default.
  • Attributes:
    • selectClass - Styles the circles representing how many slides there are in the banner.
    • transition - Whether or not you want the Banner to shift or not.
  • Functions:
    • getFeatured - Gets the Featured Topics.
    • setFeature - Transitions between featured Topics.
  • Template: banner.html

#####Grid

  • Description: Displays a paginated grid of topics. By default, paginates to 6 topics.
  • Attributes:
    • topicsClass - Styles the overall container.
    • boxSize - The sizes of each individual grid box (1-100).
    • paginationClass - Styles the pagination buttons.
    • topicsChannel - Selects the Channel you would like to show via Channel Slu (Set to 0 for all Channels).
    • topicsCount - The Amount of Topics you would like to retrieve.
    • topicsTitle - Sets a Title for the grid.
  • Functions:
    • getTopics - Gets the Topics specified by the attributes above.
  • Template: topics-Grid.html

#####List

  • Description: Displays a paginated grid of topics. By default, paginates to 6 topics.
  • Attributes:
    • topicsClass - Styles the overall container.
    • paginationClass - Styles the pagination buttons.
    • topicsChannel - Selects the Channel you would like to show via Channel Slug (Set to 0 for all Channels).
    • topicsCount - The Amount of Topics you would like to retrieve.
    • topicsTitle - Sets a Title for the grid.
  • Functions:
    • getTopics - Gets the Topics specified by the attributes above.
  • Template: topics-List.html

#####Detail

  • Description: Displays the Content of a single Topic. This is broken down into three sections. The first section is the title of the topic. The second section is the media for the topic, for example the cover image, audio, or video. The third section is the body of the topic.
  • Attributes:
    • headerClass - Styles the Title and Date of the topic.
    • imageClass - Styles the Media Image of the topic.
    • audioClass - Styles the Media Audio of the topic.
    • videoClass - Styles the Media Video of the topic.
    • contentClass - Styles the body of the topic.
  • Template: details.html

#####Stats

  • Description: Displays the views, votes, and reply count for a topic.
  • Attributes:
    • statsClass - Styles the overall statistics container.
    • statsTextClass - Styles the Text for each individual statistics element.
  • Template: stats.html

#####Author

  • Description: Displays the author information for a topic.
  • Attributes:
    • authorClass - Styles the overall author container.
  • Template: author.html

#####Replies

  • Description: Displays the replies for a topic. This also includes nested replies. Replies are nested to one level. After three nested replies, additional nested replies per reply is automatically hidden and can be displayed on demand.
  • Attributes:
    • replyClass - Styles the overall reply container.
  • Functions:
    • makeReply - Shows the BottomSheet to make a reply.
    • toggleReplies - Shows and hides replies.
  • Template: replies.html

#Conclusion If you would like a feature for a current directive or an additional directive added, submit a request via Github. Please include your reason for this addition and an example of its usage.

Clone this wiki locally