Improve the calendar datetime "icon" componenent

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-10 10:05:47 +02:00
parent 552467b523
commit 1a0a31255f
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 71 additions and 17 deletions

View file

@ -12,9 +12,17 @@
</docs>
<template>
<time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
<span class="month">{{ month }}</span>
<time
class="datetime-container"
:class="{ small }"
:datetime="dateObj.getUTCSeconds()"
:style="`--small: ${smallStyle}`"
>
<div class="datetime-container-header" />
<div class="datetime-container-content">
<span class="day">{{ day }}</span>
<span class="month">{{ month }}</span>
</div>
</time>
</template>
<script lang="ts">
@ -26,6 +34,7 @@ export default class DateCalendarIcon extends Vue {
* `date` can be a string or an actual date object.
*/
@Prop({ required: true }) date!: string;
@Prop({ required: false, default: false }) small!: boolean;
get dateObj(): Date {
return new Date(this.$props.date);
@ -38,28 +47,41 @@ export default class DateCalendarIcon extends Vue {
get day(): string {
return this.dateObj.toLocaleString(undefined, { day: "numeric" });
}
get smallStyle(): string {
return this.small ? "1.2" : "2";
}
}
</script>
<style lang="scss" scoped>
time.datetime-container {
background: $backgrounds;
border: 1px solid $borders;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
/*height: 50px;*/
width: 50px;
padding: 8px;
text-align: center;
overflow-y: hidden;
overflow-x: hidden;
align-items: stretch;
width: calc(40px * var(--small));
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
height: calc(40px * var(--small));
background: #fff;
.datetime-container-header {
height: calc(10px * var(--small));
background: #f3425f;
}
.datetime-container-content {
height: calc(30px * var(--small));
}
span {
display: block;
font-weight: 600;
color: $violet-3;
&.month {
color: $danger;
padding: 2px 0;
font-size: 12px;
line-height: 12px;
@ -67,9 +89,8 @@ time.datetime-container {
}
&.day {
color: $violet-3;
font-size: 20px;
line-height: 20px;
font-size: calc(1rem * var(--small));
line-height: calc(1rem * var(--small));
}
}
}

View file

@ -7,11 +7,14 @@
{{ displayNameAndUsername(participation.actor) }}
</div>
<div class="list-card">
<div class="date-component">
<date-calendar-icon
:date="participation.event.beginsOn"
:small="true"
/>
</div>
<div class="content">
<div class="title-wrapper">
<div class="date-component">
<date-calendar-icon :date="participation.event.beginsOn" />
</div>
<router-link
:to="{
name: RouteName.EVENT,

View file

@ -4,7 +4,7 @@
<div class="content column">
<div class="title-wrapper">
<div class="date-component">
<date-calendar-icon :date="event.beginsOn" />
<date-calendar-icon :date="event.beginsOn" :small="true" />
</div>
<router-link
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"

View file

@ -3,7 +3,11 @@
class="event-minimalist-card-wrapper"
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
>
<date-calendar-icon class="calendar-icon" :date="event.beginsOn" />
<date-calendar-icon
class="calendar-icon"
:date="event.beginsOn"
:small="true"
/>
<div class="title-info-wrapper">
<p class="event-minimalist-title">{{ event.title }}</p>
<p v-if="event.physicalAddress" class="has-text-grey">

View file

@ -1570,4 +1570,30 @@ a.participations-link {
border: 0;
cursor: auto;
}
.wrapper,
.intro-wrapper {
display: flex;
flex-direction: column;
}
.intro-wrapper {
position: relative;
padding: 0 16px 16px;
background: #fff;
.date-calendar-icon-wrapper {
margin-top: 16px;
height: 0;
display: flex;
align-items: flex-end;
align-self: flex-start;
margin-bottom: 7px;
margin-left: 0rem;
}
}
.title {
margin: 0;
font-size: 2rem;
}
</style>