Solve conflicts. Refactor documentable and imageable styles.
This commit is contained in:
Alessandro Cuoghi
committed by
Senén Rodero Rodríguez
Senén Rodero Rodríguez
parent
95016a1bf3
commit
3745e76c07
@@ -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)
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -18,5 +18,3 @@
|
||||
@import 'datepicker_overrides';
|
||||
@import 'jquery-ui/autocomplete';
|
||||
@import 'autocomplete_overrides';
|
||||
@import 'documentable';
|
||||
@import 'imageable';
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -27,15 +27,15 @@
|
||||
</div>
|
||||
|
||||
<div class="small-12 column attachment-actions">
|
||||
<div class="small-6 column action-add attachment-errors">
|
||||
<div class="small-9 column action-add attachment-errors document-attachment">
|
||||
<%= render_attachment(document, index) %>
|
||||
</div>
|
||||
<div class="small-6 column action-remove text-right">
|
||||
<div class="small-3 column action-remove text-right">
|
||||
<%= render_destroy_document_link(document, index) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 column">
|
||||
<div class="small-6 column">
|
||||
<p class="file-name">
|
||||
<%= document_attachment_file_name(document) %>
|
||||
</p>
|
||||
@@ -44,6 +44,5 @@
|
||||
<div class="small-12 column">
|
||||
<div class="progress-bar-placeholder"><div class="loading-bar"></div></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
<%= render_image(@image, :thumb, false) if @image.attachment.exists? %>
|
||||
|
||||
<div class="small-12 column attachment-actions">
|
||||
<div class="attachment-actions">
|
||||
<div class="small-6 column action-add attachment-errors">
|
||||
<%= f.label :attachment, t("images.form.attachment_label"), class: 'button hollow' %>
|
||||
<%= f.file_field :attachment,
|
||||
@@ -47,8 +47,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 column">
|
||||
<p class="file-name">
|
||||
<div class="small-12 column image-attachment">
|
||||
<p class="file-name column">
|
||||
<%= image_attachment_file_name(@image) %>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -29,15 +29,15 @@
|
||||
<%= render_image(image, :thumb, false) if image.attachment.exists? %>
|
||||
|
||||
<div class="small-12 column attachment-actions">
|
||||
<div class="small-6 column action-add attachment-errors">
|
||||
<div class="small-9 column action-add attachment-errors image-attachment">
|
||||
<%= render_image_attachment(image) %>
|
||||
</div>
|
||||
<div class="small-6 column action-remove text-right">
|
||||
<div class="small-3 column action-remove text-right">
|
||||
<%= render_destroy_image_link(image) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="small-12 column">
|
||||
<div class="small-6 column">
|
||||
<p class="file-name">
|
||||
<%= image_attachment_file_name(image) %>
|
||||
</p>
|
||||
|
||||
@@ -1,27 +1,30 @@
|
||||
<div class="image-form <%= imageable_class(@image.imageable) %> row">
|
||||
<div class="<%= imageable_class(@image.imageable) %>">
|
||||
|
||||
<div class="small-12 medium-9 column">
|
||||
<%= back_link_to params[:from] %>
|
||||
<h1><%= t("images.new.title") %></h1>
|
||||
<p><%= image_note(@image) %></p>
|
||||
<%= render "form", form_url: images_url %>
|
||||
</div>
|
||||
<div class="image-form row">
|
||||
|
||||
<div class="small-12 medium-3 column">
|
||||
<span class="icon-images float-right"></span>
|
||||
<h2><%= t("images.recommendations_title") %></h2>
|
||||
<ul class="recommendations">
|
||||
<li>
|
||||
<%= image_first_recommendation(@image) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t "images.recommendation_two_html",
|
||||
accepted_content_types: imageable_humanized_accepted_content_types %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t "images.recommendation_three_html",
|
||||
max_file_size: imageable_max_file_size %>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="small-12 medium-9 column">
|
||||
<%= back_link_to params[:from] %>
|
||||
<h1><%= t("images.new.title") %></h1>
|
||||
<p><%= image_note(@image) %></p>
|
||||
<%= render "form", form_url: images_url %>
|
||||
</div>
|
||||
|
||||
<div class="small-12 medium-3 column">
|
||||
<span class="icon-image icon-proposals float-right"></span>
|
||||
<h2><%= t("images.recommendations_title") %></h2>
|
||||
<ul class="recommendations">
|
||||
<li>
|
||||
<%= image_first_recommendation(@image) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t "images.recommendation_two_html",
|
||||
accepted_content_types: imageable_humanized_accepted_content_types %>
|
||||
</li>
|
||||
<li>
|
||||
<%= t "images.recommendation_three_html",
|
||||
max_file_size: imageable_max_file_size %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user