Added styling to package-details page

This commit is contained in:
Thomas Smith 2023-01-20 16:31:58 -05:00
parent 5de6a86c16
commit 609e527c9a
2 changed files with 35 additions and 1 deletions

View file

@ -12,7 +12,14 @@ function PackageBottles() {
});
}, []);
if (isLoading) return <div>Loading...</div>;
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 available versions...</p></div>
</div>
</div>
);
if (!bottles) return null;

View file

@ -94,6 +94,33 @@
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: 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{