Explorar el Código

View details of the event on the event card

Tanya Sashyna hace 5 años
padre
commit
57b3ce2c35
Se han modificado 3 ficheros con 37 adiciones y 3 borrados
  1. 24 1
      src/conteiners/eventCard/EventCard.js
  2. 12 1
      src/conteiners/eventCard/eventCard.scss
  3. 1 1
      src/router.js

+ 24 - 1
src/conteiners/eventCard/EventCard.js

@@ -22,6 +22,7 @@ export class EventCard extends React.Component {
                             <div className="container-wrap">
                                 <h2>{event.title}</h2>
                                 <p className="country">{event.country}, {event.city}</p>
+                                <p className="event-type">{event.eventType}</p>
                                 <div className="date">
                                     <p>
                                         {
@@ -31,9 +32,31 @@ export class EventCard extends React.Component {
                                         }
                                     </p>
                                 </div>
+                                <div>
+                                    <button>Register</button>
+                                </div>
                             </div>
                         </div>
-                    </div>                                   
+                    </div>            
+                    <div className="container-wrap">
+                        <div className="event-card-info">
+                            <p>{event.ageLimit}</p>
+                            <p>{event.aidStations}</p>
+                            <p>{event.awardMedals}</p>
+                            <p>{event.equipmentStorage}</p>
+                            <p>{event.halfmarathoneDistancePrice}</p>
+                            <p>{event.marathoneDistancePrice}</p>
+                            <p>{event.maximumTime}</p>
+                            <p>{event.overview}</p>
+                            <p>{event.parking}</p>
+                            <p>{event.refreshments}</p>
+
+                            {/*{event.contentVideo}
+                             {event.mainBannerPicture}
+                             {event.map}
+                             */}
+                        </div>
+                    </div>
                 </div>
             </>
         )

+ 12 - 1
src/conteiners/eventCard/eventCard.scss

@@ -30,11 +30,15 @@
         }
 
         .country {
-            margin-bottom: 20px;
             font-size: 2rem;
             font-weight: $light;
         }
 
+        .event-type {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+
         .date {
             text-align: right;
 
@@ -59,4 +63,11 @@
             }
         }
     }
+
+    &-info {
+        p {
+            font-size: 1.4rem;
+            margin-bottom: 10px;
+        }
+    }
 }

+ 1 - 1
src/router.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Switch, Route, Redirect  } from "react-router-dom";
+import { Switch, Route } from "react-router-dom";
 import { connect } from "react-redux";
 
 import { getAllEvents } from "./actions/getAllEvents";