Change a bit of style
This commit is contained in:
@@ -3,6 +3,13 @@
|
|||||||
let value;
|
let value;
|
||||||
const emit = defineEmits(['update:value']);
|
const emit = defineEmits(['update:value']);
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
placeholder: {
|
||||||
|
type: [String],
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Method to handle the update
|
// Method to handle the update
|
||||||
const updateValue = (event : any) => {
|
const updateValue = (event : any) => {
|
||||||
emit('update:value', event.target.value);
|
emit('update:value', event.target.value);
|
||||||
@@ -11,7 +18,7 @@ const updateValue = (event : any) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<input class="input-field" :value="value" @input="updateValue" />
|
<input :placeholder="placeholder" class="input-field" :value="value" @input="updateValue" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
|
import type {TimeStamp} from "@/models/TimeStamp.ts";
|
||||||
|
import type {Attendee} from "@/models/Attendee.ts";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* I hate JavaScript and TypeScript with every single inch of my body
|
* I hate JavaScript and TypeScript with every single inch of my body
|
||||||
*/
|
*/
|
||||||
export class CustomMap<K, V> extends Map<K, V> {
|
export class CustomMap extends Map<TimeStamp, Attendee> {
|
||||||
has(obj: K): boolean {
|
has(obj: TimeStamp): boolean {
|
||||||
|
obj.getValue()
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import Calendar from "@/components/Calendar.vue";
|
import Calendar from "@/components/Calendar.vue";
|
||||||
import TextBlock from "@/components/TextBlock.vue";
|
import TextBlock from "@/components/TextBlock.vue";
|
||||||
import NavLink from "@/components/NavLink.vue";
|
import NavLink from "@/components/NavLink.vue";
|
||||||
|
import InputField from "@/components/InputField.vue";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -12,6 +13,7 @@ import NavLink from "@/components/NavLink.vue";
|
|||||||
<h1>Create an <span class="colored-text">event</span></h1>
|
<h1>Create an <span class="colored-text">event</span></h1>
|
||||||
</TextBlock>
|
</TextBlock>
|
||||||
<div class="event-form">
|
<div class="event-form">
|
||||||
|
<InputField placeholder="Event name"/>
|
||||||
<Calendar class="calendar"/>
|
<Calendar class="calendar"/>
|
||||||
<NavLink name="Create" description="Create" class="create-button"></NavLink>
|
<NavLink name="Create" description="Create" class="create-button"></NavLink>
|
||||||
</div>
|
</div>
|
||||||
@@ -34,11 +36,17 @@ import NavLink from "@/components/NavLink.vue";
|
|||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-field{
|
||||||
|
height: 50px;
|
||||||
|
font-size: calc(0.4 * 50px);
|
||||||
|
min-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link
|
.nav-link
|
||||||
{
|
{
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 70px;
|
height: 50px;
|
||||||
min-height: 70px;
|
min-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MEDIA QUERIES */
|
/* MEDIA QUERIES */
|
||||||
@@ -57,11 +65,17 @@ import NavLink from "@/components/NavLink.vue";
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-field
|
||||||
|
{
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
||||||
.title, .event-form {
|
.title, .event-form, .input-field, .nav-link {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ function extractToken() : string {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(timestamp : number) : String{
|
function formatDate(timestamp : number) : String{
|
||||||
let date = DateHelper.toDate(timestamp)
|
let date = DateHelper.toDate(timestamp);
|
||||||
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
|
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user