jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: clean up file upload widget css.

Browse Source 
* Standardize the upload widget background colors (light green for success,
  light red for error).
* Move the progress bar to the bottom of the upload widget.
* Change the progress bar color to blue.
* Hide the "drag and drop a file here" message after a file has
  already been uploaded.
This commit is contained in:
evazion
2019-09-17 00:28:41 -05:00
parent e3406d1bc7
commit 852c1cbb7c
3 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/javascript/src/styles/base/040_colors.css
View File

@@ -41,14 +41,9 @@
--modqueue-postive-score-background-color: var(--success-background-color); --modqueue-postive-score-background-color: var(--success-background-color);
--modqueue-negative-score-background-color: var(--error-background-color); --modqueue-negative-score-background-color: var(--error-background-color);
--uploads-dropzone-border: 4xp dashed #DDD; --uploads-dropzone-background: #EEE;
--uploads-dropzone-placeholder-color: #333; --uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-error-border-color: hsl(0, 43%, 61%); --uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--uploads-dropzone-error-background-color: hsl(0, 43%, 91%);
--uploads-dropzone-success-border-color: hsl(103, 44%, 59%);
--uploads-dropzone-success-background-color: hsl(103, 44%, 89%);
--uploads-dropzone-progress-border: 1px solid #CCC;
--uploads-dropzone-progress-background-color: 1px solid #CCC;
--forum-new-topic-color: red; --forum-new-topic-color: red;
--forum-locked-topic-color: gray; --forum-locked-topic-color: gray;

34
app/javascript/src/styles/specific/dropzone.scss
View File

@@ -1,41 +1,39 @@
#filedropzone { #filedropzone {
border: var(--uploads-dropzone-border); background: var(--uploads-dropzone-background);
padding: 0; padding: 0;
min-height: 100px; min-height: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 4px; border-radius: 4px;
cursor: pointer;
position: relative;
.placeholder { &.dz-started .placeholder {
font-style: italic; display: none;
color: var(--uploads-dropzone-place-holder-color);
height: 100%;
} }
&.error { &.error {
border-color: var(--uploads-dropzone-error-border-color); background: var(--error-background-color);
background-color: var(--uploads-dropzone-error-background-color);
} }
&.success { &.success {
border-color: var(--uploads-dropzone-success-border-color); background: var(--success-background-color);
background-color: var(--uploads-dropzone-success-background-color);
} }
} }
.dz-preview {
margin-bottom: 1em;
}
.dz-progress { .dz-progress {
height: 20px; position: absolute;
width: 300px; width: 100%;
background-color: var(--uploads-dropzone-progress-border); bottom: 0;
left: 0;
height: 5px;
background-color: var(--uploads-dropzone-progress-bar-background-color);
.dz-upload { .dz-upload {
background-color: var(--uploads-dropzone-progress-background-color); background-color: var(--uploads-dropzone-progress-bar-foreground-color);
display: block; display: block;
height: 20px; height: 5px;
} }
} }

2
app/views/uploads/new.html.erb
View File

@@ -36,7 +36,7 @@
</div> </div>
<div class="input" id="filedropzone"> <div class="input" id="filedropzone">
<div class="placeholder"><span>Drag and drop a file here</span></div> <div class="placeholder">Click or drag and drop to upload a file</div>
</div> </div>
<div class="input"> <div class="input">