Skip to content

Commit 1e02b19

Browse files
Mole1424Mole1424
committed
added css to form
1 parent 8c83d29 commit 1e02b19

File tree

1 file changed

+110
-52
lines changed

1 file changed

+110
-52
lines changed

‎templates/events/form.html‎

Lines changed: 110 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -5,57 +5,115 @@
55
{% block content %}
66
<h1>Create Event</h1>
77

8-
<form method="{{ method }}" action="{{ url_for(action) }}">
9-
10-
{% if error %}
11-
<div>{{error}}</div>
12-
{% endif %}
13-
14-
<!-- base info -->
15-
<label for="name">Event Name</label>
16-
<input type="text" name="name" id="name" required>
17-
18-
<label for="description">Event Description</label>
19-
<textarea name="description" id="description" required></textarea>
20-
21-
<input type="checkbox" name="draft" id="draft">
22-
<label for="draft">Draft</label>
23-
24-
<!-- location -->
25-
<label for="location">Event Location</label>
26-
<input type="text" name="location" id="location" required>
27-
28-
<label for="location_url">Location URL</label>
29-
<input type="text" name="location_url" id="location_url">
30-
31-
<!-- asthetic info -->
32-
<label for="icon">Event Icon</label>
33-
<input type="text" name="icon" id="icon">
34-
35-
<label for="text_colour">Event Color</label>
36-
<!-- have text input match color input and vice versa -->
37-
<!-- pre-input of # -->
38-
<!-- dropdown of pre-made colours -->
39-
<input type="text" name="text_colour" id="text_colour">
40-
<input type="color" name="color_colour" id="color_colour">
41-
42-
<!-- date and time -->
43-
<label for="start_time">Start Time</label>
44-
<input type="datetime-local" name="start_time" id="start_time" required>
45-
46-
<label for="end_time">End Time</label>
47-
<input type="datetime-local" name="end_time" id="end_time">
48-
49-
<label for="duration">Duration</label>
50-
<input type="text" name="duration" id="duration">
51-
52-
<!-- tags -->
53-
<!-- badge and created tags? -->
54-
<label for="tags">Tags</label>
55-
<input type="text" name="tags" id="tags">
56-
57-
<!-- submit -->
58-
<input type="submit" value="Create Event">
59-
</form>
8+
<div class="container y-4">
9+
<div class="y-4 border rounded p-4">
10+
<form method="{{ method }}" action="{{ url_for(action) }}" class="row g-3 align-items-center">
11+
12+
{% with messages = get_flashed_messages() %}
13+
{% if messages %}
14+
<div class="alert alert-danger">
15+
{% for message in messages %}
16+
{{ message }}
17+
{% endfor %}
18+
</div>
19+
{% endif %}
20+
{% endwith %}
21+
22+
<!-- base info -->
23+
<div class="form-floating col-md-6 offset-md-3">
24+
<input type="text" name="name" id="name" class="form-control" placeholder="Event Name" required>
25+
<label for="name">Event Name</label>
26+
</div>
27+
28+
<div class="form-floating col-12">
29+
<textarea name="description" id="description" class="form-control" placeholder="Event Description" required></textarea>
30+
<label for="description">Event Description (Markdown format)</label>
31+
</div>
32+
33+
<!-- location -->
34+
<div class="input-group col-12">
35+
<div class="input-group-text">
36+
<i class="ph-bold ph-map-pin"></i>
37+
</div>
38+
<div class="form-floating">
39+
<input type="text" name="location" id="location" class="form-control" placeholder="Event Location" required>
40+
<label for="location">Event Location</label>
41+
</div>
42+
<div class="form-floating">
43+
<input type="text" name="location_url" id="location_url" class="form-control" placeholder="https://example.com/">
44+
<label for="location_url">Location URL</label>
45+
</div>
46+
</div>
47+
48+
<!-- aesthetic info -->
49+
<div class="col-md-4">
50+
<!-- same height calculation as form-floating to stay same size -->
51+
<div class="input-group" style="height: calc(3.5rem + calc(var(--bs-border-width) * 2));">
52+
<div class="input-group-text">
53+
<input type="checkbox" name="draft" id="draft" class="form-check-input">
54+
</div>
55+
<label for="draft" class="form-control d-flex align-items-center">Draft</label>
56+
</div>
57+
</div>
58+
59+
<div class="col-md-4">
60+
<div class="input-group">
61+
<!-- make this update -->
62+
<div class="input-group-text">
63+
<i class="ph-bold ph-phosphor-logo"></i>
64+
</div>
65+
<div class="form-floating">
66+
<input type="text" name="icon" id="icon" class="form-control" placeholder="ph-calendar">
67+
<label for="icon">Event Phosphor Icon</label>
68+
</div>
69+
</div>
70+
</div>
71+
72+
<!-- have text input match color input and vice versa -->
73+
<!-- pre-input of # -->
74+
<!-- dropdown of pre-made colours -->
75+
<div class="col-md-4">
76+
<div class="input-group">
77+
<div class="input-group-text">
78+
<input type="color" name="color_colour" id="color_colour" class="form-control form-control-color">
79+
</div>
80+
<div class="form-floating">
81+
<input type="text" name="text_colour" id="text_colour" class="form-control" placeholder="#000000">
82+
<label for="text_colour">Event Color</label>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<!-- date and time -->
88+
<div class="form-floating col-md-4">
89+
<input type="datetime-local" name="start_time" id="start_time" class="form-control" required>
90+
<label for="start_time">Start Time</label>
91+
</div>
92+
93+
<div class="form-floating col-md-4">
94+
<input type="datetime-local" name="end_time" id="end_time" class="form-control">
95+
<label for="end_time">End Time</label>
96+
</div>
97+
98+
<div class="form-floating col-md-4">
99+
<!-- duration in DD:HH:MM format-->
100+
<input type="text" name="duration" id="duration" class="form-control" pattern="^\d{1,2}:(?:[01]\d|2[0-3]):[0-5]\d$" placeholder="DD:HH:MM" value="00:00:00">
101+
<label for="duration">Duration</label>
102+
</div>
103+
104+
<!-- tags -->
105+
<!-- badge and created tags? -->
106+
<div class="form-floating col-md-8 offset-md-2">
107+
<input type="text" name="tags" id="tags" class="form-control" placeholder="tag1,tag2,tag3">
108+
<label for="tags">Tags</label>
109+
</div>
110+
111+
<!-- submit -->
112+
<div class="col-23 d-flex justify-content-center">
113+
<input type="submit" value="Create Event" class="btn btn-primary col-6">
114+
</div>
115+
</form>
116+
</div>
117+
</div>
60118

61119
{% endblock %}

0 commit comments

Comments
 (0)