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:
+23
-17
@@ -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"> *</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"> *</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—as in poetry—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>
|
||||
|
||||
<?
|
||||
|
||||
Reference in New Issue
Block a user