Skip to content

Put form labels above their fields and line up the entry editor's status row #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mraible merged 1 commit into from
Nov 15, 2026
Merged

Put form labels above their fields and line up the entry editor's status row #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,13 @@
- The default blogroll can't be renamed, since themes find it by its
name, and the page works on phones.

- **Form labels sit above their fields.** In the admin forms a label used to
sit in a column beside its field, so short labels were a long way from
their inputs and long ones wrapped onto two lines. Labels are now above
their fields at every width, as they already were on phones. On the entry
editor, the Permalink and Status rows line up with the rest and the status
is shown as a badge.

### Bug fixes

- **A bad date pattern in a theme no longer blanks the page.**
Expand Down
26 changes: 13 additions & 13 deletions app/src/main/webapp/WEB-INF/jsps/editor/EntryEdit.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,12 @@
<s:if test="actionName == 'entryEdit'">
<div class="row mb-3">

<label class="col-md-3" for="entry_bean_permalink">
<label class="col-sm-3 col-form-label" for="entry_bean_permalink">
<s:text name="weblogEdit.permaLink"/>
</label>

<div class="controls col-md-9">
<p class="form-control-plaintext">
<div class="controls col-sm-9">
<div class="form-control-plaintext">
<s:if test="bean.published">
<a id="entry_bean_permalink" href='<s:property value="entry.permalink" />'>
<s:property value="entry.permalink"/>
Expand All @@ -82,7 +82,7 @@
<s:else>
<s:property value="entry.permalink"/>
</s:else>
</p>
</div>
</div>

</div>
Expand All @@ -107,43 +107,43 @@

<%-- status --%>
<div class="row mb-3">
<label class="col-md-3" for="weblogEdit.status"><s:text name="weblogEdit.status"/></label>
<label class="col-sm-3 col-form-label"><s:text name="weblogEdit.status"/></label>

<div class="controls col-md-9">
<div class="controls col-sm-9">

<p class="form-control-plaintext">
<div class="form-control-plaintext">
<s:if test="bean.published">
<span class="label text-bg-success">
<span class="badge text-bg-success">
<s:text name="weblogEdit.published"/>
(<s:text name="weblogEdit.updateTime"/>
<s:date name="entry.updateTime"/>)
</span>
</s:if>
<s:elseif test="bean.draft">
<span class="label text-bg-info">
<span class="badge text-bg-info">
<s:text name="weblogEdit.draft"/>
(<s:text name="weblogEdit.updateTime"/>
<s:date name="entry.updateTime"/>)
</span>
</s:elseif>
<s:elseif test="bean.pending">
<span class="label text-bg-warning">
<span class="badge text-bg-warning">
<s:text name="weblogEdit.pending"/>
(<s:text name="weblogEdit.updateTime"/>
<s:date name="entry.updateTime"/>)
</span>
</s:elseif>
<s:elseif test="bean.scheduled">
<span class="label text-bg-info">
<span class="badge text-bg-info">
<s:text name="weblogEdit.scheduled"/>
(<s:text name="weblogEdit.updateTime"/>
<s:date name="entry.updateTime"/>)
</span>
</s:elseif>
<s:else>
<span class="label text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
<span class="badge text-bg-danger"><s:text name="weblogEdit.unsaved"/></span>
</s:else>
</p>
</div>

</div>

Expand Down
24 changes: 24 additions & 0 deletions app/src/main/webapp/roller-ui/styles/roller.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1336,6 +1336,30 @@ tr.rollertable_pending {
font-weight: 700;
}

/* Forms put each label above its field at every width, as they already did on
narrow screens. Beside the field, a short label such as "Title" sat a long way
from its input, and long labels wrapped onto two lines. The label and field
columns the forms are written with (3 and 9 of 12) become full-width rows. */
.form-horizontal .row > .col-sm-3,
.form-horizontal .row > .col-md-3,
.form-horizontal .row > .col-sm-9,
.form-horizontal .row > .col-md-9 {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
margin-left: 0;
}

.form-horizontal .row > .col-form-label {
padding-top: 0;
padding-bottom: 0.25rem;
}

/* An empty label only held the field in the second column. */
.form-horizontal .row > label:empty {
display: none;
}

/* Bootstrap 5 leaves readonly inputs looking editable; shade them like
disabled ones so fields the user cannot change read as such. */
.form-control[readonly],
Expand Down
Loading