mirror of
https://github.com/ivabus/www
synced 2024-11-10 05:45:16 +03:00
Merge branch 'main' into website-3-1
This commit is contained in:
commit
19da58a64e
|
@ -1,12 +1,24 @@
|
|||
function Bottles() {
|
||||
const [bottles, setBottles] = React.useState();
|
||||
const [isLoading, setLoading] = React.useState(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch("https://app.tea.xyz/api/bottles")
|
||||
.then((res) => res.json())
|
||||
.then((res) => setBottles(res));
|
||||
.then((res) => {
|
||||
setBottles(res);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (isLoading) return (
|
||||
<div id="bottle-preloader" className="flex">
|
||||
<div id="bottle-status" className="my-auto">
|
||||
<i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
|
||||
<div id="bottle-loading-text"><p className="grid-gray">steeping...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (!bottles) return null;
|
||||
|
||||
const names = [...new Set(bottles.map((b) => b.name))];
|
||||
|
|
|
@ -1,13 +1,28 @@
|
|||
function PackageBottles() {
|
||||
const [bottles, setBottles] = React.useState();
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
|
||||
React.useEffect(() => {
|
||||
const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
|
||||
fetch(url)
|
||||
.then((res) => res.json())
|
||||
.then((res) => setBottles(res));
|
||||
.then((res) => {
|
||||
setBottles(res);
|
||||
setIsLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (isLoading) return (
|
||||
<div id="bottle-preloader" className="flex one-box-down">
|
||||
<div id="bottle-status" className="flex justifit-content-center">
|
||||
<div className="mx-auto">
|
||||
<i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
|
||||
<div id="bottle-loading-text"><p className="grid-gray">steeping available versions...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!bottles) return null;
|
||||
|
||||
const names = [...new Set(bottles.map((b) => b.name))];
|
||||
|
|
|
@ -1,5 +1,11 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<!-- Uncomment to enable site preloader:
|
||||
|
||||
{{- partial "preloader.html" -}}
|
||||
|
||||
-->
|
||||
|
||||
<!-- Hero Section -->
|
||||
|
||||
<style>
|
||||
|
|
|
@ -40,6 +40,36 @@
|
|||
.expand{
|
||||
cursor: pointer;
|
||||
}
|
||||
.tea-icon{
|
||||
display:block;
|
||||
text-align:center;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
#bottle-preloader {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #1a1a1a;
|
||||
|
||||
}
|
||||
#bottle-status {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-position: center;
|
||||
margin: -100px 0 0 -100px;
|
||||
}
|
||||
#bottle-loading-text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
animation: pulse 1s infinite !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
|
||||
|
@ -56,7 +86,6 @@
|
|||
|
||||
.title-col{
|
||||
padding: 4vw !important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -96,6 +96,34 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tea-icon{
|
||||
display:block;
|
||||
text-align:center;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
#bottle-preloader {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #949494;;
|
||||
}
|
||||
#bottle-status {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
background-position: center;
|
||||
}
|
||||
#bottle-loading-text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
animation: pulse 1s infinite !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
|
||||
.bottles-container{
|
||||
|
|
45
src/layouts/partials/bottle-preloader.html
Normal file
45
src/layouts/partials/bottle-preloader.html
Normal file
|
@ -0,0 +1,45 @@
|
|||
<div id="bottle-preloader" class="flex">
|
||||
<div id="bottle-status" class="justify-content-center mx-auto">
|
||||
<i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
|
||||
<div id="bottle-loading-text"><p class="grid-gray">steeping...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tea-icon{
|
||||
display:block;
|
||||
text-align:center;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
#bottle-preloader {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
#bottle-status {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-position: center;
|
||||
margin: -100px 0 0 -100px;
|
||||
}
|
||||
#bottle-loading-text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
animation: pulse 1s infinite !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(window).on('load', function() {
|
||||
$('#status').fadeOut();
|
||||
$('#preloader').delay(350).fadeOut('slow');
|
||||
});
|
||||
</script>
|
49
src/layouts/partials/preloader.html
Normal file
49
src/layouts/partials/preloader.html
Normal file
|
@ -0,0 +1,49 @@
|
|||
<div id="preloader">
|
||||
<div id="status">
|
||||
<i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
|
||||
<div id="loading-text"><p class="grid-gray">steeping...</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tea-icon{
|
||||
display:block;
|
||||
text-align:center;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
#preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
z-index: 9999;
|
||||
}
|
||||
#status {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
background-position: center;
|
||||
margin: -100px 0 0 -100px;
|
||||
}
|
||||
#loading-text {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(window).on('load', function() {
|
||||
$('#status').fadeOut();
|
||||
$('#preloader').delay(350).fadeOut('slow');
|
||||
});
|
||||
</script>
|
Loading…
Reference in a new issue