Skip to content
Snippets Groups Projects
Commit 8110e16f authored by Titus Netland's avatar Titus Netland
Browse files

New community and new item updates

parent 7f8add57
No related branches found
No related tags found
1 merge request!78Component styling
Pipeline #179352 failed
Stage: test
Hide whitespace changes
Inline Side-by-side
src/components/CommunityComponents/NewCommunityForm.vue
+ 73
− 73
View file @ 8110e16f
...@@ -10,41 +10,41 @@ ...@@ -10,41 +10,41 @@
<!-- Radio boxes --> <!-- Radio boxes -->
<div class="mt-6"> <div class="mt-6">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
id="radioBoxLabel" id="radioBoxLabel"
>Synlighet</label >Synlighet</label
> >
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
id="flexRadioOpen" id="flexRadioOpen"
value="Åpen" value="Åpen"
@change="checkRadioButton($event)" @change="checkRadioButton($event)"
checked checked
/> />
<label <label
class="form-check-label inline-block text-gray-800" class="form-check-label inline-block text-gray-800"
for="flexRadioOpen" for="flexRadioOpen"
id="radioBoxOpenLabel" id="radioBoxOpenLabel"
> >
Åpen Åpen
</label> </label>
</div> </div>
<div class="form-check"> <div class="form-check">
<input <input
class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" class="form-check-input appearance-none rounded-full h-4 w-4 border border-gray-300 bg-white checked:bg-primary-medium checked:border-primary-medium focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer"
type="radio" type="radio"
name="flexRadioDefault" name="flexRadioDefault"
id="flexRadioPrivate" id="flexRadioPrivate"
value="Privat" value="Privat"
@change="checkRadioButton($event)" @change="checkRadioButton($event)"
/> />
<label <label
class="form-check-label inline-block text-gray-800" class="form-check-label inline-block text-gray-800"
for="flexRadioPrivate" for="flexRadioPrivate"
id="radioBoxPrivateLabel" id="radioBoxPrivateLabel"
> >
Privat Privat
</label> </label>
...@@ -54,23 +54,23 @@ ...@@ -54,23 +54,23 @@
<!-- Title --> <!-- Title -->
<div class="mt-6" :class="{ error: v$.group.name.$errors.length }"> <div class="mt-6" :class="{ error: v$.group.name.$errors.length }">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
id="selectCategoryLabel" id="titleLabel"
>Gruppenavn</label >Gruppenavn</label
> >
<input <input
type="text" type="text"
id="title" id="title"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.group.name.$model" v-model="v$.group.name.$model"
required required
/> />
<!-- error message for title--> <!-- error message for title-->
<div <div
class="text-error" class="text-error"
v-for="(error, index) of v$.group.name.$errors" v-for="(error, index) of v$.group.name.$errors"
:key="index" :key="index"
> >
<div class="text-error text-sm"> <div class="text-error text-sm">
{{ error.$message }} {{ error.$message }}
...@@ -81,22 +81,22 @@ ...@@ -81,22 +81,22 @@
<!-- Place --> <!-- Place -->
<div class="mt-6" :class="{ error: v$.group.place.$errors.length }"> <div class="mt-6" :class="{ error: v$.group.place.$errors.length }">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
id="selectCategoryLabel" id="positionLabel"
>By/Sted</label >By/Sted</label
> >
<input <input
type="text" type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
v-model="v$.group.place.$model" v-model="v$.group.place.$model"
required required
/> />
<!-- error message for place--> <!-- error message for place-->
<div <div
class="text-error" class="text-error"
v-for="(error, index) of v$.group.place.$errors" v-for="(error, index) of v$.group.place.$errors"
:key="index" :key="index"
> >
<div class="text-error text-sm"> <div class="text-error text-sm">
{{ error.$message }} {{ error.$message }}
...@@ -108,22 +108,22 @@ ...@@ -108,22 +108,22 @@
<div class="mt-6" :class="{ error: v$.group.description.$errors.length }"> <div class="mt-6" :class="{ error: v$.group.description.$errors.length }">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
id="selectCategoryLabel" id="descriptionLabel"
>Beskrivelse</label >Beskrivelse</label
> >
<textarea <textarea
id="description" id="description"
rows="4" rows="4"
v-model="v$.group.description.$model" v-model="v$.group.description.$model"
class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light" class="block w-full px-4 py-2 mt-2 text-gray-700 placeholder-gray-500 bg-white border rounded-md dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 focus:border-primary-light dark:focus:border-primary-light focus:ring-opacity-40 focus:outline-none focus:ring focus:ring-primary-light"
required required
></textarea> ></textarea>
<!-- error message for description --> <!-- error message for description -->
<div <div
class="text-error" class="text-error"
v-for="(error, index) of v$.group.description.$errors" v-for="(error, index) of v$.group.description.$errors"
:key="index" :key="index"
> >
<div class="text-error text-sm"> <div class="text-error text-sm">
{{ error.$message }} {{ error.$message }}
...@@ -134,19 +134,19 @@ ...@@ -134,19 +134,19 @@
<!-- Images --> <!-- Images -->
<div class="mt-6"> <div class="mt-6">
<label <label
class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-xl font-medium text-gray-900 dark:text-gray-400"
id="imageLabel" id="imageLabel"
> >
Bilde Bilde
</label> </label>
<input <input
type="file" type="file"
ref="file" ref="file"
style="display: none" style="display: none"
@change="addImage" @change="addImage"
multiple multiple
accept="image/png, image/jpeg" accept="image/png, image/jpeg"
/> />
<!-- Button for adding an image --> <!-- Button for adding an image -->
...@@ -172,9 +172,9 @@ ...@@ -172,9 +172,9 @@
<!-- Save item button --> <!-- Save item button -->
<div class="flex justify-center mt-10 float-right"> <div class="flex justify-center mt-10 float-right">
<Button <Button
@click="saveClicked" @click="saveClicked"
id="saveButton" id="saveButton"
:text="'Lagre'" :text="'Lagre'"
> >
</Button> </Button>
</div> </div>
...@@ -202,32 +202,32 @@ export default { ...@@ -202,32 +202,32 @@ export default {
group: { group: {
name: { name: {
required: helpers.withMessage( required: helpers.withMessage(
() => "Navnt kan ikke være tom", () => "Navnt kan ikke være tom",
required required
), ),
max: helpers.withMessage( max: helpers.withMessage(
() => `Navnet kan være på max 50 tegn`, () => `Navnet kan være på max 50 tegn`,
maxLength(50) maxLength(50)
), ),
}, },
place: { place: {
required: helpers.withMessage( required: helpers.withMessage(
() => "Stedsnavn kan ikke være tom", () => "Stedsnavn kan ikke være tom",
required required
), ),
max: helpers.withMessage( max: helpers.withMessage(
() => `Stednavn kan være på max 50 tegn`, () => `Stednavn kan være på max 50 tegn`,
maxLength(50) maxLength(50)
), ),
}, },
description: { description: {
required: helpers.withMessage( required: helpers.withMessage(
() => "Beskrivelsen kan ikke være tom", () => "Beskrivelsen kan ikke være tom",
required required
), ),
max: helpers.withMessage( max: helpers.withMessage(
() => `Beskrivelsen kan inneholde max 200 tegn`, () => `Beskrivelsen kan inneholde max 200 tegn`,
maxLength(200) maxLength(200)
), ),
}, },
}, },
......
src/components/ItemComponents/NewItemForm.vue
+ 2
− 0
View file @ 8110e16f
...@@ -70,6 +70,7 @@ ...@@ -70,6 +70,7 @@
<div class="mb-6"> <div class="mb-6">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
id="selectCommunityLabel"
>Gruppe</label >Gruppe</label
> >
<select <select
...@@ -158,6 +159,7 @@ ...@@ -158,6 +159,7 @@
<div class="mb-6" :class="{ error: v$.item.address.$errors.length }"> <div class="mb-6" :class="{ error: v$.item.address.$errors.length }">
<label <label
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
id="addressLabel"
>Adresse</label >Adresse</label
> >
<input <input
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment