Skip to content
This repository has been archived by the owner on May 10, 2024. It is now read-only.

Commit

Permalink
style: improve style of registration, creation of election form pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@tassiluca
tassiluca committed Jan 31, 2024
1 parent 32aa328 commit c699c38
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 66 deletions.
101 changes: 39 additions & 62 deletions frontend/src/views/CreateElectionView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,79 +182,56 @@ async function onFormSubmit() {
<template>
<Breadcrumb :paths="[{name: 'Elections', link: '/elections'}, {name: 'Create', link: '/elections/create'}]" />
<PageTitle title="Create Election" />
<Form @submit="onFormSubmit" :response="response" submit-btn-name="Create election">
<template v-slot:body>
<div class="row gy-5 row-cols-lg-2 row-cols-1 mx-auto mt-1">
<div class="col" v-for="prop in Object.keys(copyWithoutElement(properties, 'choices'))" :key="prop">
<div class="p-3 border bg-light">
<FormInput :helper="properties[prop]['help']"
:input-id="`input-${prop}`"
:label="properties[prop]['label']"
:pre="properties[prop]['pre']">
<input v-model="references[prop].value"
:type="properties[prop]['type']" class="form-control"
:placeholder="properties[prop]['placeholder']" required
:autocomplete="properties[prop]['autocomplete']"/>
</FormInput>
<div class="container-sm text-center">
<Form @submit="onFormSubmit" :response="response" submit-btn-name="Create election">
<template v-slot:body>
<div class="row gy-5 row-cols-lg-2 row-cols-1 mx-auto mt-1">
<div class="col" v-for="prop in Object.keys(copyWithoutElement(properties, 'choices'))" :key="prop">
<div class="p-3 border bg-light">
<FormInput :helper="properties[prop]['help']"
:input-id="`input-${prop}`"
:label="properties[prop]['label']"
:pre="properties[prop]['pre']">
<input v-model="references[prop].value"
:type="properties[prop]['type']" class="form-control"
:placeholder="properties[prop]['placeholder']" required
:autocomplete="properties[prop]['autocomplete']"/>
</FormInput>
</div>
</div>
</div>
</div>
<div class="col-10 mx-auto mt-5 text-center">
<h2 class="text-primary">Election choices</h2>
</div>
<div class="row gy-5 row-cols-lg-3 row-cols-2 mx-auto my-2">
<div class="col" v-for="idx of Array(references['choices'].value.length).keys()" :key="`choice-${idx}`">
<div class="p-3 border bg-light">
<FormInput :helper="properties['choices']['help']"
:input-id="`choices-input-${idx}`"
:label="`${properties['choices']['label']} ${idx}`"
:pre="properties['choices']['pre']">
<input v-model="references['choices'].value[idx].value"
:type="properties['choices']['type']" class="form-control"
:placeholder="`${properties['choices']['placeholder']} ${idx}`" required
:autocomplete="`${properties['choices']['autocomplete']} ${idx}`"/>
</FormInput>
<div class="col-10 mx-auto mt-5 text-center">
<h2 class="text-primary">Election choices</h2>
</div>
<div class="row gy-5 row-cols-lg-3 row-cols-2 mx-auto my-2">
<div class="col" v-for="idx of Array(references['choices'].value.length).keys()" :key="`choice-${idx}`">
<div class="p-3 border bg-light">
<FormInput :helper="properties['choices']['help']"
:input-id="`choices-input-${idx}`"
:label="`${properties['choices']['label']} ${idx}`"
:pre="properties['choices']['pre']">
<input v-model="references['choices'].value[idx].value"
:type="properties['choices']['type']" class="form-control"
:placeholder="`${properties['choices']['placeholder']} ${idx}`" required
:autocomplete="`${properties['choices']['autocomplete']} ${idx}`"/>
</FormInput>
</div>
</div>
</div>
</div>
<div class="my-5">
<ul>
<li>
<button id="addElection" class="btn btn-xs btn-primary" @click.prevent="addElection" type="button">+</button>
<button id="removeElection" v-if="Object.keys(references['choices'].value).length > 2" class="btn btn-xs btn-primary" @click.prevent="removeElection" type="button">-</button>
</li>
</ul>
</div>
</template>
</Form>
<div class="col-12 d-flex justify-content-center align-items-center my-5">
<button id="addElection" class="btn btn-primary" @click.prevent="addElection" type="button">Add choice</button>
<button id="removeElection" v-if="Object.keys(references['choices'].value).length > 2" class="btn btn-primary ms-2" @click.prevent="removeElection" type="button">Remove Choice</button>
</div>
</template>
</Form>
</div>
</template>

<style scoped>
ul {
list-style-type: none;
li {
padding-right: 20px;
a {
color: #E6308A;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #E6308A;
opacity: 0.7;
transition: 0.5s;
text-decoration: underline;
}
}
}
div {
border-radius: 15px;
}
.btn-xs {
margin-right: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
Expand Down
13 changes: 10 additions & 3 deletions frontend/src/views/RegisterView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import FormInput from '@/components/forms/FormInputComponent.vue'
import { useForm } from 'vee-validate'
import * as yup from 'yup'
import {type UserCreation, useUserStore} from "@/stores/user";
import BreadcrumbComponent from "@/components/BreadcrumbComponent.vue";
import Breadcrumb from "@/components/BreadcrumbComponent.vue";
const response = ref({})
Expand Down Expand Up @@ -96,7 +98,8 @@ const properties: {
</script>

<template>
<div class="container">
<Breadcrumb :paths="[{name: 'User registration', link: '/register'}]" />
<div class="container-sm">
<PageTitle title="User registration" />
<Form @submit="onSubmit" :response="response" submit-btn-name="Create an user">
<template v-slot:body>
Expand All @@ -112,7 +115,7 @@ const properties: {
:autocomplete="properties[prop]['autocomplete']"
:placeholder="properties[prop]['placeholder']">
</FormInput>
<span>{{ errors[prop] }}</span>
<span class="validation">{{ errors[prop] }}</span>
</div>
</div>
</div>
Expand All @@ -121,4 +124,8 @@ const properties: {
</div>
</template>


<style scoped>
span.validation {
color: #c70224;
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/views/UserAreaView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<Breadcrumb :paths="[{name: 'User area', link: '/user'}]" />
<PageTitle title="User area"/>
<div v-if="data" class="row gy-5 row-cols-md-2 row-cols-1 mx-auto my-2">
<div v-if="data" class="container-sm row gy-5 row-cols-md-2 row-cols-1 mx-auto my-2">
<div class="col" v-for="property in Object.keys(newValueRules)" :key="property">
<div class="p-2 border bg-light">
<div class="card col-10 mx-auto">
Expand Down

0 comments on commit c699c38

Please sign in to comment.