kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.9 KiB
114 lines
2.9 KiB
# Notifications
|
|
|
|
```
|
|
<div class="notification-box">
|
|
<div class="notification-box--content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia laudantium ea delectus incidunt accusantium repudiandae deserunt excepturi non esse vero distinctio et reprehenderit, cupiditate quidem consectetur rerum iste magnam voluptatibus.</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Error
|
|
|
|
```
|
|
<div class="notification-box -error">
|
|
<a href="#" class="notification-box--close">×</a>
|
|
<div class="notification-box--content">
|
|
<p>An error occured, here are the facts:</p>
|
|
<ul>
|
|
<li>Fact 1: You made a mistake</li>
|
|
<li>Fact 2: You <em>really</em> made a mistake</li>
|
|
<li>Fact 3: You <strong>should fix it</strong></li>
|
|
</ul>
|
|
<button class="button">continue editing</button>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Warning
|
|
|
|
```
|
|
<div class="notification-box -warning">
|
|
<a href="#" class="notification-box--close">×</a>
|
|
<div class="notification-box--content">
|
|
<p>This is a warning. You may ignore it, but bad things might happen.</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Severe warning
|
|
|
|
```
|
|
<div class="notification-box -warning -severe">
|
|
<a href="#" class="notification-box--close">×</a>
|
|
<div class="notification-box--content">
|
|
<p>This is a warning with severe consequences. You should not ignore it.</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Success
|
|
|
|
```
|
|
<div class="notification-box -success">
|
|
<a href="#" class="notification-box--close">×</a>
|
|
<div class="notification-box--content">
|
|
<p>Successful update. <a href="#">A link to the past</a></p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Stackable
|
|
|
|
|
|
```
|
|
<div class="controls">
|
|
<button class="button stuck-message" id="test-notifier">click</button>
|
|
</div>
|
|
<div class="notification-box--wrapper">
|
|
<div class="notification-box--casing"></div>
|
|
</div>
|
|
|
|
<script type="text\template" id="warning-message-zx00x">
|
|
<div class="notification-box -warning">
|
|
<a href="#" class="notification-box--close">×</a>
|
|
<div class="notification-box--content">
|
|
<p>This is a warning. You may ignore it, but bad things might happen. notificationNo {{number}}</p>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
```
|
|
|
|
```
|
|
@javascript
|
|
(function($){
|
|
|
|
var viewArea = $('.notification-box--casing');
|
|
var notificationMessageTemplate = {
|
|
notificationNumber: 0,
|
|
printNotification: function(){
|
|
this.notificationNumber++;
|
|
return $('#warning-message-zx00x').html()
|
|
.replace(/{{number}}/g, this.notificationNumber);
|
|
}
|
|
};
|
|
|
|
$('#test-notifier').on('click', function(e){
|
|
e.preventDefault();
|
|
viewArea.prepend(notificationMessageTemplate.printNotification());
|
|
});
|
|
|
|
$(document).on('click', '.notification-box--close', function(e){
|
|
e.preventDefault();
|
|
$(this).closest('.notification-box').animate({
|
|
'padding-top': 0,
|
|
'padding-bottom': 0,
|
|
'height': 0,
|
|
'opacity': 0
|
|
}, 'fast', function() {
|
|
$(this).remove();
|
|
});
|
|
});
|
|
|
|
})(jQuery);
|
|
```
|
|
|