devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added loading placeholer for theme updater

This commit is contained in:
Julian Prieber 2023-03-07 20:30:41 +01:00
parent e81a3940f3
commit 522d32234d
2 changed files with 118 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
resources/views/studio/theme-updater.blade.php
View File

@ -1,106 +1,6 @@
@if(auth()->user()->role == 'admin')
@if(env('ENABLE_THEME_UPDATER') == 'true')
<style>
details {
width: 65%;
margin-left: 15px;
{
{
-- max-width: calc(100% - 20rem);
--
}
}
position: relative;
border: 1px solid #78909C;
border-radius: 6px;
background-color: #ECEFF1;
color: #263238;
transition: background-color .15s;
> :last-child {
margin-bottom: 1rem;
}
&::before {
width: 100%;
height: 100%;
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
opacity: .15;
box-shadow: 0 .25em .5em #263238;
pointer-events: none;
transition: opacity .2s;
z-index: -1;
}
&[open] {
background-color: #FFF;
&::before {
opacity: .6;
}
}
}
summary {
padding: 0.375rem 0.75rem;
width: 100%;
display: block;
position: relative;
font-size: 1.33em;
font-weight: bold;
cursor: pointer;
&::before,
&::after {
width: .75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: '';
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform .2s ease-in-out;
}
&::after {
transform: translateY(-50%) rotate(90deg);
[open] & {
transform: translateY(-50%) rotate(180deg);
}
}
&::-webkit-details-marker {
display: none;
}
}
table,
th,
td {
border: 1px solid black;
}
.updatespin {
animation: upspin 1s linear infinite;
display: inline-block;
}
@keyframes upspin {
100% {
transform: rotate(360deg)
}
}
</style>
<br><br><br>
<details>
<summary><i class="bi bi-caret-down-fill"></i> Theme updater </summary>

119
resources/views/studio/theme.blade.php
View File

@ -87,7 +87,124 @@
@if(auth()->user()->role == 'admin')
@if(env('ENABLE_THEME_UPDATER') == 'true')
<div id="ajax-container" style="height: 123px;"></div>
<style>
details {
width: 65%;
margin-left: 15px;
{
{
-- max-width: calc(100% - 20rem);
--
}
}
position: relative;
border: 1px solid #78909C;
border-radius: 6px;
background-color: #ECEFF1;
color: #263238;
transition: background-color .15s;
> :last-child {
margin-bottom: 1rem;
}
&::before {
width: 100%;
height: 100%;
content: '';
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
opacity: .15;
box-shadow: 0 .25em .5em #263238;
pointer-events: none;
transition: opacity .2s;
z-index: -1;
}
&[open] {
background-color: #FFF;
&::before {
opacity: .6;
}
}
}
summary {
padding: 0.375rem 0.75rem;
width: 100%;
display: block;
position: relative;
font-size: 1.33em;
font-weight: bold;
cursor: pointer;
&::before,
&::after {
width: .75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: '';
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform .2s ease-in-out;
}
&::after {
transform: translateY(-50%) rotate(90deg);
[open] & {
transform: translateY(-50%) rotate(180deg);
}
}
&::-webkit-details-marker {
display: none;
}
}
table,
th,
td {
border: 1px solid black;
}
.updatespin {
display: inline-flex;
align-items: center;
justify-content: center;
animation: upspin 1s linear infinite;
height: 20px;
width: 20px;
}
@keyframes upspin {
100% {
transform: rotate(360deg)
}
}
</style>
<div id="ajax-container">
<br><br><br>
<details>
<summary><span id="updateicon" class="updatespin"><i class="bi bi-nut-fill"></i></span> Theme updater </summary>
</div>
</details>
</div>
<div id="my-lazy-element"></div>
@endif
@endif