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