Add styling to event info page

Signed-off-by: Tal Koren <[email protected]>

Author: talko611

event/templates/event/create_event.html

@@ -15,10 +15,9 @@ <h2>Create Event</h2>
         <div class="btn-container">
             <button type="submit">Create</button>
         </div>
-
         {% if error %}
         <label class="error-label">{{error}}</label>
         {% endif %}
     </form>
 </div>
-{% endblock %}
+{% endblock %}

event/templates/event/event_info.html

@@ -1,11 +1,17 @@
 {% extends 'base.html' %}
 {% block content %}
-<h1>{{event.name}} Event</h1>
-<li>Category: {{event.category.name}}</li>
-<li>Location: {{event.location.city}}</li>
-<li>Starts At: {{event.start_time}}</li>
-<li>Ends At: {{event.end_time}}</li>
-<li>Participants : {{event.participants_num}}/{{event.max_participants}}</li>
+<div class="event-info-header">
+    <h2>{{event.name}} Event</h2>
+</div>
+<div class="event-info-container">
+    <ul>
+        <li>Category: {{event.category.name}}</li>
+        <li>Location: {{event.location.city}}</li>
+        <li>Starts At: {{event.start_time}}</li>
+        <li>Ends At: {{event.end_time}}</li>
+        <li>Participants : {{event.participants_num}}/{{event.max_participants}}</li>
+    </ul>
+</div>
 {% endblock %}
 {% block poll_info %}{% endblock %}
 {% block teams_info %}{% endblock %}

static_home_page/static/web_page_css.css

@@ -139,8 +139,6 @@ p {
   margin: 20px;
 }
 
-.create-event-form {}
-
 .create-event-form>div {
   display: flex;
   justify-content: space-between;
@@ -180,4 +178,19 @@ p {
 
 .create-event-form #field_is_private>input[type='checkbox'] {
   width: 20px;
+}
+
+.event-info-header {
+  margin: 15px;
+}
+
+.event-info-container {
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.event-info-container>ul>li {
+  margin: 3px 0;
+  padding: 3px 0;
 }