AS1024/itflow
1
0
Fork 0
mirror of https://github.com/itflow-org/itflow synced 2026-11-11 07:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show each starter content item as it will look under Pick which - a tag as its pill, a category as its chip, a product with its price and billing, with what each is for - and Preview the whole of a ticket, project, document, vendor or license template, canned response or product in a window, the words filled in as it is used marked; Maintenance > Starter Content gets Pick which too, its Add bringing only what is ticked and Will be added following the ticks, sharing admin/includes/starter_content_pick.php, admin/starter_content_preview.php and js/starter_content.js with Get started

Browse Source
This commit is contained in:
johnnyq
2026-10-25 15:04:11 -04:00
parent 6d29583cef
commit 52df79f8b0
11 changed files with 648 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
css/itflow_custom.css
View File

@@ -8360,43 +8360,6 @@ a.itflow-portal-request:focus-visible {
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Pick which - what a pack would add, each ticked, in a box that scrolls */
.itflow-gs-pick > summary {
color: var(--bs-link-color);
cursor: pointer;
width: max-content;
}
.itflow-gs-pick-list {
max-height: 16rem;
overflow-y: auto;
padding: .5rem .75rem;
border: 1px solid var(--bs-border-color);
border-radius: .375rem;
background: var(--bs-body-bg);
}
/* Two across when there is room, reading along the rows, each group under its heading - inside the box that scrolls */
.itflow-gs-pick-cols {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
column-gap: 1.5rem;
row-gap: .15rem;
}
.itflow-gs-pick-list .form-check {
margin-bottom: 0;
min-width: 0;
}
.itflow-gs-pick-group {
grid-column: 1 / -1;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--bs-secondary-color);
margin: .5rem 0 .25rem;
}
.itflow-gs-pick-group:first-child {
margin-top: 0;
}
/* "or", across the card between two ways of doing a step */
.itflow-gs-or {
display: flex;
@@ -8470,6 +8433,151 @@ a.itflow-portal-request:focus-visible {
}
}
/* ==========================================================================
Starter content's Pick which (admin/includes/starter_content_pick.php,
js/starter_content.js) - on Maintenance > Starter Content and Get started:
what a pack would add, each item ticked and shown as it will look, in a
box that scrolls; and Preview's window.
========================================================================== */
.itflow-starter-pick > summary {
color: var(--bs-link-color);
cursor: pointer;
width: max-content;
}
.itflow-starter-pick-box {
max-height: 20rem;
overflow-y: auto;
padding: .25rem .75rem;
border: 1px solid var(--bs-border-color);
border-radius: .375rem;
background: var(--bs-body-bg);
text-align: start;
}
/* One to a line, each with what it is for; tags two or more across, as they are only their pill */
.itflow-starter-pick-items {
display: grid;
grid-template-columns: 1fr;
}
.itflow-starter-pick-items.is-pills {
grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
column-gap: 1rem;
}
.itflow-starter-item {
display: flex;
align-items: flex-start;
gap: .6rem;
padding: .4rem 0;
min-width: 0;
}
.itflow-starter-pick-items:not(.is-pills) .itflow-starter-item + .itflow-starter-item {
border-top: 1px solid var(--bs-border-color-translucent);
}
.itflow-starter-item > .form-check-input {
margin-top: .2rem;
}
.itflow-starter-item-label {
cursor: pointer;
flex: 1 1 auto;
font-weight: 400;
margin-bottom: 0;
}
/* A tag named longer than its column wraps inside its pill rather than pushing the box sideways */
.itflow-starter-item-label .itflow-tag {
max-width: 100%;
white-space: normal;
}
.itflow-starter-item-about {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.itflow-starter-pick-group {
grid-column: 1 / -1;
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--bs-secondary-color);
margin: .6rem 0 .1rem;
}
.itflow-starter-pick-group:first-child {
margin-top: .25rem;
}
/* Maintenance > Starter Content - the list under its pack, in the first column */
.itflow-starter-pack-cell {
min-width: 18rem;
}
/* Preview - the facts as a list beside their labels, then what it says as it reads */
.itflow-starter-preview-facts {
display: grid;
grid-template-columns: max-content 1fr;
gap: .35rem 1rem;
margin-bottom: 1rem;
}
.itflow-starter-preview-facts dt {
font-weight: 400;
color: var(--bs-secondary-color);
}
.itflow-starter-preview-facts dd {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.itflow-starter-preview-head {
font-size: .8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--bs-secondary-color);
margin: 1.25rem 0 .5rem;
}
.itflow-starter-preview-doc,
.itflow-starter-preview-notes {
border: 1px solid var(--bs-border-color);
border-radius: .375rem;
padding: .75rem 1rem;
background: var(--bs-tertiary-bg);
overflow-x: auto;
}
.itflow-starter-preview-doc table {
width: 100%;
margin-bottom: .75rem;
border-collapse: collapse;
}
.itflow-starter-preview-doc th,
.itflow-starter-preview-doc td {
border: 1px solid var(--bs-border-color);
padding: .25rem .5rem;
vertical-align: top;
}
.itflow-starter-preview-doc > :last-child {
margin-bottom: 0;
}
.itflow-starter-preview-list {
padding-left: 1.25rem;
margin-bottom: 0;
}
.itflow-starter-preview-list > li {
padding: .15rem 0;
}
/* [Words in brackets] - filled in when it is used */
.itflow-starter-fill {
background: rgba(var(--bs-primary-rgb), .12);
color: var(--bs-emphasis-color);
border-radius: .25rem;
padding: 0 .2rem;
}
@media (max-width: 575.98px) {
.itflow-starter-preview-facts {
grid-template-columns: 1fr;
gap: 0;
}
.itflow-starter-preview-facts dd {
margin-bottom: .5rem;
}
}
/* ==========================================================================
Settings (admin/settings*.php, functions/settings.php, js/settings.js) - a
page header, sections with what they are for beside their fields, a save