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-negative-score-background-color: var(--error-background-color);
--uploads-dropzone-border: 4xp dashed #DDD;
--uploads-dropzone-placeholder-color: #333;
--uploads-dropzone-error-border-color: hsl(0, 43%, 61%);
--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;
--uploads-dropzone-background: #EEE;
--uploads-dropzone-progress-bar-foreground-color: var(--link-color);
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--forum-new-topic-color: red;
--forum-locked-topic-color: gray;

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

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

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

@@ -36,7 +36,7 @@
</div>
<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 class="input">