v0.7.6 - Added snackbar

This commit is contained in:
frederikpyt
2020-08-11 15:08:09 +02:00
parent 1e4d55ef26
commit b1b96ad080
8 changed files with 253 additions and 19 deletions
+40
View File
@@ -485,3 +485,43 @@ $primary-color: $blue;
display: inline-block;
}
}
#snackbar {
visibility: hidden;
width: calc(90% - 16px);
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
position: fixed;
z-index: 1;
left: calc(5% + 8px);
right: calc(5% + 8px);
bottom: 30px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@@ -8,6 +8,14 @@
@else
<link type="text/css" rel="stylesheet" href="{{ mix("/css/webapp.css") }}">
@endif
<script type="text/javascript">
function setMain() {
var main = document.getElementsByTagName("main")[0];
var header = document.getElementsByTagName("header")[0];
main.style.minHeight = 'calc(100% - ' + header.clientHeight + 'px)';
}
</script>
</head>
<body onresize="setMain()" onload="setMain()">
<header class="row align-items-center" id="header">
@@ -68,11 +76,8 @@
{{ __('msg.logud') }}
</a>
</div>
@yield("content")
<script src="{{ mix("/js/app.js") }}"></script>
@yield("scripts")
@if(request()->cookie("mode") == "dark")
<script type="text/javascript">
function toggleMenu(menu) {
@@ -111,14 +116,6 @@
};
</script>
@endif
<script type="text/javascript">
function setMain() {
var main = document.getElementsByTagName("main")[0];
var header = document.getElementsByTagName("header")[0];
main.style.minHeight = 'calc(100% - ' + header.clientHeight + 'px)';
}
</script>
@yield("scripts")
</body>
</html>
@@ -27,7 +27,7 @@
padding-right: 8px;
}
</style>
<main>
<main style="justify-content: unset;">
@foreach(\App\News::query()->orderBy("created_at", "desc")->get() as $new)
<div class="card">
<div class="header">
@@ -43,5 +43,31 @@
@if(count(\App\News::query()->orderBy("created_at", "desc")->get()) == 0)
<p class="text-center">{{__('msg.ingennyheder')}}</p>
@endif
<div id="snackbar">Some text some message..</div>
</main>
@endsection
@section("scripts")
<script type="text/javascript">
function snackbar(data) {
var x = document.getElementById("snackbar");
x.innerHTML = data;
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
function ajaxCall(event_id) {
axios.post("{{ route("userevents.createajax") }}",
{
event_id: event_id
}
).then(function (response) {
var data = response.data;
snackbar(data);
}).catch(function (error) {
console.log(error);
});
}
</script>
@endsection