feat: make display setup actionable
This commit is contained in:
ekklesia
+240
-10
@@ -335,24 +335,112 @@
|
||||
gap: var(--signage-gap);
|
||||
}
|
||||
|
||||
.signage-group {
|
||||
border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
|
||||
border-radius: var(--ekklesia-radius-md);
|
||||
.signage-pairing-steps {
|
||||
display: grid;
|
||||
gap: var(--signage-gap-tight);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signage-pairing-actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--signage-gap-tight);
|
||||
}
|
||||
|
||||
.signage-pairing-actions a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.signage-copy-status {
|
||||
color: var(--ekklesia-text-secondary);
|
||||
display: block;
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
min-height: 1.25em;
|
||||
margin-block-start: var(--ekklesia-spacing-xs);
|
||||
}
|
||||
|
||||
.signage-pairing-steps li {
|
||||
align-items: center;
|
||||
background: var(--ekklesia-background-inset);
|
||||
border-radius: var(--ekklesia-radius-md);
|
||||
display: flex;
|
||||
gap: var(--signage-gap-tight);
|
||||
min-width: 0;
|
||||
padding: var(--ekklesia-spacing-md);
|
||||
}
|
||||
|
||||
.signage-pairing-steps__number {
|
||||
align-items: center;
|
||||
background: var(--ekklesia-accent-base);
|
||||
border-radius: var(--ekklesia-radius-pill);
|
||||
color: var(--ekklesia-accent-foreground);
|
||||
display: inline-flex;
|
||||
flex: 0 0 var(--ekklesia-control-height-sm);
|
||||
font-weight: var(--ekklesia-typography-weight-bold);
|
||||
height: var(--ekklesia-control-height-sm);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.signage-display-empty {
|
||||
align-items: baseline;
|
||||
color: var(--ekklesia-text-secondary);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--ekklesia-spacing-xs) var(--signage-gap-tight);
|
||||
margin-block-start: var(--signage-gap-tight);
|
||||
}
|
||||
|
||||
.signage-display-empty strong {
|
||||
color: var(--ekklesia-text-primary);
|
||||
}
|
||||
|
||||
.signage-new-group > .ek-field {
|
||||
min-width: 16rem;
|
||||
}
|
||||
|
||||
.signage-group {
|
||||
background: var(--ekklesia-background-canvas);
|
||||
border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
|
||||
border-radius: var(--signage-panel-radius);
|
||||
display: grid;
|
||||
gap: var(--signage-gap);
|
||||
padding: var(--ekklesia-spacing-lg);
|
||||
}
|
||||
|
||||
.signage-group__header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--signage-gap-tight);
|
||||
}
|
||||
|
||||
.signage-group__header .ek-button:first-of-type {
|
||||
.signage-group__header > .ek-button {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.signage-group__identity {
|
||||
display: grid;
|
||||
gap: var(--ekklesia-spacing-2xs);
|
||||
}
|
||||
|
||||
.signage-group__identity h3,
|
||||
.signage-audiences__heading h4,
|
||||
.signage-channel__header h5,
|
||||
.signage-channel-form__heading h5 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signage-hierarchy-label {
|
||||
color: var(--ekklesia-text-muted);
|
||||
font-size: var(--ekklesia-typography-size-xs);
|
||||
font-weight: var(--ekklesia-typography-weight-medium);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.signage-confirm {
|
||||
align-items: center;
|
||||
background: var(--ekklesia-status-danger-background);
|
||||
@@ -369,18 +457,160 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.signage-registration-guide {
|
||||
background: var(--ekklesia-background-inset);
|
||||
.signage-audiences {
|
||||
border-block-start: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
|
||||
display: grid;
|
||||
gap: var(--signage-gap);
|
||||
padding-block-start: var(--signage-gap);
|
||||
}
|
||||
|
||||
.signage-audiences__heading {
|
||||
align-items: end;
|
||||
display: flex;
|
||||
gap: var(--signage-gap);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signage-audiences__heading > div {
|
||||
display: grid;
|
||||
gap: var(--ekklesia-spacing-2xs);
|
||||
}
|
||||
|
||||
.signage-audiences__heading > span {
|
||||
color: var(--ekklesia-text-secondary);
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
}
|
||||
|
||||
.signage-channel-list {
|
||||
display: grid;
|
||||
gap: var(--signage-gap-tight);
|
||||
}
|
||||
|
||||
.signage-channel {
|
||||
background: var(--ekklesia-background-surface);
|
||||
border: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
|
||||
border-inline-start: var(--ekklesia-spacing-2xs) solid var(--ekklesia-accent-base);
|
||||
border-radius: var(--ekklesia-radius-md);
|
||||
display: grid;
|
||||
gap: var(--ekklesia-spacing-xs);
|
||||
margin-block-end: var(--signage-gap);
|
||||
gap: var(--signage-gap-tight);
|
||||
margin-inline-start: var(--ekklesia-spacing-sm);
|
||||
padding: var(--ekklesia-spacing-md);
|
||||
}
|
||||
|
||||
.signage-registration-guide ol {
|
||||
.signage-channel__header {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
gap: var(--signage-gap-tight);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.signage-channel__header > div {
|
||||
display: grid;
|
||||
gap: var(--ekklesia-spacing-xs);
|
||||
}
|
||||
|
||||
.signage-channel__meta {
|
||||
align-items: center;
|
||||
color: var(--ekklesia-text-secondary);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
gap: var(--ekklesia-spacing-xs);
|
||||
}
|
||||
|
||||
.signage-channel__meta code,
|
||||
.signage-pairing-steps code {
|
||||
background: var(--ekklesia-background-inset);
|
||||
border-radius: var(--ekklesia-radius-sm);
|
||||
color: var(--ekklesia-text-primary);
|
||||
padding: var(--ekklesia-spacing-2xs) var(--ekklesia-spacing-xs);
|
||||
}
|
||||
|
||||
.signage-channel__displays {
|
||||
border-block-start: var(--ekklesia-border-width) solid var(--ekklesia-border-divider);
|
||||
display: grid;
|
||||
gap: var(--signage-gap-tight);
|
||||
padding-block-start: var(--signage-gap-tight);
|
||||
}
|
||||
|
||||
.signage-channel__empty {
|
||||
color: var(--ekklesia-text-muted);
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
margin: 0;
|
||||
padding-inline-start: var(--ekklesia-spacing-xl);
|
||||
}
|
||||
|
||||
.signage-display-row {
|
||||
align-items: end;
|
||||
background: var(--ekklesia-background-canvas);
|
||||
border-radius: var(--ekklesia-radius-md);
|
||||
display: grid;
|
||||
gap: var(--signage-gap-tight);
|
||||
grid-template-columns: minmax(14rem, 1.2fr) minmax(14rem, 1fr) minmax(14rem, 1.2fr);
|
||||
padding: var(--ekklesia-spacing-sm);
|
||||
}
|
||||
|
||||
.signage-display-row__identity,
|
||||
.signage-display-row__health {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--ekklesia-spacing-xs);
|
||||
}
|
||||
|
||||
.signage-display-row__identity .ek-control,
|
||||
.signage-display-row__assignment .ek-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.signage-display-row__health {
|
||||
color: var(--ekklesia-text-secondary);
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
}
|
||||
|
||||
.signage-display-row__error {
|
||||
color: var(--ekklesia-text-danger);
|
||||
}
|
||||
|
||||
.signage-channel-form,
|
||||
.signage-unassigned {
|
||||
background: var(--ekklesia-background-inset);
|
||||
border-radius: var(--ekklesia-radius-md);
|
||||
display: grid;
|
||||
gap: var(--signage-gap-tight);
|
||||
margin-inline-start: var(--ekklesia-spacing-sm);
|
||||
padding: var(--ekklesia-spacing-md);
|
||||
}
|
||||
|
||||
.signage-channel-form {
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(16rem, 2fr) minmax(14rem, 1fr);
|
||||
}
|
||||
|
||||
.signage-channel-form__heading,
|
||||
.signage-channel-form > .ek-button {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.signage-channel-form__heading {
|
||||
display: grid;
|
||||
gap: var(--ekklesia-spacing-2xs);
|
||||
}
|
||||
|
||||
.signage-channel-form__heading span {
|
||||
color: var(--ekklesia-text-secondary);
|
||||
font-size: var(--ekklesia-typography-size-sm);
|
||||
}
|
||||
|
||||
.signage-channel-form > .ek-button {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.signage-pairing-steps,
|
||||
.signage-channel-form,
|
||||
.signage-display-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.signage-provider__id {
|
||||
|
||||
Reference in New Issue
Block a user