##// END OF EJS Templates
markdown: reduce margin for list elements.
markdown: reduce margin for list elements.

File last commit:

r839:a3b2c0d4 default
r1732:c8176fc6 default
Show More
alerts.html
75 lines | 2.4 KiB | text/html | HtmlLexer
alerts: updating style guide for new polymer alerts
r839 ## -*- coding: utf-8 -*-
<%inherit file="/debug_style/index.html"/>
<%def name="breadcrumbs_links()">
${h.link_to(_('Style'), h.url('debug_style_home'))}
&raquo;
${c.active}
</%def>
<%def name="real_main()">
<div class="box">
<div class="title">
${self.breadcrumbs()}
</div>
<div class='sidebar-col-wrapper'>
${self.sidebar()}
<div class="main-content">
<h3>Alert Messages</h3>
<p>
Alert messages are produced using the custom Polymer element
<code>rhodecode-toast</code> which is passed a message and level.
</p>
<div class="bs-example">
<p> There are four types of alert levels:</p>
<div class="alert alert-success">
"success" is used when an action is completed as expected<br/>
ex. updated settings, deletion of a repo/user
</div>
<div class="alert alert-warning">
"warning" is for notification of impending issues<br/>
ex. a gist which was updated elsewhere during editing, disk out of space
</div>
<div class="alert alert-error">
"error" should be used for unexpected results and actions which
are not successful<br/>
ex. a form not submitted, repo creation failure
</div>
<div class="alert alert-info">
"info" is used for non-critical information<br/>
ex. notification of new messages, invitations to chat
</div>
</div>
<p><br/>
Whether singular or multiple, alerts are grouped into a dismissable
panel with a single "Close" button underneath.
</p>
<a class="btn btn-default" id="test-notification">Test Notification</a>
<script type="text/javascript">
$('#test-notification').on('click', function(e){
var levels = ['info', 'error', 'warning', 'success'];
var level = levels[Math.floor(Math.random()*levels.length)];
var payload = {
message: {
message: 'This is a test ' +level+ ' notification.',
level: level,
force: true
}
};
$.Topic('/notifications').publish(payload);
});
</script>
</div>
</div> <!-- .main-content -->
</div>
</div> <!-- .box -->
</%def>