diff --git a/.stylelintrc.yml b/.stylelintrc.yml index c5ba33f96..071155eba 100644 --- a/.stylelintrc.yml +++ b/.stylelintrc.yml @@ -83,6 +83,7 @@ rules: "@stylistic/indentation": - 2 - ignore: + - param - value "@stylistic/media-feature-parentheses-space-inside": never "@stylistic/no-eol-whitespace": true diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1be22b348..8a9be181e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -21,6 +21,7 @@ @import "account/**/*"; @import "budgets/**/*"; @import "comments/**/*"; +@import "dashboard/**/*"; @import "debates/**/*"; @import "devise/**/*"; @import "documents/**/*"; diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss index 3233d17a8..cbcb40f88 100644 --- a/app/assets/stylesheets/dashboard.scss +++ b/app/assets/stylesheets/dashboard.scss @@ -2,7 +2,6 @@ // // 01. Dashboard global // 02. Actions -// 03. Resources // 04. Goals // 05. Sidebar // 06. Community @@ -165,62 +164,6 @@ } } -// 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 { - color: #fb9497; - content: "\74"; - } - } - - &::before { - border: 2px solid; - 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); - } - - .label { - left: 0; - position: absolute; - top: 20px; - } - - h4 { - margin-top: $line-height; - } - - .resource-description { - min-height: $line-height * 4; - } - - .button { - background: #00cb96; - color: #000; - font-weight: bold; - } -} - // 04. Goals // --------- @@ -429,28 +372,6 @@ 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; - - .button { - font-weight: bold; - } - - button { - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } -} - .community-poll { border-bottom: 1px solid $border; margin-bottom: $line-height; diff --git a/app/assets/stylesheets/dashboard/poll.scss b/app/assets/stylesheets/dashboard/poll.scss new file mode 100644 index 000000000..754194621 --- /dev/null +++ b/app/assets/stylesheets/dashboard/poll.scss @@ -0,0 +1,22 @@ +.dashboard-poll { + background: #e7f3fd; + border-radius: rem-calc(4); + display: flex; + flex-direction: column; + min-height: $line-height * 9; + padding: $line-height; + position: relative; + text-align: center; + + .button { + font-weight: bold; + } + + button { + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } +} diff --git a/app/assets/stylesheets/dashboard/polls.scss b/app/assets/stylesheets/dashboard/polls.scss new file mode 100644 index 000000000..399bd3a73 --- /dev/null +++ b/app/assets/stylesheets/dashboard/polls.scss @@ -0,0 +1,4 @@ +.dashboard-polls { + @include dynamic-grid; + margin-top: $line-height; +} diff --git a/app/assets/stylesheets/dashboard/resources.scss b/app/assets/stylesheets/dashboard/resources.scss new file mode 100644 index 000000000..48d3da8ab --- /dev/null +++ b/app/assets/stylesheets/dashboard/resources.scss @@ -0,0 +1,55 @@ +.dashboard-resources { + .resources { + @include dynamic-grid; + + .resource-card { + background: #d1f5eb; + border-radius: rem-calc(4); + display: flex; + flex-direction: column; + justify-content: space-between; + padding: $line-height * 2 $line-height $line-height; + position: relative; + text-align: center; + + &.alert { + background: #feeaeb; + + &::before { + color: #fb9497; + content: "\74"; + } + } + + &::before { + border: 2px solid; + 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); + } + + .label { + left: 0; + position: absolute; + top: 20px; + } + + h4 { + margin-top: $line-height; + } + + .button { + background: #00cb96; + color: #000; + font-weight: bold; + } + } + } +} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index b3eae06c4..0c69d0bae 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -403,18 +403,10 @@ button, vertical-align: top; } -.align-middle { - vertical-align: middle; -} - .table { display: table; } -.table-cell { - display: table-cell; -} - .uppercase { text-transform: uppercase; } @@ -1865,40 +1857,6 @@ table { } } -.following { - - .follow-list { - list-style-type: circle; - padding: calc($line-height / 2); - - li { - margin-bottom: calc($line-height / 2); - margin-left: $line-height; - } - } - - h3 { - font-size: rem-calc(24); - margin-top: $line-height; - padding-left: rem-calc(30); - position: relative; - - span { - left: 0; - position: absolute; - top: 2px; - } - } - - .interests { - - @include breakpoint(medium) { - border-left: 1px solid #ececec; - padding-left: $line-height; - } - } -} - // 19. Recommendations // ------------------- @@ -2039,67 +1997,6 @@ table { } } -.recommended-index { - @include full-width-background; - @include full-width-border(bottom, 1px solid #eee); - @include full-width-border(top, 1px solid #fafafa); - background: #fafafa; - margin-bottom: $line-height; - margin-top: rem-calc(-25); - padding: $line-height 0 calc($line-height / 2); - - @include breakpoint(medium) { - padding-top: 0; - } - - h2 { - font-size: $small-font-size; - text-transform: uppercase; - } - - h3 { - font-size: $base-font-size; - margin-bottom: 0; - } - - a { - - &:hover { - text-decoration: none; - } - } - - .recommendation { - @include card; - background: $body-background; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); - display: block; - margin-bottom: calc($line-height / 4); - padding: calc($line-height / 2); - z-index: 1; - - &:hover:not(:focus-within) { - box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); - } - } -} - -.hide-recommendations { - color: $text-light; - cursor: pointer; - font-size: $small-font-size; - line-height: inherit; - position: absolute; - right: 12px; - top: -18px; - z-index: 2; - - &:focus, - &:hover { - @include anchor-color-hover; - } -} - // 20. Documents // ------------- diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 27fa294f1..a54c36fcc 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -32,6 +32,15 @@ } } +@mixin dynamic-grid($min-column-width: 15rem, + $row-gap: $line-height, + $column-gap: rem-calc(map-get($grid-column-gutter, medium))) { + display: grid; + gap: $row-gap $column-gap; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax($min-column-width, 1fr)); +} + @mixin full-width-cover($adjust-margin: true, $adjust-padding: false) { $global-padding: rem-calc(map-get($grid-column-gutter, medium)) * 0.5; bottom: 0; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 09b22bd4f..73ad32cdd 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1390,12 +1390,6 @@ } } -.image-container { - background: #fafafa; - overflow: hidden; - position: relative; -} - .public .poll { border: 1px solid $border; margin-bottom: calc($line-height / 2); @@ -1415,7 +1409,8 @@ // 09. Polls results and stats // --------------------------- -.polls-results-stats { +.polls-results, +.polls-stats { table { table-layout: fixed; diff --git a/app/assets/stylesheets/polls/access_status.scss b/app/assets/stylesheets/polls/access_status.scss new file mode 100644 index 000000000..24391e76e --- /dev/null +++ b/app/assets/stylesheets/polls/access_status.scss @@ -0,0 +1,55 @@ +.poll .access-status { + border-bottom: 60px solid transparent; + border-top: 0; + height: 0; + position: absolute; + right: 0; + top: 0; + width: 0; + + &.cant-answer::after, + &.not-logged-in::after, + &.already-answer::after, + &.unverified::after { + font-family: "icons" !important; + left: 34px; + position: absolute; + top: 5px; + } + + &.cant-answer { + border-right: 60px solid $alert-bg; + + &::after { + color: $color-alert; + content: "\74"; + } + } + + &.not-logged-in { + border-right: 60px solid $info-bg; + + &::after { + color: $color-info; + content: "\6f"; + } + } + + &.unverified { + border-right: 60px solid $warning-bg; + + &::after { + color: $color-warning; + content: "\6f"; + } + } + + &.already-answer { + border-right: 60px solid $success-bg; + + &::after { + color: $color-success; + content: "\59"; + } + } +} diff --git a/app/assets/stylesheets/polls/poll.scss b/app/assets/stylesheets/polls/poll.scss index 8e3446ef7..3cf046f2d 100644 --- a/app/assets/stylesheets/polls/poll.scss +++ b/app/assets/stylesheets/polls/poll.scss @@ -2,69 +2,37 @@ &.with-image { @include breakpoint(medium) { + display: flex; padding: 0 calc($line-height / 2) 0 0; - } - .image-container img { - height: 100%; - max-width: none; - position: absolute; + > * { + flex-basis: 25%; + } + + .poll-info { + flex-basis: 50%; + } + + > a { + align-self: center; + } + + > .poll-info, + > a { + margin-#{$global-left}: rem-calc(map-get($grid-column-gutter, medium)); + } } } - .icon-poll-answer { - border-bottom: 60px solid transparent; - border-top: 0; - height: 0; - position: absolute; - right: 0; - top: 0; - width: 0; + .image-container { + background: #fafafa; + overflow: hidden; + position: relative; - &.cant-answer::after, - &.not-logged-in::after, - &.already-answer::after, - &.unverified::after { - font-family: "icons" !important; - left: 34px; + img { + height: 100%; + max-width: none; position: absolute; - top: 5px; - } - - &.cant-answer { - border-right: 60px solid $alert-bg; - - &::after { - color: $color-alert; - content: "\74"; - } - } - - &.not-logged-in { - border-right: 60px solid $info-bg; - - &::after { - color: $color-info; - content: "\6f"; - } - } - - &.unverified { - border-right: 60px solid $warning-bg; - - &::after { - color: $color-warning; - content: "\6f"; - } - } - - &.already-answer { - border-right: 60px solid $success-bg; - - &::after { - color: $color-success; - content: "\59"; - } } } diff --git a/app/assets/stylesheets/polls/results.scss b/app/assets/stylesheets/polls/results.scss new file mode 100644 index 000000000..769199149 --- /dev/null +++ b/app/assets/stylesheets/polls/results.scss @@ -0,0 +1,22 @@ +.polls-results { + .polls-results-content { + margin-bottom: $line-height; + margin-top: $line-height; + + @include breakpoint(medium) { + display: flex; + + > :first-child { + flex-basis: 25%; + } + + > :last-child { + flex-basis: 75%; + } + } + + > * { + @include grid-column-gutter; + } + } +} diff --git a/app/assets/stylesheets/shared/recommended_index.scss b/app/assets/stylesheets/shared/recommended_index.scss new file mode 100644 index 000000000..c8b4b7385 --- /dev/null +++ b/app/assets/stylesheets/shared/recommended_index.scss @@ -0,0 +1,77 @@ +.recommended-index { + @include full-width-background; + @include full-width-border(bottom, 1px solid #eee); + @include full-width-border(top, 1px solid #fafafa); + background: #fafafa; + margin-bottom: $line-height; + margin-top: rem-calc(-25); + padding: $line-height 0 calc($line-height / 2); + + @include breakpoint(medium) { + padding-top: 0; + } + + h2 { + font-size: $small-font-size; + text-transform: uppercase; + } + + ul { + $row-gap: calc($line-height / 4); + @include dynamic-grid($row-gap: $row-gap); + @include grid-column-gutter; + font-weight: bold; + list-style: none; + margin: 0; + + @include breakpoint(medium) { + + * { + text-align: $global-right; + } + } + + + * { + @include grid-column-gutter; + margin-top: $row-gap; + } + } + + a { + + &:hover { + text-decoration: none; + } + } + + .recommendation { + background: $body-background; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15); + display: block; + padding: calc($line-height / 2); + z-index: 1; + + &:hover:not(:focus-within) { + box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); + } + } + + .hide-recommendations { + color: $text-light; + cursor: pointer; + font-size: $small-font-size; + line-height: inherit; + position: absolute; + right: 12px; + top: 0; + z-index: 2; + + @include breakpoint(medium) { + top: -18px; + } + + &:focus, + &:hover { + @include anchor-color-hover; + } + } +} diff --git a/app/assets/stylesheets/users/following.scss b/app/assets/stylesheets/users/following.scss new file mode 100644 index 000000000..0c325cd00 --- /dev/null +++ b/app/assets/stylesheets/users/following.scss @@ -0,0 +1,40 @@ +.users-following { + margin-top: $line-height; + + @include breakpoint(medium) { + display: flex; + + > .followables { + flex-basis: calc(100% * 2 / 3); + } + + > .interests { + border-left: 1px solid #ececec; + flex-basis: calc(100% / 3); + padding-left: $line-height; + } + } + + .follow-list { + list-style-type: circle; + padding: calc($line-height / 2); + + li { + margin-bottom: calc($line-height / 2); + margin-left: $line-height; + } + } + + h3 { + font-size: rem-calc(24); + margin-top: $line-height; + padding-left: rem-calc(30); + position: relative; + + span { + left: 0; + position: absolute; + top: 2px; + } + } +} diff --git a/app/components/dashboard/active_resource_component.html.erb b/app/components/dashboard/active_resource_component.html.erb new file mode 100644 index 000000000..0c4faec31 --- /dev/null +++ b/app/components/dashboard/active_resource_component.html.erb @@ -0,0 +1,23 @@ +
<%= resource.short_description %>
+ + <% if resource.executed_for?(proposal) || (!resource.request_to_administrators && resource.active_for?(proposal)) %> + <%= link_to t("dashboard.resource.view_resource"), + new_request_proposal_dashboard_action_path(proposal, resource), + class: "button" %> + <% elsif resource.requested_for?(proposal) %> + <%= t("dashboard.resource.resource_requested") %> + <% elsif resource.active_for?(proposal) %> + <%= link_to t("dashboard.resource.request_resource"), + new_request_proposal_dashboard_action_path(proposal, resource), + class: "button" %> + <% else %> + <%= resource_availability_label %> + <% end %> +<%= resource_description %>
+ + <%= link_to t("dashboard.resource.view_resource"), resource_path, class: "button" %> ++ <%= t("dashboard.polls.poll.responses", count: poll.answer_count) %> +
+ +<%= t("dashboard.polls.poll.show_results_help") %>
+ + <%= button_to t("dashboard.polls.poll.delete"), + proposal_dashboard_poll_path(proposal, poll), + method: :delete, + "data-confirm": t("dashboard.polls.poll.alert_notice"), + class: "delete" %> +<%= t("polls.show.results.title") %>
+ +- <%= Setting["proposals.email_short_title"] %> -
- -- <%= Setting["proposals.poll_short_title"] %> -
- -- <%= Setting["proposals.poster_short_title"] %> -
- -- <%= resource.short_description %> -
- -- <%= t("dashboard.polls.poll.responses", count: poll.answer_count) %> -
- -<%= t("dashboard.polls.poll.show_results_help") %>
- - <%= button_to t("dashboard.polls.poll.delete"), - proposal_dashboard_poll_path(proposal, poll), - method: :delete, - "data-confirm": t("dashboard.polls.poll.alert_notice"), - class: "delete" %> -