mirror of
https://github.com/LinkStackOrg/LinkStack.git
synced 2025-03-20 05:20:20 +01:00
Add placeholder animation
This commit is contained in:
Julian Prieber
parent
81bca8daac
commit
f198ac1be1
@ -2,7 +2,31 @@
|
||||
|
||||
|
||||
@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="col-lg-12">
|
||||
@ -14,8 +38,45 @@
|
||||
<h3 class="mb-4"><i class="bi bi-menu-up"></i> {{ __('messages.Dashboard') }}</h3>
|
||||
|
||||
<section class="mb-3 text-center p-4 w-full">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
<div class=" d-flex">
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
@ -25,26 +86,180 @@
|
||||
</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').fadeOut(0, function() {
|
||||
$('#site-stats').html(response).fadeIn(400);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching content:', error);
|
||||
}
|
||||
}
|
||||
@if (auth()->user()->role == 'admin' && !config('linkstack.single_user_mode'))
|
||||
<div class="col-lg-12">
|
||||
<div class="card rounded">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
|
||||
fetchAndReplaceContent();
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
<section class="mb-3 text-gray-800 text-center p-4 w-full">
|
||||
<div class='font-weight-bold text-left h3'>{{ __('messages.Site statistics:') }}
|
||||
</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.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