diff --git a/app/assets/javascripts/clipboard_button.js.coffee b/app/assets/javascripts/clipboard_button.js.coffee index d7a460894..292492d1b 100644 --- a/app/assets/javascripts/clipboard_button.js.coffee +++ b/app/assets/javascripts/clipboard_button.js.coffee @@ -1,4 +1,4 @@ App.ClipboardButton = initialize: -> - clipboard = new ClipboardJS('.clipboard-btn'); + clipboard = new ClipboardJS('.js-clipboard'); console.log(clipboard); diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 7e1ff6370..a8d81a12d 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -1196,7 +1196,3 @@ table { } } } - -.js-document-attachment { - display: none; -} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6fb2948b2..6fb266fdd 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,17 +2,13 @@ @import 'foundation_and_overrides'; @import 'fonts'; @import 'icons'; -@import 'foundation-icons'; @import 'mixins'; @import 'admin'; @import 'layout'; @import 'participation'; @import 'pages'; -@import 'proposal'; -@import 'proposal-graph'; -@import 'dashboard_mailer_preview'; -@import 'dashboard_poster_preview'; -@import 'poll'; +@import 'dashboard_poster_pdf'; +@import 'dashboard'; @import 'legislation'; @import 'legislation_process'; @import 'community'; diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss new file mode 100644 index 000000000..a97a67f85 --- /dev/null +++ b/app/assets/stylesheets/dashboard.scss @@ -0,0 +1,483 @@ +// Table of Contents +// +// 01. Dashboard global +// 02. Actions +// 03. Resources +// 04. Goals +// 05. Sidebar +// 06. Community +// 07. Graph +// 08. Polls +// 09. Email preview +// 10. Poster preview +// + +// 01. Dashboard global +// -------------------- + +.proposal-title { + display: inline-block; + + .label { + display: inline-block; + margin-left: $line-height / 2; + vertical-align: top; + } +} + +.dashboard-proposals-stats { + border: 2px solid $highlight; + border-radius: rem-calc(6); + margin-bottom: $line-height; + padding: $line-height / 2; + + .counter { + text-align: center; + } + + .counter-divider { + + @include breakpoint(medium) { + border-left: 2px solid $highlight; + border-right: 2px solid $highlight; + } + } + + .counter-value { + font-size: rem-calc(20); + font-weight: bold; + } + + .counter-label { + color: $text-medium; + font-weight: bold; + } + + .progress { + background: #f0efea; + border-radius: rem-calc(6); + height: $line-height; + } + + .progress-meter { + background: #ffad33; + border-bottom-right-radius: rem-calc(3); + border-top-right-radius: rem-calc(3); + } + + .next-goal-progress { + font-size: $small-font-size; + font-weight: bold; + text-align: right; + } +} + +.title { + border-bottom: 1px solid $border; + margin: $line-height 0; +} + +// 02. Actions +// ----------- + +.action { + margin-top: $line-height; + + .action-content { + display: inline-block; + margin-left: $line-height / 4; + + h4, + p { + margin-bottom: 0; + } + + p { + font-size: $small-font-size; + } + } + + .icon-check { + display: inline-block; + font-size: rem-calc(24); + vertical-align: top; + } + + .unchecked-link { + display: inline-block; + vertical-align: top; + } + + .unchecked { + border: 1px solid $border; + border-radius: rem-calc(4); + display: inline-block; + height: rem-calc(20); + margin-top: $line-height / 6; + width: rem-calc(20); + } +} + +// 03. Resources +// ------------- + +.resource-card { + background: #d1f5eb; + border-radius: rem-calc(4); + margin-bottom: $line-height; + min-height: $line-height * 9; + padding: $line-height * 2 $line-height $line-height; + position: relative; + text-align: center; + + &.alert { + background: #feeaeb; + + &::before { + border: 2px solid #fb9497; + color: #fb9497; + content: '\74'; + } + } + + &::before { + border: 2px solid #00cb96; + border-radius: rem-calc(40); + color: #00cb96; + content: '\6c'; + font-family: 'icons'; + font-size: rem-calc(20); + height: rem-calc(36); + position: absolute; + right: 12px; + top: 12px; + width: rem-calc(36); + } + + .resource-description { + min-height: $line-height * 4; + } + + .button { + background: #00cb96; + color: #000; + font-weight: bold; + } +} + +// 04. Goals +// --------- + +.next-goal { + border-left: 2px solid $border; + margin-left: $line-height; + margin-top: rem-calc(-24); + padding-left: $line-height; + padding-top: $line-height; + position: relative; + + &::before { + background: #fff; + border: 1px solid $border; + border-radius: rem-calc(36); + color: #000; + content: '\77'; + font-family: 'icons'; + font-size: rem-calc(24); + height: rem-calc(36); + left: -18px; + padding: 0 rem-calc(6) rem-calc(6); + position: absolute; + top: 18px; + width: rem-calc(36); + } + + .help-text { + color: $text-medium; + display: block; + padding-top: $line-height / 4; + } +} + +.goal-supports, +.goal-resource, +.goal-days { + margin-bottom: $line-height; + padding-left: $line-height * 1.5; + position: relative; + + &::before { + color: #000; + font-family: 'icons'; + font-size: rem-calc(24); + left: 6px; + position: absolute; + top: -6px; + } +} + +.goal-supports { + + &::before { + content: '\77'; + } +} + +.goal-resource { + + &::before { + content: '\74'; + } +} + +.goal-days { + + &::before { + content: '\67'; + } +} + +// 05. Sidebar +// ----------- + +.dashboard-sidebar { + background: #fbfbfb; + border-right: 1px solid $border; + + @include breakpoint(medium) { + min-height: $line-height * 45; + } + + [class^="icon-"] { + color: $text; + display: inline-block; + font-size: rem-calc(24); + line-height: $line-height; + padding: $line-height / 2 $line-height / 4; + padding-left: 0; + vertical-align: middle; + } + + ul { + + li { + line-height: $line-height * 2; + padding-left: $line-height; + } + + &.resources { + border-left: 1px solid $border; + margin-left: $line-height / 2; + } + } + + a { + color: $text; + } + + .is-active { + color: $brand; + position: relative; + + &::before { + background: linear-gradient(to right, rgba(231, 236, 240, 1) 0%, rgba(251, 251, 251, 1) 90%); + border-left: 4px solid $brand; + content: ''; + height: rem-calc(48); + left: 0; + padding-left: rem-calc(20); + position: absolute; + width: rem-calc(24); + } + + a { + color: $brand; + + ~ a { + color: $text; + } + } + + [class^="icon-"] { + color: $brand; + } + } + + .has-tip { + border-bottom: 0; + color: $text; + font-weight: normal; + } + + .submenu-active { + border-bottom: 2px solid $brand; + + .has-tip { + color: $brand; + font-weight: bold; + } + } +} + +// 06. Community +// ------------- + +.dashboard-community { + + .community-number { + font-size: rem-calc(24); + font-weight: bold; + } + + [class^="icon-"] { + color: $text-medium; + display: inline-block; + font-size: rem-calc(24); + line-height: $line-height; + vertical-align: middle; + } + + .community-info { + color: $text-medium; + } + + .community-info { + font-size: $small-font-size; + } +} + +// 07. Graph +// --------- + +.proposal-graph { + + .c3-ygrid-lines { + + line { + stroke: #005c92; + } + + text { + fill: #005c92; + } + } +} + +// 08. Polls +// --------- + +.question-fields { + border-bottom: 1px solid $border; + margin-bottom: $line-height; +} + +.answer-fields { + background: #fbfbfb; + border: 1px solid $border; + margin-bottom: $line-height; + padding: $line-height; +} + +.poll-card { + background: #e7f3fd; + border-radius: rem-calc(4); + margin-bottom: $line-height; + min-height: $line-height * 9; + padding: $line-height; + position: relative; + text-align: center; + + .clipboard { + border: 1px solid $brand; + border-radius: rem-calc(20); + cursor: pointer; + display: inline-block; + margin-bottom: $line-height; + padding: $line-height / 4 $line-height / 2; + padding-left: rem-calc(30); + position: relative; + text-decoration: none; + + &::before { + color: $brand; + content: '\6d'; + font-family: 'icons'; + left: 6px; + position: absolute; + } + } + + .button { + font-weight: bold; + } +} + +.community-poll { + border-bottom: 1px solid $border; + margin-bottom: $line-height; + padding-bottom: $line-height / 2; +} + +// 09. Email preview +// ----------------- + +.dashboard-mail-preview { + + .mail-header { + background-color: $brand; + color: #fff; + padding: $line-height; + text-align: center; + } + + .mail-body { + text-align: justify; + } +} + +// 10. Poster preview +// -------------------- + +.dashboard-poster-preview { + + .poster-header { + background-color: $brand; + color: #fff; + padding: $line-height * 2; + + p { + font-size: rem-calc(24); + } + + .intro { + margin: $line-height * 2; + text-align: justify; + } + + .image-caption { + color: #fff; + font-size: rem-calc(20); + font-weight: bold; + margin-bottom: 0; + text-align: center; + } + + .proposal-image { + width: 100%; + } + } + + .proposal-title { + color: $brand; + font-size: rem-calc(40); + margin-bottom: $line-height * 2; + } + + .poster-footer { + border-left: 2px solid $border; + font-size: rem-calc(20); + margin: 0 auto; + padding-left: $line-height / 2; + width: 50%; + } +} diff --git a/app/assets/stylesheets/dashboard_mailer.scss b/app/assets/stylesheets/dashboard_mailer.scss index b59613568..8e4f3ba6b 100644 --- a/app/assets/stylesheets/dashboard_mailer.scss +++ b/app/assets/stylesheets/dashboard_mailer.scss @@ -10,9 +10,9 @@ body { } header { - background-color: #3700fd; - color: white; - padding: 20pt 20pt 20pt 20pt; + background-color: #3700fd; + color: #fff; + padding: 20pt; margin-bottom: 0; border-bottom: 0; @@ -40,19 +40,20 @@ header { .support-link { display: block; background-color: #004a84; - color: #ddffff; + color: #dff; text-decoration: none; border: 1px solid $border; width: 80%; margin-left: auto; margin-right: auto; font-size: 40pt; - padding: 20pt 20pt 20pt 20pt; + padding: 20pt; border-radius: 5pt; text-align: center; margin-top: 50pt; margin-bottom: 50pt; } + .support-link:hover { color: #ddffffff; text-decoration: none; diff --git a/app/assets/stylesheets/dashboard_mailer_preview.scss b/app/assets/stylesheets/dashboard_mailer_preview.scss deleted file mode 100644 index 1f967bf24..000000000 --- a/app/assets/stylesheets/dashboard_mailer_preview.scss +++ /dev/null @@ -1,64 +0,0 @@ - .dashboard-mail-preview { - - padding-left: 10%; - padding-right: 10%; - - p { - text-align: justify; - } - - .header { - background-color: #3700fd; - color: white; - padding: 20pt 20pt 20pt 20pt; - margin-bottom: 0; - border-bottom: 0; - - h1 { - font-size: 40pt; - text-align: center; - } - - h2 { - font-size: 25pt; - text-align: center; - } - } - - .proposal-image { - width: 100%; - } - - .mail-body { - color: #838383; - font-size: 18pt; - margin-top: 20pt; - } - - .support-link { - display: block; - background-color: #004a84; - color: #ddffff; - text-decoration: none; - border: 1px solid $border; - width: 80%; - margin-left: auto; - margin-right: auto; - font-size: 40pt; - padding: 20pt 20pt 20pt 20pt; - border-radius: 5pt; - text-align: center; - margin-top: 50pt; - margin-bottom: 50pt; - } - .support-link:hover { - color: #ddffffff; - text-decoration: none; - } - - .share-title { - font-weight: bold; - font-size: 25pt; - } -} - diff --git a/app/assets/stylesheets/dashboard_poster_preview.scss b/app/assets/stylesheets/dashboard_poster_pdf.scss similarity index 86% rename from app/assets/stylesheets/dashboard_poster_preview.scss rename to app/assets/stylesheets/dashboard_poster_pdf.scss index 418ec2a56..94d03fe41 100644 --- a/app/assets/stylesheets/dashboard_poster_preview.scss +++ b/app/assets/stylesheets/dashboard_poster_pdf.scss @@ -1,12 +1,12 @@ -.dashboard-poster-preview { +.dashboard-poster-pdf { .header { - background-color: #3700fd; - color: white; - padding: 40pt 40pt 80pt 40pt; + background-color: #3700fd; + color: #fff; + padding: 40pt 40pt 80pt; margin-bottom: 0; border-bottom: 0; - + h1 { font-size: 40pt; color: #dcf5fe; @@ -28,7 +28,7 @@ .image-caption { margin-bottom: 0; text-align: center; - color: white; + color: #fff; font-weight: bold; font-size: 18pt; } @@ -38,7 +38,7 @@ display: block; margin-top: -75pt; margin-bottom: 40pt; - + img { display: block; margin-left: auto; @@ -75,7 +75,7 @@ margin-right: auto; width: 50%; padding-left: 10pt; - border-left: 1pt solid darkgray; + border-left: 1pt solid #a9a9a9; text-align: left; } } diff --git a/app/assets/stylesheets/poll.scss b/app/assets/stylesheets/poll.scss deleted file mode 100644 index 6cf45c586..000000000 --- a/app/assets/stylesheets/poll.scss +++ /dev/null @@ -1,12 +0,0 @@ -.poll-card { - - .card { - background-color: #e7f3fd; - } - - .clipboard-btn { - border-radius: rem-calc(12); - padding: rem-calc(5) rem-calc(10) rem-calc(10) rem-calc(10); - height: rem-calc(24); - } -} diff --git a/app/assets/stylesheets/proposal-graph.scss b/app/assets/stylesheets/proposal-graph.scss deleted file mode 100644 index b5886f9f9..000000000 --- a/app/assets/stylesheets/proposal-graph.scss +++ /dev/null @@ -1,13 +0,0 @@ -.proposal-graph { - - .c3-ygrid-lines { - - line { - stroke: #005c92; - } - - text { - fill: #005c92; - } - } -} diff --git a/app/assets/stylesheets/proposal.scss b/app/assets/stylesheets/proposal.scss deleted file mode 100644 index a1a440b43..000000000 --- a/app/assets/stylesheets/proposal.scss +++ /dev/null @@ -1,380 +0,0 @@ -.proposal-show { - - p.centered { - text-align: center; - } - - div.centered { - display: flex; - justify-content: center; - align-items: center; - } -} - -.proposal-created { - margin-bottom: 1.5rem; - - .row { - background-color: #e7f3fd; - } -} - -.proposal-dashboard { - - .dashboard-sidebar { - border-right: rem-calc(1) solid lightgray; - background-color: #fbfbfb; - - @include breakpoint(medium) { - min-height: rem-calc(1100); - } - - ul { - list-style-type: none; - margin-bottom: 0; - margin-left: 0; - padding: 0; - - [class^="icon-"] { - color: #595959; - display: inline-block; - font-size: rem-calc(24); - line-height: $line-height; - padding: $line-height / 2 $line-height / 4; - padding-left: 0; - vertical-align: middle; - } - - [class^="fi-"] { - color: #595959; - display: inline-block; - font-size: rem-calc(24); - line-height: $line-height; - padding: $line-height / 2 $line-height / 4; - padding-left: 0; - vertical-align: middle; - } - } - - li { - margin: 0; - outline: 0; - - ul { - margin-left: $line-height / 1.5; - border-left: 1px solid #b6b6b6; - padding-left: $line-height / 2; - } - - &.is-active a { - - span { - color: #00538b; - font-weight: bold; - border-bottom: 2px solid #00538b; - padding-bottom: 2px; - } - } - } - - li a { - color: #595959; - display: block; - line-height: rem-calc(48); - padding-left: rem-calc(12); - vertical-align: top; - - &:hover { - text-decoration: none; - } - } - - li a.is-active { - color: #00538b; - - [class^="icon-"] { - color: #00538b; - } - - [class^="fi-"] { - color: #00538b; - } - } - - .submenu { - border-bottom: 0; - margin-left: $line-height; - - li:first-child { - padding-top: $line-height / 2; - } - - li:last-child { - padding-bottom: $line-height / 2; - } - - a { - font-weight: normal; - } - - .is-active { - border-bottom: 0; - } - } - } - - .proposal-totals { - padding: 0; - - .column { - padding: 1.5rem; - display: flex; - align-items: stretch; - justify-content: center; - } - - .column:first-child { - border-right: 1px solid lightgray; - } - - .counter { - flex-grow: 1; - padding-left: rem-calc(10); - padding-right: rem-calc(10); - - .counter-value { - text-align: center; - } - - .counter-label { - text-align: center; - } - } - - .counter:first-child { - padding-left: 0; - - .counter-value { - color: #ffac38; - } - - .counter-label { - color: #ffac38; - } - } - - .counter:not(:last-child) { - border-right: 1px solid lightgray; - } - - .counter-value { - font-size: 1.2rem; - font-weight: bold; - } - - .counter-label { - color: #c5c5c5; - font-weight: bold; - } - - .proposal-link { - flex-grow: 1; - - .button { - margin: 0; - } - } - - .support-indicator { - flex-grow: 3; - padding-left: 1rem; - padding-right: 1rem; - - .progress { - margin-bottom: 0; - } - - .progress-meter { - background-color: #ffac38; - } - } - - .current-goal { - flex-grow: 0; - } - } - - .proposal-title { - display: flex; - align-items: flex-start; - - .label { - color: #fefefe; - margin-left: rem-calc(10); - } - } - - .action-title { - margin-top: rem-calc(5); - margin-bottom: rem-calc(10); - - hr { - max-width: 100%; - margin: 0; - } - } - - .next-goal { - i { - margin-right: 10px; - } - - .skip-icon { - padding-left: 40px; - } - } - - .columns { - padding: 0; - } - - .row { - max-width: 100%; - } - - .has-tip { - border-bottom: none; - font-weight: normal; - } - - .title { - border-bottom: rem-calc(1) solid lightgray; - - h5 { - padding: 1rem 1.5rem 1rem 1.5rem; - font-size: rem-calc(16); - margin: 0; - } - } - - .body { - padding: 1rem 1.5rem 1rem 1.5rem; - } - - .proposal-dashboard-action-links { - margin-bottom: rem-calc(15); - } - - .resource-card { - min-height: rem-calc(200); - - .bottom-container { - padding-left: 0; - padding-right: 0; - - .bottom-element { - position: absolute; - bottom: 0; - width: 100%; - } - } - } - - .resource-card { - - i { - display: inline-block; - width: rem-calc(24); - height: rem-calc(24); - border-radius: rem-calc(10); - padding-right: rem-calc(5); - } - } - - .resource-card.primary { - background-color: #d3edf6; - - i { - color: #116f8e; - border: rem-calc(1) solid #116f8e; - } - } - - .resource-card.success { - background-color: #c5f6eb; - - i { - color: #00cf96; - border: rem-calc(1) solid #00cf96; - } - } - - .resource-card.alert { - background-color: #ffe5e8; - - i { - color: #ff828b; - border: rem-calc(1) solid #ff828b; - } - } - - .proposed-action { - display: flex; - flex-flow: row wrap; - margin-bottom: rem-calc(15); - - .exec-indicator { - margin-right: rem-calc(10); - - i { - color: #00e193; - } - - .checkbox-unchecked { - display:block; - width: 16px; - height: 16px; - border: 1px solid lightgray; - margin-top: 4px; - } - } - - h4 { - font-weight: normal; - } - - p { - color: #535469; - line-height: 1rem; - font-size: 16px; - margin: 0; - } - - a { - font-size: 16px; - } - } - - .community-totals { - - span { - color: #898989; - } - - p { - color: #898989; - } - } - - .polls-form { - - hr { - width: 100%; - max-width: 100%; - } - - .remove-nested-record { - padding-top: 20px; - } - } -} diff --git a/app/helpers/proposals_dashboard_helper.rb b/app/helpers/proposals_dashboard_helper.rb index b5e25378e..3c5497fcb 100644 --- a/app/helpers/proposals_dashboard_helper.rb +++ b/app/helpers/proposals_dashboard_helper.rb @@ -1,17 +1,10 @@ module ProposalsDashboardHelper - def my_proposal_menu_class - return 'is-active' if controller_name == 'dashboard' && action_name == 'index' - nil + def my_proposal_menu_active? + controller_name == 'dashboard' && action_name == 'show' end - def progress_menu_class - return 'is-active' if progress_menu_active? - nil - end - - def community_menu_class - return 'is-active' if controller_name == 'dashboard' && action_name == 'community' - nil + def community_menu_active? + controller_name == 'dashboard' && action_name == 'community' end def progress_menu_active? @@ -22,20 +15,8 @@ module ProposalsDashboardHelper can?(:manage_polls, proposal) || resources.any? end - def resources_menu(&block) - menu_group('resources-menu', resources_menu_active?, &block) - end - - def polls_menu(&block) - menu_entry(polls_menu_active?, &block) - end - - def poster_menu(&block) - menu_entry(poster_menu_active?, &block) - end - def resources_menu_active? - poster_menu_active? || polls_menu_active? || mailing_menu_active? || is_resource_request? + poster_menu_active? || polls_menu_active? || mailing_menu_active? || is_resource_request? end def polls_menu_active? @@ -46,31 +27,10 @@ module ProposalsDashboardHelper controller_name == 'poster' end - def mailing_menu(&block) - menu_entry(mailing_menu_active?, &block) - end - def mailing_menu_active? controller_name == 'mailing' end - def menu_group(id, active, &block) - html_class = nil - html_class = 'is-active' if active - - content_tag(:ul, id: id, class: html_class) do - yield - end - end - - def menu_entry(active, &block) - content = capture(&block) - html_class = nil - html_class = 'is-active' if active - - content_tag(:li, content, class: html_class) - end - def is_resource_request? controller_name == 'dashboard' && action_name == 'new_request' && dashboard_action&.resource? end @@ -82,7 +42,7 @@ module ProposalsDashboardHelper def is_request_active(id) controller_name == 'dashboard' && action_name == 'new_request' && dashboard_action&.id == id end - + def resoure_availability_label(resource) label = [] diff --git a/app/views/communities/_poll.html.erb b/app/views/communities/_poll.html.erb index b55a85b85..6239a5cca 100644 --- a/app/views/communities/_poll.html.erb +++ b/app/views/communities/_poll.html.erb @@ -1,5 +1,10 @@ -<%= link_to poll do %> - <%= poll.title %> -<% end %> -

<%= t('.take_part', from: l(poll.starts_at.to_date), to:(poll.ends_at.to_date)) %>

-
+
+

+ <%= link_to poll.title, poll %> +

+ +

+ <%= t("communities.poll.take_part", + from: l(poll.starts_at.to_date), to:(poll.ends_at.to_date)) %> +

+
diff --git a/app/views/communities/_subnav.html.erb b/app/views/communities/_subnav.html.erb index fbfa73f2b..be2b6ed30 100644 --- a/app/views/communities/_subnav.html.erb +++ b/app/views/communities/_subnav.html.erb @@ -1,6 +1,11 @@
-