From 3745e76c07df49f929a8f568d8d13584fc2525fc Mon Sep 17 00:00:00 2001 From: Alessandro Cuoghi Date: Thu, 21 Sep 2017 15:36:40 +0200 Subject: [PATCH] Solve conflicts. Refactor documentable and imageable styles. --- app/assets/javascripts/documentable.js.coffee | 3 + app/assets/javascripts/imageable.js.coffee | 3 + app/assets/stylesheets/_consul_settings.scss | 3 - app/assets/stylesheets/application.scss | 2 - app/assets/stylesheets/documentable.scss | 61 --------- app/assets/stylesheets/imageable.scss | 63 ---------- app/assets/stylesheets/layout.scss | 117 ------------------ app/assets/stylesheets/mixins.scss | 88 +++++++++++-- app/assets/stylesheets/participation.scss | 33 ++--- app/views/documents/_nested_fields.html.erb | 7 +- app/views/images/_form.html.erb | 6 +- app/views/images/_nested_fields.html.erb | 6 +- app/views/images/new.html.erb | 49 ++++---- 13 files changed, 133 insertions(+), 308 deletions(-) delete mode 100644 app/assets/stylesheets/documentable.scss delete mode 100644 app/assets/stylesheets/imageable.scss diff --git a/app/assets/javascripts/documentable.js.coffee b/app/assets/javascripts/documentable.js.coffee index d4c838153..7a02a9ae9 100644 --- a/app/assets/javascripts/documentable.js.coffee +++ b/app/assets/javascripts/documentable.js.coffee @@ -37,6 +37,7 @@ App.Documentable = App.Documentable.clearInputErrors(data) App.Documentable.setInputErrors(data) $(data.destroyAttachmentLinkContainer).find("a.delete:not(.remove-nested)").remove() + $(data.addAttachmentLabel).addClass('error') $(data.addAttachmentLabel).show() done: (e, data) -> @@ -46,6 +47,8 @@ App.Documentable = App.Documentable.setFilename(data, data.result.filename) App.Documentable.clearInputErrors(data) $(data.addAttachmentLabel).hide() + $(data.wrapper).find(".attachment-actions").removeClass('small-12').addClass('small-6 float-right') + $(data.wrapper).find(".attachment-actions .action-remove").removeClass('small-3').addClass('small-12') destroyAttachmentLink = $(data.result.destroy_link) $(data.destroyAttachmentLinkContainer).html(destroyAttachmentLink) diff --git a/app/assets/javascripts/imageable.js.coffee b/app/assets/javascripts/imageable.js.coffee index 793ac3c66..5a5bff77d 100644 --- a/app/assets/javascripts/imageable.js.coffee +++ b/app/assets/javascripts/imageable.js.coffee @@ -40,6 +40,7 @@ App.Imageable = App.Imageable.setInputErrors(data) App.Imageable.clearPreview(data) $(data.destroyAttachmentLinkContainer).find("a.delete:not(.remove-nested)").remove() + $(data.addAttachmentLabel).addClass('error') $(data.addAttachmentLabel).show() done: (e, data) -> @@ -49,6 +50,8 @@ App.Imageable = App.Imageable.setFilename(data, data.result.filename) App.Imageable.clearInputErrors(data) $(data.addAttachmentLabel).hide() + $(data.wrapper).find(".attachment-actions").removeClass('small-12').addClass('small-6 float-right') + $(data.wrapper).find(".attachment-actions .action-remove").removeClass('small-3').addClass('small-12') App.Imageable.setPreview(data) destroyAttachmentLink = $(data.result.destroy_link) diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss index 9522befd0..0844f861f 100644 --- a/app/assets/stylesheets/_consul_settings.scss +++ b/app/assets/stylesheets/_consul_settings.scss @@ -42,9 +42,6 @@ $proposals-dark: #794500; $budget: #7e328a; $budget-hover: #7571bf; -$budget-investment-image: #ffa42d; -$budget-investment-image-hover: #794500; - $highlight: #e7f2fc; $highlight-soft: #f3f8fd; $light: #f5f7fa; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 956846757..361dcfde3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -18,5 +18,3 @@ @import 'datepicker_overrides'; @import 'jquery-ui/autocomplete'; @import 'autocomplete_overrides'; -@import 'documentable'; -@import 'imageable'; diff --git a/app/assets/stylesheets/documentable.scss b/app/assets/stylesheets/documentable.scss deleted file mode 100644 index b7a5f7e4b..000000000 --- a/app/assets/stylesheets/documentable.scss +++ /dev/null @@ -1,61 +0,0 @@ -.progress-bar-placeholder { - display: none; -} - -.document-form { - - .document .file-name { - margin-top: 0; - } - - .progress-bar-placeholder { - margin-bottom: 15px; - } - - .document .loading-bar.errors { - margin-top: $line-height * 2; - } -} - -.document { - - .button { - font-weight: normal; - } - - .progress-bar { - width: 100%; - background-color: $light-gray; - } - - .js-document-attachment{ - display: none; - } - - .file-name { - margin-top: $line-height / 2; - } - - .loading-bar { - height: 5px; - width: 0; - transition: width 500ms ease-out; - - &.uploading { - background-color: $dark-gray; - } - - &.complete { - background-color: $success-color; - } - - &.errors { - background-color: $alert-color; - margin-top: $line-height / 2; - } - } - - .loading-bar.no-transition { - transition: none; - } -} diff --git a/app/assets/stylesheets/imageable.scss b/app/assets/stylesheets/imageable.scss deleted file mode 100644 index 0c49341db..000000000 --- a/app/assets/stylesheets/imageable.scss +++ /dev/null @@ -1,63 +0,0 @@ -.progress-bar-placeholder { - display: none; -} - -.image-form { - .image .file-name { - margin-top: 0; - } - .progress-bar-placeholder { - margin-bottom: 15px; - } - .image .loading-bar.errors { - margin-top: $line-height * 2; - } -} - -.cached-image{ - max-width: 150px; - max-height: 150px; -} -.image { - - .button { - font-weight: normal; - } - - .progress-bar { - width: 100%; - background-color: $light-gray; - } - - .js-image-attachment{ - display: none; - } - - .file-name { - margin-top: 0px; - } - - .loading-bar { - height: 5px; - width: 0; - transition: width 500ms ease-out; - - &.uploading { - background-color: $dark-gray; - } - - &.complete { - background-color: $success-color; - width: 100%; - } - - &.errors { - background-color: $alert-color; - margin-top: $line-height / 2; - } - } - - .loading-bar.no-transition { - transition: none; - } -} diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index ca36cd511..e68cf3de5 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2162,67 +2162,6 @@ table { } // 19. Documents -.document-form form { - - .radio-buttons { - label { - margin-right: $line-height; - } - } - - .source-option-link { - input { - padding-bottom: 0; - } - - .error { - margin-bottom: $line-height; - } - - label { - &.error { - margin-bottom: 0; - } - } - } - - .source-option-file { - .file-name { - label { - - @include breakpoint(small medium) { - float: none; - } - - @include breakpoint(large) { - float: left; - } - } - - p { - - @include breakpoint(small medium) { - float: none; - margin-top: 0; - margin-left: 0; - margin-bottom: 0; - } - - @include breakpoint(large) { - float: left; - margin-bottom: 0; - margin-top: $line-height / 2; - margin-left: $line-height; - } - } - } - } - - .attachment-errors { - margin-bottom: $line-height; - } -} - .documents-list { table { @@ -2282,59 +2221,3 @@ table { } } - -// 19. Images -.image-form form { - - .source-option-link { - input { - padding-bottom: 0; - } - - .error { - margin-bottom: $line-height; - } - - label { - &.error { - margin-bottom: 0; - } - } - } - - .source-option-file { - .file-name { - label { - - @include breakpoint(small medium) { - float: none; - } - - @include breakpoint(large) { - float: left; - } - } - - p { - - @include breakpoint(small medium) { - float: none; - margin-top: 0; - margin-left: 0; - margin-bottom: 0; - } - - @include breakpoint(large) { - float: left; - margin-bottom: 0; - margin-top: $line-height / 2; - margin-left: $line-height; - } - } - } - } - - .attachment-errors { - margin-bottom: $line-height; - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index c256d7315..d46133cd2 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -31,16 +31,88 @@ } } -@mixin image-upload { - .image-upload { - .button, - p { - float: left; + +@mixin upload-image-documents { + + .cached-image { + max-width: 150px; + max-height: 150px; + } + + .progress-bar-placeholder { + display: none; + margin-bottom: $line-height; + } + + .document-form, + .image-form { + + .document, + .image-form { + .file-name { + margin-top: 0; + } } - p { - margin-left: 1rem; - margin-top: 0.8rem; + .document, + .image { + .loading-bar.errors { + margin-top: $line-height * 2; + } } } + + .document, + .image { + + .document-attachment, + .image-attachment { + padding-left:0; + + p{ + margin-bottom: 0; + } + } + .js-document-attachment{ + display: none; + } + } + + .button { + font-weight: normal; + } + + .progress-bar { + width: 100%; + background-color: $light-gray; + } + + .file-name { + margin-top: 0; + } + + .loading-bar { + height: 5px; + width: 0; + transition: width 500ms ease-out; + + &.uploading { + background-color: $dark-gray; + } + + &.complete { + background-color: $success-color; + width: 100%; + } + + &.errors { + background-color: $alert-color; + width: 100%; + margin-top: $line-height / 2; + } + } + + .loading-bar.no-transition { + transition: none; + } } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index a7cb5ca69..ca48068fe 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -252,7 +252,8 @@ .document-form, .topic-new, .topic-form, -.image-form { +.image-form, +.proposal .image-form { .icon-debates, .icon-proposals, @@ -269,17 +270,14 @@ } .icon-proposals, - .icon-documents { + .icon-documents, + .icon-image { color: $proposals; } .icon-budget { color: $budget; } - - .icon-image { - color: $budget-investment-image; - } } .recommendations { @@ -308,20 +306,20 @@ .proposal-form, .topic-form, .topic-new, -.document-form { +.document-form, +.image-form { .recommendations li::before { color: $proposals; } } -.image-form { - - .recommendations li::before { - color: $budget-investment-image; - } +.budget-investment-new, +.proposal-form { + @include upload-image-documents; } + // 03. Show participation // ---------------------- @@ -946,30 +944,23 @@ .budget-investment-show { figure { - margin: 1em 0 0; + margin: rem-calc(10) 0 0; display: inline-block; figcaption { font-size: $small-font-size; - margin-top: 1rem; + margin-top: rem-calc(10); } } } .image-form { - @include image-upload; - .note-marked p { margin-bottom: 0; } } -.budget-investment-new { - - @include image-upload; -} - .investment-project-show .supports, .budget-investment-show .supports { border: 0; diff --git a/app/views/documents/_nested_fields.html.erb b/app/views/documents/_nested_fields.html.erb index 575182a8c..cda24ba17 100644 --- a/app/views/documents/_nested_fields.html.erb +++ b/app/views/documents/_nested_fields.html.erb @@ -27,15 +27,15 @@
-
+
<%= render_attachment(document, index) %>
-
+
<%= render_destroy_document_link(document, index) %>
-
+

<%= document_attachment_file_name(document) %>

@@ -44,6 +44,5 @@
-
diff --git a/app/views/images/_form.html.erb b/app/views/images/_form.html.erb index 0af13b655..0266b399d 100644 --- a/app/views/images/_form.html.erb +++ b/app/views/images/_form.html.erb @@ -18,7 +18,7 @@ <%= render_image(@image, :thumb, false) if @image.attachment.exists? %> -
+
<%= f.label :attachment, t("images.form.attachment_label"), class: 'button hollow' %> <%= f.file_field :attachment, @@ -47,8 +47,8 @@
-
-

+

+

<%= image_attachment_file_name(@image) %>

diff --git a/app/views/images/_nested_fields.html.erb b/app/views/images/_nested_fields.html.erb index ff5df41e4..6babfe9d7 100644 --- a/app/views/images/_nested_fields.html.erb +++ b/app/views/images/_nested_fields.html.erb @@ -29,15 +29,15 @@ <%= render_image(image, :thumb, false) if image.attachment.exists? %>
-
+
<%= render_image_attachment(image) %>
-
+
<%= render_destroy_image_link(image) %>
-
+

<%= image_attachment_file_name(image) %>

diff --git a/app/views/images/new.html.erb b/app/views/images/new.html.erb index a42df25ac..8aef6a6ad 100644 --- a/app/views/images/new.html.erb +++ b/app/views/images/new.html.erb @@ -1,27 +1,30 @@ -
+
-
- <%= back_link_to params[:from] %> -

<%= t("images.new.title") %>

-

<%= image_note(@image) %>

- <%= render "form", form_url: images_url %> -
+
-
- -

<%= t("images.recommendations_title") %>

-
    -
  • - <%= image_first_recommendation(@image) %> -
    • -
  • - <%= t "images.recommendation_two_html", - accepted_content_types: imageable_humanized_accepted_content_types %> -
    • -
  • - <%= t "images.recommendation_three_html", - max_file_size: imageable_max_file_size %> -
    • -
+
+ <%= back_link_to params[:from] %> +

<%= t("images.new.title") %>

+

<%= image_note(@image) %>

+ <%= render "form", form_url: images_url %> +
+ +
+ +

<%= t("images.recommendations_title") %>

+
    +
  • + <%= image_first_recommendation(@image) %> +
    • +
  • + <%= t "images.recommendation_two_html", + accepted_content_types: imageable_humanized_accepted_content_types %> +
    • +
  • + <%= t "images.recommendation_three_html", + max_file_size: imageable_max_file_size %> +
    • +
+