Skip to content

Integration 5/5: Public facing UI for Sensemaker #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
digitalWestie wants to merge 3 commits into
base: pr4-admin-interface
Choose a base branch
from
Open

Integration 5/5: Public facing UI for Sensemaker #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5081eed
Adds published report or summary viewing for regular users
digitalWestie Feb 5, 2026
71bc228
fix spec and makes budget sensemaker tab controllable from admin
digitalWestie Feb 5, 2026
b6e9211
make report accessible from l proposal page
digitalWestie Feb 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
258 changes: 258 additions & 0 deletions app/assets/stylesheets/sensemaker/sensemaker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,30 @@
}

.sensemaker {

// Responsive adjustments
@include breakpoint(small only) {
.hero-section {
h1 {
font-size: rem-calc(28);
}

.lead {
font-size: rem-calc(16);
}
}

.report-card {
.card-section {
padding: 1rem;
}
}

.contextual-info-sidebar {
margin-top: 2rem;
}
}

.flex-between {
align-items: center;
display: flex;
Expand Down Expand Up @@ -366,4 +390,238 @@
padding: 0.25rem 0.5rem;
text-transform: uppercase;
}

// Target header (quiz-header style box)
.target-header {
margin-bottom: 2.2rem;

.target-header-title {
@include grid-column-gutter;
background: $highlight;
padding: $line-height;
width: 100%;
}

.target-header-label {
font-size: $small-font-size;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
}

.target-header-links {
margin-bottom: 0.5rem;

a {
@include brand-color;
@include header-font-size(h4);
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

.target-header-separator {
margin: 0 0.35rem;
opacity: 0.8;
}

.target-header-description {
font-size: rem-calc(15);
line-height: 1.6;
margin-bottom: 0;
margin-top: 0.75rem;
opacity: 0.9;
}
}

.hero-section {
margin-bottom: 2rem;
text-align: center;

@include breakpoint(medium) {
text-align: left;
}

h1 {
font-size: rem-calc(20);
font-weight: 700;
margin-bottom: 1rem;

@include breakpoint(medium) {
font-size: rem-calc(28);
}
}

.lead {
font-size: rem-calc(18);
line-height: 1.6;
margin-bottom: 1rem;

@include breakpoint(medium) {
font-size: rem-calc(20);
}
}

.parent-resource-link {
margin-bottom: 1rem;
}

.intro-text {
margin-top: 1rem;
}
}

.report-card {
border: 1px solid $light-gray;
border-radius: 4px;
height: 100%;

.card-section {
padding: 1.5rem;
}

.report-header {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;

h4 {
margin: 0;
}

.report-link {
color: $brand;
font-weight: 600;
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

.analysis-type-badge {
align-self: flex-start;
border-radius: 4px;
display: inline-block;
font-size: rem-calc(12);
font-weight: 600;
padding: 0.25rem 0.75rem;
text-transform: uppercase;

&.badge-report {
background-color: #1779ba;
color: $white;
}

&.badge-summary {
background-color: #3adb76;
color: $white;
}

&.badge-default {
background-color: $medium-gray;
color: $white;
}
}

.report-meta {
color: $dark-gray;
font-size: rem-calc(14);
margin-bottom: 0.5rem;

&.small {
font-size: rem-calc(12);
}

strong {
color: $black;
}
}
}

.contextual-info-sidebar {
margin-top: 2rem;

@include breakpoint(medium) {
margin-top: 0;
padding-top: 0;
}

.callout {
background-color: #f8f9fa;
border: 1px solid $light-gray;
border-radius: 4px;
padding: 1.5rem;

.contextual-info-details summary {
cursor: pointer;
font-size: rem-calc(16);
font-weight: 700;
list-style: none;
padding-left: 1.25rem;
position: relative;

@include breakpoint(medium) {
font-size: rem-calc(18);
}

&::-webkit-details-marker {
display: none;
}

&::marker {
display: none;
}

&::before {
content: "▶";
font-size: rem-calc(12);
left: 0;
position: absolute;
top: 0.25rem;
transition: transform 0.2s ease;
}

&:hover {
opacity: 0.8;
}
}

.contextual-info-details[open] summary {
margin-bottom: 1rem;

&::before {
content: "▼";
transform: rotate(0deg);
}
}

.contextual-info-details-content {
p:last-child {
margin-bottom: 0;
}
}

p {
font-size: rem-calc(14);
line-height: 1.6;
margin-bottom: 1rem;

&.small {
font-size: rem-calc(13);
}

strong {
color: $black;
display: block;
margin-bottom: 0.25rem;
}
}
}
}
}
1 change: 1 addition & 0 deletions app/components/admin/sensemaker/job_component_helpers.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module Admin::Sensemaker::JobComponentHelpers
extend ActiveSupport::Concern
include Sensemaker::ReportComponentHelpers

def job_status_class
"job-status-#{job.status.downcase}"
Expand Down
1 change: 1 addition & 0 deletions app/components/admin/sensemaker/job_show_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<h3><%= t("admin.sensemaker.job_show.details") %></h3>
<div>
<%= link_to t("admin.sensemaker.job_show.back_to_jobs"), admin_sensemaker_jobs_path, class: "margin-right" %>
<%= link_to t("admin.sensemaker.job_show.published_reports_link"), jobs_index_path_for(sensemaker_job.analysable), class: "margin-right" if is_published? %>
<% if can_publish? %>
<% if is_published? %>
<%= button_to t("admin.sensemaker.job_row.unpublish"), unpublish_admin_sensemaker_job_path(sensemaker_job), form_class: "inline", class: "button", method: :patch %>
Expand Down
2 changes: 1 addition & 1 deletion app/components/layout/subnavigation_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<li>
<%= layout_menu_link_to t("layouts.header.proposals"),
proposals_path,
controller.class == ProposalsController,
controller.class == ProposalsController || (controller.class == Sensemaker::JobsController && action_name == "all_proposals_index"),
accesskey: "2" %>
</li>
<% end %>
Expand Down
2 changes: 2 additions & 0 deletions app/components/polls/poll_header_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@
</div>

<aside class="small-12 medium-3 column margin-top">
<%= render Sensemaker::ReportLinkComponent.new(poll) %>

<%= render "shared/social_share",
share_title: t("shared.share"),
title: poll.name,
Expand Down
14 changes: 14 additions & 0 deletions app/components/sensemaker/about_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<aside class="small-12 medium-3 column">
<div class="contextual-info-sidebar">
<div class="callout">
<details class="contextual-info-details">
<summary><%= title %></summary>
<div class="contextual-info-details-content">
<p class="small"><%= how_created %></p>
<p class="small"><%= what_to_expect %></p>
<p class="small margin-top"><%= more_info %></p>
</div>
</details>
</div>
</div>
</aside>
24 changes: 24 additions & 0 deletions app/components/sensemaker/about_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# frozen_string_literal: true

class Sensemaker::AboutComponent < ApplicationComponent
def title
t("sensemaker.job_index.contextual_info.title")
end

def how_created
t("sensemaker.job_index.contextual_info.how_created")
end

def what_to_expect
t("sensemaker.job_index.contextual_info.what_to_expect")
end

def more_info
link_text = t("sensemaker.job_index.contextual_info.more_info_link")
link = link_to(link_text,
"https://jigsaw-code.github.io/sensemaking-tools/",
target: "_blank",
rel: "noopener")
t("sensemaker.job_index.contextual_info.more_info", link: link).html_safe
end
end
28 changes: 28 additions & 0 deletions app/components/sensemaker/budget_job_index_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div class="sensemaker">
<div class="row">
<div class="small-12 medium-9 column">
<section class="hero-section">
<p class="lead intro-text"><%= contextual_info_resource_intro %></p>
</section>

<section class="reports-section grouped-jobs-section">
<% if has_jobs? %>
<% grouped_jobs_for_budget.each do |group| %>
<h2><%= group[:target_path].present? ? link_to(group[:target_title], group[:target_path]) : group[:target_title] %></h2>
<div class="row small-up-1 medium-up-2 large-up-3 margin-top">
<% group[:jobs].each do |job| %>
<%= render Sensemaker::JobCardComponent.new(job) %>
<% end %>
</div>
<% end %>
<% else %>
<div class="callout primary">
<p><%= empty_message %></p>
</div>
<% end %>
</section>
</div>

<%= render Sensemaker::AboutComponent.new %>
</div>
</div>
Loading
Loading