mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-03-21 22:10:38 +01:00
Add placeholder animation
This commit is contained in:
Julian Prieber
parent
81bca8daac
commit
f198ac1be1
@ -2,7 +2,31 @@
|
|||||||
|
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div id="site-stats" class="conatiner-fluid content-inner mt-n5 py-0">
|
<div id="site-stats" class="conatiner-fluid content-inner mt-n5 py-0" style="">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--spinnerColor: #8a92a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
height: 1.2rem;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #8a92a6;
|
||||||
|
background: linear-gradient(90deg, var(--spinnerColor) 25%, #b8bcc5 50%, var(--spinnerColor) 75%);
|
||||||
|
background-size: 200% 100%;
|
||||||
|
animation: shimmer 2s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% {
|
||||||
|
background-position: -200% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 200% 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
@ -14,8 +38,45 @@
|
|||||||
<h3 class="mb-4"><i class="bi bi-menu-up"></i> {{ __('messages.Dashboard') }}</h3>
|
<h3 class="mb-4"><i class="bi bi-menu-up"></i> {{ __('messages.Dashboard') }}</h3>
|
||||||
|
|
||||||
<section class="mb-3 text-center p-4 w-full">
|
<section class="mb-3 text-center p-4 w-full">
|
||||||
<div class="spinner-border text-primary" role="status">
|
<div class=" d-flex">
|
||||||
<span class="visually-hidden">Loading...</span>
|
|
||||||
|
<div class="p-2 h6 d-flex align-items-center"><i class="bi bi-link"></i>
|
||||||
|
{{ __('messages.Total Links:') }}
|
||||||
|
<span style="width:3rem" class="placeholder ms-1"></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2 h6 d-flex align-items-center"><i class="bi bi-link"></i>
|
||||||
|
{{ __('messages.Link Clicks:') }}
|
||||||
|
<span style="width:3rem" class="placeholder ms-1"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center w-100">
|
||||||
|
<a href="{{ url('/studio/links') }}">{{ __('messages.View/Edit Links') }}</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="w-100 text-left">
|
||||||
|
<h6><i class="bi bi-sort-up"></i> {{ __('messages.Top Links:') }}</h6>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<ol class="list-group list-group-numbered" style="text-align: left;">
|
||||||
|
|
||||||
|
@for ($i = 0; $i < 5; $i++)
|
||||||
|
<li
|
||||||
|
class="list-group-item d-flex justify-content-between align-items-start">
|
||||||
|
<div class="ms-2 me-auto text-truncate">
|
||||||
|
<div class="d-flex align-items-center"><span style="width:9rem"
|
||||||
|
class="placeholder ms-1"></span></div>
|
||||||
|
<span style="width:20rem" class="placeholder ms-1 mt-1"></span>
|
||||||
|
</div>
|
||||||
|
<span style="height:2rem;width:5rem"
|
||||||
|
class="placeholder rounded-pill p-2"></span>
|
||||||
|
</li>
|
||||||
|
@endfor
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -25,26 +86,180 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@push('sidebar-scripts')
|
@if (auth()->user()->role == 'admin' && !config('linkstack.single_user_mode'))
|
||||||
<script>
|
<div class="col-lg-12">
|
||||||
$(document).ready(function() {
|
<div class="card rounded">
|
||||||
async function fetchAndReplaceContent() {
|
<div class="card-body">
|
||||||
try {
|
<div class="row">
|
||||||
const response = await $.ajax({
|
<div class="col-sm-12">
|
||||||
url: "{{ url('dashboard/site-stats') }}",
|
|
||||||
method: 'GET',
|
|
||||||
dataType: 'html'
|
|
||||||
});
|
|
||||||
$('#site-stats').fadeOut(0, function() {
|
|
||||||
$('#site-stats').html(response).fadeIn(400);
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Error fetching content:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchAndReplaceContent();
|
<section class="mb-3 text-gray-800 text-center p-4 w-full">
|
||||||
});
|
<div class='font-weight-bold text-left h3'>{{ __('messages.Site statistics:') }}
|
||||||
</script>
|
</div>
|
||||||
@endpush
|
<br>
|
||||||
@endsection
|
<div class="d-flex flex-wrap justify-content-around">
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Total links') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Total clicks') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Total users') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<div class="card rounded">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
|
||||||
|
<section class="mb-3 text-gray-800 text-center p-4 w-full">
|
||||||
|
<div class='font-weight-bold text-left h3'>{{ __('messages.Registrations:') }}
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="d-flex flex-wrap justify-content-around">
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 30 days') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 7 days') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 24 hours') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-lg-12">
|
||||||
|
<div class="card rounded">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
|
||||||
|
<section class="mb-3 text-gray-800 text-center p-4 w-full">
|
||||||
|
<div class='font-weight-bold text-left h3'>{{ __('messages.Active users:') }}</div>
|
||||||
|
<br>
|
||||||
|
<div class="d-flex flex-wrap justify-content-around">
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 30 days') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 7 days') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-2">
|
||||||
|
<h3 class="text-primary d-flex align-items-center">
|
||||||
|
<i class="bi bi-share-fill"></i>
|
||||||
|
<div class="spinner-border text-primary ms-2" role="status">
|
||||||
|
<span class="visually-hidden">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
<span class="text-muted">{{ __('messages.Last 24 hours') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@push('sidebar-scripts')
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
async function fetchAndReplaceContent() {
|
||||||
|
try {
|
||||||
|
const response = await $.ajax({
|
||||||
|
url: "{{ url('dashboard/site-stats') }}",
|
||||||
|
method: 'GET',
|
||||||
|
dataType: 'html'
|
||||||
|
});
|
||||||
|
$('#site-stats').html(response);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error fetching content:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchAndReplaceContent();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
|
@endsection
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user