feat: better styling for campaign creation and inputs
This commit is contained in:
parent
fe67554460
commit
9630e47a2d
39
src/assets/components/inputs.less
Normal file
39
src/assets/components/inputs.less
Normal file
@ -0,0 +1,39 @@
|
||||
@import '../_mixins';
|
||||
@import '../_theme';
|
||||
|
||||
input[type='checkbox'] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0.6rem;
|
||||
.themed(background-color, @light-background, @dark-background);
|
||||
border: none;
|
||||
border-radius: 1rem;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:checked {
|
||||
.themed(background-color, @light-primary-500, @dark-primary);
|
||||
.themed(color, @light-background, @dark-background);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-bottom: solid 1px;
|
||||
.themed(border-bottom-color, @light-gray-10, @dark-gray-10);
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:focus {
|
||||
.themed(background-color, @light-primary-300, @dark-primary-300);
|
||||
outline: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
}
|
@ -10,6 +10,7 @@
|
||||
@import 'components/cards';
|
||||
@import 'components/highlight';
|
||||
@import 'components/links';
|
||||
@import 'components/inputs';
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
|
@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<h1>Création d’une campagne</h1>
|
||||
<form @submit.prevent="createCampaign" class="flex-col gap-2rem card" autocomplete="off">
|
||||
<label for="campaign-name" class="flex-col gap-1rem">Nom de la nouvelle campagne</label>
|
||||
<label for="campaign-name">Nom de la nouvelle campagne</label>
|
||||
<div>
|
||||
<input
|
||||
name="campaign-name"
|
||||
type="text"
|
||||
v-model="campaign.name"
|
||||
autocomplete="off"
|
||||
placeholder="Nom de la nouvelle campagne" />
|
||||
</div>
|
||||
|
||||
<label class="flex-col gap-1rem" for="players" autocomplete="off">Joueurs (2 à 10)</label>
|
||||
<select id="players" name="players" multiple v-model="campaign.players">
|
||||
<option v-for="user in users" :key="user.id" :value="user.id">
|
||||
{{ user.displayName() }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<fieldset class="player-selection">
|
||||
<legend class="highlight" for="players" autocomplete="off">Joueurs</legend>
|
||||
<div v-for="user in users" :key="user.id" class="player">
|
||||
<input type="checkbox" v-model="players" :name="user.id" :value="user.id" :id="user.id" />
|
||||
<label :for="user.id">{{ user.displayName() }}</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="buttons gap-1rem">
|
||||
<RouterLink :to="{ name: 'home' }" class="button faded">Annuler</RouterLink>
|
||||
<button type="submit">Envoyer</button>
|
||||
@ -31,6 +34,7 @@ import { type SimpleUser } from '@/models/User';
|
||||
|
||||
const pbStore = usePocketbaseStore();
|
||||
const users = ref<SimpleUser[]>([]);
|
||||
const players = ref([]);
|
||||
|
||||
const campaign = ref<NewCampaign>({
|
||||
name: null,
|
||||
@ -39,6 +43,7 @@ const campaign = ref<NewCampaign>({
|
||||
});
|
||||
|
||||
const createCampaign = () => {
|
||||
campaign.value.players = [...players.value];
|
||||
pbStore.campaigns.create(campaign.value).subscribe({
|
||||
next: () => {
|
||||
router.push({ name: 'home' });
|
||||
@ -57,7 +62,22 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '@/assets/main';
|
||||
|
||||
form {
|
||||
min-width: 90%;
|
||||
}
|
||||
|
||||
.player-selection {
|
||||
border: none;
|
||||
.card;
|
||||
.more;
|
||||
.flex-col;
|
||||
.gap-1rem;
|
||||
}
|
||||
|
||||
.player {
|
||||
.flex-row;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user