https://assistance.opentalent.fr/browse/V8-1799

ot_core/Classes/Domain/Model/Event.php

@@ -1006,18 +1006,19 @@ class Event extends AbstractEntity
      */
     public function getFormattedDates(): string
     {
+        $formattedDates = '';
         if ($this->getDatetimeStart() & $this->getDatetimeEnd()) {
             if ($this->getDatetimeStart()->format('d-m-Y') != $this->getDatetimeEnd()->format('d-m-Y')) {
-                return 'Du ' . $this->getDatetimeStart()->format('d/m/Y H\hi') . ' au ' . $this->getDatetimeEnd()->format('d/m/Y H\hi');
+                $formattedDates = 'Du ' . $this->getDatetimeStart()->format('d/m/Y H\hi') . ' au ' . $this->getDatetimeEnd()->format('d/m/Y H\hi');
             } else {
-                return 'Le ' . $this->getDatetimeStart()->format('d/m/Y') . ' de ' . $this->getDatetimeStart()->format('H\hi') . ' à ' . $this->getDatetimeEnd()->format('H\hi');
+                $formattedDates = 'Le ' . $this->getDatetimeStart()->format('d/m/Y') . ' de ' . $this->getDatetimeStart()->format('H\hi') . ' à ' . $this->getDatetimeEnd()->format('H\hi');
             }
         } else if ($this->getDatetimeStart()) {
-            return 'A partir du ' . $this->getDatetimeStart()->format('d/m/Y H\hi');
+            $formattedDates = 'A partir du ' . $this->getDatetimeStart()->format('d/m/Y H\hi');
         } else if ($this->getDatetimeEnd()) {
-            return "Jusqu'au " . $this->getDatetimeEnd()->format('d/m/Y H\hi');
+            $formattedDates = "Jusqu'au " . $this->getDatetimeEnd()->format('d/m/Y H\hi');
         }
-        return '';
+        return trim($formattedDates);
     }
 
 
@@ -1046,11 +1047,11 @@ class Event extends AbstractEntity
 
 
     /**
-     * Returns the concateneted adress of the event
+     * Returns the concatenated address of the event
      *
      * @return string
      */
-    public function getFullAddress(): string
+    public function getFullAddress(string $delimiter=PHP_EOL): string
     {
         $address = [];
 
@@ -1077,7 +1078,16 @@ class Event extends AbstractEntity
             }
             $address[] = $pc . $this->getCity();
         }
-        return ucfirst(join(PHP_EOL, $address));
+        return trim(ucfirst(join($delimiter, $address)));
+    }
+
+    /**
+     * Returns the inline concatenated address of the event
+     *
+     * @return string
+     */
+    public function getInlineFullAddress() {
+        return $this->getFullAddress(', ');
     }
 
     /**

ot_templating/Resources/Private/Partials/Classic/EventsShow.html

@@ -1,7 +1,7 @@
 <div class="ot-show-event">
 
     <header>
-        <h2 class="event-name">{event.name}</h2>
+        <h2 class="event-name">Détails de l'évènement</h2>
         <f:link.action class="go-back"><i class="fa fa-list"> </i> Revenir à la liste des évènements</f:link.action>
     </header>
 
@@ -19,34 +19,36 @@
         </div>
 
         <div class="event-summary">
-            <table class="event-infos">
-                <tr>
-                    <td>Quand?</td>
-                    <td>
-                        {event.formattedDates}
-                    </td>
-                </tr>
-                <tr>
-                    <td>Où?</td>
-                    <td>
-                        {f:format.nl2br(value: '{event.fullAdress}')}
-                    </td>
-                </tr>
-            </table>
+            <h3 class="event-name">{event.name}</h3>
+            <f:if condition="{event.formattedDates}">
+                <span class="event-dates">
+                    <i class="fas fa-calendar-alt" style="width: 14px; margin-right: 5px;">
+                    </i>{event.formattedDates}
+                </span>
+            </f:if>
+            <f:if condition="{event.inlineFullAddress}">
+                <span class="event-loc">
+                    <i class="fas fa-map-marker-alt" style="width: 14px; margin-right: 5px; padding-top: 2px;">
+                    </i>{event.inlineFullAddress}
+                </span>
+            </f:if>
+            <span class="event-description">
+                {f:format.nl2br(value: '{event.description}')}
+            </span>
         </div>
     </div>
-    <p class="event-description">
-        {f:format.nl2br(value: '{event.description}')}
-    </p>
+
     <f:if condition="{event.longitude}">
         <f:then>
-            <div id="event-map">
-                <i class="item-geodata" style="display: none;"
-                   data-id="{event.id}"
-                   data-long="{event.longitude}"
-                   data-lat="{event.latitude}"
-                   data-label="<b>{event.name}</b><br/>{event.locAndDate}">
-                </i>
+            <div class="event-map-container">
+                <div id="event-map">
+                    <i class="item-geodata" style="display: none;"
+                       data-id="{event.id}"
+                       data-long="{event.longitude}"
+                       data-lat="{event.latitude}"
+                       data-label="<b>{event.name}</b><br/>{event.locAndDate}">
+                    </i>
+                </div>
             </div>
         </f:then>
     </f:if>

ot_templating/Resources/Public/assets/Classic/style/classic-blue.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #097f9a;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #097f9a;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #03303a;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-green.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #04a04c;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #04a04c;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #023c1d;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-grey.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #8c8c8c;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #8c8c8c;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #595959;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-light-blue.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #0aa5ec;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #0aa5ec;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #06618a;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-light-red.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #dd453f;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #dd453f;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #9b201b;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-orange.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #e4611b;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #e4611b;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #893a10;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-purple.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #a5377e;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #a5377e;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #591e44;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/classic-red.css

@@ -1101,23 +1101,17 @@ header .slick-track {
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: #df0009;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px #df0009;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: #790005;
   text-decoration: none;
 }
 
@@ -1134,10 +1128,13 @@ header .slick-track {
   display: flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -1145,6 +1142,7 @@ header .slick-track {
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -1162,33 +1160,28 @@ header .slick-track {
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {

ot_templating/Resources/Public/assets/Classic/style/module/_events-show.scss

@@ -13,23 +13,17 @@
   align-items: center;
 }
 
-.ot-show-event .event-name {
-  font-size: 1.8em;
-  font-weight: bold;
+.ot-show-event header h2 {
   flex: 1;
 }
 
 .ot-show-event .go-back {
   color: $content-a-color;
   font-weight: bold;
-  padding: 0.5em 0.7em;
-  border: solid 2px $content-a-color;
-  border-radius: 6px;
-  margin: auto;
 }
 
 .ot-show-event .go-back:hover {
-  background-color: #d8edf3;
+  color: darken($content-a-color, 20%);
   text-decoration: none;
 }
 
@@ -37,10 +31,13 @@
   @include flex;
   flex-direction: row;
   margin-bottom: 2em;
+  padding: 2em;
 }
 
 .ot-show-event .event-content .event-poster {
   flex: 1;
+  max-width: 30%;
+  margin-right: 5%;
 }
 
 .ot-show-event .event-poster img {
@@ -48,6 +45,7 @@
   max-width: 100%;
   min-width: 40%;
   height: auto;
+  margin: 1.4em;
 }
 
 .ot-show-event .event-summary {
@@ -56,33 +54,28 @@
   flex-direction: column;
 }
 
-.ot-show-event .event-description {
-  margin-bottom: 1em;
-  padding: 1em 0.5em;
-}
-
-.ot-show-event .event-infos {
-  border: none;
-  width: 94%;
-  margin: 0 3%;
-  padding-top: 1em;
+.ot-show-event .event-name {
+  font-weight: 800;
 }
 
-.ot-show-event .event-infos tr {
-  background-color: #ffdd99;
+.ot-show-event .event-dates {
+  color: #4d4d4d;
+  margin-top: 0.5em;
 }
 
-.ot-show-event .event-infos tr:nth-child(odd) {
-  background-color: #ffd480;
+.ot-show-event .event-loc {
+  color: #4d4d4d;
+  margin-top: 0.5em;
+  display: flex;
+  flex-direction: row;
 }
 
-.ot-show-event .event-content .event-infos td {
-  padding: 0.8em 1.6em;
+.ot-show-event .event-description {
+  margin-top: 2em;
 }
 
-.ot-show-event .event-content .event-infos tr td:first-child {
-  font-weight: bold;
-  color: #2E2D2D;
+.ot-show-event .event-map-container {
+  padding: 3.2em;
 }
 
 .ot-show-event #event-map {