openproject/app/assets/stylesheets/content/_notifications.lsg

# 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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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);
```

## Upload notifications

### Upload progress

```
<div class="notification-box -upload">
  <div class="notification-box--content">
    <p class="notification-box--upload-status">Uploading files ...</p>
    <div>
      <div>
        <div class="notification-box--toggle-message">
          <a href="#"><i class="icon-arrow-right5-2"></i></a> 2 of 3 files finished
        </div>
        <div class="notification-box--uploads-wrapper">
          <ul class="notification-box--uploads">
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape1.png</span>
              <progress max="100" value="20">20%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape2.png</span>
              <progress max="100" value="50">50%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape3.png</span>
              <progress max="100" value="100">100%</progress>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
```

### Upload progress done

```
<div class="notification-box -upload">
  <div class="notification-box--content">
    <p class="notification-box--upload-status">Uploading files ...</p>
    <div>
      <div>
        <div class="notification-box--toggle-message">
          <a href="#"><i class="icon-arrow-right5-2"></i></a> 5 of 5 files finished
        </div>
        <div class="notification-box--uploads-wrapper">
          <ul class="notification-box--uploads">
            <li class="notification-box--uploads-element">
              <span class="filename">Awesome_Landscape1.png</span><i class="icon-yes -success"></i>
            </li>
            <li class="notification-box--uploads-element">
              <span class="filename">Awesome_Landscape2.png</span><i class="icon-close -error"></i>
              <p class="notification-box--notice -error">Something went wrong!...</p>
            </li>
            <li class="notification-box--uploads-element">
              <span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
            </li>
            <li class="notification-box--uploads-element">
              <span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
            </li>
            <li class="notification-box--uploads-element">
              <span class="filename">Awesome_Landscape3.png</span><i class="icon-yes -success"></i>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
```

### Upload progress more then five files simultaneously

```
<div class="notification-box -upload">
  <div class="notification-box--content">
    <p class="notification-box--upload-status">Uploading files ...</p>
    <div>
      <div>
        <div class="notification-box--toggle-message">
          <a href="#"><i class="icon-arrow-right5"></i></a> 3 of 5 files finished
        </div>
        <div class="notification-box--uploads-wrapper hide">
          <ul class="notification-box--uploads">
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape1.png</span>
              <progress max="100" value="20">20%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape2.png</span>
              <progress max="100" value="50">50%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape3.png</span>
              <progress max="100" value="100">100%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape4.png</span>
              <progress max="100" value="100">100%</progress>
            </li>
            <li class="notification-box--uploads-element"><span class="filename">Awesome_Landscape5.png</span>
              <progress max="100" value="100">100%</progress>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
```