tim/xxx
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Lay out the forms on a grid.

Browse Source 
From the live site: the submission, login and add editor forms use a
two-column CSS grid in place of floats.
This commit is contained in:
tim
2026-09-25 23:32:08 +02:00
parent dd43940366
commit 15e81e17cc
4 changed files with 138 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
publish/addeditor.php
+11 -3
View File
@@ -53,21 +53,29 @@ if (!isset($_SESSION['editor'])) {
<? } else { ?> <? } else { ?>
<form action="https://xxx.org.za<?= $_SERVER['REQUEST_URI'] ?>" method="post"> <form action="https://xxx.org.za<?= $_SERVER['REQUEST_URI'] ?>" method="post">
<div> <div class="grid">
<label for="username">Username: </label> <label for="username">Username: </label>
<div class="rightcolumn">
<input type="text" id="username" name="username" /> <input type="text" id="username" name="username" />
</div> </div>
<div>
<label for="password">Password: </label> <label for="password">Password: </label>
<div class="rightcolumn">
<input type="password" id="password" name="password" /> <input type="password" id="password" name="password" />
</div> </div>
<div>
<label for="email">Email: </label> <label for="email">Email: </label>
<div class="rightcolumn">
<input type="text" id="email" name="email" /> <input type="text" id="email" name="email" />
</div> </div>
<div class="leftcolumn"></div>
<div class="submission"> <div class="submission">
<button type="submit" id="adduser" name="adduser" value="1">Add editor</button> <button type="submit" id="adduser" name="adduser" value="1">Add editor</button>
</div> </div>
</div><!-- .grid -->
</form> </form>
<? } ?> <? } ?>
publish/login.php
+11 -3
View File
@@ -80,21 +80,29 @@ if ($denied)
?> ?>
<form action="<? echo "https://xxx.org.za".$_SERVER['REQUEST_URI']; ?>" method="post"> <form action="<? echo "https://xxx.org.za".$_SERVER['REQUEST_URI']; ?>" method="post">
<div> <div class="grid">
<label for="username">Username: </label> <label for="username">Username: </label>
<div class="rightcolumn">
<input type="text" id="username" name="username" /> <input type="text" id="username" name="username" />
</div> </div>
<div>
<label for="password">Password: </label> <label for="password">Password: </label>
<div class="rightcolumn">
<input type="password" id="password" name="password" /> <input type="password" id="password" name="password" />
</div> </div>
<div>
<label for="remember">Remember me:</label> <label for="remember">Remember me:</label>
<div class="rightcolumn">
<input type="checkbox" id="remember" name="remember" checked /> <input type="checkbox" id="remember" name="remember" checked />
</div> </div>
<div class="leftcolumn"></div>
<div class="submission"> <div class="submission">
<button type="submit" id="login" name="login" value="1">Login</button> <button type="submit" id="login" name="login" value="1">Login</button>
</div> </div>
</div><!-- .grid -->
</form> </form>
</div> <!-- .maintext --> </div> <!-- .maintext -->
publish/style.css
+69 -84
View File
@@ -1,86 +1,78 @@
#main form #title, #main form #author, #main form #email, #main form #comments, #main form #story, #main form #username, #main form #password, #main form #remember { input {
border: 1px dashed #006633; font-family: "Noto Sans", "Verdana", sans-serif;
display: block;
width: 250px;
float: left;
margin-bottom: 5px;
margin-top: 5px;
padding-left: 2px;
} }
#main form input#remember { #main .grid {
margin-left: -2px; display: grid;
grid-template-columns: minmax(75px, 125px) auto;
}
#main .grid > .rightcolumn {
margin-top: 5px;
align-self: end;
margin-bottom: 5px;
display: flex;
}
#main .grid .rightcolumn > input {
display: block;
width: 300px;
font-size: 12pt;
border: 1px dashed #006633;
border-radius: 8px;
}
#main .grid .rightcolumn input#remember {
margin-top: 7px; margin-top: 7px;
width: initial; width: initial;
} }
#main form #story { #main .grid > label {
width: 450px;
height: 200px;
}
#main form #htmloptions {
display: block; display: block;
float: left; margin-top: 5px;
width: auto; text-align: right;
border: 1px solid #006633; width: calc(100% - 20px);
padding-right: 20px;
} }
#main form .submission { #main .grid #uploadparent {
margin-top: 10px; min-height: 300px;
margin-left: 120px;
} }
#main form #preview, #submit, #delete, #login, #adduser { #main .grid #textparent {
min-height: 200px;
}
#main .submission button {
border: 1px dashed #006633; border: 1px dashed #006633;
background-color: #FFFFFF; background-color: #FFFFFF;
font-weight: bold; font-weight: bold;
margin-right: 5px; margin-right: 5px;
} }
#main form #hidden { #main .grid #hidden {
display: block; display: block;
float: left;
margin: 5px 0; margin: 5px 0;
width: initial;
} }
#main form label { #main .grid .textarea {
display: block;
float: left;
margin-bottom: 5px;
margin-top: 5px;
text-align: right;
width: 100px;
padding-right: 20px;
}
#main form>div {
overflow: auto;
width: 100%
}
#main form>div.textarea {
width: inherit; width: inherit;
} }
#main form>div.g-recaptcha {
overflow: inherit; #main .grid textarea.submission {
} margin-top: 10px;
br.clear { border: 1px dotted #006633;
clear: both; border-radius: 8px;
font-size: 12pt;
} }
.note { div.note {
float: left; display: block;
text-align: justify; text-align: justify;
font-size: 8pt; font-size: 10.5pt;
margin-top: 5px; margin-bottom: 10px;
margin-bottom: 5px;
margin-left: 100px;
padding-left: 20px;
} }
.textarea .note { .textarea div.note {
margin-left: -20px;
} }
.in-note { .in-note {
text-align: justify; text-align: justify;
font-size: 8pt; font-size: 12pt;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@@ -90,25 +82,32 @@ br.clear {
float: right; float: right;
} }
#main .tabs {
div.textarea { display: flex;
margin-left: 120px; flex-direction: column;
padding-top: 10px;
} }
.tab { #main .tab,
#main .counter {
display: block; display: block;
float: left;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
text-align: right; text-align: right;
width: 100px; padding-right: 20px;
}
#main .tab {
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
padding-right: 20px; padding-left: 5px;
background-color: #006633; background-color: #006633;
clear: left;
color: white; color: white;
cursor: pointer; cursor: pointer;
border-radius: 8px 0 0 8px;
}
/* WordCount */
#main .counter {
font-size: 11pt;
} }
#uploadparent { #uploadparent {
@@ -120,19 +119,6 @@ div.textarea {
padding: 10px; padding: 10px;
} }
/* WordCount */
.counter {
display: block;
float: left;
margin-bottom: 5px;
margin-top: 5px;
text-align: right;
width: 100px;
padding-right: 20px;
clear: left;
font-size: 8pt;
}
.yes { .yes {
font-weight: bold; font-weight: bold;
} }
@@ -141,10 +127,9 @@ div.textarea {
} }
.required { .required {
display: inline-flex;
align-self: center;
color: red; color: red;
position: relative;
top: 0.6em;
font-family: Times New Roman, serif;
} }
ul.error-box { ul.error-box {
@@ -162,16 +147,16 @@ ul.error-box li {
font-weight: bold; font-weight: bold;
} }
#main .grid div.g-recaptcha {
overflow: inherit;
margin-left: 120px;
}
#captcha #recaptcha_image { #captcha #recaptcha_image {
margin-left: 120px; margin-left: 120px;
border: 1px dotted #006633; border: 1px dotted #006633;
border-radius: 8px;
} }
#captcha .icons { #captcha .icons {
position:relative; position:relative;
top:0.6em; top:0.6em;
} }
.g-recaptcha {
margin-left: 120px;
}
publish/write.inc.php
+20 -14
View File
@@ -21,36 +21,39 @@ if (count($validate) !== 0) {
?> ?>
<form id="write" method="post" enctype="multipart/form-data" onsubmit="return review()" action=""> <form id="write" method="post" enctype="multipart/form-data" onsubmit="return review()" action="">
<div>
<div class="grid">
<label<?= isset($validate['title']) ? ' class="red"' : '' ?> for="title">Title:</label> <label<?= isset($validate['title']) ? ' class="red"' : '' ?> for="title">Title:</label>
<div class="rightcolumn">
<input type="text" id="title" name="title" maxlength="150" value="<?= isset($title) ? $title : '' ?>" /> <input type="text" id="title" name="title" maxlength="150" value="<?= isset($title) ? $title : '' ?>" />
<span class="required">&nbsp;*</span> <span class="required">&nbsp;*</span>
</div> </div>
<div>
<label<?= isset($validate['author']) ? ' class="red"' : '' ?> for="author">Author:</label> <label<?= isset($validate['author']) ? ' class="red"' : '' ?> for="author">Author:</label>
<div class="rightcolumn">
<input type="text" name="author" id="author" value="<?= isset($author) ? $author : '' ?>" maxlength="150" /> <input type="text" name="author" id="author" value="<?= isset($author) ? $author : '' ?>" maxlength="150" />
<span class="required">&nbsp;*</span> <span class="required">&nbsp;*</span>
</div> </div>
<div>
<label<?= isset($validate['email']) ? ' class="red"' : '' ?> for="email">Email address:</label> <label<?= isset($validate['email']) ? ' class="red"' : '' ?> for="email">Email address:</label>
<div class="rightcolumn">
<input type="text" name="email" id="email" maxlength="150" value="<?= isset($email) ? $email : ''?>" /> <input type="text" name="email" id="email" maxlength="150" value="<?= isset($email) ? $email : ''?>" />
<br />
<div class="note">(An email address where editors can reach the author.)</div>
</div> </div>
<div class="leftcolumn"></div>
<div class="note">(An email address where editors can reach the author.)</div>
<div class="tabs">
<span class="tab<?= isset($validate['story']) ? ' red' : '' ?>" onclick="showHide('text');">Text:</span> <span class="tab<?= isset($validate['story']) ? ' red' : '' ?>" onclick="showHide('text');">Text:</span>
<span class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span> <span class="tab<?= isset($validate['upload']) ? ' red' : '' ?>" onclick="showHide('upload');">Image:</span>
<span id="wordcounter" class="counter" style="display: none;">0 words</span> <span id="wordcounter" class="counter" style="display: none;">0 words</span>
</div>
<div class="textarea"> <div class="textarea rightcolumn">
<div id="textparent"> <div id="textparent">
<textarea name="story" id="story" rows="20" cols="50"> <textarea name="story" id="story" rows="20" cols="50"><?
<?
echo (isset($story) ? $story : '') echo (isset($story) ? $story : '')
?> ?></textarea>
</textarea>
<div class="note">(To get line-breaks&mdash;as in poetry&mdash;instead of paragraph breaks, hit shift-enter instead of enter.)</div> <div class="note">(To get line-breaks&mdash;as in poetry&mdash;instead of paragraph breaks, hit shift-enter instead of enter.)</div>
</div> </div>
<div class="upload" id="uploadparent" style="display: none;"><div> <div class="upload" id="uploadparent" style="display: none;"><div>
@@ -84,8 +87,8 @@ if (isset($file_src) || isset($img)) {
</div> </div>
<? if ($is_admin) { ?> <? if ($is_admin) { ?>
<div>
<label<? isset($validate['comments']) ? ' class="red"' : '' ?> for="comments">Comments:</label> <label<? isset($validate['comments']) ? ' class="red"' : '' ?> for="comments">Comments:</label>
<div class="rightcolumn">
<input type="text" name="comments" id="comments" maxlength="150" value="<?= isset($comments) ? $comments : '' ?>" /> <input type="text" name="comments" id="comments" maxlength="150" value="<?= isset($comments) ? $comments : '' ?>" />
</div> </div>
<input type="hidden" id="editor" name="editor" value="<?= $username ?>" /> <input type="hidden" id="editor" name="editor" value="<?= $username ?>" />
@@ -105,13 +108,14 @@ if (isset($file_src) || isset($img)) {
if ($is_admin) { if ($is_admin) {
$checked = isset($hidden) && !empty($hidden) ? ' checked' : ''; $checked = isset($hidden) && !empty($hidden) ? ' checked' : '';
echo '<div>';
echo '<label'.(isset($validate['hidden']) ? ' class="red"' : '').' for="hidden">Hidden:</label>'; echo '<label'.(isset($validate['hidden']) ? ' class="red"' : '').' for="hidden">Hidden:</label>';
echo '<div class="rightcolumn">';
echo '<input type="checkbox" name="hidden" id="hidden"'.$checked.' />'; echo '<input type="checkbox" name="hidden" id="hidden"'.$checked.' />';
echo '</div>'; echo '</div>';
} }
?> ?>
<div class="submission"> <div class="leftcolumn"></div>
<div class="submission rightcolumn">
<? <?
if (isset($queue) && $is_admin) { if (isset($queue) && $is_admin) {
echo '<button type="submit" id="preview" name="action" value="save">Save in queue</button>'; echo '<button type="submit" id="preview" name="action" value="save">Save in queue</button>';
@@ -130,6 +134,8 @@ if (isset($file_src) || isset($img)) {
?> ?>
</div> </div>
</div><!-- .grid -->
</form> </form>
<? <?