Skip to content

Commit afcaf0f

Browse files
alexlambsonalexlambson
committed
- fix FOUC
- make all forms have row and column flexing
1 parent ce811c5 commit afcaf0f

File tree

4 files changed

+81
-31
lines changed

4 files changed

+81
-31
lines changed

‎kirovy/templates/legacy_outer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<style>html{visibility: hidden;opacity:0;}</style><!-- unFOUC -->
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>{% block title %}CncNet Map DB{% endblock %}</title>

‎kirovy/templates/legacy_search.html‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,27 @@
55
{% block header_text %}CnCNet Map Search{% endblock %}
66

77
{% block wrapped_content %}
8-
<!-- CONTENT -->
98
<div class="use-width"></div>
109
<div class="form-wrapper">
1110
<h2>Search Options</h2>
12-
<form action="/search" method="post" enctype="multipart/form-data" class="row-form">
11+
<form action="/search" method="post" enctype="multipart/form-data">
1312
<div>
14-
<label for="game-slug">Game</label>
15-
<select id="game-slug" name="game">
16-
<option value="td" selected="selected">Command &amp; Conquer (Tiberian Dawn)</option>
17-
<option value="ra" selected="selected">Red Alert 1</option>
18-
<option value="d2" selected="selected">Dune 2000</option>
19-
<option value="ts" selected="selected">Tiberian Sun</option>
20-
<option value="yr" selected="selected">Yuri's Revenge</option>
21-
</select>
22-
</div>
23-
<div>
24-
<label for="map-name-or-description">Search text</label>
25-
<input type="text" id="map-name-or-description" name="map-name-or-description">
13+
<div>
14+
<label for="game-slug">Game</label>
15+
<select id="game-slug" name="game">
16+
<option value="td" selected="selected">Command &amp; Conquer (Tiberian Dawn)</option>
17+
<option value="ra" selected="selected">Red Alert 1</option>
18+
<option value="d2" selected="selected">Dune 2000</option>
19+
<option value="ts" selected="selected">Tiberian Sun</option>
20+
<option value="yr" selected="selected">Yuri's Revenge</option>
21+
</select>
22+
</div>
23+
<div>
24+
<label for="map-name-or-description">Search text</label>
25+
<input type="text" id="map-name-or-description" name="map-name-or-description">
26+
</div>
2627
</div>
28+
<button class="full-width-flex-row btn" type="submit">Search</button>
2729
</form>
2830
</div>
2931
{% endblock %}

‎kirovy/templates/map_legacy_upload_ui.html‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,27 @@
1818
</p>
1919
<div class="form-wrapper">
2020
<form action="/upload" method="post" enctype="multipart/form-data">
21-
<label hidden="hidden" for="game-slug">Game</label>
22-
<select id="game-slug" name="game">
23-
<option value="td" selected="selected">Command &amp; Conquer (Tiberian Dawn)</option>
24-
<option value="ra" selected="selected">Red Alert 1</option>
25-
<option value="d2" selected="selected">Dune 2000</option>
26-
<option value="ts" selected="selected">Tiberian Sun</option>
27-
<option value="yr" selected="selected">Yuri's Revenge</option>
28-
</select>
29-
<label hidden="hidden" for="map-file-input">Map zip file</label>
30-
<input id="map-file-input" type="file" name="file" accept="application/zip">
31-
<button type="submit">Upload</button>
21+
<div>
22+
<div>
23+
<label hidden="hidden" for="game-slug">Game</label>
24+
<select id="game-slug" name="game">
25+
<option value="td" selected="selected">Command &amp; Conquer (Tiberian Dawn)</option>
26+
<option value="ra" selected="selected">Red Alert 1</option>
27+
<option value="d2" selected="selected">Dune 2000</option>
28+
<option value="ts" selected="selected">Tiberian Sun</option>
29+
<option value="yr" selected="selected">Yuri's Revenge</option>
30+
</select>
31+
</div>
32+
</div>
33+
<div>
34+
<div>
35+
<label hidden="hidden" for="map-file-input">Map zip file</label>
36+
<input id="map-file-input" type="file" name="file" accept="application/zip">
37+
</div>
38+
</div>
39+
<div>
40+
<button class="btn full-width-flex-row" type="submit">Upload</button>
41+
</div>
3242
</form>
3343
</div>
3444
<p>The CnCNet client will function <strong>exactly</strong> like this form.</p>

‎static/bc-assets/bc-main.css‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ span.inline-code {
8484
font-style: italic;
8585
}
8686

87-
form:not(.row-form) > *:not(label) {
87+
form > *:not(div, button, label) {
8888
margin: 1rem 0;
8989
padding: .3rem;
9090
}
@@ -100,7 +100,7 @@ form > label {
100100
}
101101

102102
.form-wrapper > h2 {
103-
103+
margin: 0 0 2rem 0;
104104
}
105105

106106
form {
@@ -118,19 +118,56 @@ form {
118118
width: 1400px;
119119
}
120120

121-
form.row-form {
121+
122+
form > div {
123+
display: flex;
122124
flex-direction: row;
123125
}
124126

125-
form.row-form > div {
127+
form > div:not(:last-child) {
128+
margin-bottom: 2rem;
129+
}
130+
131+
form > div > div {
126132
display: flex;
127133
flex-direction: column;
128134
}
129135

130-
form.row-form > div > *:not(label) {
136+
form > div > div > *:not(label) {
131137
padding: .6rem .5rem;
132138
}
133139

134-
form.row-form > div:last-of-type {
140+
form > div label {
141+
margin-bottom: .5rem;
142+
}
143+
144+
form > div > div:last-of-type {
135145
flex-grow: 2;
136146
}
147+
148+
.btn {
149+
padding: 1rem 0;
150+
color: #33ffa1;
151+
background: rgba(0, 255, 208, 0);
152+
border-color: #33ffa1;
153+
border-radius: 5px;
154+
font-weight: bold;
155+
font-size: 1.5rem;
156+
transition: all ease .35s;
157+
backdrop-filter: blur(15px);
158+
}
159+
160+
.btn:hover {
161+
background: rgba(0,255,208,.1450980392);
162+
cursor: pointer;
163+
}
164+
165+
.full-width-flex-row {
166+
flex: 1 100%;
167+
}
168+
169+
html {
170+
/* unFOUC */
171+
visibility: visible;
172+
opacity: 1;
173+
}

0 commit comments

Comments
 (0)