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

Style the story search on the edit page.

Browse Source 
Round the input like the other form inputs, and add space above the list.
This commit is contained in:
tim
2026-09-26 15:27:51 +02:00
parent 20d0610200
commit ea5732ff83
2 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
publish/choose.inc.php
+3 -5
View File
@@ -14,13 +14,11 @@ if ($queue) { ?>
<p>To view already-posted articles, <a href="edit?queue=0">click here</a>.</p>
<?php } else { ?>
<p>To view articles in the queue, <a href="edit?queue=1">click here</a>.</p>
<div class="input" style="text-align: justify">
<form action="" method="get">
<input name="search" type="text" class="input" id="search" maxlength="40" value="<?= form_value(get_search_args()) ?>" />
<form class="story-search" action="" method="get">
<input name="search" type="text" maxlength="40" aria-label="Search the stories" value="<?= form_value(get_search_args()) ?>" />
<input name="queue" type="hidden" value="0" />
<button type="submit" id="choose" name="action" value="choose" class="inputbutton">Search</button>
<button type="submit" id="choose" name="action" value="choose">Search</button>
</form>
</div>
<?php }
echo display_stories();
?>
publish/style.css
+42
View File
@@ -182,6 +182,40 @@ ul.error-box li {
top:0.6em;
}
/* The search box above the list of posted stories in publish/edit */
#main .story-search {
display: flex;
gap: 6px;
margin: 10px 0 20px;
}
#main .story-search input {
box-sizing: border-box;
width: 300px;
min-width: 0;
padding: 3px 8px;
border: 1px solid #b8c9be;
border-radius: 8px;
font-size: 12pt;
}
#main .story-search input:focus {
border-color: #006633;
outline: none;
box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
}
#main .story-search button {
padding: 4px 14px;
border: 1px solid #006633;
border-radius: 6px;
background-color: #ffffff;
color: #006633;
font: bold 11pt "Noto Sans", "Verdana", sans-serif;
cursor: pointer;
}
#main .story-search button:hover {
background-color: #006633;
color: #ffffff;
}
/*
* Phones: one column, with each label above its input. The inputs, the
* editor and the image box take the full width, the controls are at
@@ -312,6 +346,14 @@ ul.error-box li {
gap: 10px;
margin-top: 18px;
}
#main .story-search input {
flex: 1;
width: auto;
min-height: 44px;
padding: 8px 12px;
font-size: 16px;
}
#main .story-search button,
#main .submission button {
min-height: 44px;
margin: 0;