mirror of
https://github.com/ivabus/www
synced 2024-11-13 03:45:16 +03:00
Merge branch 'main' into website-3-1
This commit is contained in:
commit
19da58a64e
|
@ -1,12 +1,24 @@
|
||||||
function Bottles() {
|
function Bottles() {
|
||||||
const [bottles, setBottles] = React.useState();
|
const [bottles, setBottles] = React.useState();
|
||||||
|
const [isLoading, setLoading] = React.useState(true);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
fetch("https://app.tea.xyz/api/bottles")
|
fetch("https://app.tea.xyz/api/bottles")
|
||||||
.then((res) => res.json())
|
.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;
|
if (!bottles) return null;
|
||||||
|
|
||||||
const names = [...new Set(bottles.map((b) => b.name))];
|
const names = [...new Set(bottles.map((b) => b.name))];
|
||||||
|
|
|
@ -1,13 +1,28 @@
|
||||||
function PackageBottles() {
|
function PackageBottles() {
|
||||||
const [bottles, setBottles] = React.useState();
|
const [bottles, setBottles] = React.useState();
|
||||||
|
const [isLoading, setIsLoading] = React.useState(true);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
|
const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((res) => res.json())
|
.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;
|
if (!bottles) return null;
|
||||||
|
|
||||||
const names = [...new Set(bottles.map((b) => b.name))];
|
const names = [...new Set(bottles.map((b) => b.name))];
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
|
|
||||||
|
<!-- Uncomment to enable site preloader:
|
||||||
|
|
||||||
|
{{- partial "preloader.html" -}}
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- Hero Section -->
|
<!-- Hero Section -->
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -40,6 +40,36 @@
|
||||||
.expand{
|
.expand{
|
||||||
cursor: pointer;
|
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) {
|
@media screen and (max-width: 576px) {
|
||||||
|
|
||||||
|
@ -56,7 +86,6 @@
|
||||||
|
|
||||||
.title-col{
|
.title-col{
|
||||||
padding: 4vw !important;
|
padding: 4vw !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -96,6 +96,34 @@
|
||||||
cursor: pointer;
|
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) {
|
@media screen and (max-width: 576px) {
|
||||||
|
|
||||||
.bottles-container{
|
.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