(has to be, since it
contains other divs — see the phantom-empty-
fix), so it needs the same
padding set explicitly to line up with every sibling field. */
.aq_parent-trigger-row > .aq_parent-question-picker {
padding-left: 10px;
padding-right: 10px;
}
/* application.css has a site-wide `select { width: fit-content; }` rule, so
every select sizes to its own option text by default — Category/Question
Type just have long enough option text that this isn't obvious, but
Trigger Answer's short options ("Yes"/"No"/"Skip"/"Pick a Parent Question
first") made it visibly narrower than every text-input field (which fill
100% via .au_clsFormInput). Same fix applied to Question Type + Category
on both pages, since they have the identical underlying issue — scoped to
just these fields rather than overriding the global select rule, which
may be intentional elsewhere on the site. an_clsFormSelect only exists on
the New page's Question Type/Category; the Edit page has no shared class
for those two, so they're targeted by their (Rails-default/explicit) ids. */
#aq_trigger_answer_select,
.an_clsFormSelect,
#question_type_select,
#question_f_CategoryID {
width: 100%;
}
/* Equal split — each field then gets the same width as a single normal grid
column (the row spans 2 columns total), instead of Parent Question's text
input stretching wider than fields like Country/State/County. */
.aq_parent-trigger-row > .aq_parent-question-picker,
.aq_parent-trigger-row > .aq_trigger-answer-field {
flex: 1 1 0;
}
/* Rails wraps any field that has a validation error (its label AND its input)
in a block-level
, which knocked the label onto
its own line away from the textbox. display: contents makes the wrapper
disappear from layout so label + input sit exactly as they do without an error. */
.aq_field-grid .field_with_errors,
#aq_edit_container .field_with_errors,
#aq_new_container .field_with_errors {
display: contents;
}
/* Guard against phone-width overflow: several fields use HTML `size`/`cols`
attributes (size="30", size="40", size="60x4") which set an intrinsic
character width that can be wider than a phone screen once the container's
padding/margin is subtracted. Force them to respect the grid column
instead of pushing the page into horizontal scroll. */
.aq_field-grid input[type="text"],
.aq_field-grid input[type="number"],
.aq_field-grid input[type="datetime-local"],
.aq_field-grid select,
.aq_field-grid textarea {
box-sizing: border-box;
max-width: 100%;
}
/* Floating Save button, always visible in the bottom-right of the viewport,
in addition to (not instead of) the normal in-form Save button. */
.aq_fixed-save {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: normal;
}
/* The whole grid goes single-column here, not just Parent Question/Trigger
Answer — that pair just happens to need it earliest (they were cutting
off text under ~670px), but every field should stack together at this
width, not just those two. */
@media (max-width: 670px) {
.aq_field-grid {
grid-template-columns: 1fr;
gap: 0;
}
/* Only 1 column exists now — span 2 would force the grid to add an extra
column just to satisfy it, breaking the single-column layout. */
.aq_field-grid > .aq_parent-trigger-row {
grid-column: 1 / -1;
flex-direction: column;
/* align-items controls the *cross* axis — once flex-direction is column
that's horizontal, so the row's default flex-start was shrinking both
fields to their content width instead of the full row width every
other stacked field gets. */
align-items: stretch;
/* The row's own gap (4px 32px) only gives 4px between the two stacked
fields — every other stacked field gets 16px via its own margin-bottom
(.aq_field-grid > p). Match that here since these two don't have that
margin (it's zeroed out so they can sit side-by-side above 670px). */
gap: 16px;
}
}
@media (max-width: 480px) {
#aq_edit_container,
#aq_new_container {
max-width: 100%;
}
.aq_fixed-save {
right: 12px;
bottom: 12px;
padding: 10px 18px;
}
}
/* Daily Question Schedule table: on a phone-width screen, a 4-column table
forces either sideways scrolling or squished, hard-to-read text. Instead,
each row becomes its own stacked card — the column header is shown as a
label in front of each value, one field per line, everything wraps. */
@media (max-width: 600px) {
.aq_dq-table thead {
display: none;
}
.aq_dq-table, .aq_dq-table tbody, .aq_dq-table tr, .aq_dq-table td {
display: block;
width: 100%;
}
.aq_dq-table tr {
margin-bottom: 12px;
border: 1px solid #ddd;
border-radius: 6px;
padding: 4px 0;
}
.aq_dq-table td {
white-space: normal !important;
padding: 6px 10px !important;
}
.aq_dq-table td::before {
content: attr(data-label);
display: block;
font-size: 0.8em;
font-weight: bold;
color: #666;
margin-bottom: 2px;
}
.aq_dq-table td[data-label="Actions"] {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.aq_dq-table td[data-label="Actions"]::before {
width: 100%;
}
}
.aq_answer-options-section {
margin-top: 20px;
padding: 10px;
/* It is a direct child of the field grid, so without this it sat in ONE narrow column, off to the side/below the Question
Type and cut off. Now it takes the whole row, directly under Question Type, at any width. */
grid-column: 1 / -1;
min-width: 0;
box-sizing: border-box;
text-align: left;
}
.aq_answer-option {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px;
background-color: #fff;
box-sizing: border-box;
max-width: 100%;
}
/* The text box takes the leftover width (it had a fixed size="30" that overflowed the blue box); the sort number stays small. */
.aq_answer-option input[type="text"] { flex: 1 1 200px; min-width: 0; width: auto; }
.aq_answer-option input[type="number"] { flex: 0 0 110px; min-width: 0; }
/* app/assets/stylesheets/admin_questions.css */
.aq_admin-questions-stats {
padding: 20px;
}
form input[type="text"] {
margin-right: 5px;
}
/* Same "every column always stays visible, no matter the browser width"
pattern as .clsUserTableWrapper/.clsUserTable on the admin Users page
(admin_users.css) — a horizontally + vertically scrollable wrapper with a
sticky header, and table-layout: fixed + a
so columns shrink
together as the window narrows instead of any of them getting hidden or
the table quietly overflowing the page. */
.aq_question-table-wrapper {
overflow-x: auto;
/* No max-height / inner vertical scrolling any more: the whole page scrolls, not the table box (removed at the admin's request). */
width: 100%;
margin-top: 0;
}
.aq_question-table thead th {
position: sticky;
top: 0;
z-index: 1;
}
.aq_question-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background-color: #f0f8ff;
border-radius: 8px;
}
.aq_colEdit { width: 80px; }
.aq_colPriority { width: 90px; } /* fixed: roomy enough for a 4-digit number and the "Priority" title/search box, not a shrinking % */
.aq_colCategory { width: 8%; }
.aq_colQuestion { width: 18%; }
.aq_colQotd { width: 7.5em; } /* wide enough for "MM/DD/YYYY" on one line (time + MST under it), not a squeezed % */
.aq_colEventStart { width: 7.5em; }
.aq_colExpiration { width: 7.5em; }
.aq_colType { width: 6%; }
.aq_colParentId { width: 6%; }
.aq_colAnswerCount { width: 6%; }
.aq_colTrigger { width: 7%; }
.aq_colTags { width: 8%; }
.aq_colActive { width: 4%; }
.aq_colDelete { width: 64px; }
.aq_colDateAdded { width: 7.5em; } /* "MM/DD/YY" on line 1, time + zone on line 2 */
.aq_question-table th, .aq_question-table td {
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
white-space: normal;
overflow-wrap: break-word;
}
.aq_question-table th {
background-color: #0288d1;
color: white;
text-align: center;
}
/* Half-screen and narrow: same as admin_users.css — columns keep shrinking
and text wraps onto extra lines instead of anything being hidden. The
wrapper's overflow-x: auto above is the fallback for extreme cases. */
@media (min-width: 600px) and (max-width: 960px) {
.aq_question-table th, .aq_question-table td {
padding: 4px 6px;
}
.aq_question-table {
font-size: 0.85em;
}
}
@media (max-width: 599px) {
.aq_question-table th, .aq_question-table td {
padding: 4px 6px;
}
.aq_question-table {
font-size: 0.8em;
}
}
/* Per-column search row (search_id, search_category, search_question, etc.)
at the top of the table — one small text input per searchable column,
plus a Search/Clear pair in the Edit column's slot. */
.aq_clsColumnSearchRow th {
background-color: #ffffff;
padding: 4px 6px;
}
.aq_clsColumnSearchInput {
width: 100%;
min-width: 60px;
box-sizing: border-box;
padding: 5px 6px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.85em;
color: #222;
}
.clsButton.aq_clsColumnSearchBtn {
display: block;
width: 100%;
height: auto;
margin: 0 0 4px 0;
padding: 4px 6px;
font-size: 0.8em;
}
.clsButton.aq_clsColumnSearchBtn:last-child {
margin-bottom: 0;
}
.aq_question-table tr:hover {
background-color: #e0f0ff;
}
#idDebugInfo {
background-color: #fff3cd;
padding: 10px;
border-radius: 5px;
margin: 10px 0;
text-align: left;
}
.q_clsSearchForm {
margin: 15px 0;
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.sort-link {
color: white;
text-decoration: none;
}
.sort-link:hover {
color: #e0f0ff;
text-decoration: underline;
}
.clsAdminContainer {
margin: 20px auto;
padding: 20px;
}
/* Scoped to this page only — pull the title up a bit, less whitespace above it. */
.aq_index-page h1 {
margin-top: 0;
margin-bottom: 6px;
}
/* "Add, edit, or delete..." blurb + Add New Question button share a line to
save vertical space instead of the button sitting in its own row below. */
.aq_index-header-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 6px;
}
.aq_index-header-row p {
margin: 0;
}
/* Collapsed by default — an admin doesn't need the search-syntax reminder on
every visit; same "Admin View Only" dashed convention used elsewhere. */
.aq_index-tips {
margin: 0 0 10px;
}
.aq_index-tips summary {
cursor: pointer;
font-weight: bold;
color: #6c757d;
font-size: 0.85em;
}
.aq_index-tips p {
margin-top: 6px;
}
.aq_result-count {
color: #555;
font-size: 0.9em;
margin: 0 0 8px;
}
.aq_show-expired-toggle {
margin: 4px 0 8px;
}
.aq_show-expired-toggle label {
cursor: pointer;
color: #555;
}
/* Whole page is admin-only — shade the container red/bordered instead of the
default site-wide blue, same "this is restricted" convention used for
admin-only badges/boxes elsewhere (see docs/design.md "Admin-only
marking"). Compound selector (two classes) so it reliably beats the
later-loaded, single-class .clsBlueContainer rule in application.css
regardless of file concatenation order. */
.aq_index-page.clsBlueContainer {
background: linear-gradient(160deg, #fff5f5, #fdecea);
border: 3px solid #c0392b;
}
.q_clsSearchForm {
display: flex !important;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 15px;
}
/* Expired questions – grey background */
.aq_question-table tr.expired {
background-color: #8b8686 !important;
}
/* Optional: slightly darker on hover so it still feels interactive */
.aq_question-table tr.expired:hover {
background-color: #4e4141 !important;
}
/* Inactive questions (IsActive = No) – soft red background. Expired (grey) wins if a question is both. */
.aq_question-table tr.inactive {
background-color: #ffcdd2 !important;
}
.aq_question-table tr.inactive:hover {
background-color: #ef9a9a !important;
}
/* Colour key (show/hide) above the questions table. */
.aq_legend { margin: 4px 0 8px; font-size: 0.9em; }
.aq_legend summary { cursor: pointer; font-weight: bold; display: inline-block; padding: 3px 10px; border: 1px solid #999; border-radius: 6px; background: #fff; }
.aq_legend-body { margin-top: 6px; padding: 8px 12px; background: #fff; border: 1px solid #ccc; border-radius: 8px; }
.aq_legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.aq_legend-swatch { display: inline-block; width: 28px; height: 16px; border: 1px solid #666; border-radius: 3px; flex: none; }
/* Parent Question type-ahead picker (Admin Add/Edit Question). */
.aq_parent-question-picker {
position: relative;
}
/* position:fixed with top/left/width set in JS from the search input's own
getBoundingClientRect() (see the script at the bottom of edit.html.erb) —
this used to be position:absolute anchored to .aq_parent-question-picker,
which rendered the list up near the top of the page instead of under the
search box (likely the grid/ancestor layout on this page not giving it the
containing block it needed). Fixed positioning computed directly from the
input's real screen location sidesteps that entirely. */
.aq_parent-question-suggestions {
position: fixed;
z-index: 1000;
background: #fff;
border: 1px solid #ccc;
border-radius: 6px;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.aq_parent-question-suggestion {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
font-size: 0.95em;
}
.aq_parent-question-suggestion:last-child {
border-bottom: none;
}
.aq_parent-question-suggestion:hover {
background-color: #e3f2fd;
}
.aq_parent-question-suggestion-empty {
color: #888;
cursor: default;
}
.aq_parent-question-suggestion-empty:hover {
background-color: transparent;
}
.aq_parent-question-selected {
margin-top: 6px;
padding: 8px 12px;
background-color: #e3f2fd;
border: 1px solid #90caf9;
border-radius: 6px;
font-size: 0.9em;
}
.aq_parent-question-clear {
margin-left: 8px;
border: none;
background: none;
color: #c0392b;
cursor: pointer;
font-size: 0.9em;
}
/* Save button at the bottom of the Edit Question form: a bit bigger than the default 40px button,
with the label centered top to bottom (explicit height, no vertical padding, so the text
doesn't sit low inside the ). */
.clsButton.aq_save-btn {
height: 50px;
padding: 0 40px;
font-size: 1.15em;
line-height: 50px;
}
/* Yellow highlight for a field that needs the admin's attention — State/Province
while required (Events category) and not yet filled in (see the
aq_category_select/aq_location_state toggle script below), and Event Start Date
when it's after the Expiration date (see edit.html.erb). */
.aq-required-field {
background-color: #fff9c4;
}
/* Icon field: a wide-enough box to see what you type, with the explanation beside it
on wide screens (stacked underneath on narrow ones). */
.aq_field-grid > .aq_icon-row {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 6px 20px;
margin: 0 0 16px 0;
}
.aq_icon-field { flex: 0 0 auto; }
.aq_icon-input { width: 11em; max-width: 100%; box-sizing: border-box; }
.aq_icon-help {
flex: 1 1 320px;
min-width: 0;
color: #666;
line-height: 1.4;
padding-top: 22px;
}
@media (max-width: 700px) {
.aq_icon-help { padding-top: 0; flex-basis: 100%; }
}
/* New Question page only: line the Icon label + box up with the other grid fields
(same left edge, same label-then-input stacking, same 16px bottom margin), and
sit the help text on the input's baseline row. */
#aq_new_container .aq_icon-row {
align-items: flex-end;
}
#aq_new_container .aq_icon-field {
margin: 0 0 0 1ch; /* nudge label + box right about one character */
}
#aq_new_container .aq_icon-field .aq_icon-input {
width: 11em;
display: block;
box-sizing: border-box;
}
#aq_new_container .aq_icon-help {
padding-top: 0;
padding-bottom: 8px;
}
/* Edit Question page only: nudge the Icon label + box right about one character
(same nudge as the New Question page above). */
#aq_edit_container .aq_icon-field {
margin-left: 1ch;
}
/* Edit Question page: Priority sits to the right of the Question box when the
window is wide enough, and drops underneath it when it isn't. */
#aq_edit_container .aq_question-priority-row,
#aq_new_container .aq_question-priority-row {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 4px 32px;
}
#aq_edit_container .aq_question-priority-row > p,
#aq_new_container .aq_question-priority-row > p {
margin: 0 0 16px 0;
min-width: 0;
}
#aq_edit_container .aq_question-cell { flex: 0 1 auto; }
/* New page's textarea is width:100% (au_clsFormInput), which made this cell claim the
whole row and push Priority underneath. Let it take the leftover width instead. */
#aq_new_container .aq_question-cell { flex: 1 1 400px; }
#aq_edit_container .aq_priority-cell,
#aq_new_container .aq_priority-cell { flex: 0 0 auto; }
#aq_new_container .aq_priority-cell input { width: 8em; }
/* Manage Questions: compact header area (docs/design.md, "Admin pages: compact header area").
Title + blurb + Add button share one row; Show expired, Columns, Search Tips and the
"Showing N of M" count share one small-font toolbar row instead of four stacked lines. */
.aq_index-page {
padding-top: 2px;
}
.aq_index-page h1 {
font-size: 1.15em;
margin: 2px 0;
}
.aq_index-header-row {
justify-content: flex-start;
gap: 4px 16px;
margin-bottom: 2px;
font-size: 0.85em;
}
.aq_index-header-row .clsButton {
height: 28px;
margin: 0 0 0 auto;
padding: 2px 12px;
font-size: 0.95em;
}
.aq_index-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 18px;
font-size: 0.85em;
margin: 2px 0 6px;
}
.aq_index-toolbar > p,
.aq_index-toolbar > details {
margin: 0;
}
.aq_index-toolbar .aq_cols-menu { font-size: 1em; }
.aq_index-toolbar .aq_cols-menu summary { padding: 1px 8px; }
.aq_index-toolbar .aq_index-tips summary { font-size: 1em; }
.aq_index-toolbar details[open] { flex-basis: 100%; }
.aq_index-toolbar .aq_result-count {
margin: 0 0 0 auto;
font-size: 1em;
}
/* When the admin has hidden columns (Columns menu), the leftover width goes to Question — in a
table-layout:fixed table the extra otherwise gets spread over every column, ballooning Edit
and squeezing Question. Edit/Delete keep their fixed 64px. */
.aq_question-table.aq_cols-customized .aq_colQuestion {
width: auto;
}
/* Delete column: the buttons keep their whole word on one line. With columns hidden the column is a bit wider (Question, which takes
the leftover width, gets a bit narrower); while picking a QOTD it's wider still, to fit "Set as QOTD" too. */
.aq_question-table .aq_delete-cell .clsButton { white-space: nowrap; }
.aq_question-table.aq_cols-customized .aq_colDelete { width: 90px; }
.aq_question-table.aq_assigning .aq_colDelete,
.aq_question-table.aq_assigning.aq_cols-customized .aq_colDelete { width: 140px; }
/* admin_user_events.css – styles for user_events page */
.admin-events-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.admin-events-table th {
background: #333 !important;
color: #fff !important;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.admin-events-table th:hover {
background: #444 !important;
}
.admin-events-table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
.admin-events-table th {
background: #f4f4f4;
font-weight: bold;
}
.answered { background: #e8f5e9; }
.unanswered { background: #fff3e0; }
.clsSmallButton {
padding: 6px 12px;
font-size: 1em;
}
/* app/assets/stylesheets/admin_user_notifications.css */
.admin-notifications-table {
width: 100%;
border-collapse: collapse;
margin-top: 1.5rem;
}
.admin-notifications-table th,
.admin-notifications-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.admin-notifications-table th {
background-color: #f2f2f2;
font-weight: bold;
color: #000; /* black text for headings */
}
.admin-notifications-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.sort-link {
text-decoration: none;
color: inherit;
}
.sort-link:hover {
text-decoration: underline;
}
.sort-link {
text-decoration: none;
color: inherit;
display: block;
}
.sort-link:hover {
text-decoration: underline;
color: #0066cc;
}
/* app/assets/stylesheets/admin_users.css */
.au_clsEditLayout {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: start;
}
.au_clsEditMain {
min-width: 0;
}
.au_clsEditSidebar {
}
.au_clsGpsSection {
display: flex;
flex-direction: column;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 0 12px 12px;
background-color: #f8f9fa;
}
/* This div also carries the site-wide .clsFormRow class, which sets
gap: 20px (application.css) — that pushed the title away from the map
below it. .au_clsGpsTitle's own margin-bottom already gives the title
its intended spacing, so the flex gap here should be 0. Element+class
selector (not just .au_clsGpsSection) so this reliably beats .clsFormRow's
gap regardless of which file Sprockets happens to bundle last. */
div.au_clsGpsSection {
gap: 0;
}
.au_clsGpsTitle {
margin: 0 0 10px;
font-size: 15pt;
}
.au_clsGpsBody {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.au_clsGpsControls {
display: flex;
flex-direction: column;
gap: 12px;
flex-shrink: 0;
width: 100%;
max-width: 480px;
}
.au_clsGpsControls > div {
flex-grow: 0;
flex-shrink: 0;
}
.au_clsGpsLatLngRow {
display: flex;
gap: 12px;
}
.au_clsGpsLatLngRow .app_clsFormField {
flex: 1;
min-width: 0;
}
.au_clsGpsSearchRow {
display: flex;
gap: 8px;
align-items: center;
margin-top: auto;
padding-top: 12px;
}
.au_clsLocationSearch {
flex: 1;
min-width: 0;
padding: 6px 10px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 15pt;
}
.au_clsEditMap {
flex-shrink: 0;
width: 480px;
height: 480px;
border-radius: 4px;
border: 1px solid #dee2e6;
}
.au_clsMapSection {
margin-bottom: 4px;
padding: 8px 15px;
}
/* The Hide/Show Map button is a .clsButton, which carries its own
margin: 10px globally (application.css) — same issue as the New User
button elsewhere on this page: that margin still pads out the header
row even though the row itself and this container are already tight. */
#au_map_toggle {
margin: 0;
}
.au_clsMapHeaderRow {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
/* .clsBlueContainer carries a 20px margin globally — collapses fine against
the page background, but stacked back-to-back on this page it leaves an
oversized gap above the users table. Tighten just that gap here.
(Uses ~ rather than + — a