Skip to content

Commit 2faf26c

Browse files
jeff-phillips-18jeff-phillips-18
committed
Update to toast list to set appropriate width
Also: Fix toasts inside toast list so an extra div is not needed. Remove the toast notifications list test page and update the toast notifications test page to use the list. Use toast notification list on full page layout test pages for example warning text.
1 parent 2d08c05 commit 2faf26c

File tree

4 files changed

+50
-118
lines changed

4 files changed

+50
-118
lines changed

‎less/toast.less‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
// --------------------------------------------------
44

55
.toast-pf {
6-
background-color: hsla(0, 0%, 100%, .94);
6+
background-color: @color-pf-white;
77
border-color: @color-pf-black-400;
8-
box-shadow: 0 2px 6px hsla(0, 0%, 0%, .2);
8+
box-shadow: 0 2px 6px fade(@color-pf-black, 20%);
99
padding-left: 68px; //15px space between the icon and the text
1010
&.alert-danger > .pficon { background-color: @alert-danger-border; }
1111
&.alert-info > .pficon { background-color: @alert-info-border; }
@@ -21,7 +21,7 @@
2121
text-align: center;
2222
top: -1px;
2323
width: 53px;
24-
&:before { color: hsla(0, 0%, 100%, .74); }
24+
&:before { color: fade(@color-pf-white, 74%); }
2525
}
2626
.toast-pf-action {
2727
margin-left: 15px;
@@ -51,11 +51,19 @@
5151
}
5252

5353
.toast-notifications-list-pf {
54+
margin-left: (@grid-gutter-width / 2);
5455
position: fixed;
55-
right: 15px;
56-
top: 15px;
56+
right: (@grid-gutter-width / 2);
57+
top: (@grid-gutter-width / 2);
5758
z-index: 1050;
5859
.toast-pf {
60+
clear: both;
5961
float: right;
6062
}
63+
@media (min-width: @screen-sm-min) {
64+
max-width: calc(50%);
65+
}
66+
@media (min-width: @screen-md-min) {
67+
max-width: calc(33.1% ); // sets the size to 4 cols;
68+
}
6169
}

‎tests/pages/_includes/head.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@
2828
{% endfor %}{% endif %}
2929
<script src="{{site.url-js}}"></script>
3030
</head>{% if page.full-page %}
31-
<div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-warning alert-dismissable">
32-
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
33-
<span class="pficon pficon-close"></span>
34-
</button>
35-
<span class="pficon pficon-warning-triangle-o"></span>
36-
{% if page.alt-layout %}The alternate layouts are not officially supported by Patternfly. {% endif %}These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
37-
</div>{% endif %}{% endstrip %}
31+
<div class="toast-notifications-list-pf">
32+
<div class="toast-pf alert alert-warning alert-dismissable">
33+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
34+
<span class="pficon pficon-close"></span>
35+
</button>
36+
<span class="pficon pficon-warning-triangle-o"></span>
37+
{% if page.alt-layout %}The alternate layouts are not officially supported by Patternfly. {% endif %}These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a> and <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>.
38+
</div>{% endif %}{% endstrip %}
39+
</div>

‎tests/pages/toast-notifications-list.html‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎tests/pages/toast.html‎

Lines changed: 28 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,31 @@
44
title: Toast Notifications
55
resource: true
66
---
7-
<div class="toast-pf alert alert-success">
8-
<div class="pull-right toast-pf-action">
9-
<a href="#">Start Server</a>
10-
</div>
11-
<span class="pficon pficon-ok"></span>
12-
<strong>server</strong> has been added to <a href="#" class="alert-link">main server</a>.
13-
</div>
14-
<br>
15-
<div class="toast-pf alert alert-warning">
16-
<div class="pull-right toast-pf-action">
17-
<a href="#">Reload Server</a>
18-
</div>
19-
<span class="pficon pficon-warning-triangle-o"></span>
20-
The server configuration changed.
21-
</div>
22-
<br>
23-
<div class="toast-pf alert alert-danger">
24-
<div class="pull-right toast-pf-action">
25-
<a href="#">Retry</a>
26-
</div>
27-
<span class="pficon pficon-error-circle-o"></span>
28-
Failed to add <strong>server_abc</strong>.
29-
</div>
30-
<br>
31-
<div class="toast-pf alert alert-info">
32-
<div class="pull-right toast-pf-action">
33-
<a href="#">View Details</a>
34-
</div>
35-
<span class="pficon pficon-info"></span>
36-
This server is in the North West Datacenter.
37-
</div>
38-
<hr>
39-
{% include widgets/communication/toast-info.html %}
40-
<br>
41-
{% include widgets/communication/toast-success.html %}
42-
<br>
43-
{% include widgets/communication/toast-warning.html %}
44-
<br>
45-
{% include widgets/communication/toast-danger.html %}
46-
<hr>
47-
{% include widgets/communication/toast-max-width.html %}
7+
<div class="toast-notifications-list-pf">
8+
<div class="toast-pf alert alert-success">
9+
<div class="pull-right toast-pf-action">
10+
<a href="#">Start Server</a>
11+
</div>
12+
<span class="pficon pficon-ok"></span>
13+
<strong>server</strong> has been added.
14+
</div>
15+
<div class="toast-pf alert alert-danger alert-dismissable">
16+
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
17+
<span class="pficon pficon-close"></span>
18+
</button>
19+
<span class="pficon pficon-error-circle-o"></span>
20+
Failed to add <strong>server_abc</strong>.
21+
</div>
22+
<div class="toast-pf alert alert-warning">
23+
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
24+
<div class="pull-right toast-pf-action">
25+
<a href="#">Reload Server</a>
26+
</div>
27+
<span class="pficon pficon-warning-triangle-o"></span>
28+
The server configuration changed.
29+
</div>
30+
<div class="toast-pf alert alert-info">
31+
<span class="pficon pficon-info"></span>
32+
Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.
33+
</div>
34+
</div>

0 commit comments

Comments
 (0)