eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Partial Mobile Support (#156)

Browse Source 
* Add partial mobile support

* Remove file used for seperate PR

* Add mobile support for cookie consent, make dropdown close on page change
This commit is contained in:
Geometrically
2021-04-10 22:51:10 -07:00
committed by GitHub
parent 7d3ad5a639
commit c06c3d48d2
17 changed files with 638 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/dashboard.vue
View File

@@ -44,10 +44,11 @@
Privacy Settings
</nuxt-link>
</div>
<m-footer class="footer" />
<m-footer class="footer" hide-small />
</div>
<div class="content">
<NuxtChild />
<m-footer class="footer" hide-big centered />
</div>
</div>
</div>
@@ -79,7 +80,7 @@ export default {
</script>
<style lang="scss" scoped>
.footer {
.hideSmall {
padding-top: 0;
}
</style>

6
pages/dashboard/privacy.vue
View File

@@ -118,12 +118,6 @@ export default {
}
}
.consent-container {
overflow-x: auto;
max-height: 90vh;
@media screen and (min-width: 900px) {
max-height: 50vh;
}
.h1 {
font-size: 2rem;
font-weight: bold;

31
pages/dashboard/settings.vue
View File

@@ -232,35 +232,4 @@ section {
@extend %card;
padding: var(--spacing-card-md) var(--spacing-card-lg);
}
label {
display: flex;
span {
flex: 2;
padding-right: var(--spacing-card-lg);
}
input {
flex: 3;
height: fit-content;
}
input[type='button'] {
height: fit-content;
flex: 1;
}
input[type='button']:hover {
cursor: pointer;
}
div,
a {
text-align: center;
height: fit-content;
flex: 1;
}
div:hover {
cursor: pointer;
}
}
</style>

9
pages/mod/_id/version/_version/index.vue
View File

@@ -408,6 +408,7 @@ export default {
.version-header {
display: flex;
align-items: center;
flex-wrap: wrap;
h4,
span {
@@ -416,9 +417,13 @@ export default {
.buttons {
display: flex;
margin-left: auto;
align-self: flex-end;
.action {
@media screen and (min-width: 1024px) {
margin-left: auto;
}
.action:not(:first-child) {
margin: 0 0 0 0.5rem;
}
}

48
pages/mod/create.vue
View File

@@ -741,31 +741,6 @@ export default {
}
}
label {
display: flex;
span {
flex: 2;
padding-right: var(--spacing-card-lg);
}
input,
.multiselect,
.input-group {
flex: 3;
height: fit-content;
}
}
.input-group {
display: flex;
flex-direction: column;
* {
margin-bottom: var(--spacing-card-sm);
}
}
.textarea-wrapper {
display: flex;
flex-direction: column;
@@ -784,14 +759,31 @@ label {
grid-template:
'header header header' auto
'advert advert advert' auto
'essentials essentials mod-icon' auto
'essentials essentials essentials' auto
'mod-icon mod-icon mod-icon' auto
'game-sides game-sides game-sides' auto
'description description description' auto
'versions versions versions' auto
'extra-links license license' auto
'donations donations .' auto
'extra-links extra-links extra-links' auto
'license license license' auto
'donations donations donations' auto
'footer footer footer' auto
/ 4fr 1fr 4fr;
@media screen and (min-width: 1024px) {
grid-template:
'header header header' auto
'advert advert advert' auto
'essentials essentials mod-icon' auto
'game-sides game-sides game-sides' auto
'description description description' auto
'versions versions versions' auto
'extra-links license license' auto
'donations donations .' auto
'footer footer footer' auto
/ 4fr 1fr 4fr;
}
column-gap: var(--spacing-card-md);
row-gap: var(--spacing-card-md);
}

74
pages/mods.vue
View File

@@ -52,8 +52,9 @@
>
</Multiselect>
</div>
<div class="mobile-filters-button">
<button @click="toggleFiltersMenu">Filter</button>
<div class="labeled-control mobile-filters-button">
<h3>Filters</h3>
<button @click="toggleFiltersMenu">Open</button>
</div>
</div>
<pagination
@@ -92,7 +93,7 @@
</div>
</div>
<section v-if="pages.length > 1" class="search-bottom">
<div class="labeled-control">
<div class="per-page labeled-control">
<h3>Per Page</h3>
<Multiselect
v-model="maxResults"
@@ -113,19 +114,22 @@
@switch-page="onSearchChangeToTop"
></pagination>
</section>
<m-footer class="footer" hide-big centered />
</div>
<section id="filters" class="filters">
<section ref="filters" class="filters">
<div class="filters-wrapper">
<section class="filter-group">
<button class="filter-button-done" @click="toggleFiltersMenu">
Done
</button>
<div class="filter-clear-button">
<h3>Categories</h3>
<button class="iconified-button" @click="clearFilters">
<ExitIcon />
Clear filters
</button>
<div class="columns">
<button class="filter-button-done" @click="toggleFiltersMenu">
Close
</button>
<button class="iconified-button" @click="clearFilters">
<ExitIcon />
Clear filters
</button>
</div>
</div>
<SearchFilter
:active-filters="facets"
@@ -280,7 +284,7 @@
/>
</div>
<Advertisement ad-unit="square" size="250x250,200x200" />
<m-footer class="footer" />
<m-footer class="footer" hide-small />
</section>
</div>
</div>
@@ -584,9 +588,10 @@ export default {
}
},
toggleFiltersMenu() {
const filters = document.getElementById('filters')
const currentlyActive = filters.className === 'filters active'
filters.className = `filters${currentlyActive ? '' : ' active'}`
const currentlyActive = this.$refs.filters.className === 'filters active'
this.$refs.filters.className = `filters${
currentlyActive ? '' : ' active'
}`
document.body.style.overflow =
document.body.style.overflow !== 'hidden' ? 'hidden' : 'auto'
},
@@ -631,28 +636,26 @@ export default {
min-width: 200px;
}
.iconified-input {
width: 100%;
width: auto;
margin-right: auto;
}
.sort-paginate {
margin-left: 0.5rem;
margin-right: 0.5rem;
display: flex;
width: 100%;
width: auto;
.per-page {
margin-left: 0.5rem;
display: none;
}
}
@media screen and (min-width: 900px) {
@media screen and (min-width: 1050px) {
flex-flow: row;
.iconified-input {
width: auto;
}
.sort-paginate {
width: auto;
}
}
@media screen and (min-width: 1024px) {
@media screen and (min-width: 450px) {
.sort-paginate {
.per-page {
display: unset;
@@ -667,22 +670,32 @@ export default {
justify-content: flex-end;
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
padding: 0.25rem 1rem 0.25rem 1rem;
padding: 0 1rem;
select {
width: 100px;
margin-right: 20px;
}
.per-page {
display: none;
}
@media screen and (min-width: 550px) {
padding: 0.25rem 1rem 0.25rem 1rem;
.per-page {
display: unset;
}
}
}
.labeled-control {
h3 {
@extend %small-label;
margin-left: 0.5rem;
margin-left: 0.25rem;
}
}
.mobile-filters-button {
display: inline-block;
margin-left: 0.5rem;
button {
margin-top: 0;
height: 2.5rem;
@@ -691,7 +704,7 @@ export default {
}
// Hide button on larger screens where it's not needed
@media screen and (min-width: 900px) {
@media screen and (min-width: 1250px) {
display: none;
}
}
@@ -720,7 +733,7 @@ export default {
right: 0;
}
// Larger screens that don't need to collapse
@media screen and (min-width: 900px) {
@media screen and (min-width: 1250px) {
top: 0;
right: auto;
position: unset;
@@ -737,7 +750,7 @@ export default {
border-radius: var(--size-rounded-card);
}
}
@media screen and (min-width: 1024px) {
@media screen and (min-width: 1250px) {
width: 300px;
}
}
@@ -752,13 +765,8 @@ export default {
justify-content: space-between;
}
.filter-button-done {
display: block;
width: 100%;
}
// Large screens that don't collapse
@media screen and (min-width: 900px) {
@media screen and (min-width: 1250px) {
.filter-button-done {
display: none;
}

7
pages/user/_id.vue
View File

@@ -56,7 +56,7 @@
</div>
</div>
<Advertisement ad-unit="square" size="250x250,200x200" />
<m-footer class="footer" />
<m-footer class="footer" hide-small />
</div>
<div class="content">
<Advertisement ad-unit="banner" size="728x90,468x60" />
@@ -76,6 +76,7 @@
:is-modrinth="true"
/>
</div>
<m-footer class="footer" hide-big centered />
</div>
</div>
</div>
@@ -194,7 +195,9 @@ export default {
<style lang="scss" scoped>
.sidebar-l {
min-width: 21rem;
@media screen and (min-width: 1024px) {
min-width: 21rem;
}
.user-info {
@extend %row;