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 { ?>
<form action="https://xxx.org.za<?= $_SERVER['REQUEST_URI'] ?>" method="post">
<div>
<div class="grid">
<label for="username">Username: </label>
<div class="rightcolumn">
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">Password: </label>
<div class="rightcolumn">
<input type="password" id="password" name="password" />
</div>
<div>
<label for="email">Email: </label>
<div class="rightcolumn">
<input type="text" id="email" name="email" />
</div>
<div class="leftcolumn"></div>
<div class="submission">
<button type="submit" id="adduser" name="adduser" value="1">Add editor</button>
</div>
</div><!-- .grid -->
</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">
<div>
<div class="grid">
<label for="username">Username: </label>
<div class="rightcolumn">
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">Password: </label>
<div class="rightcolumn">
<input type="password" id="password" name="password" />
</div>
<div>
<label for="remember">Remember me:</label>
<div class="rightcolumn">
<input type="checkbox" id="remember" name="remember" checked />
</div>
<div class="leftcolumn"></div>
<div class="submission">
<button type="submit" id="login" name="login" value="1">Login</button>
</div>
</div><!-- .grid -->
</form>
</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 {
border: 1px dashed #006633;
display: block;
width: 250px;
float: left;
margin-bottom: 5px;
margin-top: 5px;
padding-left: 2px;
input {
font-family: "Noto Sans", "Verdana", sans-serif;
}
#main form input#remember {
margin-left: -2px;
#main .grid {
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;
width: initial;
}
#main form #story {
width: 450px;
height: 200px;
}
#main form #htmloptions {
#main .grid > label {
display: block;
float: left;
width: auto;
border: 1px solid #006633;
margin-top: 5px;
text-align: right;
width: calc(100% - 20px);
padding-right: 20px;
}
#main form .submission {
margin-top: 10px;
margin-left: 120px;
#main .grid #uploadparent {
min-height: 300px;
}
#main form #preview, #submit, #delete, #login, #adduser {
#main .grid #textparent {
min-height: 200px;
}
#main .submission button {
border: 1px dashed #006633;
background-color: #FFFFFF;
font-weight: bold;
margin-right: 5px;
}
#main form #hidden {
#main .grid #hidden {
display: block;
float: left;
margin: 5px 0;
width: initial;
}
#main form label {
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 {
#main .grid .textarea {
width: inherit;
}
#main form>div.g-recaptcha {
overflow: inherit;
}
br.clear {
clear: both;
#main .grid textarea.submission {
margin-top: 10px;
border: 1px dotted #006633;
border-radius: 8px;
font-size: 12pt;
}
.note {
float: left;
div.note {
display: block;
text-align: justify;
font-size: 8pt;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 100px;
padding-left: 20px;
font-size: 10.5pt;
margin-bottom: 10px;
}
.textarea .note {
margin-left: -20px;
.textarea div.note {
}
.in-note {
text-align: justify;
font-size: 8pt;
font-size: 12pt;
margin-top: 5px;
margin-bottom: 5px;
}
@@ -90,25 +82,32 @@ br.clear {
float: right;
}
div.textarea {
margin-left: 120px;
#main .tabs {
display: flex;
flex-direction: column;
padding-top: 10px;
}
.tab {
#main .tab,
#main .counter {
display: block;
float: left;
margin-bottom: 5px;
margin-top: 5px;
text-align: right;
width: 100px;
padding-right: 20px;
}
#main .tab {
padding-top: 3px;
padding-bottom: 3px;
padding-right: 20px;
padding-left: 5px;
background-color: #006633;
clear: left;
color: white;
cursor: pointer;
border-radius: 8px 0 0 8px;
}
/* WordCount */
#main .counter {
font-size: 11pt;
}
#uploadparent {
@@ -120,19 +119,6 @@ div.textarea {
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 {
font-weight: bold;
}
@@ -141,10 +127,9 @@ div.textarea {
}
.required {
display: inline-flex;
align-self: center;
color: red;
position: relative;
top: 0.6em;
font-family: Times New Roman, serif;
}
ul.error-box {
@@ -162,16 +147,16 @@ ul.error-box li {
font-weight: bold;
}
#main .grid div.g-recaptcha {
overflow: inherit;
margin-left: 120px;
}
#captcha #recaptcha_image {
margin-left: 120px;
border: 1px dotted #006633;
border-radius: 8px;
}
#captcha .icons {
position:relative;
top:0.6em;
}
.g-recaptcha {
margin-left: 120px;
}
publish/write.inc.php
+22 -16
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>
<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>
<?