entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

css: update file-upload-widget to support image preview (#84688)

This commit is contained in:
Thomas Jund 2023-12-13 16:41:39 +01:00 committed by Thomas Jund
parent 61a357d653
commit 5e0c2084dd
1 changed files with 66 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
static/includes/wcs/_bulk.scss
View File

@ -539,22 +539,19 @@ div.file-upload-widget {
font-size: 0;
cursor: pointer;
}
div.upload-done {
display: none;
}
div.click-to-upload {
display: block;
}
div.widget-message {
padding-top: 20px;
&::before {
pointer-events: none;
content: "\f016"; // file-o
font-family: FontAwesome;
content: "\f016"; // file-o
box-sizing: content-box;
font-size: 40px;
height: 1em;
display: block;
padding-top: 20px;
padding-bottom: 10px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1;
}
&::after {
pointer-events: none;
@ -564,7 +561,8 @@ div.file-upload-widget {
display: block;
position: absolute;
left: calc(50% + 10px);
top: 30px;
top: 20px;
line-height: 1;
@if ($button-background == $widget-background) {
color: $button-color;
} @else {
@ -578,13 +576,35 @@ div.file-upload-widget {
&.file-image div.widget-message::before {
content: "\f1c5"; // file-image-o
}
&.file-image div.upload-done {
background-color: $zebra-color;
padding-top: 10px;
&::before {
content: "";
background-image: var(--image-preview-url);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
font-size: 80px;
margin-top: 0;
margin-bottom: 0;
}
&::after {
content: none;
}
}
}
&.has-file {
div.file-button {
div.upload-done {
display: block;
.widget-message.click-to-upload {
display: none;
}
div.click-to-upload {
}
}
&.has-no-file {
div.file-button {
.widget-message.upload-done {
display: none;
}
}
@ -642,28 +662,44 @@ div.file-upload-widget {
&.pk-compact-file,
&.short {
div.file-button {
min-height: 50px;
}
div.widget-message.click-to-upload {
display: flex;
}
div.widget-message.upload-done,
div.widget-message.click-to-upload {
align-items: center;
padding: 5px 10px;
text-align: left;
&::before {
padding-top: 10px;
padding-right: 20px;
min-height: 70px;
div.widget-message {
display: flex;
align-items: center;
padding: 5px 10px;
text-align: left;
&::before {
margin-right: 20px;
font-size: 40px;
}
&::after {
top: 5px;
left: 38px;
}
}
&::after {
top: 2px;
left: 38px;
div.fileinfo {
text-align: left;
padding-left: 55px;
min-height: 1.5em;
margin-top: -1.5em;
}
&.file-image {
div.widget-message.upload-done {
padding-top: 5px;
&::before {
width: 2em;
font-size: 60px;
margin-top: 0;
}
}
div.fileinfo {
padding-left: 140px;
}
}
}
&.widget-readonly div.file-button {
height: 70px;
div.widget-message.upload-done {
div.widget-message {
display: none;
}
.filename {
@ -681,17 +717,6 @@ div.file-upload-widget {
margin-top: 0;
}
}
&.has-file {
div.widget-message.upload-done {
display: flex;
}
}
div.fileinfo {
text-align: left;
padding-left: 55px;
min-height: 1.5em;
margin-top: -1.5em;
}
}
div.fileprogress {
position: absolute;