Skip to content

GitLab

Commit 975b92c4 authored by bbaer's avatar bbaer
Browse files

mockup of new alerts

parent 9b88a8b0
Hide whitespace changes
Inline Side-by-side
less/qfq-bs.css.less
View file @ 975b92c4
......@@ -351,4 +351,47 @@ i.@{spinner_class} {
// Buttons: text left aligned
.qfq-left {
text-align: left;
}
.alert-interactive {
position: absolute;
display: box;
left: 50%;
transform: translate(-50%,0);
top: 200px;
padding: 20px;
color: #d0d0d0;
width: 450px;
border-left: 5px solid;
background-color: #333;
}
.border-success {
border-color: #5cb85c;
}
.border-error {
border-color: #fb4f4f;
}
.border-warning {
border-color: #fbb64f;
}
.border-info {
border-color: #25adf1;
}
.alert-interactive p.title {
font-size: 1.5em;
margin-bottom: 0px;
}
.alert-interactive p.buttons {
margin-top: 20px;
text-align: center;
}
.alert-interactive p.buttons button {
margin-right: 4px;
}
\ No newline at end of file
mockup/alert2.html 0 → 100644
View file @ 975b92c4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Alert</title>
</head>
<body>
<button id="showalert1">Show Alert 1</button>
<button id="showalert2">Show Alert 2</button>
<button id="showalert3">Show Alert 3 primed</button>
<button id="showmanyalert1">Show Many Alert 1</button>
<button id="showmodalalert1">Show Modal Alert 1</button>
<a id="alertinlink" onclick="
var alert = new QfqNS.Alert('Text being displayed', 'info', [
{ label: 'OK', eventName: 'ok' },
{ label: 'Cancel', eventName: 'cancel'}
]);
alert.on('alert.ok', function() {
window.location = $('#alertinlink').attr('href');
});
alert.show();
return false;
" href="http://www.google.ch">Link alert</a>
<div style="margin-top: 20ex">
<button onclick="alert('Button clicked')">Modal test button</button>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<div class="alert-interactive border-success">
<p class="title">Success!</p>
<p class="body">Congratulations, your dataset has been saved successfully</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-info" style="left: 54%; top: 225px;">
<p class="title">Information</p>
<p class="body">Congratulations, your dataset has been saved successfully</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-warning" style="left: 58%; top: 250px;">
<p class="title">Warning</p>
<p class="body">Congratulations, your dataset has changed</p>
<p class="buttons">
<button type="button" class="btn btn-default">Ok</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
<div class="alert-interactive border-error" style="left: 62%; top: 275px;">
<p class="title">Error</p>
<p class="body">Congratulations, your dataset hasn't been saved!</p>
<p class="buttons">
<button type="button" class="btn btn-default">Try Again</button>
<button type="button" class="btn btn-default">Cancel</button>
</p>
</div>
</body>
</html>
\ No newline at end of file
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