Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-07-02 10:28:42 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(responsive): make a application a bit more responsive

Browse source
This commit is contained in:
Kentai Radiquum 2024-05-16 04:00:20 +05:00
parent 0ba93f96bc
commit ec894ae9b1
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 132 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

78
frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
View file

@ -6,9 +6,18 @@ export default function ReleasesOverview(props) {
return (
<>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<nav
className="l"
style={{
justifyContent: "space-between",
alignItems: "center",
flexWrap: "wrap",
maxWidth: "calc(100% - 12rem)",
margin: "auto",
}}
>
{props.chips && (
<div>
<nav className="scroll">
{props.chips.map((item) => {
return (
<button
@ -22,10 +31,10 @@ export default function ReleasesOverview(props) {
</button>
);
})}
</div>
</nav>
)}
<div>
<div className="secondary-container round tiny-padding">
<button
className="circle transparent"
onClick={() => {
@ -43,11 +52,68 @@ export default function ReleasesOverview(props) {
<i className={view == "grid" ? "fill" : ""}>cards</i>
</button>
</div>
</div>
</nav>
<nav
className="s m"
style={{
justifyContent: "space-between",
alignItems: "center",
flexWrap: "wrap",
margin: "auto",
maxWidth: "100%",
}}
>
{props.chips && (
<nav className="scroll" style={{ maxWidth: "100%" }}>
{props.chips.map((item) => {
return (
<button
key={item.list}
className={`chip ${props.list == item.list ? "fill" : ""}`}
onClick={() => {
props.setList(item.list);
}}
>
<span>{item.title}</span>
</button>
);
})}
</nav>
)}
<div className="secondary-container round tiny-padding">
<button
className="circle transparent"
onClick={() => {
setView("list");
}}
>
<i className={view == "list" ? "fill" : ""}>view_agenda</i>
</button>
<button
className="circle transparent"
onClick={() => {
setView("grid");
}}
>
<i className={view == "grid" ? "fill" : ""}>cards</i>
</button>
</div>
</nav>
{props.releases ? (
<>
<div className="grid">
<div
style={{
display: "grid",
gridTemplateColumns: "repeat( auto-fill, 300px )",
gap: "1rem",
justifyContent: "center",
justifyItems: "center",
paddingTop: "1rem",
}}
>
<CardList data={props.releases} view={view} />
</div>