started styling create-event page, simple responsiveness

zitap/forms.py

@@ -16,3 +16,4 @@ class LoginForm(forms.Form):
 
 class UpdateSlotsForm(forms.Form):
     slots = forms.CharField(label='Slots', max_length=100)
+

zitap/static/zitap/css/create-event.css

@@ -0,0 +1,159 @@
+
+@media only screen and (max-width: 500px) {
+h1{
+    text-align:center;
+}
+
+.outline{
+    padding: 0 5% 0 5%;
+}
+
+.event_name {
+    grid-area: top;
+}
+
+.event_dates {
+    grid-area: left;
+    width: 250px;
+}
+
+.start_time {
+    grid-area: right1;
+}
+
+.start_time {
+    grid-area: right2;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-areas:
+    "top"
+    "left"
+    "right1"
+    "right2";
+}
+
+.event_name > input[type=text] {
+    font-size: 20px;
+    padding: 5px;
+}
+
+input[type=text] {
+    font-size: 14px;
+    padding: 5px;
+}
+
+input[type=submit] {
+    border-radius: 5px;
+    border: 1px solid #333;
+    font-size: 14px;
+    padding: 7px;
+    background-color: #eee;
+}}
+
+@media only screen and (max-width: 800px) and (min-width: 501px) {
+h1{
+    text-align:center;
+}
+
+.outline{
+    padding: 0 5% 0 5%;
+}
+
+.event_name {
+    grid-area: top;
+}
+
+.event_dates {
+    grid-area: left;
+    width: 250px;
+}
+
+.start_time {
+    grid-area: right1;
+}
+
+.start_time {
+    grid-area: right2;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-areas:
+    "top top"
+    "left right2"
+    "left right1"
+    "left .";
+}
+
+.event_name > input[type=text] {
+    font-size: 20px;
+    padding: 5px;
+}
+
+input[type=text] {
+    font-size: 14px;
+    padding: 5px;
+}
+
+input[type=submit] {
+    border-radius: 5px;
+    border: 1px solid #333;
+    font-size: 14px;
+    padding: 7px;
+    background-color: #eee;
+}}
+
+@media only screen and (max-width: 2000px) and (min-width: 801px) {
+
+h1{
+    text-align:center;
+}
+
+.outline{
+    padding: 0 5% 0 5%;
+}
+
+.event_name {
+    grid-area: top;
+}
+
+.event_dates {
+    grid-area: left;
+    width: 250px;
+}
+
+.start_time {
+    grid-area: right1;
+}
+
+.start_time {
+    grid-area: right2;
+}
+
+.grid-container {
+    display: grid;
+    grid-template-areas:
+    "top top top top"
+    "left left right2 right1";
+}
+
+.event_name > input[type=text] {
+    font-size: 20px;
+    padding: 5px;
+}
+
+input[type=text] {
+    font-size: 14px;
+    padding: 5px;
+}
+
+input[type=submit] {
+    border-radius: 5px;
+    border: 1px solid #333;
+    font-size: 14px;
+    padding: 7px;
+    background-color: #eee;
+}
+}

zitap/static/zitap/css/style.css

@@ -8,4 +8,43 @@ body {
     padding: 0;
     font-weight: 400;
     overflow-x: hidden;
-}
+}
+.main-head {
+    padding: 3px 0 0 15px;
+    text-align: Left;
+    background-color: #102030;
+    color: white;
+    font-size: 17px;
+    overflow: hidden;
+    
+}
+.main-nav ul {
+    list-style-type: none;
+    font-size:19px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #283860;
+}
+
+.main-nav li {
+  float: left;
+  padding-left: 5px;
+}
+
+.main-nav li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 10px 10px;
+  text-decoration: none;
+}
+
+.main-nav li a:hover {
+  background-color: #384870;
+}
+
+.main-content {
+    padding: 13px 50px 0 50px;
+}
+

zitap/templates/zitap/create-event.html

@@ -5,13 +5,30 @@
 {% block title %}{% trans "Create Event" %}{% endblock %}
 
 {% block content %}
-<h1>Create Event</h1>
-<form action="{% url 'create-event' %}" method="post">
-    {% csrf_token %}
-    <table>
-        {{ form.as_table }}
-    </table>
-    {{ form.non_field_errors }}
-    <input type="submit" value="Create Event">
-</form>
-{% endblock %}
+<div class="outline">
+    <h1>Create Event</h1>
+    <form action="{% url 'create-event' %}" method="post">
+        {% csrf_token %}
+        <div class="grid-container">
+        {% for field in form %}
+        <div class="{% cycle 'event_name' 'event_dates' 'start_time' 'end_time' %}">
+            <p>
+            {{ field.label_tag }}<br>
+            {{ field }}
+            {% if field.help_text %}
+            <small>{{ field.help_text }}</small>
+            {% endif %}
+            {% if field.errors %}
+            <small>{{ field.errors }}</small>
+            {% endif %}
+            </p>
+        </div>
+        {% endfor %}
+        </div>
+        {{ form.non_field_errors }}
+        <input type="submit" value="Create Event">
+    </form>
+</div>
+{% endblock %}
+
+

zitap/templates/zitap/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" href="{% static 'zitap/css/style.css' %}">
     <link rel="stylesheet" href="{% static 'zitap/css/date-picker.css' %}">
+    <link rel="stylesheet" href="{% static 'zitap/css/create-event.css' %}">
     {% block head %}{% endblock %}
   </head>
   <body>
@@ -27,4 +28,4 @@
       </main>
     </div>
   </body>
-</html>
+</html>