From fdc9f4ae3c57283cf7f699c0b4a47f840a50f719 Mon Sep 17 00:00:00 2001 From: merelendor Date: Mon, 24 Apr 2023 09:08:26 +0300 Subject: [PATCH] update for files list icon extension --- components/questionnaire/forms/FilesList.js | 3 +- css/var.css | 65 +++++++++++++-- css/var.less | 87 +++++++++++++++++---- 3 files changed, 130 insertions(+), 25 deletions(-) diff --git a/components/questionnaire/forms/FilesList.js b/components/questionnaire/forms/FilesList.js index 6a37487..2e81c61 100644 --- a/components/questionnaire/forms/FilesList.js +++ b/components/questionnaire/forms/FilesList.js @@ -99,8 +99,9 @@ export default class FilesList extends React.Component _renderFileType = (file) => { - return file.name.split(".").pop(); + return file.name?.split(".")?.pop()?.toString()?.substr(0, 3); } + render() { const { files, checking, title, maxFiles = 5, } = this.props; diff --git a/css/var.css b/css/var.css index 5785251..6daf39e 100644 --- a/css/var.css +++ b/css/var.css @@ -426,9 +426,6 @@ div { .extension[data-format] { background: url("/assets/images/icons/icon-file.svg") no-repeat left center; position: relative; - min-height: 50px!important; - background-size: 50px!important; - padding-left: 58px!important; } .extension[data-format]:before { content: attr(data-format); @@ -440,20 +437,18 @@ div { bottom: 1px; top: 0; font-size: 10px; - width: 48px!important; + width: 35px; display: flex; align-content: center; justify-content: center; align-items: center; text-transform: uppercase; word-break: break-all; - text-align: center; } @media all and (max-width: 1600px) and (min-width: 1280px) { .extension[data-format] { padding-left: 56px; background-size: 42px; - height: 50px!important; } .extension[data-format]:before { width: 27px; @@ -466,12 +461,11 @@ div { padding-left: 42px; background-size: 32px; background-position: 0 5px; - min-height: 58px!important; } .extension[data-format]:before { font-size: 7px; width: 24px; - height: 60px !important; + height: 42px; line-height: 11px; text-align: center; left: 4px; @@ -576,3 +570,58 @@ div { -webkit-user-select: none; -ms-user-select: none; } +.uploaded_extension[data-format] { + background: url("/assets/images/icons/icon-file.svg") no-repeat left center; + position: relative; + min-height: 50px!important; + background-size: 50px!important; + padding-left: 58px!important; +} +.uploaded_extension[data-format]:before { + content: attr(data-format); + color: #fff; + font-weight: 700; + position: absolute; + left: 10px; + right: 1px; + bottom: 1px; + top: 0; + font-size: 10px; + width: 48px!important; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + text-transform: uppercase; + word-break: break-all; + text-align: center; +} +@media all and (max-width: 1600px) and (min-width: 1280px) { + .uploaded_extension[data-format] { + padding-left: 56px; + background-size: 42px; + height: 50px!important; + } + .uploaded_extension[data-format]:before { + width: 27px; + font-size: 8px; + left: 8px; + } +} +@media all and (max-width: 960px) { + .uploaded_extension[data-format] { + padding-left: 42px; + background-size: 32px; + background-position: 0 5px; + min-height: 58px!important; + } + .uploaded_extension[data-format]:before { + font-size: 7px; + width: 24px; + height: 60px !important; + line-height: 11px; + text-align: center; + left: 4px; + right: 5px; + } +} diff --git a/css/var.less b/css/var.less index fb10f11..da7925b 100644 --- a/css/var.less +++ b/css/var.less @@ -453,9 +453,6 @@ div { { background: url("/assets/images/icons/icon-file.svg") no-repeat left center; position: relative; - min-height: 50px!important; - background-size: 50px!important; - padding-left: 58px!important; &:before { content: attr(data-format); @@ -467,20 +464,18 @@ div { bottom: 1px; top: 0; font-size: 10px; - width: 48px!important; + width: 35px; display: flex; align-content: center; justify-content: center; align-items: center; text-transform: uppercase; - word-break: break-all; - text-align: center; + word-break: break-all; } @media all and (max-width: 1600px) and (min-width: 1280px) { padding-left: 56px; background-size: 42px; - height: 50px!important; &:before { width: 27px; @@ -488,21 +483,20 @@ div { left: 8px; } } - + @media all and (max-width: 960px) { padding-left: 42px; background-size: 32px; background-position: 0 5px; - min-height: 58px!important; &:before { - font-size: 7px; - width: 24px; - height: 60px !important; - line-height: 11px; - text-align: center; - left: 4px; - right: 5px; + font-size: 7px; + width: 24px; + height: 42px; + line-height: 11px; + text-align: center; + left: 4px; + right: 5px; } } } @@ -612,4 +606,65 @@ div { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; +} + +.uploaded_extension +{ + &[data-format] + { + background: url("/assets/images/icons/icon-file.svg") no-repeat left center; + position: relative; + min-height: 50px!important; + background-size: 50px!important; + padding-left: 58px!important; + + &:before { + content: attr(data-format); + color: #fff; + font-weight: 700; + position: absolute; + left: 10px; + right: 1px; + bottom: 1px; + top: 0; + font-size: 10px; + width: 48px!important; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + text-transform: uppercase; + word-break: break-all; + text-align: center; + } + + @media all and (max-width: 1600px) and (min-width: 1280px) { + padding-left: 56px; + background-size: 42px; + height: 50px!important; + + &:before { + width: 27px; + font-size: 8px; + left: 8px; + } + } + + @media all and (max-width: 960px) { + padding-left: 42px; + background-size: 32px; + background-position: 0 5px; + min-height: 58px!important; + + &:before { + font-size: 7px; + width: 24px; + height: 60px !important; + line-height: 11px; + text-align: center; + left: 4px; + right: 5px; + } + } + } } \ No newline at end of file