diff --git a/app/assets/stylesheets/budgets/investments/new.scss b/app/assets/stylesheets/budgets/investments/new.scss new file mode 100644 index 000000000..474c07d37 --- /dev/null +++ b/app/assets/stylesheets/budgets/investments/new.scss @@ -0,0 +1,74 @@ +.budget-investment-new { + $border-width: 4px; + + > * { + @include grid-row; + @include grid-column-gutter; + } + + header { + @include has-fa-icon(building, regular, after); + align-items: center; + border: $border-width solid; + color: $brand-secondary; + border-bottom-right-radius: rem-calc(12); + border-top-right-radius: rem-calc(12); + display: flex; + margin-bottom: $line-height * 2; + margin-top: $line-height * 2; + + @include breakpoint(large) { + padding-right: $line-height; + } + + &::after { + display: none; + + @include breakpoint(large) { + display: block; + font-size: rem-calc(100); + margin-left: $line-height; + } + } + + h1 { + @include brand-background($brand-secondary); + @include background-till-left-of-screen; + @include has-fa-icon(chart-pie, solid, after); + align-items: center; + display: flex; + flex: 1; + font-size: rem-calc(36); + margin-bottom: 0; + padding: $line-height * 2 0; + position: relative; + + @include breakpoint(large) { + clip-path: polygon( + -100vw -#{$border-width}, + 100% -#{$border-width}, + calc(100% - #{rem-calc(20)}) 50%, + 100% calc(100% + #{$border-width}), + -100vw calc(100% + #{$border-width}) + ); + font-size: rem-calc(44); + } + + &::before { + top: -$border-width; + height: calc(100% + 2 * #{$border-width}); + } + + &::after { + display: none; + + @include breakpoint(medium) { + display: block; + font-size: 2em; + margin-left: auto; + margin-right: rem-calc(60); + } + } + } + } +} diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss index ead4fdaf8..fd8d96cab 100644 --- a/app/assets/stylesheets/mixins/colors.scss +++ b/app/assets/stylesheets/mixins/colors.scss @@ -1,5 +1,5 @@ -@mixin brand-background($invert-selection: true) { - background-color: $brand; +@mixin brand-background($color: $brand, $invert-selection: true) { + background-color: $color; color: $white; @if $invert-selection { diff --git a/app/assets/stylesheets/mixins/layouts.scss b/app/assets/stylesheets/mixins/layouts.scss index 38f53974e..40fd65503 100644 --- a/app/assets/stylesheets/mixins/layouts.scss +++ b/app/assets/stylesheets/mixins/layouts.scss @@ -27,3 +27,15 @@ max-width: none; } } + +@mixin background-till-left-of-screen { + &::before { + background: inherit; + content: ""; + height: 100%; + position: absolute; + top: 0; + right: 100%; + width: 100vw; + } +} diff --git a/app/views/budgets/investments/new.html.erb b/app/views/budgets/investments/new.html.erb index 85bea3c36..7eb136bfa 100644 --- a/app/views/budgets/investments/new.html.erb +++ b/app/views/budgets/investments/new.html.erb @@ -1,7 +1,11 @@ -
-
-

<%= t("management.budget_investments.create") %>

+
+
+ <%= back_link_to budgets_path %> - <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %> +
+

<%= t("budgets.investments.form.title") %>

+
-
+ + <%= render "/budgets/investments/form", form_url: budget_investments_path(@budget) %> + diff --git a/config/locales/en/budgets.yml b/config/locales/en/budgets.yml index 67bb1ab26..b18b8abe2 100644 --- a/config/locales/en/budgets.yml +++ b/config/locales/en/budgets.yml @@ -78,6 +78,7 @@ en: milestones: Milestones investments: form: + title: "Create a budget investment" tag_category_label: "Categories" tags_instructions: "Tag this proposal. You can choose from proposed categories or add your own" tags_label: Tags diff --git a/config/locales/es/budgets.yml b/config/locales/es/budgets.yml index 03bacc0e5..83fbcfe86 100644 --- a/config/locales/es/budgets.yml +++ b/config/locales/es/budgets.yml @@ -78,6 +78,7 @@ es: milestones: Seguimiento de proyectos investments: form: + title: "Crear nuevo proyecto" tag_category_label: "Categorías" tags_instructions: "Etiqueta este proyecto. Puedes elegir entre las categorías propuestas o introducir las que desees" tags_label: Etiquetas