martyn/townsquare
1
0
Fork 0
mirror of https://github.com/bra1n/townsquare.git synced 2025-04-04 22:24:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed lint

Browse source
This commit is contained in:
Pingumask 2023-07-30 13:19:44 +00:00
parent c47124cae4
commit 855a0cf534
2 changed files with 63 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
src/components/modals/EditionModal.vue
View file

@ -3,10 +3,34 @@
<h3>{{ locale.modal.edition.title }}</h3> <h3>{{ locale.modal.edition.title }}</h3>
<ul> <ul>
<li class="tabs" :class="tab"> <li class="tabs" :class="tab">
<span class="tab" icon="book-open" @click="tab = 'official'" :class="{active: tab== 'official'}" >{{ locale.modal.edition.tab.official }}</span> <span
<span class="tab" icon="broadcast-tower" @click="tab = 'popular'" :class="{active: tab== 'popular'}" >{{ locale.modal.edition.tab.popular }}</span> class="tab"
<span class="tab" icon="theater-masks" @click="tab = 'teensyville'" :class="{active: tab== 'teensyville'}" >{{ locale.modal.edition.tab.teensyville }}</span> icon="book-open"
<span class="tab" icon="question" @click="tab = 'custom'" :class="{active: tab== 'custom'}" >{{ locale.modal.edition.tab.custom }}</span> @click="tab = 'official'"
:class="{ active: tab == 'official' }"
>{{ locale.modal.edition.tab.official }}</span
>
<span
class="tab"
icon="broadcast-tower"
@click="tab = 'popular'"
:class="{ active: tab == 'popular' }"
>{{ locale.modal.edition.tab.popular }}</span
>
<span
class="tab"
icon="theater-masks"
@click="tab = 'teensyville'"
:class="{ active: tab == 'teensyville' }"
>{{ locale.modal.edition.tab.teensyville }}</span
>
<span
class="tab"
icon="question"
@click="tab = 'custom'"
:class="{ active: tab == 'custom' }"
>{{ locale.modal.edition.tab.custom }}</span
>
</li> </li>
<template v-if="tab == 'official'"> <template v-if="tab == 'official'">
<ul class="editions"> <ul class="editions">
@ -25,8 +49,8 @@
{{ edition.name }} {{ edition.name }}
</li> </li>
</ul> </ul>
</template> </template>
<template v-if="tab =='popular'"> <template v-if="tab == 'popular'">
<ul class="scripts"> <ul class="scripts">
<li <li
v-for="(script, index) in editions.popular" v-for="(script, index) in editions.popular"
@ -37,7 +61,7 @@
</li> </li>
</ul> </ul>
</template> </template>
<template v-if="tab =='teensyville'"> <template v-if="tab == 'teensyville'">
<ul class="scripts"> <ul class="scripts">
<li <li
v-for="(script, index) in editions.teensyville" v-for="(script, index) in editions.teensyville"
@ -48,7 +72,7 @@
</li> </li>
</ul> </ul>
</template> </template>
<template v-if="tab =='custom'"> <template v-if="tab == 'custom'">
<div class="custom"> <div class="custom">
{{ locale.modal.edition.custom.introStart }} {{ locale.modal.edition.custom.introStart }}
<a href="https://script.bloodontheclocktower.com/" target="_blank">{{ <a href="https://script.bloodontheclocktower.com/" target="_blank">{{
@ -70,7 +94,6 @@
accept="application/json" accept="application/json"
@change="handleUpload" @change="handleUpload"
/> />
</div> </div>
<div class="button-group"> <div class="button-group">
<div class="button" @click="openUpload"> <div class="button" @click="openUpload">
@ -101,8 +124,7 @@ export default {
}, },
data: function() { data: function() {
return { return {
tab: 'official', tab: "official"
}; };
}, },
computed: { computed: {
@ -213,14 +235,14 @@ ul.editions {
padding: 0; padding: 0;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
gap:0.25rem; gap: 0.25rem;
border-bottom: 3px solid white; border-bottom: 3px solid white;
.tab { .tab {
text-align:center; text-align: center;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
height: 35px; height: 35px;
border: 1px solid grey; border: 1px solid grey;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
padding: 0.15em 1em; padding: 0.15em 1em;
cursor: pointer; cursor: pointer;
@ -230,7 +252,10 @@ ul.editions {
color: red; color: red;
} }
&.active { &.active {
background: linear-gradient(rgb(31, 101, 255) 0%, rgba(0, 0, 0, 0.5) 100%) background: linear-gradient(
rgb(31, 101, 255) 0%,
rgba(0, 0, 0, 0.5) 100%
);
} }
} }
} }
@ -241,30 +266,30 @@ ul.editions {
} }
input[type="file"] { input[type="file"] {
display: none; display: none;
} }
.scripts { .scripts {
margin-block: 1em; margin-block: 1em;
list-style-type: disc; list-style-type: disc;
font-size: 120%; font-size: 120%;
cursor: pointer; cursor: pointer;
// display: grid; // display: grid;
// grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); // grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
display: flex; display: flex;
gap: .75em 1em; gap: 0.75em 1em;
justify-content:flex-start; justify-content: flex-start;
li { li {
text-align: left; text-align: left;
list-style-type: none; list-style-type: none;
border: 1px solid white; border: 1px solid white;
border-radius: 100vmax; border-radius: 100vmax;
padding: 0.15em 1.5em; padding: 0.15em 1.5em;
background: linear-gradient(#4e4e4e, #040404); background: linear-gradient(#4e4e4e, #040404);
user-select: none; user-select: none;
&:hover { &:hover {
color: red; color: red;
}
} }
} }
}
</style> </style>

7
src/store/index.js
View file

@ -6,12 +6,7 @@ import players from "./modules/players";
import session from "./modules/session"; import session from "./modules/session";
import editionJSON from "../editions.json"; import editionJSON from "../editions.json";
import { import { locale, rolesJSON, jinxesJSON, fabledJSON } from "./modules/locale";
locale,
rolesJSON,
jinxesJSON,
fabledJSON
} from "./modules/locale";
Vue.use(Vuex); Vue.use(Vuex);