diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 2124fa115..9bfa4fdc3 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -17,7 +17,8 @@ $line-height: rem-calc(24); $tiny-font-size: rem-calc(12); $brand: #004a83; -$dark: darken($brand, 10%); +$brand-secondary: darken($brand, 10%); +$dark: $brand-secondary; $text: #222; $text-medium: #515151; diff --git a/app/assets/stylesheets/budgets/ballot/investment.scss b/app/assets/stylesheets/budgets/ballot/investment.scss index 3b88f5484..34f5e018b 100644 --- a/app/assets/stylesheets/budgets/ballot/investment.scss +++ b/app/assets/stylesheets/budgets/ballot/investment.scss @@ -1,25 +1,38 @@ .ballot-list li { - background: #f9f9f9; + $side-padding: $line-height / 2; + $close-icon-size: rem-calc(20); + $close-icon-margin: rem-calc(6); + + background: #f1f1f1; + border-radius: rem-calc(12); line-height: $line-height; margin-bottom: $line-height / 4; - padding: $line-height $line-height / 2; + padding: $line-height $side-padding; position: relative; a { color: $text; } - span { + .ballot-list-title { display: block; - font-style: italic; + padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding}); + } + + .ballot-list-price { + color: $budget; + display: block; + font-weight: bold; + margin-top: $line-height / 2; + text-align: right; } .remove-budget-investment { @include has-fa-icon(times, solid); - font-size: rem-calc(20); + font-size: $close-icon-size; position: absolute; - right: rem-calc(6); - top: rem-calc(6); + right: $close-icon-margin; + top: $close-icon-margin; &::before { margin-right: 0; diff --git a/app/assets/stylesheets/budgets/investments/ballot.scss b/app/assets/stylesheets/budgets/investments/ballot.scss new file mode 100644 index 000000000..e2d141cda --- /dev/null +++ b/app/assets/stylesheets/budgets/investments/ballot.scss @@ -0,0 +1,10 @@ +.ballot { + + .button-remove-support { + @include has-fa-icon(times, solid); + background: #e7eaec; + color: $brand-secondary; + font-weight: bold; + margin-top: $line-height; + } +} diff --git a/app/assets/stylesheets/budgets/investments/sidebar.scss b/app/assets/stylesheets/budgets/investments/sidebar.scss new file mode 100644 index 000000000..3115901d0 --- /dev/null +++ b/app/assets/stylesheets/budgets/investments/sidebar.scss @@ -0,0 +1,17 @@ +.my-ballot { + border-top: 1px solid $border; + + h2 + * { + @include has-fa-icon(vote-yea, solid); + + &::before { + float: left; + font-size: rem-calc(50); + margin-right: rem-calc(10); + } + + + * { + clear: both; + } + } +} diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index e9593c06b..faadb553f 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -812,6 +812,8 @@ .button-support { background: $budget; color: #fff; + font-size: $base-font-size; + font-weight: bold; &:hover { background: $budget-hover; @@ -1168,12 +1170,24 @@ &.budget-heading { min-height: $line-height * 10; + + .check-ballot { + @include has-fa-icon(chevron-right, solid, after); + float: right; + min-width: rem-calc(240); + + &::after { + margin-left: $line-height / 4; + margin-right: 0; + } + } } h2 { margin-bottom: 0; } + h1, h2, h3, .back, @@ -1218,18 +1232,43 @@ .progress { background: #212033; + border-radius: rem-calc(12); clear: both; margin-bottom: 0; + overflow: hidden; } .progress-meter { background: #fdcb10; - border-radius: 0; + border-radius: rem-calc(12); + border-bottom-right-radius: 0; + border-top-right-radius: 0; transition: width 2s; } - .spent-amount-text { + .total-amount, + .amount-available { + font-weight: bold; margin-bottom: 0; + text-transform: uppercase; + } + + .total-amount { + font-size: $tiny-font-size; + + @include breakpoint(medium) { + text-align: right; + } + + span { + font-size: $base-font-size; + } + } + + .amount-available { + display: block; + font-size: $small-font-size; + margin-top: $line-height / 8; position: relative; text-align: right; white-space: nowrap; @@ -1242,22 +1281,11 @@ line-height: 0; position: absolute; right: -0.5em; + top: -$line-height / 8; } - } - - .total-amount { - color: #fff; - font-size: rem-calc(18); - font-weight: bold; - float: right; - } - - .amount-available { - display: block; span { font-size: rem-calc(24); - font-weight: bold; } } } @@ -1350,11 +1378,6 @@ background-color: $budget; transition: height 0.3s; - h2 { - margin-bottom: $line-height / 2; - transition: font-size 0.3s; - } - &.is-fixed { height: auto; left: 0; @@ -1370,6 +1393,14 @@ } } } + + h2 { + transition: font-size 0.3s; + + @include breakpoint(small only) { + margin: $line-height 0; + } + } } .budgets-stats { diff --git a/app/components/budgets/ballot/investment_component.html.erb b/app/components/budgets/ballot/investment_component.html.erb index a35cf9f0c..58e62f4ea 100644 --- a/app/components/budgets/ballot/investment_component.html.erb +++ b/app/components/budgets/ballot/investment_component.html.erb @@ -1,6 +1,6 @@
+ <%= sanitize(ballot.amount_progress(heading)) %> +
- <%= render "budgets/ballot/progress_bar/#{ballot.budget.voting_style}", ballot: ballot, heading: heading %> +
+ <%= sanitize(ballot.amount_available_info(heading)) %>
diff --git a/app/views/budgets/ballot/progress_bar/_approval.html.erb b/app/views/budgets/ballot/progress_bar/_approval.html.erb deleted file mode 100644 index 95961a824..000000000 --- a/app/views/budgets/ballot/progress_bar/_approval.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -<%= sanitize(t("budgets.progress_bar.votes", - count: ballot.amount_spent(heading), - limit: ballot.amount_limit(heading))) %> diff --git a/app/views/budgets/ballot/progress_bar/_knapsack.html.erb b/app/views/budgets/ballot/progress_bar/_knapsack.html.erb deleted file mode 100644 index 8599a4806..000000000 --- a/app/views/budgets/ballot/progress_bar/_knapsack.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -<%= t("budgets.progress_bar.assigned") %><%= ballot.formatted_amount_spent(heading) %> - - <%= t("budgets.progress_bar.available") %> - <%= ballot.formatted_amount_available(heading) %> - diff --git a/app/views/budgets/investments/_ballot.html.erb b/app/views/budgets/investments/_ballot.html.erb index fb712b423..7a4ea50d4 100644 --- a/app/views/budgets/investments/_ballot.html.erb +++ b/app/views/budgets/investments/_ballot.html.erb @@ -2,7 +2,7 @@- <%= sanitize(@ballot.change_vote_info( - link: link_to(t("budgets.investments.index.sidebar.change_vote_link"), - budget_ballot_path(@budget)))) %> -
++ <%= sanitize(@ballot.voted_info(@heading)) %> +
+ <% elsif @assigned_heading.present? %> +
+ <%= sanitize(t("budgets.investments.index.sidebar.different_heading_assigned",
+ heading_link: heading_link(@assigned_heading, @budget)
+ )) %>
+
+
+ <%= sanitize(t("budgets.investments.index.sidebar.change_ballot",
+ check_ballot: link_to(t("budgets.investments.index.sidebar.check_ballot_link"),
+ budget_ballot_path(@budget)))) %>
+
+
<%= t("budgets.investments.index.sidebar.zero") %>
+ <% end %> + ++ <%= sanitize(@ballot.change_vote_info( + link: link_to(t("budgets.investments.index.sidebar.change_vote_link"), + budget_ballot_path(@budget)))) %> +
+ +- <%= sanitize(@ballot.voted_info(@heading)) %> -
- <% elsif @assigned_heading.present? %> -
- <%= sanitize(t("budgets.investments.index.sidebar.different_heading_assigned",
- heading_link: heading_link(@assigned_heading, @budget)
- )) %>
-
-
- <%= sanitize(t("budgets.investments.index.sidebar.change_ballot",
- check_ballot: link_to(t("budgets.investments.index.sidebar.check_ballot_link"),
- budget_ballot_path(@budget)))) %>
-
-
<%= t("budgets.investments.index.sidebar.zero") %>
- <% end %> - -