ideasbugs 0.8.2 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/AGENTS.md +1 -0
- data/CHANGELOG.md +46 -0
- data/README.md +3 -9
- data/app/views/ideasbugs/feedbacks/_feedback_panel.html.erb +20 -10
- data/app/views/ideasbugs/feedbacks/index.html.erb +14 -12
- data/lib/ideasbugs/dashboard.css +277 -119
- data/lib/ideasbugs/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 383c2bf2c3fc0168a96e1e418398bc643b19c4364440604912d1e546543fc62a
|
|
4
|
+
data.tar.gz: c40e84232ccc55b2394adbe9421f297a3c93e6cdff98c8d31e50f7c40e8e9148
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 32f3a5e503b09ae996a87890f4aceb11ab337db5bae30a711d019d834e1a639ee985e7a71cb380038d7ef2799e3df4d5b9e4d06b686021ac19bab7411ad1c329
|
|
7
|
+
data.tar.gz: 0d11c01642ba6dea041d336461bcb69a65184190dcc28d544ca605a6827107a4fa7729f36fb71865ab6c07d251d4f3ae4af912feed8ac790614ed757778005a2
|
data/AGENTS.md
CHANGED
|
@@ -177,5 +177,6 @@ Conventions this codebase holds to — follow them rather than the first thing t
|
|
|
177
177
|
- **Attachments stream through the engine's gate**, never a public blob URL.
|
|
178
178
|
- **The widget is plain JS served same-origin by the engine** — no build step, no framework.
|
|
179
179
|
- **The dummy app pins `config.active_job.queue_adapter = :test`.** Do not remove it or let it drift back to the `:async` default. Attaching a screenshot enqueues Active Storage's analysis job, and `:async` runs it on a background thread that checks out its own connection — writes no test transaction covers, landing in the middle of whatever runs next. That is a suite that fails order-dependently in a test which never created a row, and it is miserable to trace back.
|
|
180
|
+
- **`lib/ideasbugs/dashboard.css` is half shared.** Everything above the `GEM-SPECIFIC` banner is the design system all five gems in the family ship — the same tokens, the same `.page-head`/`.tabs`/`.filters`/`.card`/`.badge`/`button`/`.status-switch`, the same `.dashboard-shell` + `.record-row` + `.detail-panel` two-pane dashboard — identical in every repo apart from the `ib` prefix. Diff it against a sibling before changing it, and carry the change to the other four. Anything only this gem has goes below the banner. New dashboard markup reuses the shared class names rather than inventing a domain-specific one.
|
|
180
181
|
- Every user-facing change bumps `lib/ideasbugs/version.rb` and adds a `CHANGELOG.md` entry that says what it costs, not only what it adds.
|
|
181
182
|
- Commit messages are prose that explains the tradeoff — read `git log` before writing one.
|
data/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,51 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.10.0
|
|
4
|
+
|
|
5
|
+
- **Triage is one switch now.** Open, In review and Resolved sit in a single pill
|
|
6
|
+
in the panel heading — the status the report is in is lit in that status's
|
|
7
|
+
colour, the other two are one click away. It replaces the row of `Mark in
|
|
8
|
+
review` / `Mark resolved` / `Reopen` buttons under the message, which grew a
|
|
9
|
+
button per status and read as three unrelated actions rather than one control.
|
|
10
|
+
The status badge left the heading with them: the switch already says it.
|
|
11
|
+
- **The switch is the family's, not this gem's.** It lives in the shared core of
|
|
12
|
+
`dashboard.css` as `.status-switch`, the same component livechat's
|
|
13
|
+
open/resolved switch now uses, so a third gem that needs one inherits it.
|
|
14
|
+
- No JavaScript: each segment is a submit button in one form, and the lit segment
|
|
15
|
+
is a `type="button"` so clicking the status a report already has cannot re-file
|
|
16
|
+
it. If you styled the old `.actions` status buttons, that is the breaking
|
|
17
|
+
change — `PATCH /feedbacks/:id` with `feedback[status]` is unchanged, so any
|
|
18
|
+
script or link that drove triage still works.
|
|
19
|
+
|
|
20
|
+
## 0.9.0
|
|
21
|
+
|
|
22
|
+
- **One design system across the family.** The stylesheet now opens with a
|
|
23
|
+
shared core — the colour tokens, `.page-head`, `.tabs`, `.filters`, `.card`,
|
|
24
|
+
`.badge`, buttons and form controls, and the `.dashboard-shell` +
|
|
25
|
+
`.record-row` + `.detail-panel` two-pane dashboard — identical in all five
|
|
26
|
+
gems of the family, apart from the `--ib-` prefix. The five had drifted:
|
|
27
|
+
sidebars between 380px and 430px, reading columns between 860px and 1020px,
|
|
28
|
+
two different tab styles and three different button styles. The sidebar is
|
|
29
|
+
now 330–430px everywhere, a reading page 1020px, a dashboard 1280px.
|
|
30
|
+
Everything below the `GEM-SPECIFIC` banner is what only this gem has.
|
|
31
|
+
- **The dashboard markup uses the shared class names.** `.triage-shell`,
|
|
32
|
+
`.triage-sidebar` and `.triage-detail` are `.dashboard-shell`,
|
|
33
|
+
`.dashboard-sidebar` and `.dashboard-detail`; `.feedback-list`,
|
|
34
|
+
`.feedback-row`, `.feedback-main`, `.feedback-topline`, `.feedback-message`,
|
|
35
|
+
`.feedback-meta` and `.feedback-time` are `.record-*`, with
|
|
36
|
+
`.feedback-message` becoming `.record-copy`; `.feedback-panel` is
|
|
37
|
+
`.detail-panel`; the attachment count sits in `.record-side`. If you styled
|
|
38
|
+
or scripted any of those names in a host app, that is the breaking change —
|
|
39
|
+
no configuration, route or database change is involved.
|
|
40
|
+
- **The narrow-screen rules work again.** The `max-width: 760px` block sat above
|
|
41
|
+
the component rules it means to override, and CSS nesting adds no specificity,
|
|
42
|
+
so the desktop grid won every tie: showing one pane at a time on a phone had
|
|
43
|
+
quietly stopped working. The media query moved to the end of the file.
|
|
44
|
+
- Smaller fixes that came with the shared core: a submit input is styled as a
|
|
45
|
+
button rather than a full-width field, the filter row keeps its search box and
|
|
46
|
+
button on one line, and a `code.key` truncates inside a list row instead of
|
|
47
|
+
wrapping over three lines.
|
|
48
|
+
|
|
3
49
|
## 0.8.0
|
|
4
50
|
|
|
5
51
|
- **`config.admin_layout` now works on its own.** The dashboard's stylesheet was
|
data/README.md
CHANGED
|
@@ -334,12 +334,6 @@ Tests run against a dummy Rails app in `test/dummy`; the widget is covered by
|
|
|
334
334
|
Capybara system tests in a real browser. CI runs Rails 7.1 / 7.2 / 8.0 / 8.1
|
|
335
335
|
against Ruby 3.2–3.4 (per-version Gemfiles in `gemfiles/`).
|
|
336
336
|
|
|
337
|
-
## Also by the same author
|
|
338
|
-
|
|
339
|
-
- [testimonials](https://github.com/yshmarov/testimonials) — testimonials,
|
|
340
|
-
reviews and NPS for Rails. Its NPS detractor hook feeds straight into this gem.
|
|
341
|
-
- [SupeRails](https://superails.com) — Rails screencasts.
|
|
342
|
-
|
|
343
337
|
## One family
|
|
344
338
|
|
|
345
339
|
Five Rails engines built on the same backbone, so adopting a second one is
|
|
@@ -355,9 +349,9 @@ mostly muscle memory:
|
|
|
355
349
|
|
|
356
350
|
They share the install shape (`generate <gem>:install`, mount, one initializer),
|
|
357
351
|
the same host hooks (`base_controller_class` to inherit your admin's controller,
|
|
358
|
-
`admin_layout` for just the shell),
|
|
359
|
-
|
|
360
|
-
`primary_key_type`.
|
|
352
|
+
`admin_layout` for just the shell), one dashboard design system — the same
|
|
353
|
+
two-pane layout, colour tokens and components in all five, scoped so it cannot
|
|
354
|
+
touch your own CSS — and migrations that follow your app's `primary_key_type`.
|
|
361
355
|
|
|
362
356
|
## License
|
|
363
357
|
|
|
@@ -1,14 +1,28 @@
|
|
|
1
|
-
<section class="
|
|
1
|
+
<section class="detail-panel">
|
|
2
2
|
<div class="panel-head">
|
|
3
3
|
<h1>
|
|
4
4
|
<span class="badge kind-<%= feedback.kind.to_s.parameterize %>">
|
|
5
5
|
<%= t("ideasbugs.kinds.#{feedback.kind}", default: feedback.kind.humanize) %>
|
|
6
6
|
</span>
|
|
7
|
-
<span class="badge status-<%= feedback.status %>">
|
|
8
|
-
<%= t("ideasbugs.statuses.#{feedback.status}", default: feedback.status.humanize) %>
|
|
9
|
-
</span>
|
|
10
7
|
<span class="case-id">#<%= feedback.id %></span>
|
|
11
8
|
</h1>
|
|
9
|
+
|
|
10
|
+
<%# The shared status switch, carrying the status the heading badge used to
|
|
11
|
+
state: the current one is lit and inert, every other one is a submit
|
|
12
|
+
that files the report under it. One form, no JS. %>
|
|
13
|
+
<%= form_with url: feedback_path(feedback), method: :patch, class: 'status-switch' do %>
|
|
14
|
+
<% Ideasbugs::Feedback::STATUSES.each do |status| %>
|
|
15
|
+
<% label = t("ideasbugs.statuses.#{status}", default: status.humanize) %>
|
|
16
|
+
<% if status == feedback.status %>
|
|
17
|
+
<button type="button" class="status-<%= status %> current" aria-current="true"><%= label %></button>
|
|
18
|
+
<% else %>
|
|
19
|
+
<button name="feedback[status]" value="<%= status %>" class="status-<%= status %>"
|
|
20
|
+
aria-label="<%= t("ideasbugs.dashboard.move_to_#{status}", default: "Mark #{status.humanize.downcase}") %>">
|
|
21
|
+
<%= label %>
|
|
22
|
+
</button>
|
|
23
|
+
<% end %>
|
|
24
|
+
<% end %>
|
|
25
|
+
<% end %>
|
|
12
26
|
</div>
|
|
13
27
|
|
|
14
28
|
<div class="detail-scroll">
|
|
@@ -49,13 +63,9 @@
|
|
|
49
63
|
<% end %>
|
|
50
64
|
</div>
|
|
51
65
|
|
|
66
|
+
<%# Status lives in the switch in the heading; only what a switch cannot say
|
|
67
|
+
is left here. %>
|
|
52
68
|
<div class="actions">
|
|
53
|
-
<% (Ideasbugs::Feedback::STATUSES - [feedback.status]).each do |status| %>
|
|
54
|
-
<%= button_to t("ideasbugs.dashboard.move_to_#{status}", default: "Mark #{status.humanize.downcase}"),
|
|
55
|
-
feedback_path(feedback),
|
|
56
|
-
method: :patch, params: { feedback: { status: status } },
|
|
57
|
-
class: ('primary' if status == 'resolved') %>
|
|
58
|
-
<% end %>
|
|
59
69
|
<%= button_to t('ideasbugs.dashboard.delete', default: 'Delete'),
|
|
60
70
|
feedback_path(feedback),
|
|
61
71
|
method: :delete, class: 'danger',
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<% content_for :body_class, 'ib-index' %>
|
|
2
2
|
|
|
3
3
|
<%= render layout: 'ideasbugs/shared/dashboard' do %>
|
|
4
|
-
<
|
|
4
|
+
<div class="page-head">
|
|
5
|
+
<h1><%= t('ideasbugs.dashboard.title', default: 'IdeasBugs') %></h1>
|
|
6
|
+
</div>
|
|
5
7
|
|
|
6
|
-
<div class="
|
|
7
|
-
<aside class="
|
|
8
|
+
<div class="dashboard-shell <%= 'has-selected' if @selected_feedback %>">
|
|
9
|
+
<aside class="dashboard-sidebar" aria-label="<%= t('ideasbugs.dashboard.feedback', default: 'Feedback') %>">
|
|
8
10
|
<div class="tabs">
|
|
9
11
|
<% Ideasbugs::Feedback::STATUSES.each do |status| %>
|
|
10
12
|
<%= link_to feedbacks_path(status: status, kind: @kind, q: @query),
|
|
@@ -31,26 +33,26 @@
|
|
|
31
33
|
<button><%= t('ideasbugs.dashboard.search', default: 'Search') %></button>
|
|
32
34
|
</form>
|
|
33
35
|
|
|
34
|
-
<div class="
|
|
36
|
+
<div class="record-list">
|
|
35
37
|
<% if @feedbacks.any? %>
|
|
36
38
|
<% @feedbacks.each do |feedback| %>
|
|
37
39
|
<%= link_to feedbacks_path(status: @status, kind: @kind, q: @query, page: @page,
|
|
38
40
|
feedback_id: feedback.id),
|
|
39
|
-
class: ['
|
|
40
|
-
<span class="
|
|
41
|
-
<span class="
|
|
41
|
+
class: ['record-row', ('active' if @selected_feedback&.id == feedback.id)].compact do %>
|
|
42
|
+
<span class="record-main">
|
|
43
|
+
<span class="record-topline">
|
|
42
44
|
<span class="badge kind-<%= feedback.kind.to_s.parameterize %>">
|
|
43
45
|
<%= t("ideasbugs.kinds.#{feedback.kind}", default: feedback.kind.humanize) %>
|
|
44
46
|
</span>
|
|
45
47
|
<span class="badge status-<%= feedback.status %>">
|
|
46
48
|
<%= t("ideasbugs.statuses.#{feedback.status}", default: feedback.status.humanize) %>
|
|
47
49
|
</span>
|
|
48
|
-
<span class="muted
|
|
50
|
+
<span class="muted record-time" title="<%= feedback.created_at %>">
|
|
49
51
|
<%= time_ago_in_words(feedback.created_at) %>
|
|
50
52
|
</span>
|
|
51
53
|
</span>
|
|
52
|
-
<span class="
|
|
53
|
-
<span class="muted
|
|
54
|
+
<span class="record-copy"><%= truncate(feedback.message, length: 120) %></span>
|
|
55
|
+
<span class="muted record-meta">
|
|
54
56
|
<span>#<%= feedback.id %></span>
|
|
55
57
|
<% if @show_section && feedback.section.present? %>
|
|
56
58
|
<span class="feedback-section"><%= feedback.section %></span>
|
|
@@ -61,7 +63,7 @@
|
|
|
61
63
|
</span>
|
|
62
64
|
</span>
|
|
63
65
|
<% if feedback.screenshots? %>
|
|
64
|
-
<span class="muted
|
|
66
|
+
<span class="record-side muted">📎 <%= feedback.screenshots.count %></span>
|
|
65
67
|
<% end %>
|
|
66
68
|
<% end %>
|
|
67
69
|
<% end %>
|
|
@@ -82,7 +84,7 @@
|
|
|
82
84
|
</div>
|
|
83
85
|
</aside>
|
|
84
86
|
|
|
85
|
-
<main class="
|
|
87
|
+
<main class="dashboard-detail" aria-label="<%= t('ideasbugs.dashboard.current_feedback', default: 'Current feedback') %>">
|
|
86
88
|
<% if @selected_feedback %>
|
|
87
89
|
<p class="mobile-back">
|
|
88
90
|
<%= link_to t('ideasbugs.dashboard.back', default: '← All feedback'),
|
data/lib/ideasbugs/dashboard.css
CHANGED
|
@@ -4,59 +4,56 @@
|
|
|
4
4
|
*
|
|
5
5
|
* :root custom properties, all `--ib-` prefixed so they can
|
|
6
6
|
* neither overwrite a host's nor be overwritten by them.
|
|
7
|
-
* .ib-page
|
|
7
|
+
* .ib-page the page frame (was bare html/body). Only the gem's own
|
|
8
8
|
* layout puts this class on <body>, so inside a host admin
|
|
9
9
|
* these rules simply do not apply.
|
|
10
|
-
* .ib-dashboard
|
|
10
|
+
* .ib-dashboard everything else, nested. Names like .container, .card
|
|
11
11
|
* and .tabs are confined to the dashboard's own markup, so
|
|
12
12
|
* loading this file inside a host cannot restyle its chrome.
|
|
13
13
|
*
|
|
14
14
|
* Nothing here styles a bare `body`, `a`, `table` or `*` at the top level.
|
|
15
|
+
*
|
|
16
|
+
* Two sections follow: the design system shared by the whole gem family,
|
|
17
|
+
* then what only this gem has. A rule that belongs in the shared section
|
|
18
|
+
* belongs in all five copies of it.
|
|
19
|
+
*
|
|
20
|
+
* Order inside a section matters — components, then the page frame, then the
|
|
21
|
+
* narrow-screen overrides. Nesting adds no specificity, so the last rule
|
|
22
|
+
* wins the ties, and an override placed before the rule it means to beat
|
|
23
|
+
* silently does nothing.
|
|
15
24
|
*/
|
|
16
25
|
|
|
26
|
+
/* ---------------------------------------------------------------------------
|
|
27
|
+
* SHARED CORE — identical in testimonials, ideasbugs, livechat, product_tours
|
|
28
|
+
* and i18n_proofreading apart from the prefix. Diff it against a sibling gem
|
|
29
|
+
* before you change it, and carry the change to all five.
|
|
30
|
+
* ------------------------------------------------------------------------- */
|
|
17
31
|
|
|
18
32
|
:root {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
33
|
+
color-scheme: light dark;
|
|
34
|
+
--ib-bg: #f6f7f9;
|
|
35
|
+
--ib-surface: #fff;
|
|
36
|
+
--ib-text: #1c2024;
|
|
37
|
+
--ib-muted: #6b7280;
|
|
38
|
+
--ib-border: #e5e7eb;
|
|
39
|
+
--ib-accent: #2563eb;
|
|
40
|
+
--ib-accent-text: #fff;
|
|
41
|
+
--ib-code: #f0f1f3;
|
|
42
|
+
/* The four semantic states every gem in the family badges something with. */
|
|
43
|
+
--ib-success: #16a34a;
|
|
44
|
+
--ib-warning: #d97706;
|
|
45
|
+
--ib-danger: #dc2626;
|
|
46
|
+
--ib-neutral: #6b7280;
|
|
24
47
|
}
|
|
25
48
|
@media (prefers-color-scheme: dark) {
|
|
26
49
|
:root {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
.ib-index { overflow-y: auto; overflow-x: hidden; }
|
|
35
|
-
.ib-index, .ib-index .container { min-height: 100vh; height: auto; }
|
|
36
|
-
.ib-index .container { padding-bottom: 10px; }
|
|
37
|
-
.ib-dashboard {
|
|
38
|
-
& .container { padding: 14px 10px 24px; }
|
|
39
|
-
& .feedback-panel,
|
|
40
|
-
& .detail-scroll,
|
|
41
|
-
& .card,
|
|
42
|
-
& dl,
|
|
43
|
-
& dd { min-width: 0; max-width: 100%; }
|
|
44
|
-
& .feedback-panel .card { width: calc(100vw - 20px); }
|
|
45
|
-
& .message,
|
|
46
|
-
& dd,
|
|
47
|
-
& .muted { max-width: calc(100vw - 54px); }
|
|
48
|
-
& .triage-shell { display: block; min-height: calc(100vh - 62px); }
|
|
49
|
-
& .triage-sidebar,
|
|
50
|
-
& .triage-detail { min-height: calc(100vh - 62px); }
|
|
51
|
-
& .triage-shell.has-selected .triage-sidebar { display: none; }
|
|
52
|
-
& .triage-shell:not(.has-selected) .triage-detail { display: none; }
|
|
53
|
-
& .feedback-list { overflow: visible; }
|
|
54
|
-
& .feedback-row { padding: 12px; }
|
|
55
|
-
& .feedback-meta { display: none; }
|
|
56
|
-
& .triage-detail .feedback-panel { min-height: calc(100vh - 64px); }
|
|
57
|
-
& .mobile-back { display: block; flex: 0 0 auto; margin: 10px 10px 0; font-size: 13px; }
|
|
58
|
-
& .panel-head h1 { font-size: 18px; }
|
|
59
|
-
& dl { grid-template-columns: 1fr; gap: 3px; }
|
|
50
|
+
--ib-bg: #111418;
|
|
51
|
+
--ib-surface: #1a1f26;
|
|
52
|
+
--ib-text: #e6e8ea;
|
|
53
|
+
--ib-muted: #9aa2ab;
|
|
54
|
+
--ib-border: #2a313a;
|
|
55
|
+
--ib-accent: #3b82f6;
|
|
56
|
+
--ib-code: #232a33;
|
|
60
57
|
}
|
|
61
58
|
}
|
|
62
59
|
|
|
@@ -69,99 +66,260 @@
|
|
|
69
66
|
& * { box-sizing: border-box; }
|
|
70
67
|
& a { color: var(--ib-accent); text-decoration: none; }
|
|
71
68
|
& a:hover { text-decoration: underline; }
|
|
72
|
-
&
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
& .
|
|
77
|
-
&
|
|
78
|
-
&
|
|
79
|
-
& .
|
|
80
|
-
& .
|
|
81
|
-
& .
|
|
82
|
-
& .
|
|
83
|
-
& .
|
|
84
|
-
& .
|
|
69
|
+
& :focus-visible { outline: 2px solid var(--ib-accent); outline-offset: 2px; }
|
|
70
|
+
|
|
71
|
+
/* Page furniture. `.container` is the reading width; an index page widens it
|
|
72
|
+
to 1280px in the page frame below. */
|
|
73
|
+
& .container { max-width: 1020px; margin: 0 auto; padding: 24px 16px 64px; }
|
|
74
|
+
& h1 { margin: 0 0 16px; font-size: 22px; }
|
|
75
|
+
& h2 { margin: 0 0 12px; font-size: 16px; }
|
|
76
|
+
& .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
|
|
77
|
+
& .page-head h1 { margin: 0; }
|
|
78
|
+
& .lede { margin: 4px 0 0; color: var(--ib-muted); }
|
|
79
|
+
& .breadcrumb { margin: 0 0 12px; font-size: 13px; }
|
|
80
|
+
& .muted { color: var(--ib-muted); font-size: 13px; }
|
|
81
|
+
& .case-id { color: var(--ib-muted); font-weight: 400; font-size: 15px; }
|
|
82
|
+
& .spacer { flex: 1; }
|
|
83
|
+
& .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
|
84
|
+
|
|
85
|
+
/* Section switcher: the pills above the dashboard when a gem has more than
|
|
86
|
+
one section. Lives on the page, so a host `admin_layout` can drop it. */
|
|
87
|
+
& .nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
|
|
88
|
+
& .nav a { padding: 6px 16px; border: 1px solid var(--ib-border); border-radius: 999px; background: var(--ib-surface); color: var(--ib-muted); font-weight: 600; }
|
|
89
|
+
& .nav a:hover { text-decoration: none; color: var(--ib-text); }
|
|
90
|
+
& .nav a.active { border-color: var(--ib-accent); background: var(--ib-accent); color: var(--ib-accent-text); }
|
|
91
|
+
& .nav a.active:hover { color: var(--ib-accent-text); }
|
|
92
|
+
|
|
93
|
+
/* Tabs: one system for the whole family — an underlined row of equal-width
|
|
94
|
+
tabs, sized to sit at the top of the sidebar. */
|
|
95
|
+
& .tabs { display: flex; gap: 6px; }
|
|
96
|
+
& .tabs a { position: relative; display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 10px 8px; border-radius: 8px; color: var(--ib-muted); font-weight: 600; }
|
|
97
|
+
& .tabs a:hover { background: var(--ib-bg); color: var(--ib-text); text-decoration: none; }
|
|
98
|
+
& .tabs a.active { color: var(--ib-text); }
|
|
99
|
+
& .tabs a.active::after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 2px; border-radius: 999px; background: var(--ib-accent); }
|
|
100
|
+
& .count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--ib-muted) 14%, transparent); font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
|
|
101
|
+
& .tabs a.active .count { background: var(--ib-border); }
|
|
102
|
+
|
|
103
|
+
/* Filter row under the tabs: a full-width select over a search + submit row,
|
|
104
|
+
however many of the three a gem actually has. */
|
|
105
|
+
& .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px; border-bottom: 1px solid var(--ib-border); }
|
|
106
|
+
& .filters label { flex: 1 1 100%; color: var(--ib-muted); font-size: 13px; }
|
|
107
|
+
& .filters select { flex: 1 1 100%; }
|
|
108
|
+
/* Basis 0, not auto: the controls below are `width: 100%`, which would
|
|
109
|
+
otherwise push the submit button onto its own row. */
|
|
110
|
+
& .filters input[type="search"] { flex: 1 1 0; min-width: 0; }
|
|
111
|
+
& .filters button,
|
|
112
|
+
& .filters input[type="submit"] { flex: 0 0 auto; }
|
|
113
|
+
|
|
114
|
+
/* Form controls. 16px so iOS does not zoom the page on focus. */
|
|
115
|
+
& input,
|
|
116
|
+
& select,
|
|
117
|
+
& textarea { width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--ib-border); border-radius: 8px; background: var(--ib-surface); color: var(--ib-text); font: inherit; font-size: 16px; letter-spacing: 0; }
|
|
118
|
+
& textarea { resize: vertical; }
|
|
119
|
+
& input[type="checkbox"],
|
|
120
|
+
& input[type="radio"] { width: auto; min-width: 0; min-height: 0; }
|
|
121
|
+
& input:focus,
|
|
122
|
+
& select:focus,
|
|
123
|
+
& textarea:focus { border-color: var(--ib-accent); outline: 2px solid color-mix(in srgb, var(--ib-accent) 22%, transparent); outline-offset: 0; }
|
|
124
|
+
& .field { margin-bottom: 16px; }
|
|
125
|
+
& .field label { display: block; margin-bottom: 5px; font-weight: 600; }
|
|
126
|
+
& .field small { display: block; margin-top: 5px; color: var(--ib-muted); }
|
|
127
|
+
|
|
128
|
+
/* A submit input is a button, whatever the markup says. */
|
|
129
|
+
& button,
|
|
130
|
+
& .button,
|
|
131
|
+
& input[type="submit"] { display: inline-flex; width: auto; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--ib-border); border-radius: 8px; background: var(--ib-surface); color: var(--ib-text); font: inherit; cursor: pointer; }
|
|
132
|
+
& button:hover,
|
|
133
|
+
& .button:hover,
|
|
134
|
+
& input[type="submit"]:hover { border-color: var(--ib-muted); text-decoration: none; }
|
|
135
|
+
& button.primary,
|
|
136
|
+
& .button.primary,
|
|
137
|
+
& input[type="submit"].primary { border-color: var(--ib-accent); background: var(--ib-accent); color: var(--ib-accent-text); }
|
|
138
|
+
& button.danger,
|
|
139
|
+
& .button.danger { color: var(--ib-danger); }
|
|
140
|
+
& button.small,
|
|
141
|
+
& .button.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
|
|
142
|
+
& .actions,
|
|
143
|
+
& .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
|
|
144
|
+
& .actions form { display: inline; }
|
|
145
|
+
& .form-actions { padding-top: 12px; }
|
|
146
|
+
|
|
147
|
+
/* Status switch: one pill holding every state a record can be in, the state it
|
|
148
|
+
is in now lit. Each other segment is a submit button, so moving a record
|
|
149
|
+
takes one click and no JavaScript; the current segment is a `type="button"`
|
|
150
|
+
so clicking it cannot re-file the record it is already filed under. Two
|
|
151
|
+
states or five, the pill sizes itself. A gem tints the lit segment with its
|
|
152
|
+
own status colour — see the `GEM-SPECIFIC` section. */
|
|
153
|
+
& .status-switch { display: inline-flex; flex: 0 0 auto; margin: 0; padding: 3px; border: 1px solid var(--ib-border); border-radius: 999px; background: var(--ib-bg); }
|
|
154
|
+
& .status-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ib-muted); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background .16s ease, color .16s ease; }
|
|
155
|
+
& .status-switch button:hover { border: 0; background: color-mix(in srgb, var(--ib-muted) 12%, transparent); color: var(--ib-text); }
|
|
156
|
+
& .status-switch button.current { background: var(--ib-surface); color: var(--ib-text); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); cursor: default; }
|
|
157
|
+
& .status-switch button.current:hover { background: var(--ib-surface); }
|
|
158
|
+
& .panel-head .status-switch { margin-left: auto; }
|
|
159
|
+
|
|
160
|
+
& .card { overflow: hidden; border: 1px solid var(--ib-border); border-radius: 12px; background: var(--ib-surface); }
|
|
161
|
+
& .card.pad { padding: 16px; overflow: visible; }
|
|
85
162
|
& table { width: 100%; border-collapse: collapse; }
|
|
86
163
|
& th,
|
|
87
164
|
& td { padding: 10px 14px; text-align: left; vertical-align: top; }
|
|
88
165
|
& th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ib-muted); border-bottom: 1px solid var(--ib-border); }
|
|
89
166
|
& tr + tr td { border-top: 1px solid var(--ib-border); }
|
|
90
|
-
& .
|
|
91
|
-
& .
|
|
92
|
-
& .
|
|
93
|
-
|
|
94
|
-
& .badge
|
|
95
|
-
& .badge.
|
|
96
|
-
& .
|
|
97
|
-
|
|
98
|
-
& .
|
|
99
|
-
& .
|
|
100
|
-
& .
|
|
101
|
-
& .
|
|
102
|
-
&
|
|
103
|
-
& .
|
|
104
|
-
|
|
105
|
-
&
|
|
106
|
-
& .message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
107
|
-
& dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
|
|
167
|
+
& td.row-actions { white-space: nowrap; text-align: right; }
|
|
168
|
+
& td.row-actions form { display: inline-block; }
|
|
169
|
+
& td.row-actions form + form { margin-left: 6px; }
|
|
170
|
+
|
|
171
|
+
& .badge { display: inline-flex; padding: 2px 10px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
|
|
172
|
+
& .badge.locale { border: 1px solid var(--ib-border); background: transparent; color: var(--ib-muted); }
|
|
173
|
+
& code.key { max-width: 100%; padding: 2px 7px; border-radius: 6px; background: var(--ib-code); font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
|
|
174
|
+
|
|
175
|
+
& .flash,
|
|
176
|
+
& .errors { margin-bottom: 16px; padding: 10px 12px; border: 1px solid var(--ib-border); border-radius: 8px; background: var(--ib-surface); }
|
|
177
|
+
& .flash.notice { border-color: var(--ib-success); }
|
|
178
|
+
& .flash.alert,
|
|
179
|
+
& .errors { border-color: var(--ib-danger); }
|
|
180
|
+
& .errors ul { margin-bottom: 0; }
|
|
181
|
+
|
|
182
|
+
& dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
|
|
108
183
|
& dt { color: var(--ib-muted); }
|
|
109
184
|
& dd { margin: 0; overflow-wrap: anywhere; }
|
|
110
|
-
& .
|
|
111
|
-
|
|
112
|
-
& .empty { padding: 48px 16px;
|
|
113
|
-
& .
|
|
114
|
-
& .case-id { color: var(--ib-muted); font-weight: 400; font-size: 15px; }
|
|
115
|
-
& .panel-head { flex: 0 0 auto; }
|
|
116
|
-
& .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
117
|
-
& .detail-scroll { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
|
|
118
|
-
& .feedback-panel { min-width: 0; display: flex; flex-direction: column; }
|
|
119
|
-
& .feedback-panel .actions { flex: 0 0 auto; }
|
|
120
|
-
& .feedback-panel .detail-scroll > .actions { margin: 0; }
|
|
121
|
-
& .triage-shell { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 16px; }
|
|
122
|
-
& .triage-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ib-surface); border: 1px solid var(--ib-border); border-radius: 8px; overflow: hidden; }
|
|
123
|
-
& .triage-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; padding: 0; background: transparent; border: 0; border-radius: 0; gap: 6px; flex-wrap: nowrap; }
|
|
124
|
-
& .triage-sidebar .tabs a { flex: 1 1 0; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 10px 8px; border-radius: 8px; color: var(--ib-muted); font-weight: 600; }
|
|
125
|
-
& .triage-sidebar .tabs a.active { color: var(--ib-text); border: 0; background: transparent; box-shadow: none; margin: 0; }
|
|
126
|
-
& .triage-sidebar .tabs a.active::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; border-radius: 999px; background: var(--ib-accent); }
|
|
127
|
-
& .triage-sidebar .tabs a:not(.active):hover { text-decoration: none; color: var(--ib-text); background: var(--ib-bg); }
|
|
128
|
-
& .triage-sidebar .tabs .count { margin-left: 0; background: color-mix(in srgb, var(--ib-muted) 14%, transparent); }
|
|
129
|
-
& .triage-sidebar .tabs a.active .count { background: var(--ib-border); }
|
|
130
|
-
& .triage-sidebar .filters { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; padding: 12px; border-bottom: 1px solid var(--ib-border); }
|
|
131
|
-
& .triage-sidebar .filters select { grid-column: 1 / -1; width: 100%; }
|
|
132
|
-
& .triage-sidebar .filters input[type=search] { min-width: 0; max-width: none; }
|
|
133
|
-
& .feedback-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
134
|
-
& .feedback-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; color: var(--ib-text); border-bottom: 1px solid var(--ib-border); }
|
|
135
|
-
& .feedback-row:hover { text-decoration: none; background: var(--ib-bg); }
|
|
136
|
-
& .feedback-row.active { background: color-mix(in srgb, var(--ib-accent) 9%, var(--ib-surface)); box-shadow: inset 3px 0 0 var(--ib-accent); }
|
|
137
|
-
& .feedback-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
|
|
138
|
-
& .feedback-topline,
|
|
139
|
-
& .feedback-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
140
|
-
& .feedback-message,
|
|
141
|
-
& .feedback-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
142
|
-
& .feedback-message { display: block; font-weight: 600; }
|
|
143
|
-
& .feedback-time { margin-left: auto; white-space: nowrap; }
|
|
144
|
-
& .attachment-count { align-self: start; white-space: nowrap; }
|
|
145
|
-
& .triage-sidebar .pager { flex: 0 0 auto; margin: 0; padding: 10px 12px; border-top: 1px solid var(--ib-border); }
|
|
146
|
-
& .triage-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
147
|
-
& .triage-detail .feedback-panel { flex: 1 1 auto; min-height: 0; }
|
|
148
|
-
& .triage-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
|
|
149
|
-
& .triage-detail .actions { margin-bottom: 0; }
|
|
150
|
-
& .empty-state { margin: auto; max-width: 320px; padding: 24px; text-align: center; }
|
|
185
|
+
& .message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
186
|
+
|
|
187
|
+
& .empty { padding: 48px 16px; color: var(--ib-muted); text-align: center; }
|
|
188
|
+
& .empty-state { max-width: 320px; margin: auto; padding: 24px; text-align: center; }
|
|
151
189
|
& .empty-state h2 { margin: 0 0 6px; font-size: 18px; }
|
|
152
190
|
& .empty-state p { margin: 0; }
|
|
191
|
+
|
|
192
|
+
/* The two-pane dashboard: the queue on the left, the selected record on the
|
|
193
|
+
right, each pane owning its own scroll. */
|
|
194
|
+
& .dashboard-shell { display: grid; flex: 1 1 auto; grid-template-columns: minmax(330px, 430px) 1fr; gap: 16px; min-height: 0; }
|
|
195
|
+
& .dashboard-sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--ib-border); border-radius: 8px; background: var(--ib-surface); }
|
|
196
|
+
& .dashboard-sidebar .tabs { flex: 0 0 auto; margin: 12px 12px 0; }
|
|
197
|
+
& .dashboard-sidebar .filters { flex: 0 0 auto; }
|
|
198
|
+
|
|
199
|
+
/* One row shape for every gem: a topline of badges and a timestamp, the copy
|
|
200
|
+
that identifies the record, then a muted line of ids and authors. */
|
|
201
|
+
& .record-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
|
|
202
|
+
& .record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--ib-border); color: var(--ib-text); }
|
|
203
|
+
& .record-row:hover { background: var(--ib-bg); text-decoration: none; }
|
|
204
|
+
& .record-row.active { background: color-mix(in srgb, var(--ib-accent) 9%, var(--ib-surface)); box-shadow: inset 3px 0 0 var(--ib-accent); }
|
|
205
|
+
& .record-main { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
|
|
206
|
+
& .record-topline,
|
|
207
|
+
& .record-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
208
|
+
& .record-name,
|
|
209
|
+
& .record-copy,
|
|
210
|
+
& .record-meta span,
|
|
211
|
+
/* A key is `overflow-wrap: anywhere` in prose; in a row it truncates. */
|
|
212
|
+
& .record-topline code.key,
|
|
213
|
+
& .record-meta code.key { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
214
|
+
& .record-name { font-weight: 600; }
|
|
215
|
+
& .record-copy { display: block; font-weight: 600; }
|
|
216
|
+
& .record-time { margin-left: auto; white-space: nowrap; }
|
|
217
|
+
& .record-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 1px; }
|
|
218
|
+
& .pager { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 16px; min-height: 42px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--ib-border); }
|
|
219
|
+
|
|
220
|
+
/* The selected record. `.detail-scroll` is the only part that scrolls, so the
|
|
221
|
+
panel heading and its actions stay put. */
|
|
222
|
+
& .dashboard-detail { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; }
|
|
223
|
+
& .dashboard-detail .detail-panel { flex: 1 1 auto; min-height: 0; }
|
|
224
|
+
& .dashboard-detail .detail-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
|
|
225
|
+
& .dashboard-detail .actions { margin-bottom: 0; }
|
|
226
|
+
& .detail-panel { display: flex; min-width: 0; flex-direction: column; }
|
|
227
|
+
/* The panel's own heading row: the title on the left, whatever acts on the
|
|
228
|
+
whole record on the right. */
|
|
229
|
+
& .panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
|
|
230
|
+
& .panel-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
|
|
231
|
+
& .detail-scroll { display: flex; min-height: 0; flex-direction: column; gap: 12px; }
|
|
153
232
|
& .mobile-back { display: none; }
|
|
154
233
|
}
|
|
155
234
|
|
|
156
|
-
/* Page frame — the gem's own layout only.
|
|
157
|
-
specificity ties against
|
|
158
|
-
.ib-page { margin: 0; background: var(--ib-bg); color: var(--ib-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
|
|
159
|
-
/*
|
|
235
|
+
/* Page frame — the gem's own layout only. After the components, so it wins the
|
|
236
|
+
specificity ties against them. */
|
|
237
|
+
.ib-page { margin: 0; min-height: 100vh; background: var(--ib-bg); color: var(--ib-text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; }
|
|
238
|
+
/* An index page is the dashboard: it fills the viewport and never scrolls
|
|
239
|
+
itself, because the queue and the detail pane each scroll on their own. */
|
|
160
240
|
.ib-index, .ib-index .container { height: 100vh; height: 100dvh; }
|
|
161
241
|
.ib-index { overflow: hidden; }
|
|
162
|
-
.ib-index .container { max-width: 1280px;
|
|
163
|
-
.ib-index .
|
|
242
|
+
.ib-index .container { display: flex; max-width: 1280px; flex-direction: column; padding-bottom: 16px; }
|
|
243
|
+
.ib-index .nav,
|
|
244
|
+
.ib-index .page-head { flex: 0 0 auto; }
|
|
164
245
|
/* Standalone show pages keep normal page scrolling. */
|
|
165
246
|
.ib-show { min-height: 100vh; overflow: auto; }
|
|
166
|
-
.ib-show .
|
|
247
|
+
.ib-show .detail-panel { width: 100%; }
|
|
167
248
|
.ib-show .detail-scroll { overflow: visible; }
|
|
249
|
+
|
|
250
|
+
/* Narrow screens: one pane at a time, the queue until a record is picked.
|
|
251
|
+
Last in the file, so these overrides actually reach the rules above. */
|
|
252
|
+
@media (max-width: 760px) {
|
|
253
|
+
.ib-page { font-size: 14px; }
|
|
254
|
+
.ib-index, .ib-show { overflow-x: hidden; }
|
|
255
|
+
.ib-index { overflow-y: auto; }
|
|
256
|
+
.ib-index, .ib-index .container { min-height: 100vh; height: auto; }
|
|
257
|
+
.ib-index .container { padding-bottom: 10px; }
|
|
258
|
+
.ib-dashboard {
|
|
259
|
+
& .container { padding: 14px 10px 24px; }
|
|
260
|
+
& .page-head { margin-bottom: 12px; }
|
|
261
|
+
& .detail-panel,
|
|
262
|
+
& .detail-scroll,
|
|
263
|
+
& .card,
|
|
264
|
+
& dl,
|
|
265
|
+
& dd { min-width: 0; max-width: 100%; }
|
|
266
|
+
& .dashboard-detail .card { width: 100%; }
|
|
267
|
+
& .message,
|
|
268
|
+
& .lede,
|
|
269
|
+
& dd,
|
|
270
|
+
& .muted { overflow-wrap: anywhere; }
|
|
271
|
+
& .dashboard-shell { display: block; min-height: calc(100vh - 62px); }
|
|
272
|
+
& .dashboard-sidebar,
|
|
273
|
+
& .dashboard-detail { min-height: calc(100vh - 62px); }
|
|
274
|
+
& .dashboard-shell.has-selected .dashboard-sidebar { display: none; }
|
|
275
|
+
& .dashboard-shell:not(.has-selected) .dashboard-detail { display: none; }
|
|
276
|
+
& .record-list { overflow: visible; }
|
|
277
|
+
& .record-row { padding: 12px; }
|
|
278
|
+
& .record-meta { display: none; }
|
|
279
|
+
& .dashboard-detail .detail-panel { min-height: calc(100vh - 64px); }
|
|
280
|
+
& .mobile-back { display: block; flex: 0 0 auto; margin: 4px 0 10px; font-size: 13px; }
|
|
281
|
+
& .panel-head h1 { font-size: 18px; }
|
|
282
|
+
& .status-switch button { padding: 0 9px; font-size: 12px; }
|
|
283
|
+
& dl { grid-template-columns: 1fr; gap: 3px; }
|
|
284
|
+
& dd { margin-bottom: 8px; }
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/* ---------------------------------------------------------------------------
|
|
289
|
+
* GEM-SPECIFIC — ideasbugs only: the kind and status badges, and the
|
|
290
|
+
* screenshots a reporter attached.
|
|
291
|
+
* ------------------------------------------------------------------------- */
|
|
292
|
+
|
|
293
|
+
:root {
|
|
294
|
+
--ib-bug: var(--ib-danger);
|
|
295
|
+
--ib-feature: var(--ib-success);
|
|
296
|
+
--ib-other: var(--ib-neutral);
|
|
297
|
+
--ib-open: var(--ib-accent);
|
|
298
|
+
--ib-in-review: var(--ib-warning);
|
|
299
|
+
--ib-resolved: var(--ib-success);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.ib-dashboard {
|
|
303
|
+
& .badge.kind-bug { background: var(--ib-bug); }
|
|
304
|
+
& .badge.kind-feature { background: var(--ib-feature); }
|
|
305
|
+
& .badge.kind-other,
|
|
306
|
+
& .badge.kind-default { background: var(--ib-other); }
|
|
307
|
+
& .badge.status-open { background: var(--ib-open); }
|
|
308
|
+
& .badge.status-in_review { background: var(--ib-in-review); }
|
|
309
|
+
& .badge.status-resolved { background: var(--ib-resolved); }
|
|
310
|
+
|
|
311
|
+
/* The lit segment of the status switch carries the same colour as the badge
|
|
312
|
+
for that status, so the panel and the queue agree at a glance. */
|
|
313
|
+
& .status-switch button.current.status-open { color: var(--ib-open); }
|
|
314
|
+
& .status-switch button.current.status-in_review { color: var(--ib-in-review); }
|
|
315
|
+
& .status-switch button.current.status-resolved { color: var(--ib-resolved); }
|
|
316
|
+
|
|
317
|
+
& .shots { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
|
|
318
|
+
& .shots img { max-width: 280px; max-height: 200px; border: 1px solid var(--ib-border); border-radius: 8px; }
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
@media (max-width: 760px) {
|
|
322
|
+
.ib-dashboard {
|
|
323
|
+
& .shots img { max-width: 100%; }
|
|
324
|
+
}
|
|
325
|
+
}
|
data/lib/ideasbugs/version.rb
CHANGED