diff --git a/css/main.css b/css/main.css
index b64f0e548ef7c54febdd4ecffb1245b454c18c7c..59d09837f955f35b010ec2c88640c6c8ae3099a7 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,11 +1,15 @@
+:root{
+ --color-event-text: var(--color-grey-4);
+ --color-event-icon: var(--color-icon);
+ --color--event-title: var(--color-title);
+ --font-family-event-title-h1: var(--font-family-title-h1);
+}
+
/* html {
font-size: 62.5%;
background-color: #f2f2f2;
} */
-solid-event .solid-event {
- font-family: Helvetica, sans-serif;
-}
solid-event section {
position: relative;
}
@@ -13,8 +17,8 @@ solid-event solid-router {
display: none;
}
solid-event p,
-solid-event solid-display {
- font-size: 1.4rem;
+solid-event .eventdetail > solid-display{
+ font-size: 1.6rem;
text-align: center
}
solid-event solid-display label {
@@ -77,9 +81,9 @@ solid-event .newtype input[type="submit"] {
box-shadow: 0px 0px 4px 1px #CACACA;
display: inline-block;
}
-solid-event .red-button {
- background-color: var(--color-primary);
- color: white;
+solid-event .add-button {
+ background-color: var(--color-add-button-background);
+ color: var(--color-add-button);
}
solid-event .thin-button {
background-color: white;
@@ -99,11 +103,7 @@ solid-event .thin-button.mdi:before {
font-size: 1.5rem;
}
solid-event .page-title {
- font-size: 3rem;
text-align: center;
- text-transform: uppercase;
- color: var(--color-primary);
- font-weight: 700;
margin: 15px 0 40px;
}
solid-event .newevent-link {
@@ -173,7 +173,7 @@ solid-event .events solid-form solid-form-dropdown-label select {
solid-event .events solid-form label {
height: 15px;
}
-solid-event solid-display {
+solid-event .eventdetail > solid-display {
width: 100%;
display: inline-block;
}
@@ -183,6 +183,7 @@ solid-event .listevents .headline {
solid-event .listevents>solid-display {
display: inline-block;
margin-top: -35px;
+ width: 100%;
}
solid-event solid-display div {
display: flex;
@@ -191,9 +192,9 @@ solid-event solid-display div {
max-width: 1050px;
margin: auto;
}
-solid-event solid-display solid-display {
+solid-event .listevents solid-display.events > div > solid-display {
width: 320px;
- height: 550px;
+ min-height: 550px;
margin: 15px;
}
solid-event .events solid-display > div,
@@ -205,11 +206,13 @@ solid-event .events solid-display > label {
solid-event .events solid-display div,
solid-event .events solid-display label {
flex-direction: column;
+ padding-bottom: 1em;
+ box-sizing: border-box;
}
solid-event .listevents [name="name"] {
font-size: 1.8rem;
font-weight: 600;
- color: var(--color-primary);
+ color: var(--color-event-icon);
text-transform: uppercase;
line-height: 3rem;
}
@@ -231,7 +234,7 @@ solid-event .events event-display-starttime-events .nextevent-startdate {
flex-direction: row;
justify-content: center;
line-height: 2rem;
- color: #4f4f4f;
+ font-weight: bold;
}
solid-event .event-type {
background-color: var(--color-add-button-background);
@@ -245,7 +248,7 @@ solid-event .event-type {
height: 17px;
}
solid-display-value[name="shortDescription"] {
- color: #5e5e5e;
+ padding: 0 1em;
}
solid-event [href=""]::before {
display: none;
@@ -254,30 +257,31 @@ solid-event event-display-link-event {
padding: 10px 0 0 0;
display: block;
}
-solid-event event-display-link-event .mdi::before{
- color: var(--color-primary);
+solid-event a.mdi::before{
+ color: var(--color-event-icon);
}
solid-event .event-place-name {
height: 20px;
}
solid-event a {
- color: #4f4f4f
+ font-weight: bold;
+ color: var(--color-event-text);
}
-solid-event .eventdetail solid-display div {
+solid-event .eventdetail > solid-display > div {
flex-direction: column;
width: 90%;
margin: 5px auto;
max-width: 1000px;
}
-solid-event .eventdetail [name="name"] {
+solid-event .eventdetail [name="name"].event-title {
font-size: 3rem;
text-align: center;
text-transform: uppercase;
- color: var(--color-primary);
+ color: var(--color--event-title);
font-weight: 700;
margin: 35px 0 40px;
display: block;
- font-family: RefrigeratorDelxW01Bold;
+ font-family: var(--font-family-event-title-h1);
}
solid-event .eventdetail [name="info"] {
display: flex;
@@ -330,7 +334,7 @@ solid-event .eventdetail [name="longDescription"] p {
text-align: left;
}
solid-event .eventdetail .mdi:before {
- color: var(--color-primary);
+ color: var(--color-event-icon);
}
solid-event .eventdetail solid-link.mdi:before {
color: #fff;
@@ -477,4 +481,4 @@ solid-event .newtype solid-link {
solid-event .newtype input[type="submit"] {
margin: 25px 0;
}
-}
\ No newline at end of file
+}
diff --git a/locales/en.json b/locales/en.json
index b499970724537c68fdbfc07dd05816a277edd348..e00c95236c2455f13858409d077178d00083f195 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -16,6 +16,11 @@
"button.publish_event": "Publish",
"title.search_event": "Research an event",
"label.delete_event": "Delete event",
- "confirm.delete_event": "Are you sure you wish to delete this event ?"
+ "confirm.delete_event": "Are you sure you wish to delete this event ?",
+ "label.event_name": "Event name",
+ "label.type_of_event": "Type of events",
+ "label.start_date": "Start date",
+ "label.start_time": "Start time",
+ "label.linked_circle": "Linked circle"
}
-
\ No newline at end of file
+
diff --git a/locales/fr.json b/locales/fr.json
index 267bbef342af1b7be14580fa7f62b0c55ddab6c1..3244e30188b2d90d5cdfcdc85cc3cc40780d51f2 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -16,6 +16,11 @@
"button.publish_event": "Publier",
"title.search_event": "Rechercher un événement",
"label.delete_event": "Supprimer l'événement",
- "confirm.delete_event": "Etes-vous sur de vouloir supprimer cet événement ?"
+ "confirm.delete_event": "Etes-vous sur de vouloir supprimer cet événement ?",
+ "label.event_name": "Nom de l'événement",
+ "label.type_of_event": "Type d'événement",
+ "label.start_date": "Date de début",
+ "label.start_time": "Heure de début",
+ "label.linked_circle": "Cercle associé"
}
-
\ No newline at end of file
+
diff --git a/sib-event.js b/sib-event.js
index 935d850fac9174b4368e2b51122bb6fa174e8a87..10da32099cf1ecd080acb2cc909c1e082ad94d80 100644
--- a/sib-event.js
+++ b/sib-event.js
@@ -62,7 +62,7 @@ export class SolidEvent extends SolidTemplateElement {
<div class="headline">
<h1>${this.localize('title.search_event')}</h1>
<solid-link class="newevent-link" next="${idPrefix}-newevent">
- <div class="mdi mdi-plus-circle-outline button red-button">
+ <div class="mdi mdi-plus-circle-outline button add-button">
${this.localize('label.post_event')}
</div>
</solid-link>
@@ -124,13 +124,17 @@ export class SolidEvent extends SolidTemplateElement {
</section>
<section data-view="${idPrefix}-eventdetail" id="${idPrefix}-eventdetail" class="eventdetail" hidden="">
<solid-display
- fields ="name, info(img, infotext(location, time(startDate,startTime), type, shortDescription, link, @id)), longDescription"
+ fields ="name, info(img, infotext(location, time(startDate,startTime), type, circle, shortDescription, link, @id)), longDescription"
bind-resources
+ class-name="event-title"
widget-img ='solid-display-img'
widget-startDate="event-display-startdate-events"
widget-startTime="event-display-starttime-events"
widget-type="event-display-type"
widget-id="event-delete"
+ widget-circle="solid-multiple-label"
+ multiple-circle-fields="name"
+ label-circle="${this.localize('label.linked_circle')}"
widget-link="event-display-link-event"
widget-location="event-display-location-events"
widget-longDescription="p"
@@ -153,11 +157,11 @@ export class SolidEvent extends SolidTemplateElement {
</section>
<section data-view="${idPrefix}-newevent" id="${idPrefix}-newevent" class="newevent" hidden="">
<solid-link next="${idPrefix}-listevents" class="mdi mdi-close-circle-outline"></solid-link>
- <div class="page-title">${this.localize('title.create_new_event')}</div>
+ <h1 class="page-title">${this.localize('title.create_new_event')}</h1>
<solid-widget name="etuc-form-time">
<template>
<label>
- ${this.localize('label.start_time')}
+ ${this.localize('label.start_time')}*
</label>
<input data-holder="" type="time" value="12:00" name="startTime"></input>
</template>
@@ -175,26 +179,25 @@ export class SolidEvent extends SolidTemplateElement {
range-circle="${circleRange}"
widget-circle="solid-form-dropdown-label"
label-img="${this.localize('label.image')}"
- label-circle="${this.localize('label.circle')}"
- label-startDate="Start date"
- label-startTime="Start time"
- label-type="Type of events"
- label-name="Event name"
- label-shortDescription="${this.localize('label.short_description')}"
- label-longDescription="${this.localize('label.long_description')}"
- label-location.name="${this.localize('label.location')}"
+ label-circle="${this.localize('label.circle')}*"
+ label-startDate="${this.localize('label.start_date')}*"
+ label-startTime="${this.localize('label.start_time')}*"
+ label-type="${this.localize('label.type_of_event')}*"
+ label-name="${this.localize('label.event_name')}*"
+ label-shortDescription="${this.localize('label.short_description')}*"
+ label-longDescription="${this.localize('label.long_description')}*"
+ label-location.name="${this.localize('label.location')}*"
label-location.address="${this.localize('label.address')}"
label-link="${this.localize('label.link')}"
required-startDate
required-startTime
- required-img
required-circle
required-name
required-shortDescription
required-longDescription
required-location.name
- required-location.address
+ required-type
upload-url-img="${uploadDir}"
data-js-type="event"
@@ -204,9 +207,9 @@ export class SolidEvent extends SolidTemplateElement {
></solid-form>
</section>
<section data-view="${idPrefix}-newtype" id="${idPrefix}-newtype" class="newtype" hidden="">
- <div class="page-title">
+ <h1 class="page-title">
${this.localize('title.create_new_event_type')}
- </div>
+ </h1>
<solid-form
data-src="${typeRange}"
fields="name"