Commit 2c82944d authored by Robert Lyon's avatar Robert Lyon Committed by Gerrit Code Review

Merge "Bug 1512926: Style guide: buttons, panels, profile pictures"

parents 27e4948b ebcb44ae
{include file="header.tpl"}
<h1 id="top">{$heading}</h1>
<span id="top"></span>
<p>{$description}</p>
......@@ -19,8 +19,6 @@ Description of element, this can include any markdown formatting, multiple parag
*}
<section data-markdown data-category="buttons">
### Add button
This button has padding on the right of the icon due to the plus class.
......@@ -32,11 +30,173 @@ This button has padding on the right of the icon due to the plus class.
```
</section>
<section data-markdown data-category="buttons">
### Add button (small)
This button is used for adding items to a list or table, e.g. URLs and users.
```
<button class="btn-default btn-sm btn">
<span class="icon icon-plus icon-lg" role="presentation"></span>
</button>
```
</section>
<section data-markdown data-category="buttons">
### Default button
This button is generally the one you use for most things.
```
<button class="btn-default button btn">
Default button
</button>
```
</section>
<section data-markdown data-category="buttons">
### Primary button
This button is used for accepting something. It is used for the primary action on a page.
```
<button class="btn-primary button btn">
Primary button
</button>
```
</section>
<section data-markdown data-category="buttons">
### Save/cancel button
This pair of buttons is used for deleting or editing an item.
```
<div id="delete_submit_container" class=" default submitcancel form-group">
<button type="submit" class="btn-default submitcancel submit btn" name="submit" tabindex="0">
Save
</button>
<input type="submit" class="btn-default submitcancel cancel" name="cancel_submit" tabindex="0" value="Cancel">
</div>
```
</section>
<section data-markdown data-category="buttons">
### Block edit buttons
This pair of buttons is used for editing or deleting a block item on a page.
```
<div class="panel-heading">
<span class="pull-left btn-group btn-group-top">
<button class="configurebutton btn btn-inverse btn-xs" alt="Configure 'Latest changes I can view' block (ID 24)" data-id="24">
<span class="icon icon-cog icon-lg"></span>
</button>
<button class="deletebutton btn btn-inverse btn-xs" alt="Remove 'Latest changes I can view' block (ID 24)" data-id="24">
<span class="icon icon-trash text-danger icon-lg"></span>
</button>
</span>
</div>
```
</section>
<section data-markdown data-category="buttons">
### Button group
A group of buttons.
```
<div class=" btn-group">
<a href="#" class="btn btn-default">
Button group
</a>
<a href="#" class="btn btn-default">
Button group
</a>
</div>
```
</section>
<section data-markdown data-category="buttons">
### Button group top
A group of buttons aligned at the top. Note: The box around the buttons is only to show the placement of the buttons.
```
<div style="border: 1px solid #cfcfcf; min-height: 50px; padding-right: 10px; width: 500px;">
<div class="btn-top-right btn-group btn-group-top">
<a class="btn btn-default addpost" href="">
Button group top
</a>
<a class="btn btn-default settings" href="">
Button group top
</a>
</div>
<div class="col-md-4">
<h4>Context</h4>
</div>
</div>
```
</section>
<section data-markdown data-category="buttons">
### Display page
This button is used to display a page you have just edited.
```
<button class="btn-default button btn">
Display page
<span class="icon icon-arrow-circle-right right" role="presentation"></span>
</button>
```
</section>
<section data-markdown data-category="buttons">
### Text link
This type of button is normally used in lists. An example can be found when you view the "Image" block. It takes you to the artefact page.
```
<a href="" class="detail-link link-blocktype">
<span class="icon icon-link" role="presentation" aria-hidden="true"></span>
Details
</a>
```
</section>
<section data-markdown data-category="buttons">
### Switchbox
Switchboxes are used for Yes/No, On/Off or other true/false type fields. They are used in place of regular check boxes.
```
<div class="form-switch ">
<div class="switch " style="width:61px">
<input type="checkbox" class="switchbox" id="siteoptions_dropdownmenu" name="dropdownmenu" tabindex="0" aria-describedby="siteoptions_dropdownmenu_description " aria-label="Drop-down navigation">
<label class="switch-label" for="siteoptions_dropdownmenu" aria-hidden="true">
<span class="switch-inner"></span>
<span class="switch-indicator"></span>
<span class="state-label on">Yes</span>
<span class="state-label off">No</span>
</label>
</div>
</div>
```
</section>
<section data-markdown data-category="buttons">
### More options button
This button is used to show there are more options available. An example can be found on a regular portfolio page where the items of the "Watchlist" and "Objectionable content" are available via the "More options" button. Note: Styles are only added for layout here in the style guide.
```
<div class="btn-group" style="margin-left: 200px;">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="icon icon-ellipsis-h icon-lg" role="presentation" aria-hidden="true"></span>
<span class="sr-only">More...</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
<a id="toggle_watchlist_link" class="watchlist" href="">
<span class="icon icon-eye left" role="presentation" aria-hidden="true"></span>
Add page to watchlist
</a>
</li>
<li>
<a id="objection_link" href="#" data-toggle="modal" data-target="#report-form">
<span class="icon icon-lg icon-flag text-danger left" role="presentation" aria-hidden="true"></span>
Report objectionable material
</a>
</li>
</ul>
</div>
```
</section>
<section data-markdown data-category="navigation">
### Pagination
Has forwards and back buttons.
The pagination has "Previous" and "Next" buttons.
```
<ul class="pagination pagination-xs">
<li class=""><span>«<span class="sr-only">Previous page</span></span></li>
......@@ -47,6 +207,117 @@ Has forwards and back buttons.
```
</section>
<section data-markdown data-category="navigation">
### Pagination with "Results per page" drop-down menu
The pagination has "Previous" and "Next" buttons buttons and a drop-down menu to select how many results are shown per page. An example can be found on the pages overview page when you have more than 10 pages.
```
<div>
<div id="c545" class="pagination-wrapper">
<div class="lead text-small results pull-right">
11 results
</div>
<ul class="pagination pagination-xs">
<li class="">
<span>«<span class="sr-only">Previous page</span></span>
</li>
<li class="active">
<span>1</span>
</li>
<li class="">
<a href="" title="">2</a>
</li>
<li class="">
<a href="" title="Next page">
»
<span class="sr-only">Next page</span>
</a>
</li>
</ul>
<form class="form-pagination js-pagination form-inline pagination-page-limit dropdown" action="/view/index.php?orderby=atoz" method="POST">
<label for="setlimitselect" class="set-limit">
Results per page:
</label>
<span class="picker input-sm">
<select id="setlimitselect" class="js-pagination input-sm select form-control" name="limit">
<option value="1"> 1 </option>
<option value="10" selected="selected"> 10 </option>
<option value="20"> 20 </option>
<option value="50"> 50 </option>
<option value="100"> 100 </option>
<option value="500"> 500 </option>
</select>
</span>
<input class="currentoffset" type="hidden" name="offset" value="0">
<input class="pagination js-hidden hidden" type="submit" name="submit" value="Change">
</form>
</div>
</div>
```
</section>
<section data-markdown data-category="navigation">
### Navigation tabs
These are tabs to switch between pages within one section, for example in the "Profile" under "Content". The tabs navigation style is used when the entire section has only one "Save" button.
```
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#" role="tab" data-toggle="tab" aria-expanded="true">Tab 1</a>
</li>
<li role="presentation">
<a href="#" role="tab" data-toggle="tab" aria-expanded="false">Tab 2</a>
</li>
<li role="presentation">
<a href="#" role="tab" data-toggle="tab" aria-expanded="false">Tab 3</a>
</li>
<li role="presentation">
<a href="#" role="tab" data-toggle="tab" aria-expanded="false">Tab 4</a>
</li>
</ul>
```
</section>
<section data-markdown data-category="navigation">
### Arrow bar
This style of tabs is used for third-level navigation in areas where each page within this section is saved separately, for example in a group, in the résumé or in the web services configuration.
```
<div class="arrow-bar group">
<span class="arrow hidden-xs">
<span class="text">
Tabs
</span>
</span>
<span class="right-text">
<ul class="nav nav-pills nav-inpage">
<li class=" current-tab active">
<a class=" current-tab" href="#">
Tab 1
<span class="accessible-hidden sr-only">(tab selected)</span>
</a>
</li>
<li class=" current-tab">
<a class=" current-tab" href="#">
Tab 2
<span class="accessible-hidden sr-only">(tab selected)</span>
</a>
</li>
<li class=" current-tab ">
<a class=" current-tab" href="#">
Tab 3
<span class="accessible-hidden sr-only">(tab selected)</span>
</a>
</li>
<li class=" current-tab">
<a class=" current-tab" href="#">
Tab 4
<span class="accessible-hidden sr-only">(tab selected)</span>
</a>
</li>
</ul>
</span>
</div>
```
</section>
<section data-markdown data-category="panels">
### Panel
......@@ -54,26 +325,1139 @@ A basic panel.
```
<div class="panel panel-default">
<h3 class="panel-heading has-link">
<a href="#">Tags <span class="icon icon-arrow-right pull-right" role="presentation"></span></a>
<a href="#">Basic panel</a>
</h3>
<div class="tagblock panel-body">
<a title="1 item" href="#" class="tag">llamas</a> &nbsp;
<a title="1 item" href="#" class="tag">pineapple</a> &nbsp;
<a title="1 item" href="#" class="tag">Mahara</a> &nbsp;
<a title="1 item" href="#" class="tag">portfolio</a> &nbsp;
</div>
</div>
```
</section>
<section data-markdown data-category="panels">
### Delete panel
A delete panel.
```
<div class="panel panel-danger view-container">
<h2 class="panel-heading">Delete</h2>
<div class="panel-body">
<p><strong>Title</strong></p>
<p>Are you really sure you wish to delete this?</p>
<div class=" default submitcancel form-group">
<button type="submit" class="btn-default submitcancel submit btn" tabindex="0">Yes</button>
<input type="submit" class="btn-default submitcancel cancel" tabindex="0" value="No">
</div>
</div>
</div>
```
</section>
<section data-markdown data-category="panels">
### Side panel
A side panel is used in the sideblock area, e.g. on the dashboard for "Online users".
```
<div class="col-md-3 sidebar">
<div class="panel panel-default">
<h3 class="panel-heading">
Side panel
<br>
<span class="text-small text-midtone">(Description)</span>
</h3>
<ul class="list-group">
<li class="list-group-item list-unstyled list-group-item-link">
<a>
Side panel
</a>
</li>
</ul>
<a href="" class="panel-footer text-small">
Side panel footer
<span class="icon icon-arrow-circle-right pull-right"></span>
</a>
</div>
</div>
```
</section>
<section data-markdown data-category="panels">
### Side panel (no footer)
A side panel without a footer. An examples is the "Tags" sideblock on the dashboard.
```
<div class="col-md-3 sidebar">
<div id="sb-tags">
<div class="panel panel-default">
<h3 class="panel-heading has-link">
<a href="">Side panel<span class="icon icon-arrow-right pull-right" role="presentation" aria-hidden="true"></span></a>
</h3>
<div class="tagblock panel-body">
<div class="no-results-small text-small">Lorem ipsum</div>
</div>
</div>
</div>
</div>
```
</section>
<section data-markdown data-category="panels">
### Drop-down panel
A drop-down panel.
```
<div class="last form-group collapsible-group">
<fieldset class="pieform-fieldset last collapsible">
<legend>
<h4>
<a href="#dropdown" data-toggle="collapse" aria-expanded="false" aria-controls="dropdown" class="collapsed">
Drop-down
<span class="icon icon-chevron-down collapse-indicator right pull-right"> </span>
</a>
</h4>
</legend>
<div class="fieldset-body collapse " id="dropdown">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis metus orci, in posuere nulla tempus quis. Curabitur aliquet, turpis sit amet fermentum euismod, nisl massa posuere nulla, sed tempor lorem magna a urna. In porttitor lobortis mauris, et tristique ipsum hendrerit a. In et quam fringilla, accumsan enim et, fermentum diam. Ut risus lectus, feugiat eget dolor sed, fringilla fringilla nulla. Vivamus laoreet mollis ex ut pulvinar. Praesent ultrices enim sem, vel mattis tellus feugiat et.
</div>
</fieldset>
</div>
```
</section>
<section data-markdown data-category="panels">
### Blocks drop-down panel
This type of drop-down panel is used in blocks, for example the "Inbox" block.
```
<div class="bt-inbox panel panel-secondary clearfix collapsible">
<h3 class="title panel-heading js-heading">
<a data-toggle="collapse" href="#target" aria-expanded="true" class="outer-link"></a>
Blocks drop-down
<span class="icon icon-chevron-up collapse-indicator pull-right inner-link" role="presentation" aria-hidden="true"></span>
</h3>
<div class="block collapse in" id="target" aria-expanded="true">
<div class="inboxblock list-group">
<div class="has-attachment panel-default collapsible list-group-item">
<a class="collapsed link-block" data-toggle="collapse" href="#item1" aria-expanded="false">
<span class="icon icon-university text-default left" role="presentation" aria-hidden="true"></span>
Item 1
<span class="icon icon-chevron-down collapse-indicator pull-right text-small" role="presentation" aria-hidden="true"></span>
</a>
<div class="collapse" id="item1">
<p class="content-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at turpis commodo, pretium turpis ac, porttitor dolor.
</p>
</div>
</div>
<div class="has-attachment panel-default collapsible list-group-item">
<a class="collapsed link-block" data-toggle="collapse" href="#item2" aria-expanded="false">
<span class="icon icon-wrench text-default left" role="presentation" aria-hidden="true"></span>
Item 2
<span class="icon icon-chevron-down collapse-indicator pull-right text-small" role="presentation" aria-hidden="true"></span>
</a>
<div class="collapse" id="item2">
<p class="content-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at turpis commodo, pretium turpis ac, porttitor dolor.
</p>
</div>
</div>
</div>
<div class="artefact-detail-link">
<a class="link-blocktype last" href="">
<span class="icon icon-arrow-circle-right" role="presentation" aria-hidden="true"></span>
More
</a>
</div>
</div>
</div>
```
</section>
<section data-markdown data-category="modals">
### Modal docked
A slide-out modal. This is used to show a block's configuration for example.
```
<button type="button" class="btn btn-primary" data-toggle="modal-docked" data-target="#modal-docks">
Launch demo modal
</button>
<div class="modal modal-docked modal-docked-right modal-shown closed" id="modal-docks" tabindex="-1" role="dialog" aria-labelledby="#modal-docks-label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="deletebutton close" data-dismiss="modal-docked" aria-label="Close">
<span class="times">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title blockinstance-header text-inline modal-docks-title" >Modal heading</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium, magna in tempor accumsan, augue lacus pretium urna, fringilla malesuada orci eros iaculis dui. Donec blandit urna sed condimentum ullamcorper. Vestibulum commodo hendrerit suscipit. Etiam eget fermentum risus. Etiam faucibus elit at tortor molestie rutrum at nec ex. Mauris id elit sed neque rhoncus iaculis. Maecenas id dui turpis.
</div>
</div>
</div>
</div>
```
</section>
<section data-markdown data-category="tables">
### Table
This is a normal table, e.g. found in a forum.
```
<table class="table fullwidth table-padded">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th class="text-center">Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3 class="title">
<a href="">Item 1</a>
</h3>
<div class="forumpath text-small text-midtone">
<a href="" class="topicgroup text-muted">Info</a> /
<a href="" class="topicforum text-midtone">More info</a>
</div>
</td>
<td>
<p class="postdetail">
Item 2
</p>
</span>
</td>
<td class="text-center">Item 3</td>
</tr>
</tbody>
</table>
```
</section>
<section data-markdown data-category="tables">
### Striped table
A striped table is most frequently found in the administration area where tables can be quite long and contain a lot of data.
```
<table class="fullwidth table table-striped">
<thead>
<tr>
<th>Column 1</th>
<th class="center">Column 2</th>
<th class="center">Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th><span class="accessible-hidden sr-only">Edit</span></th>
</tr>
</thead>
<tbody>
<tr class="r0">
<td><a href="">Item 1</a></td>
<td class="center">3</td>
<td class="center">1</td>
<td>Item 1 info</td>
<td>Item 1 stuff</td>
<td class="right">
<div class="btn-group">
<a class="btn btn-default btn-sm" title="Manage" href="">
<span class="icon icon-cog icon-lg"></span><span class="sr-only">Manage "Item 1"</span>
</a>
<a class="btn btn-default btn-sm" title="Delete" href="">
<span class="icon icon-trash text-danger icon-lg"></span><span class="sr-only">Delete "Item 1"</span>
</a>
</div>
</td>
</tr>
<tr class="r1">
<td><a href="">Item 2</a></td>
<td class="center">5</td>
<td class="center">2</td>
<td>Item 2 info</td>
<td>Item 2 stuff</td>
<td class="right">
<div class="btn-group">
<a class="btn btn-default btn-sm" title="Manage" href="">
<span class="icon icon-cog icon-lg"></span><span class="sr-only">Manage "Item 2"</span>
</a>
<a class="btn btn-default btn-sm" title="Delete" href="">
<span class="icon icon-trash text-danger icon-lg"></span><span class="sr-only">Delete "Item 2"</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
```
</section>
<section data-markdown data-category="drop-downs">
### Basic drop-down menu
A drop-down select box.
```
<div class="input-small select form-group">
<label for="searchviews_orderby">
Drop-down:
</label>
<span class="picker">
<select class="form-control input-small select" name="orderby" tabindex="0" style="">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</span>
</div>
```
</section>
<section data-markdown data-category="drop-downs">
### Drop-down menu with text entry
This drop-down select box allows you to enter text which is then searched using the option as filter. An example can be found in the user search in the administration area when a site has multiple institutions.
```
<form class="pieform form-inline with-heading" name="search" method="post">
<div class="dropdown-group js-dropdown-group form-group">
<fieldset class="pieform-fieldset dropdown-group js-dropdown-group">
<div class="with-dropdown js-with-dropdown text form-group">
<label for="search_query">
Search:
</label>
<input type="text" class="form-control with-dropdown js-with-dropdown text autofocus" name="query" tabindex="0" value="" placeholder="Option 1">
</div>
<div id="search_filter_container" class="dropdown-connect js-dropdown-connect select form-group">
<label for="search_filter">
Filter:
</label>
<span class="picker">
<select class="form-control dropdown-connect js-dropdown-connect select" id="search_filter" name="filter" tabindex="0" style="">
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</span>
</div>
</fieldset>
</div>
</form>
```
</section>