Beautification; mobile optimization

This commit is contained in:
Thomas Smith 2022-12-15 15:24:51 -05:00
parent d07f1804db
commit 08bda95f88
3 changed files with 44 additions and 6 deletions

View file

@ -13,7 +13,7 @@ function Bottles() {
return ( return (
<div> <div>
<p>{names.length} packages</p> <p>Showing {names.length} packages</p>
{names.map((name) => ( {names.map((name) => (
<Bottle key={name} name={name} /> <Bottle key={name} name={name} />
))} ))}
@ -27,9 +27,9 @@ function Bottles() {
]; ];
return ( return (
<div className="expand" onClick={() => toggleExpanded(!expanded)}> <div className="expand" onClick={() => toggleExpanded(!expanded)}>
<div className="expand-text"> <div className="expand-text one-box-down">
<h3>{name}</h3> <h3 className="display-3">{name}</h3>
<h4> <h4 className="display-6">
{versions.length} version{versions.length === 1 ? "" : "s"} bottled {versions.length} version{versions.length === 1 ? "" : "s"} bottled
</h4> </h4>
</div> </div>
@ -64,6 +64,9 @@ function Bottles() {
</tbody> </tbody>
</table> </table>
)} )}
<div className="one-box-down">
<hr />
</div>
</div> </div>
); );
} }

View file

@ -3,7 +3,19 @@
<section> <section>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col title-col" style="padding:1.4vw;">
<h1 class="display-1">Bottles</h1>
</div>
</div>
</div>
</section>
<hr>
<section>
<div class="container">
<div class="row">
<div class="col bottles-container">
{{- partial "bottle-grid.html" -}} {{- partial "bottle-grid.html" -}}
@ -16,10 +28,11 @@
table{ table{
color: #fff; color: #fff;
width: 100%;
} }
table, th, td { table, th, td {
border: 1px solid; border: 1px solid #949494;
font-family: "sono", sans-serif; font-family: "sono", sans-serif;
padding: 20px; padding: 20px;
} }
@ -28,6 +41,27 @@
cursor: pointer; cursor: pointer;
} }
@media screen and (max-width: 576px) {
.bottles-container{
padding: 0px !important;
}
table, th, td {
border: 1px solid #949494;
font-family: "sono", sans-serif;
padding: 10px;
font-size: 12px;
}
.title-col{
padding: 4vw !important;
}
}
</style> </style>
{{ end }} {{ end }}

View file

@ -0,0 +1 @@
<i class="icon-tea-logo-iconasset-1">