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

47
components/layout/ModPage.vue
View File

@@ -74,20 +74,20 @@
:to="'/mod/' + (mod.slug ? mod.slug : mod.id)"
class="tab"
>
Description
<span>Description</span>
</nuxt-link>
<nuxt-link
:to="'/mod/' + (mod.slug ? mod.slug : mod.id) + '/versions'"
class="tab"
>
Versions
<span>Versions</span>
</nuxt-link>
<nuxt-link
v-if="currentMember"
:to="'/mod/' + mod.id + '/settings'"
class="tab"
>
Settings
<span>Settings</span>
</nuxt-link>
<a
v-if="mod.wiki_url"
@@ -96,7 +96,7 @@
class="tab"
>
<ExternalIcon />
Wiki
<span>Wiki</span>
</a>
<a
v-if="mod.issues_url"
@@ -105,7 +105,7 @@
class="tab"
>
<ExternalIcon />
Issues
<span>Issues</span>
</a>
<a
v-if="mod.source_url"
@@ -114,7 +114,7 @@
class="tab"
>
<ExternalIcon />
Source
<span>Source</span>
</a>
<a
v-if="mod.discord_url"
@@ -123,7 +123,7 @@
class="tab"
>
<ExternalIcon />
Discord
<span>Discord</span>
</a>
<div class="filler" />
</div>
@@ -476,7 +476,11 @@ export default {
<style lang="scss" scoped>
.header {
@extend %row;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
@extend %card-spaced-b;
width: 100%;
.icon {
@@ -508,12 +512,24 @@ export default {
}
}
.buttons {
@extend %column;
@extend %row;
margin: var(--spacing-card-md) var(--spacing-card-md) var(--spacing-card-md)
auto;
0;
button {
margin: 0.2rem 0 0 0;
button,
a {
margin: 0.2rem 0 0 0.2rem;
}
}
@media screen and (min-width: 1024px) {
align-items: unset;
text-align: unset;
flex-direction: row;
.buttons {
flex-direction: column;
margin-left: auto;
}
}
}
@@ -524,9 +540,12 @@ export default {
}
.mod-info {
width: 30rem;
height: auto;
margin-left: var(--spacing-card-lg);
@media screen and (min-width: 1024px) {
width: 30rem;
margin-left: var(--spacing-card-lg);
}
.section {
padding: var(--spacing-card-sm);