Commit 225bbdb6 authored by Pietro Albini's avatar Pietro Albini

alerts: add

parent e4914104
......@@ -382,6 +382,43 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</div>
</div>
<div class="page">
<div class="row">
<div class="col">
<h1>Alert</h1>
<p>
Gli alert devono avere la classe
<code>.alert</code>, e una delle classi
<code>.success</code>, <code>.error</code> o
<code>.info</code> in base alla loro categoria.
Se è presente uno <code>&lt;span&gt;</code> con
classe <code>.close</code>, cliccandolo l'alert
sparirà.
</p>
<pre>
&lt;div class="alert success"&gt;
Contenuto dell'alert
&lt;span class="close"&gt;&amp;times;&lt;/span&gt;
&lt;/div&gt;</pre>
</div>
</div>
</div>
<div class="alert success">
Tutto è andato bene
<span class="close">&times;</span>
</div>
<div class="alert error">
Si è verificato un errore...
<span class="close">&times;</span>
</div>
<div class="alert info">
Una semplice informazione
<span class="close">&times;</span>
</div>
<footer>
<p>
Ubuntu e Canonical sono marchi registrati da Canonical
......
/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
* for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
function ubuntuit_alerts_init() {
var alerts = document.querySelectorAll(".alert");
for (var i = 0; i < alerts.length; i++) {
var close = alerts[i].querySelector("span.close");
if (close !== null) {
close.addEventListener("click", function(e) {
e.preventDefault();
this.classList.add("closed");
}.bind(alerts[i]))
}
}
}
window.addEventListener("load", ubuntuit_alerts_init);
/* Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
*
* This program is free software: you can redistribute it and/or modify it
* under the terms of the GNU Affero General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
* for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
div.alert {
color: #fff;
padding: 0.7em 1em 0.8em 1em;
margin: 1em 0;
border-radius: 0.2em;
box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.15);
&.success {
background: $color_green;
}
&.error {
background: $color_red;
}
&.info {
background: $color_blue;
}
&.closed {
display: none;
}
span.close {
float: right;
display: block;
font-size: 1.2em;
margin: -0.2rem 0;
cursor: pointer;
}
@media all and (max-width: $page_size) {
border-radius: 0;
}
}
......@@ -19,4 +19,8 @@ $color_warm_gray: #aea79f;
$color_cool_gray: #333;
$color_text_gray: #111;
$color_green: #3fb24f;
$color_red: #fc4949;
$color_blue: #1ab6ef;
$page_size: 60rem;
......@@ -19,6 +19,7 @@
@import "buttons";
@import "box";
@import "alerts";
@import "cookiepolicy";
@import "navbar";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment