Lay out the forms on a grid.

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
+23 -17
View File
@@ -21,36 +21,39 @@ if (count($validate) !== 0) {
?>
<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>
<div class="rightcolumn">
<input type="text" id="title" name="title" maxlength="150" value="<?= isset($title) ? $title : '' ?>" />
<span class="required">&nbsp;*</span>
</div>
<div>
<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" />
<span class="required">&nbsp;*</span>
</div>
<div>
<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 : ''?>" />
<br />
<div class="note">(An email address where editors can reach the author.)</div>
</div>
<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 id="wordcounter" class="counter" style="display: none;">0 words</span>
<div class="leftcolumn"></div>
<div class="note">(An email address where editors can reach the author.)</div>
<div class="textarea">
<div class="tabs">
<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 id="wordcounter" class="counter" style="display: none;">0 words</span>
</div>
<div class="textarea rightcolumn">
<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 : '')
?>
</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>
<div class="upload" id="uploadparent" style="display: none;"><div>
@@ -84,8 +87,8 @@ if (isset($file_src) || isset($img)) {
</div>
<? 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 : '' ?>" />
</div>
<input type="hidden" id="editor" name="editor" value="<?= $username ?>" />
@@ -105,13 +108,14 @@ if (isset($file_src) || isset($img)) {
if ($is_admin) {
$checked = isset($hidden) && !empty($hidden) ? ' checked' : '';
echo '<div>';
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 '</div>';
}
?>
<div class="submission">
<div class="leftcolumn"></div>
<div class="submission rightcolumn">
<?
if (isset($queue) && $is_admin) {
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><!-- .grid -->
</form>
<?