consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update styles and layout for new debates form

Browse Source
This commit is contained in:
decabeza
2020-06-08 13:25:14 +02:00
committed by Javi Martín
parent 211bcb8a65
commit 909fd00714
13 changed files with 262 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/assets/stylesheets/budgets/investments/form.scss
View File

@@ -1,57 +1,3 @@
.budget-investment-form {
.required-fields {
@include full-width-background($adjust-padding: true);
background: $light;
margin-bottom: $line-height;
padding-top: $line-height;
}
> fieldset > legend {
float: left;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: $line-height;
text-transform: uppercase;
+ * {
clear: left;
}
}
select {
min-height: $line-height * 2;
@include breakpoint(medium) {
&:not(.js-add-language):not(.js-select-language) {
width: 50%;
}
}
}
.globalize-languages,
.translatable-fields {
@include grid-row-nest;
@include grid-column-gutter;
}
[type="submit"] {
@include regular-button;
font-size: map-get($button-sizes, large);
margin-top: $line-height;
}
.actions {
border: 6px solid $border;
border-radius: rem-calc(12);
margin-left: auto;
margin-right: auto;
margin-top: $line-height * 2;
padding: $line-height * 2 $line-height;
text-align: center;
@include breakpoint(medium) {
width: 75%;
}
}
@extend %public-form;
}

102
app/assets/stylesheets/budgets/investments/new.scss
View File

@@ -1,105 +1,7 @@
.budget-investment-new {
$border-width: 4px;
@extend %public-form-header;
h1 {
margin-bottom: 0;
}
header {
$icon-size: $line-height * 4;
$padding-right: rem-calc(20);
$icon-size-with-padding: $icon-size + $padding-right;
$polygon-size: $icon-size / 2;
@include background-till-left-of-screen;
@include brand-background($brand-secondary);
border: $border-width solid $brand-secondary;
border-bottom-right-radius: rem-calc(12);
border-top-right-radius: rem-calc(12);
margin-top: $line-height * 2;
padding: $line-height * 2 0;
position: relative;
@include breakpoint(small) {
&::after {
display: none;
}
}
@include breakpoint(large) {
$rounding-error: 6px;
padding-right: $icon-size-with-padding;
background-image: linear-gradient(
to right,
#{$brand-secondary} 0,
#{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
#{$body-background} calc(100% - #{$icon-size-with-padding}),
#{$body-background} 100%
);
&::after {
background: $body-background;
content: "";
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
display: block;
position: absolute;
right: calc(#{$icon-size-with-padding} - #{$rounding-error});
top: 0;
height: 100%;
width: $polygon-size;
}
}
&::before {
top: -$border-width;
height: calc(100% + #{$border-width * 2});
}
h1 {
$heading-icon-size: $icon-size * 0.85;
@include has-fa-icon(building, regular);
@include has-fa-icon(chart-pie, solid, after);
font-size: rem-calc(36);
@include breakpoint(small) {
&::after,
&::before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
@include breakpoint(medium) {
padding-right: $heading-icon-size * 2.5;
&::after {
display: block;
font-size: $heading-icon-size;
right: $heading-icon-size;
}
}
@include breakpoint(large) {
font-size: rem-calc(44);
&::after {
right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
}
&::before {
color: $brand-secondary;
display: block;
font-size: $icon-size;
right: $padding-right;
}
}
span {
display: block;
font-size: 0.75em;
margin-top: $line-height / 2;
}
}
@include has-fa-icon(chart-pie, solid, after);
}
}

7
app/assets/stylesheets/debates/form.scss
View File

@@ -1,8 +1,3 @@
.debate-form {
.globalize-languages,
.translatable-fields {
@include grid-row-nest;
@include grid-column-gutter;
}
@extend %public-form;
}

15
app/assets/stylesheets/debates/new.scss Normal file
View File

@@ -0,0 +1,15 @@
.debate-new {
@extend %public-form-header;
h1 {
@include has-fa-icon(comment-alt, regular, after);
}
aside {
margin-top: $line-height;
}
.recommendations li::before {
color: $debates;
}
}

1
app/assets/stylesheets/layout.scss
View File

@@ -68,6 +68,7 @@ main {
display: block;
&.budget-investment-new,
&.debate-new,
&.sdg-goals-index,
&.sdg-goal-show {
@include grid-column-gutter;

178
app/assets/stylesheets/mixins/forms.scss Normal file
View File

@@ -0,0 +1,178 @@
@import "mixins/icons";
@import "mixins/layouts";
@mixin public-form-header {
$border-width: 4px;
h1 {
margin-bottom: 0;
}
header {
$icon-size: $line-height * 4;
$padding-right: rem-calc(20);
$icon-size-with-padding: $icon-size + $padding-right;
$polygon-size: $icon-size / 2;
@include background-till-left-of-screen;
@include brand-background($brand-secondary);
border: $border-width solid $brand-secondary;
border-bottom-right-radius: rem-calc(12);
border-top-right-radius: rem-calc(12);
margin-top: $line-height * 2;
padding: $line-height * 2 0;
position: relative;
@include breakpoint(small) {
&::after {
display: none;
}
}
@include breakpoint(large) {
$rounding-error: 6px;
padding-right: $icon-size-with-padding;
background-image: linear-gradient(
to right,
#{$brand-secondary} 0,
#{$brand-secondary} calc(100% - #{$icon-size-with-padding} - 1px),
#{$body-background} calc(100% - #{$icon-size-with-padding}),
#{$body-background} 100%
);
&::after {
background: $body-background;
content: "";
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
display: block;
position: absolute;
right: calc(#{$icon-size-with-padding} - #{$rounding-error});
top: 0;
height: 100%;
width: $polygon-size;
}
}
&::before {
top: -$border-width;
height: calc(100% + #{$border-width * 2});
}
h1 {
$heading-icon-size: $icon-size * 0.85;
@include has-fa-icon(building, regular);
font-size: rem-calc(36);
@include breakpoint(small) {
&::after,
&::before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
@include breakpoint(medium) {
padding-right: $heading-icon-size * 2.5;
&::after {
display: block;
font-size: $heading-icon-size;
right: $heading-icon-size;
}
}
@include breakpoint(large) {
font-size: rem-calc(44);
&::after {
right: $icon-size-with-padding + $polygon-size + $heading-icon-size / 2;
}
&::before {
color: $brand-secondary;
display: block;
font-size: $icon-size;
right: $padding-right;
}
}
span {
display: block;
font-size: 0.75em;
margin-top: $line-height / 2;
}
}
a {
color: inherit;
text-decoration: underline;
}
}
}
%public-form-header {
@include public-form-header;
}
@mixin public-form {
.required-fields {
@include full-width-background($adjust-padding: true);
background: $light;
margin-bottom: $line-height;
padding-top: $line-height;
}
> fieldset > legend {
float: left;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: $line-height;
text-transform: uppercase;
+ * {
clear: left;
}
}
select {
min-height: $line-height * 2;
@include breakpoint(medium) {
&:not(.js-add-language):not(.js-select-language) {
width: 50%;
}
}
}
.globalize-languages,
.translatable-fields {
@include grid-row-nest;
@include grid-column-gutter;
}
[type="submit"] {
@include regular-button;
font-size: map-get($button-sizes, large);
margin-top: $line-height;
}
.actions {
border: 6px solid $border;
border-radius: rem-calc(12);
margin-left: auto;
margin-right: auto;
margin-top: $line-height * 2;
padding: $line-height * 2 $line-height;
text-align: center;
@include breakpoint(medium) {
width: 75%;
}
}
}
%public-form {
@include public-form;
}

13
app/assets/stylesheets/participation.scss
View File

@@ -244,20 +244,14 @@
// 02. New participation
// ---------------------
.debate-new,
.proposal-new {
.icon-debates,
.icon-proposals {
font-size: rem-calc(50);
line-height: $line-height;
opacity: 0.5;
}
.icon-debates {
color: $debates;
}
.icon-proposals {
color: $proposals;
}
@@ -279,13 +273,6 @@
}
}
.debate-new {
.recommendations li::before {
color: $debates;
}
}
.proposal-new {
.recommendations li::before {

72
app/components/debates/form_component.html.erb
View File

@@ -1,47 +1,55 @@
<%= translatable_form_for(debate, html: { class: "debate-form" }) do |f| %>
<%= render "shared/errors", resource: debate %>
<%= render "shared/globalize_locales", resource: debate %>
<fieldset class="required-fields">
<legend><%= t("shared.required") %></legend>
<%= f.translatable_fields do |translations_form| %>
<div>
<%= translations_form.text_field :title,
maxlength: Debate.title_max_length,
data: suggest_data(debate) %>
</div>
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<%= render "shared/globalize_locales", resource: debate %>
<div>
<%= translations_form.text_area :description,
maxlength: Debate.description_max_length,
class: "html-area" %>
</div>
<% end %>
<%= f.translatable_fields do |translations_form| %>
<div>
<%= translations_form.text_field :title,
maxlength: Debate.title_max_length,
data: suggest_data(debate) %>
</div>
<div class="js-suggest" data-locale="<%= translations_form.locale %>"></div>
<div>
<%= translations_form.text_area :description,
maxlength: Debate.description_max_length,
class: "html-area" %>
</div>
<% end %>
</fieldset>
<%= f.invisible_captcha :subtitle %>
<div>
<%= f.text_field :tag_list, value: debate.tag_list.to_s,
hint: t("debates.form.tags_instructions"),
placeholder: t("debates.form.tags_placeholder"),
data: { js_url: suggest_tags_path },
class: "tag-autocomplete" %>
</div>
<fieldset>
<legend><%= t("shared.optional") %></legend>
<%= render SDG::RelatedListSelectorComponent.new(f) %>
<div>
<%= f.text_field :tag_list, value: debate.tag_list.to_s,
hint: t("debates.form.tags_instructions"),
placeholder: t("debates.form.tags_placeholder"),
data: { js_url: suggest_tags_path },
class: "tag-autocomplete" %>
</div>
<div>
<% if debate.new_record? %>
<%= f.check_box :terms_of_service,
title: t("form.accept_terms_title"),
label: t("form.accept_terms",
policy: link_to(t("form.policy"), "/privacy", target: "blank"),
conditions: link_to(t("form.conditions"), "/conditions", target: "blank")
) %>
<% end %>
</div>
<%= render SDG::RelatedListSelectorComponent.new(f) %>
</fieldset>
<div class="actions">
<% if debate.new_record? %>
<div>
<%= f.check_box :terms_of_service,
title: t("form.accept_terms_title"),
label: t("form.accept_terms",
policy: link_to(t("form.policy"), "/privacy", target: "blank"),
conditions: link_to(t("form.conditions"), "/conditions", target: "blank")
) %>
</div>
<% end %>
<%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
</div>
<% end %>

34
app/components/debates/new_component.html.erb
View File

@@ -1,30 +1,22 @@
<div class="debate-new">
<main class="debate-new">
<%= back_link_to debates_path, t("debates.index.section_header.title") %>
<div class="small-12 medium-9 column">
<%= back_link_to debates_path %>
<%= header do %>
<%= link_to help_path(anchor: "debates"), title: t("shared.target_blank"), target: "_blank" do %>
<%= t("debates.new.more_info") %>
<% end %>
<% end %>
<h1><%= t("debates.new.start_new") %></h1>
<div data-alert class="callout primary">
<%= sanitize(t("debates.new.info",
info_link: link_to(t("debates.new.info_link"), new_proposal_path))) %>
<% if feature?(:help_page) %>
<%= link_to help_path, title: t("shared.target_blank"), target: "_blank" do %>
<strong><%= t("debates.new.more_info") %></strong>
<% end %>
<% end %>
</div>
<%= render Debates::FormComponent.new(debate) %>
</div>
<div class="small-12 medium-3 column">
<span class="icon-debates float-right"></span>
<aside>
<h2><%= t("debates.new.recommendations_title") %></h2>
<ul class="recommendations">
<li><%= t("debates.new.recommendation_one") %></li>
<li><%= t("debates.new.recommendation_two") %></li>
<li><%= t("debates.new.recommendation_three") %></li>
<li><%= t("debates.new.recommendation_four") %></li>
</ul>
</div>
</div>
</aside>
<%= render Debates::FormComponent.new(debate) %>
</main>

5
app/components/debates/new_component.rb
View File

@@ -1,7 +1,12 @@
class Debates::NewComponent < ApplicationComponent
include Header
attr_reader :debate
def initialize(debate)
@debate = debate
end
def title
t("debates.new.start_new")
end
end

4
config/locales/en/general.yml
View File

@@ -127,9 +127,7 @@ en:
new:
form:
submit_button: Start a debate
info: If you want to make a proposal, this is the wrong section, enter %{info_link}.
info_link: create new proposal
more_info: More information
more_info: How do debates work?
recommendation_four: Enjoy this space and the voices that fill it. It belongs to you too.
recommendation_one: Do not use capital letters for the debate title or for whole sentences. On the internet, this is considered shouting. And nobody likes being shouted at.
recommendation_three: Ruthless criticism is very welcome. This is a space for reflection. But we recommend that you stick to elegance and intelligence. The world is a better place with these virtues in it.

4
config/locales/es/general.yml
View File

@@ -127,9 +127,7 @@ es:
new:
form:
submit_button: Empieza un debate
info: Si lo que quieres es hacer una propuesta, esta es la sección incorrecta, entra en %{info_link}.
info_link: crear nueva propuesta
more_info: Más información
more_info: "¿Cómo funcionan los debates?"
recommendation_four: Disfruta de este espacio, de las voces que lo llenan, también es tuyo.
recommendation_one: No escribas el título del debate o frases enteras en mayúsculas. En internet eso se considera gritar. Y a nadie le gusta que le griten.
recommendation_three: Las críticas despiadadas son muy bienvenidas. Este es un espacio de pensamiento. Pero te recomendamos conservar la elegancia y la inteligencia. El mundo es mejor con ellas presentes.

5
spec/system/ckeditor_spec.rb
View File

@@ -9,7 +9,10 @@ describe "CKEditor" do
expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame"
click_link "Debates"
within ".subnavigation" do
click_link "Debates"
end
click_link "Start a debate"
expect(page).to have_css ".translatable-fields[data-locale='en'] .cke_wysiwyg_frame"