You've already forked AstralRinth
forked from xxxOFFxxx/AstralRinth
Make responsive (#8)
* Refactor ModResult to use CSS Grid * Mobile support for ModResult * Mobile navbar * Mobile fixes, get rid of x overflow * Mobile filter support * Fully responsive * Collapse categories view later * Mobile-first * Fix version selector width
This commit is contained in:
stairman06
@@ -1,7 +1,7 @@
|
||||
.columns {
|
||||
display: flex;
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
@for $i from 1 through 5 {
|
||||
.column-grow-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
|
||||
@@ -1,106 +1,104 @@
|
||||
<template>
|
||||
<div class="result rows">
|
||||
<img class="result-icon" :src="iconUrl" />
|
||||
<div class="column-grow-3">
|
||||
<div class="rows column-grow-2">
|
||||
<h2 class="mod-name">
|
||||
<a :href="pageUrl">{{ name }}</a>
|
||||
</h2>
|
||||
<p class="author">
|
||||
by <a :href="authorUrl">{{ author }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<p class="column-grow-1">
|
||||
{{ description }}
|
||||
<div class="rows result-name-author">
|
||||
<h2 class="mod-name">
|
||||
<a :href="pageUrl">{{ name }}</a>
|
||||
</h2>
|
||||
<p class="author">
|
||||
by <a :href="authorUrl">{{ author }}</a>
|
||||
</p>
|
||||
<div class="column-grow-1 columns result-infos">
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#3cdb36"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
<p>{{ downloads }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg viewBox="0 0 16 16" fill="#099fef">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
<p>{{ createdAt }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#e88d0d"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
|
||||
></path>
|
||||
<path
|
||||
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<p>{{ updatedAt }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#e8200d"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
|
||||
></path>
|
||||
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
||||
</svg>
|
||||
<p>{{ latestVersion }}</p>
|
||||
</div>
|
||||
|
||||
<div class="loaders columns">
|
||||
<img
|
||||
v-if="categories.includes('fabric')"
|
||||
src="https://fabricmc.net/assets/logo.png"
|
||||
alt="fabric"
|
||||
</div>
|
||||
<p class="result-summary">
|
||||
{{ description }}
|
||||
</p>
|
||||
<div class="column-grow-1 columns result-infos">
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#3cdb36"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
<p>{{ downloads }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg viewBox="0 0 16 16" fill="#099fef">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1zm1-3a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H2z"
|
||||
/>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M3.5 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5zm9 0a.5.5 0 0 1 .5.5V1a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 .5-.5z"
|
||||
/>
|
||||
</svg>
|
||||
<p>{{ createdAt }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#e88d0d"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
|
||||
></path>
|
||||
<path
|
||||
d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"
|
||||
></path>
|
||||
</svg>
|
||||
<p>{{ updatedAt }}</p>
|
||||
</div>
|
||||
<div class="result-image columns">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#e8200d"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
|
||||
></path>
|
||||
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
||||
</svg>
|
||||
<p>{{ latestVersion }}</p>
|
||||
</div>
|
||||
|
||||
<svg v-if="categories.includes('forge')" viewBox="0 0 90 46">
|
||||
<defs>
|
||||
<path
|
||||
id="a"
|
||||
fill="#1e2d44"
|
||||
d="M85.8 49.1l-4.5-5.5q-1.65-.1-3.55-.55-3.8-.95-4.85-2.65Q68.75 34.25 74 27q5.45-7.65 17.55-10.3l-37.8-1.9H100v-3.7H47.75v14q0 .65-1.9-11.7h-4.1v13l-1.9-12.3h-27.9q12.85 10.8 19.9 14.3 2.45 1.2 6.05 1.65 2.1.25 6.35.35 2.1.1 3.1.35 1.65.4 2.7 1.45 1.75 1.7 2 4 .3 2.4-1.2 4.3-1.2 1.65-4.35 2.6l-2.95.6L39 49.1v6.4h10.25l.3-6.3 8.95-6.3q-2.85 2.4-6.25 7.7-.95 1.5-1.7 3.5 1.7-1.45 4.9-2.3 3.3-.9 7.3-.9 3.9 0 7.2.9 3.25.85 4.95 2.3-.6-1.75-1.7-3.5-3.4-5.2-6.2-7.7l8.9 6.3.3 6.3h9.6v-6.4z"
|
||||
/>
|
||||
</defs>
|
||||
<use transform="translate(-10.95 -10.3)" xlink:href="#a" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="loaders columns">
|
||||
<img
|
||||
v-if="categories.includes('fabric')"
|
||||
src="https://fabricmc.net/assets/logo.png"
|
||||
alt="fabric"
|
||||
/>
|
||||
|
||||
<svg v-if="categories.includes('forge')" viewBox="0 0 90 46">
|
||||
<defs>
|
||||
<path
|
||||
id="a"
|
||||
fill="#1e2d44"
|
||||
d="M85.8 49.1l-4.5-5.5q-1.65-.1-3.55-.55-3.8-.95-4.85-2.65Q68.75 34.25 74 27q5.45-7.65 17.55-10.3l-37.8-1.9H100v-3.7H47.75v14q0 .65-1.9-11.7h-4.1v13l-1.9-12.3h-27.9q12.85 10.8 19.9 14.3 2.45 1.2 6.05 1.65 2.1.25 6.35.35 2.1.1 3.1.35 1.65.4 2.7 1.45 1.75 1.7 2 4 .3 2.4-1.2 4.3-1.2 1.65-4.35 2.6l-2.95.6L39 49.1v6.4h10.25l.3-6.3 8.95-6.3q-2.85 2.4-6.25 7.7-.95 1.5-1.7 3.5 1.7-1.45 4.9-2.3 3.3-.9 7.3-.9 3.9 0 7.2.9 3.25.85 4.95 2.3-.6-1.75-1.7-3.5-3.4-5.2-6.2-7.7l8.9 6.3.3 6.3h9.6v-6.4z"
|
||||
/>
|
||||
</defs>
|
||||
<use transform="translate(-10.95 -10.3)" xlink:href="#a" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="categories">
|
||||
@@ -375,10 +373,18 @@ export default {
|
||||
}
|
||||
|
||||
.result {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 80px auto;
|
||||
grid-template-rows: auto auto auto 30px;
|
||||
max-width: 100vw;
|
||||
margin-bottom: 10px;
|
||||
background: var(--color-bg);
|
||||
box-shadow: 0 2px 3px 1px var(--color-grey-2);
|
||||
|
||||
// Columns are larger to accomodate larger screens
|
||||
@media screen and (min-width: 1375px) {
|
||||
grid-template-columns: 120px auto;
|
||||
}
|
||||
}
|
||||
|
||||
.result * {
|
||||
@@ -388,26 +394,80 @@ export default {
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin: 10px 20px 10px 10px !important;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 5px !important;
|
||||
border-radius: 0.5rem;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 4;
|
||||
grid-column-start: 1;
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
margin: 10px 20px 10px 10px !important;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
// Larger screen, larger icon
|
||||
@media screen and (min-width: 1375px) {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.result-name-author {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.result-summary {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
max-height: 150px;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
.mod-name {
|
||||
align-self: flex-end;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.author {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 2px !important;
|
||||
align-self: flex-end;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
.result-infos {
|
||||
margin-top: 5px !important;
|
||||
display: grid;
|
||||
grid-template-columns: 115px 115px auto;
|
||||
grid-template-rows: 20px 20px;
|
||||
margin-top: 5px;
|
||||
grid-column: 2;
|
||||
align-self: flex-end;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
align-self: flex-start;
|
||||
|
||||
.columns:nth-child(2) {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.columns:nth-child(3) {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.result-image {
|
||||
p {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.result-image svg {
|
||||
@@ -426,7 +486,9 @@ export default {
|
||||
.categories {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: auto 20px 20px auto;
|
||||
margin: 0 0 5px 0;
|
||||
grid-column: 1;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.categories p {
|
||||
@@ -447,6 +509,8 @@ export default {
|
||||
|
||||
.loaders {
|
||||
align-items: center;
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
img {
|
||||
width: 15px;
|
||||
}
|
||||
@@ -457,4 +521,83 @@ export default {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Larger tablet-sized screens
|
||||
@media screen and (min-width: 900px) {
|
||||
.result {
|
||||
grid-template-columns: 90px auto;
|
||||
grid-template-rows: auto auto 30px;
|
||||
}
|
||||
|
||||
.result-infos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0;
|
||||
.result-image {
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loaders {
|
||||
svg {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.result-name-author {
|
||||
display: flex;
|
||||
margin-top: 0;
|
||||
.author {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.mod-name {
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.result-summary {
|
||||
max-height: 100px;
|
||||
font-size: 13pt;
|
||||
}
|
||||
}
|
||||
|
||||
// Larger screens
|
||||
@media screen and (min-width: 1375px) {
|
||||
.result {
|
||||
margin: 5px 0 5px 15px;
|
||||
grid-column: 1;
|
||||
grid-template-columns: 110px auto;
|
||||
}
|
||||
|
||||
.categories {
|
||||
margin: auto 0 5px auto;
|
||||
grid-row: 3;
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
.mod-name {
|
||||
font-size: 18pt;
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1500px) {
|
||||
.result-name-author {
|
||||
display: flex;
|
||||
min-height: 38px;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,14 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<aside>
|
||||
<input
|
||||
class="hamburger-button"
|
||||
alt="Open navigation menu"
|
||||
type="checkbox"
|
||||
@click="toggleNavMenu()"
|
||||
/>
|
||||
<!-- TODO: Probably shouldn't be a Unicode symbol -->
|
||||
<div class="hamburger-icon">☰</div>
|
||||
<div class="logo-wrapper">
|
||||
<img class="logo" src="~/assets/images/logo.svg" />
|
||||
<span class="name">modrinth</span>
|
||||
@@ -223,6 +231,10 @@ export default {
|
||||
localStorage.setItem('data-theme', theme)
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
},
|
||||
toggleNavMenu() {
|
||||
document.body.style.overflow =
|
||||
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -230,30 +242,37 @@ export default {
|
||||
<style lang="scss">
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1145px) {
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
aside {
|
||||
top: 0;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
max-height: 100vh;
|
||||
border-right: 1px solid var(--color-grey-2);
|
||||
border-right: 0;
|
||||
display: flex; // Flex here to safely expand navigation height
|
||||
flex-direction: column;
|
||||
max-width: 15%;
|
||||
min-width: 15%;
|
||||
width: 100vw;
|
||||
max-height: 100vh;
|
||||
background: var(--color-bg);
|
||||
z-index: 10;
|
||||
|
||||
.logo-wrapper {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 3.5rem;
|
||||
padding: 0 1.5rem;
|
||||
width: 100vw;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
|
||||
.logo {
|
||||
height: 2rem;
|
||||
width: auto;
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
.name {
|
||||
@@ -263,14 +282,53 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-button {
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 10px;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
top: 1.2rem;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 1.2rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hamburger-button:checked ~ nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
height: calc(100vh - 3.5rem);
|
||||
width: 100vw;
|
||||
left: -100vw;
|
||||
top: 3.5rem;
|
||||
transition: left 150ms;
|
||||
background: var(--color-bg);
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
|
||||
// Larger screens that still need a collapsed menu
|
||||
@media screen and (min-width: 900px) {
|
||||
width: 300px;
|
||||
left: -300px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.links {
|
||||
@@ -285,7 +343,6 @@ export default {
|
||||
|
||||
section {
|
||||
border-left: 4px solid var(--color-grey-3);
|
||||
margin-left: 0.5rem;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
@@ -309,6 +366,7 @@ export default {
|
||||
svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -350,6 +408,33 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1145px) {
|
||||
border-right: 1px solid var(--color-grey-2);
|
||||
max-width: 270px;
|
||||
|
||||
nav {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
padding: 0 0 0 1.5rem;
|
||||
width: 100%;
|
||||
.logo {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger-button,
|
||||
.hamburger-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
main {
|
||||
background-color: var(--color-grey-0);
|
||||
@@ -399,7 +484,18 @@ export default {
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1rem 3rem 1rem 2rem;
|
||||
// Default is for small phone sizes (like iPhone 5/SE)
|
||||
padding: 0.5rem 0.35rem 0.5rem 0.35rem;
|
||||
|
||||
// Larger phones
|
||||
@media screen and (min-width: 500px) {
|
||||
padding: 1rem 0.5rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1145px) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -413,4 +509,12 @@ export default {
|
||||
text-decoration: var(--color-grey-2) underline;
|
||||
}
|
||||
}
|
||||
|
||||
// Hack for very small (iPhone 5/SE) sized phones
|
||||
// an x overflow existed and I was unable to figure out why
|
||||
@media screen and (max-width: 360px) {
|
||||
body {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
158
pages/mods.vue
158
pages/mods.vue
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="content column-grow-4">
|
||||
<div class="content column-grow-5">
|
||||
<h2>Mods</h2>
|
||||
<section class="search-bar">
|
||||
<div class="iconified-input column-grow-2">
|
||||
@@ -24,24 +24,29 @@
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="iconified-select">
|
||||
<select id="sort-type" @input="changeSortType">
|
||||
<option value="relevance" selected>Relevance</option>
|
||||
<option value="downloads">Total Downloads</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="updated">Updated</option>
|
||||
</select>
|
||||
<div class="sort-paginate">
|
||||
<div class="iconified-select">
|
||||
<select id="sort-type" @input="changeSortType">
|
||||
<option value="relevance" selected>Relevance</option>
|
||||
<option value="downloads">Total Downloads</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="updated">Updated</option>
|
||||
</select>
|
||||
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mobile-filters-button">
|
||||
<button @click="toggleFiltersMenu">Filter...</button>
|
||||
</div>
|
||||
</div>
|
||||
<pagination
|
||||
:current-page="currentPage"
|
||||
@@ -96,10 +101,13 @@
|
||||
></pagination>
|
||||
</section>
|
||||
</div>
|
||||
<section class="filters">
|
||||
<section id="filters" class="filters">
|
||||
<!--#region filters -->
|
||||
<div class="filters-wrapper">
|
||||
<section class="filter-group">
|
||||
<button class="filter-button-done" @click="toggleFiltersMenu">
|
||||
Done
|
||||
</button>
|
||||
<button @click="clearFilters">Clear Filters</button>
|
||||
<h3>Categories</h3>
|
||||
<p
|
||||
@@ -411,7 +419,8 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
document.getElementById('sort-type').value = this.sortType
|
||||
document.getElementById('max-results').value = this.maxResults
|
||||
if (this.pages.length > 1)
|
||||
document.getElementById('max-results').value = this.maxResults
|
||||
},
|
||||
methods: {
|
||||
async fillInitialVersions() {
|
||||
@@ -566,6 +575,13 @@ export default {
|
||||
formatNumber(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||
},
|
||||
toggleFiltersMenu() {
|
||||
const filters = document.getElementById('filters')
|
||||
const currentlyActive = filters.className === 'filters active'
|
||||
filters.className = `filters${currentlyActive ? '' : ' active'}`
|
||||
document.body.style.overflow =
|
||||
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -576,6 +592,38 @@ export default {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: column;
|
||||
.iconified-input {
|
||||
width: 100%;
|
||||
}
|
||||
.iconified-select {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sort-paginate {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (min-width: 900px) {
|
||||
flex-flow: row;
|
||||
.iconified-input {
|
||||
width: auto;
|
||||
}
|
||||
.iconified-select {
|
||||
width: auto;
|
||||
margin-left: 1em;
|
||||
select {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
.sort-paginate {
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bottom {
|
||||
@@ -592,20 +640,39 @@ export default {
|
||||
min-height: 96vh;
|
||||
}
|
||||
|
||||
.mobile-filters-button {
|
||||
display: inline-block;
|
||||
button {
|
||||
background: var(--color-bg);
|
||||
border: 2px solid var(--color-grey-3);
|
||||
border-radius: var(--size-rounded-sm);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
// Hide button on larger screens where it's not needed
|
||||
@media screen and (min-width: 900px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
overflow-y: auto;
|
||||
background-color: var(--color-bg);
|
||||
border-left: 1px solid var(--color-grey-2);
|
||||
top: 0;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
right: -100vw;
|
||||
max-height: 100vh;
|
||||
min-width: 15%;
|
||||
max-width: 15%;
|
||||
}
|
||||
overflow-y: auto;
|
||||
top: 3.5rem;
|
||||
height: calc(100vh - 3.5rem);
|
||||
transition: right 150ms;
|
||||
flex-shrink: 0; // Stop shrinking when page contents change
|
||||
|
||||
.filters-wrapper {
|
||||
padding: 0 1.5rem;
|
||||
.filters-wrapper {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #718096;
|
||||
@@ -615,10 +682,28 @@ export default {
|
||||
margin-top: 1.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Larger screens that don't need to collapse
|
||||
@media screen and (min-width: 900px) {
|
||||
position: sticky;
|
||||
width: 215px;
|
||||
padding-right: 1rem;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1145px) {
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&.active {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
margin-top: 2em;
|
||||
margin-top: 1em;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
@@ -635,6 +720,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.filter-button-done {
|
||||
display: block;
|
||||
}
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -650,6 +739,7 @@ export default {
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@@ -664,6 +754,18 @@ export default {
|
||||
color: var(--color-text);
|
||||
border-left: 4px solid var(--color-brand);
|
||||
}
|
||||
|
||||
// Large screens that don't collapse
|
||||
@media screen and (min-width: 900px) {
|
||||
.filter-button-done {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop
|
||||
@media screen and (min-width: 1145px) {
|
||||
margin-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
.iconified-select {
|
||||
|
||||
Reference in New Issue
Block a user