Change a bit of style

This commit is contained in:
Laurent
2025-03-20 08:34:14 +01:00
parent b21a2336d6
commit fd7bdace3b
4 changed files with 32 additions and 7 deletions

View File

@@ -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>

View File

@@ -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;
} }
} }

View File

@@ -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%;
} }

View File

@@ -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()}`;
} }