Merge pull request #101 from talko611/add-create-event-style

Add create event style

Author: kobihk

event/templates/event/create_event.html

@@ -1,11 +1,23 @@
 {% extends 'base.html' %}
 {% block content %}
-<h1>Create Event</h1>
-<form id="event-form" method="post">
-    {% csrf_token %} {{ form.as_p }}
-    <button type="submit">Create</button>
-    {% if error %}
-    <label id="error-label" style="color: red;">{{error}}</label>
-    {% endif %}
-</form>
+<div class="create-event-form-header">
+    <h2>Create Event</h2>
+</div>
+<div class="create-event-form-container">
+    <form method="post" class="create-event-form">
+        {% csrf_token %}
+        {% for field in form %}
+        <div class="form-field" id="field_{{ field.name }}">
+            {{ field.label_tag }}
+            {{ field }}
+        </div>
+        {% endfor %}
+        <div class="btn-container">
+            <button type="submit">Create</button>
+        </div>
+        {% if error %}
+        <label class="error-label">{{error}}</label>
+        {% endif %}
+    </form>
+</div>
 {% 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

@@ -108,14 +108,17 @@ form {
   flex-direction: column;
   max-width: 400px;
   margin: auto;
+
 }
 
 form label {
   font-weight: bold;
   margin-bottom: 0.5rem;
 }
 
-p { font-size: 26px; }
+p {
+  font-size: 26px;
+}
 
 .logo {
   border-radius: 50%;
@@ -127,3 +130,67 @@ p { font-size: 26px; }
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   transition: all 0.2s ease-in-out;
 }
+
+.create-event-form-header {
+  margin: 15px;
+}
+
+.create-event-form-container {
+  margin: 20px;
+}
+
+.create-event-form>div {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  align-items: center;
+}
+
+.create-event-form>div>label {
+  font-weight: normal;
+  font-size: 14px;
+  margin: 0;
+}
+
+.create-event-form>div>input {
+  width: 200px;
+}
+
+.create-event-form>div>select {
+  width: 200px;
+}
+
+.create-event-form>.btn-container {
+  justify-content: center;
+}
+
+.create-event-form>.btn-container>button {
+  width: 200px;
+}
+
+.create-event-form>.error-label {
+  color: red;
+}
+
+.create-event-form #field_is_private {
+  justify-content: flex-start;
+}
+
+.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;
+}