Improve the calendar datetime "icon" componenent

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Event/DateCalendarIcon.vue

@@ -12,9 +12,17 @@
 </docs>
 
 <template>
-  <time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
+  <time
-    <span class="month">{{ month }}</span>
+    class="datetime-container"
-    <span class="day">{{ day }}</span>
+    :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: calc(1rem * var(--small));
-      font-size: 20px;
+      line-height: calc(1rem * var(--small));
-      line-height: 20px;
     }
   }
 }

js/src/components/Event/EventListCard.vue

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

js/src/components/Event/EventListViewCard.vue

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

js/src/components/Event/EventMinimalistCard.vue

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

js/src/views/Event/Event.vue

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