Build guided media issue workflow
This commit is contained in:
@@ -2514,3 +2514,375 @@ button:disabled,
|
||||
.request-submit-progress p > small { grid-column: 2; }
|
||||
.request-complete-actions { display: grid; }
|
||||
}
|
||||
|
||||
/* Guided issue reporting */
|
||||
.issue-portal-page {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.issue-portal-page > .issue-portal-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
min-height: 0;
|
||||
padding: 22px 24px;
|
||||
background:
|
||||
radial-gradient(circle at 100% 0%, rgba(126, 215, 255, 0.11), transparent 42%),
|
||||
linear-gradient(135deg, rgba(90, 80, 240, 0.12), transparent 48%),
|
||||
var(--ops-panel);
|
||||
}
|
||||
|
||||
.issue-portal-hero > div:first-child {
|
||||
display: grid;
|
||||
gap: 5px;
|
||||
max-width: 790px;
|
||||
}
|
||||
|
||||
.issue-portal-hero h1 {
|
||||
font-size: clamp(1.65rem, 3vw, 2.45rem);
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.issue-portal-hero .lede {
|
||||
max-width: 760px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.issue-hero-count {
|
||||
display: grid;
|
||||
flex: 0 0 auto;
|
||||
min-width: 130px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--ops-line-soft);
|
||||
border-radius: var(--ops-radius);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
}
|
||||
|
||||
.issue-hero-count strong {
|
||||
color: var(--ops-cyan);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.issue-hero-count span {
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.issue-flow {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--ops-line);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
background: rgba(255, 255, 255, 0.018);
|
||||
}
|
||||
|
||||
.issue-flow-heading {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.issue-flow-heading > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.issue-flow-heading h2,
|
||||
.issue-resolution-card h2,
|
||||
.issue-history-heading h2,
|
||||
.media-status-heading h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.issue-flow-heading p,
|
||||
.issue-resolution-card p,
|
||||
.media-status-check > p {
|
||||
margin: 0;
|
||||
color: var(--ops-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.issue-step-number {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border: 1px solid rgba(126, 215, 255, 0.34);
|
||||
border-radius: 50%;
|
||||
background: rgba(14, 165, 233, 0.08);
|
||||
color: var(--ops-cyan);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.issue-category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.issue-category-card {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
min-height: 190px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--ops-line-soft);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
background: rgba(255, 255, 255, 0.022);
|
||||
color: var(--ops-text);
|
||||
text-align: left;
|
||||
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.issue-category-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(126, 215, 255, 0.42);
|
||||
}
|
||||
|
||||
.issue-category-card.is-selected {
|
||||
border-color: rgba(72, 224, 178, 0.58);
|
||||
background: linear-gradient(145deg, rgba(72, 224, 178, 0.09), rgba(14, 165, 233, 0.035));
|
||||
box-shadow: 0 0 24px rgba(72, 224, 178, 0.06);
|
||||
}
|
||||
|
||||
.issue-category-card strong {
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.issue-category-card p,
|
||||
.issue-category-card small {
|
||||
margin: 0;
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.issue-category-card small {
|
||||
align-self: end;
|
||||
margin-top: auto;
|
||||
padding-top: 9px;
|
||||
border-top: 1px solid var(--ops-line-soft);
|
||||
color: var(--request-green);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.issue-category-marker {
|
||||
justify-self: start;
|
||||
padding: 4px 7px;
|
||||
border: 1px solid rgba(126, 215, 255, 0.24);
|
||||
border-radius: 999px;
|
||||
color: var(--ops-cyan);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.58rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.issue-guided-form {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--ops-line);
|
||||
}
|
||||
|
||||
.issue-choice-field {
|
||||
display: grid;
|
||||
gap: 9px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.issue-choice-field legend,
|
||||
.issue-question-grid label > span {
|
||||
margin-bottom: 7px;
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.issue-choice-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.issue-choice-row button {
|
||||
border-color: var(--ops-line-soft);
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
color: var(--ops-muted);
|
||||
}
|
||||
|
||||
.issue-choice-row button.is-selected {
|
||||
border-color: rgba(126, 215, 255, 0.48);
|
||||
background: rgba(14, 165, 233, 0.12);
|
||||
color: var(--ops-text);
|
||||
}
|
||||
|
||||
.issue-question-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.issue-question-grid label {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.issue-field-span-2 {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.media-status-check {
|
||||
display: grid;
|
||||
gap: 13px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(126, 215, 255, 0.28);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
background: rgba(14, 165, 233, 0.045);
|
||||
}
|
||||
|
||||
.media-status-check.media-status-up {
|
||||
border-color: rgba(72, 224, 178, 0.34);
|
||||
background: rgba(72, 224, 178, 0.045);
|
||||
}
|
||||
|
||||
.media-status-check.media-status-degraded {
|
||||
border-color: rgba(255, 192, 84, 0.36);
|
||||
background: rgba(255, 192, 84, 0.05);
|
||||
}
|
||||
|
||||
.media-status-check.media-status-down {
|
||||
border-color: rgba(255, 86, 113, 0.38);
|
||||
background: rgba(255, 86, 113, 0.05);
|
||||
}
|
||||
|
||||
.media-status-heading,
|
||||
.issue-history-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.media-status-heading > div,
|
||||
.issue-history-heading > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.issue-live-scan {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.issue-live-scan i {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: var(--ops-cyan);
|
||||
box-shadow: 0 0 14px var(--ops-cyan);
|
||||
animation: request-operation-pulse 1.15s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.media-status-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.media-status-metrics > div {
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--ops-line-soft);
|
||||
border-radius: var(--ops-radius);
|
||||
background: rgba(255, 255, 255, 0.022);
|
||||
}
|
||||
|
||||
.media-status-metrics span {
|
||||
color: var(--ops-muted);
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.media-status-metrics strong {
|
||||
overflow: hidden;
|
||||
font-size: 0.75rem;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.issue-resolution-card {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(72, 224, 178, 0.3);
|
||||
border-radius: var(--ops-radius-lg);
|
||||
background: linear-gradient(110deg, rgba(72, 224, 178, 0.07), rgba(14, 165, 233, 0.035));
|
||||
}
|
||||
|
||||
.issue-resolution-card > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.issue-resolution-card > button {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.issue-history-heading {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.issue-history-heading > span {
|
||||
padding: 5px 9px;
|
||||
border: 1px solid var(--ops-line-soft);
|
||||
border-radius: 999px;
|
||||
color: var(--ops-muted);
|
||||
font-family: "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.issue-portal-page .portal-item-row p {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.issue-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.media-status-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.issue-portal-page > .issue-portal-hero,
|
||||
.media-status-heading,
|
||||
.issue-history-heading { align-items: flex-start; flex-direction: column; }
|
||||
.issue-hero-count { width: 100%; }
|
||||
.issue-flow { padding: 14px; }
|
||||
.issue-category-grid,
|
||||
.issue-question-grid,
|
||||
.media-status-metrics { grid-template-columns: 1fr; }
|
||||
.issue-field-span-2 { grid-column: span 1; }
|
||||
.issue-category-card { min-height: 0; }
|
||||
.issue-resolution-card { grid-template-columns: auto minmax(0, 1fr); }
|
||||
.issue-resolution-card > button { grid-column: 1 / -1; width: 100%; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user