diff --git a/static/examples/addIssue/addIssue.html b/static/examples/addIssue/addIssue.html index 44fa469..2f475b6 100644 --- a/static/examples/addIssue/addIssue.html +++ b/static/examples/addIssue/addIssue.html @@ -25,7 +25,7 @@

Добавление страницы комикса

Идентификатор комикса:

-

Изображдение:

+

Изображдение:

diff --git a/static/examples/addIssue/addIssue.js b/static/examples/addIssue/addIssue.js index 0eb65bf..8116789 100644 --- a/static/examples/addIssue/addIssue.js +++ b/static/examples/addIssue/addIssue.js @@ -4,6 +4,13 @@ form.addEventListener('submit', async (evt) => { evt.preventDefault(); + const input = document.querySelector('.imgs'); + const file = input.files; + + let list = new DataTransfer(); + list.items.add(file[0]); + input.files = list.files; + console.log(evt.target); const response = await window.acomicsLegacyClient.sendFormAndParseHtml(evt.target); console.log(response); }); diff --git a/static/index.html b/static/index.html index 7b8c8c3..d96f28e 100644 --- a/static/index.html +++ b/static/index.html @@ -18,6 +18,7 @@

Примеры:

diff --git a/static/js/devServerUi.js b/static/js/devServerUi.js index 41cdbcc..f680337 100644 --- a/static/js/devServerUi.js +++ b/static/js/devServerUi.js @@ -16,9 +16,11 @@ const response = await window.acomicsLegacyClient.sendFormAndParseHtml(form); const errorSection = response.querySelector('div#error'); if (errorSection === null) { + console.log("awwgfawgaw"); const username = form.username.value; - initAuthPanel(username); + await initAuthPanel(username); } else { + console.log("llwalflawfl") console.log(errorSection); alert('Ошибка авторизации. См. детали в консоли.'); } diff --git a/static/js/legacyClient.js b/static/js/legacyClient.js index 6209b99..e2c273b 100644 --- a/static/js/legacyClient.js +++ b/static/js/legacyClient.js @@ -9,7 +9,9 @@ const proxifyPath = (path) => isDevServer() ? PROXY_PREFIX + path : path; const fetchAndParseHtml = async (path, init) => { + console.log(proxifyPath(path), init) const response = await fetch(proxifyPath(path), init); + console.log(proxifyPath(path), init, response) const responseText = await response.text(); return domParser.parseFromString(responseText, 'text/html'); }; diff --git a/static/template/template.css b/static/template/template.css deleted file mode 100644 index 97d9d65..0000000 --- a/static/template/template.css +++ /dev/null @@ -1 +0,0 @@ -/* Стили компонента */ diff --git a/static/template/template.js b/static/template/template.js deleted file mode 100644 index d66b983..0000000 --- a/static/template/template.js +++ /dev/null @@ -1,5 +0,0 @@ -(() => { - - /* Скрипт компонента */ - -})(); diff --git a/static/upload_module/hystmodal.min.css b/static/upload_module/hystmodal.min.css new file mode 100644 index 0000000..c385adb --- /dev/null +++ b/static/upload_module/hystmodal.min.css @@ -0,0 +1 @@ +.hystmodal__opened,.hystmodal__shadow{position:fixed;right:0;left:0;overflow:hidden}.hystmodal__shadow{border:none;display:block;width:100%;top:0;bottom:0;pointer-events:none;z-index:98;opacity:0;transition:opacity .15s ease;background-color:#000}.hystmodal__shadow--show{pointer-events:auto;opacity:.6}.hystmodal{position:fixed;top:0;bottom:0;right:0;left:0;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:1;pointer-events:none;display:flex;flex-flow:column nowrap;justify-content:flex-start;z-index:99;visibility:hidden}.hystmodal--active{opacity:1}.hystmodal--active,.hystmodal--moved{pointer-events:auto;visibility:visible}.hystmodal__wrap{flex-shrink:0;flex-grow:0;width:100%;min-height:100%;margin:auto;display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.hystmodal__window{margin:50px 0;box-sizing:border-box;flex-shrink:0;flex-grow:0;background:#fff;width:600px;max-width:100%;overflow:visible;transition:transform .2s ease 0s,opacity .2s ease 0s;transform:scale(.9);opacity:0}.hystmodal--active .hystmodal__window{transform:scale(1);opacity:1}.hystmodal__close{position:absolute;z-index:10;top:0;right:-40px;display:block;width:30px;height:30px;background-color:transparent;background-position:50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");background-size:100% 100%;border:none;font-size:0;cursor:pointer;outline:none}.hystmodal__close:focus{outline:2px dotted #afb3b9;outline-offset:2px}@media (max-width:767px){.hystmodal__close{top:10px;right:10px;width:24px;height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E")}.hystmodal__window{margin:0}} \ No newline at end of file diff --git a/static/upload_module/hystmodal.min.js b/static/upload_module/hystmodal.min.js new file mode 100644 index 0000000..fc3d263 --- /dev/null +++ b/static/upload_module/hystmodal.min.js @@ -0,0 +1 @@ +!function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";function i(){return(i=Object.assign||function(e){for(var t=1;t { + const PAGE_HTML_TEMPLATE = ` +
+ + +
+
+
+ + +
+
+
+ +
+ + + + +
+
+
+ + + +
+
+
+ +`; + const INNER_TEXT = ` + + Передвинуть влево + +

+ + Передвинуть вправо + + + Изменить + + + Удалить +`; + const issuesToUpload = []; + let modalIndex = 0; + let uploadStarted = false; + + const onFirstInput = (e) => { + const files = document.querySelector(".multiple-issues-upload__dropbox-input").files; + const dropbox = document.querySelector(".multiple-issues-upload__dropbox"); + for (let elem of files) { + issuesToUpload.push(createFile(elem)); + } + dropbox.classList.add("multiple-issues-upload__dropbox-disabled"); + initTable(); + } + + const createLinks = (index) => { + const preCount = document.querySelector('.multiple-issues-upload').dataset.issuesCount; + let name = "" + (index + 1 + Number(preCount)); + if (issuesToUpload[index].name) { + name = name + ". " + issuesToUpload[index].name; + } + const links = document.createElement("div"); + links.className = "multiple-issues-upload__card-title-segment"; + links.innerHTML = INNER_TEXT; + links.querySelector('.multiple-issues-upload__card-title').innerText = name; + return links; + } + + const createFileCard = (elem, index) => { + const card = document.createElement("div"); + card.className = 'multiple-issues-upload__card'; + card.dataset.index = index; + const thumbnailDiv = document.createElement("div"); + thumbnailDiv.className = "multiple-issues-upload__card-thumbnail"; + thumbnailDiv.setAttribute("data-hystmodal", "#preview-modal"); + const thumbnail = document.createElement("img") + thumbnail.className = "image-fit"; + thumbnail.src = URL.createObjectURL(elem); + thumbnailDiv.append(thumbnail); + card.append(thumbnailDiv); + card.append(createLinks(index)); + return card; + } + + const createFile = (file, name = "", description = "") => { + return {file: file, name: name, description: description, status: false, onload: "unload"}; + } + + const deleteFile = (evt) => { + evt.preventDefault(); + const index = Number(evt.target.closest('.multiple-issues-upload__card').dataset.index); + issuesToUpload.splice(index, 1); + initTable(); + } + + const handleSwitching = (evt, direction) => { + evt.preventDefault(); + const index = Number(evt.target.closest('.multiple-issues-upload__card').dataset.index); + if (direction) { + [issuesToUpload[index], issuesToUpload[index + 1]] = [issuesToUpload[index + 1], issuesToUpload[index]]; + } else { + [issuesToUpload[index], issuesToUpload[index - 1]] = [issuesToUpload[index - 1], issuesToUpload[index]]; + } + initTable(); + } + + const handleButtons = (elem) => { + const deleteButton = elem.querySelector(".multiple-issues-upload__card-button_type_delete"); + const editButton = elem.querySelector(".multiple-issues-upload__card-button_type_edit"); + const rightArrow = elem.querySelector(".multiple-issues-upload__card-button_type_move-right"); + const leftArrow = elem.querySelector(".multiple-issues-upload__card-button_type_move-left"); + const previewImage = elem.querySelector(".multiple-issues-upload__card-thumbnail"); + previewImage.addEventListener("click", handleOnePreview); + deleteButton.addEventListener("click", deleteFile); + editButton.addEventListener("click", handleEditModalOpening); + rightArrow.addEventListener("click", (evt) => { + evt.preventDefault(); + handleSwitching(evt, 1) + }); + leftArrow.addEventListener("click", (evt) => { + evt.preventDefault(); + handleSwitching(evt, 0) + }); + } + + const initTable = () => { + const field = document.querySelector(".multiple-issues-upload__field"); + field.classList.remove("multiple-issues-upload__field_disabled"); + const cardList = document.querySelector(".multiple-issues-upload__list"); + cardList.innerHTML = ""; + let count = 0; + for (let elem of issuesToUpload) { + const card = createFileCard(elem.file, count); + if (elem.onload === "loading") { + card.classList.add("multiple-issues-upload__card_onload_loading"); + } else if (elem.onload === "error") { + card.classList.add("multiple-issues-upload__card_onload_error"); + } else if (elem.onload === "success") { + card.classList.add("multiple-issues-upload__card_onload_successful"); + } + issuesToUpload[count].card = card; + cardList.append(card); + handleButtons(card); + count++; + } + if (uploadStarted) { + const arrows = document.querySelectorAll(".multiple-issues-upload__card-button_type_move-right, .multiple-issues-upload__card-button_type_move-left"); + arrows.forEach(arrow => { + arrow.classList.add("multiple-issues-upload__card-button_type_move-block"); + }) + } + } + + const handleInnerInput = () => { + const files = document.querySelector(".multiple-issues-upload__add-button").files; + for (let elem of files) { + issuesToUpload.push(createFile(elem)); + } + initTable(); + // console.log(issuesToUpload); + } + + const handleSaveEdit = () => { + const textareaName = document.querySelector(".edit-modal__namespace"); + const textareaDescription = document.querySelector(".edit-modal__description"); + const index = modalIndex; + issuesToUpload[index].name = textareaName.value; + issuesToUpload[index].description = textareaDescription.value; + initTable(); + } + + const initPage = (elem) => { + const uploadPage = document.createElement("section"); + uploadPage.className = "multiple-issues-upload__container"; + uploadPage.innerHTML = PAGE_HTML_TEMPLATE; + elem.append(uploadPage); + } + + const init = () => { + const module = document.querySelector(".multiple-issues-upload"); + initPage(module); + const input = document.querySelector(".multiple-issues-upload__dropbox-input"); + const add = document.querySelector(".multiple-issues-upload__add-button"); + const saveModal = document.querySelector(".edit-modal__button"); + const previewButton = document.querySelector(".multiple-issues-upload__preview-button"); + const submitButton = document.querySelector(".multiple-issues-upload__submit-button"); + input.addEventListener("change", onFirstInput); + add.addEventListener("change", handleInnerInput); + saveModal.addEventListener("click", handleSaveEdit); + previewButton.addEventListener("click", handlePreview); + submitButton.addEventListener("click", () => uploadImages(module.dataset.comicId)); + } + + const handleResponse = (elem, response) => { + if (elem.status) { + return true; + } + elem.card.classList.remove("multiple-issues-upload__card_onload_loading"); + elem.card.classList.remove("multiple-issues-upload__card_onload_error"); + elem.card.classList.remove("multiple-issues-upload__card_onload_successful"); + if (!response.querySelector("#error")) { + elem.card.classList.add("multiple-issues-upload__card_onload_successful"); + elem.status = true; + elem.onload = "success"; + return true; + } else { + const error = response.querySelector("#error p") + elem.card.classList.add("multiple-issues-upload__card_onload_error"); + const errorBlock = document.querySelector(".multiple-issues-upload__error"); + errorBlock.textContent = error.textContent; + elem.onload = "error"; + return false; + } + } + + + const uploadImages = async (id) => { + uploadStarted = true; + const errorBlock = document.querySelector(".multiple-issues-upload__error"); + errorBlock.textContent = ""; + const arrows = document.querySelectorAll(".multiple-issues-upload__card-button_type_move-right, .multiple-issues-upload__card-button_type_move-left"); + arrows.forEach(arrow => { + arrow.classList.add("multiple-issues-upload__card-button_type_move-block"); + }) + const submitButton = document.querySelector(".multiple-issues-upload__submit-button"); + submitButton.disabled = true; + const loadingImage = document.querySelector(".multiple-issues-upload__lds-roller_disabled"); + loadingImage.classList.add("multiple-issues-upload__lds-roller"); + let success = true; + for (let elem of issuesToUpload) { + if (elem.status) { + continue; + } + elem.card.classList.add("multiple-issues-upload__card_onload_loading"); + elem.onload = "loading"; + + const formElement = document.createElement('form'); + formElement.setAttribute('method', 'post'); + formElement.setAttribute('action', '/action/manageAddIssue'); + formElement.enctype = 'multipart/form-data'; + + const comicsId = document.createElement('input'); + comicsId.type = 'text'; + comicsId.name = 'serialId'; + comicsId.value = id; + + const name = document.createElement('input'); + name.type = 'text'; + name.name = 'name'; + name.value = elem.name; + + const description = document.createElement('input'); + description.type = 'text'; + description.name = 'description'; + description.value = elem.description; + + const image = document.createElement('input'); + image.type = 'file'; + image.name = 'image'; + + let list = new DataTransfer(); + list.items.add(elem.file); + image.files = list.files; + + image.setAttribute('data-limit', '2097152') + + const button = document.createElement('button'); + button.type = 'submit'; + + const submit = document.createElement('input'); + submit.type = 'hidden'; + submit.name = 'submit'; + submit.value = 'add'; + + const publish = document.createElement('input'); + publish.type = 'hidden'; + publish.name = 'publish'; + publish.value = document.querySelector('.multiple-issues-upload__publication-input:checked').value; + + const numberOrder = document.createElement('input'); + numberOrder.type = 'hidden'; + numberOrder.name = 'numberOrder'; + numberOrder.value = 'checked'; + + formElement.append(comicsId); + formElement.append(name); + formElement.append(description); + formElement.append(image); + formElement.append(button); + formElement.append(submit); + formElement.append(publish); + formElement.append(numberOrder); + + // console.log(formElement); + const response = await window.acomicsLegacyClient.sendFormAndParseHtml(formElement); + // console.log(response); + + if (!handleResponse(elem, response)) { + success = false; + break; + } + } + submitButton.disabled = false; + loadingImage.classList.remove("multiple-issues-upload__lds-roller"); + submitButton.textContent = "Повторить попытку" + if (success) { + location.href = document.querySelector('.multiple-issues-upload').dataset.successRedirectUrl; + } + } + + const handleModalClosing = () => { + const textareaName = document.querySelector(".edit-modal__namespace"); + const textareaDescription = document.querySelector(".edit-modal__description"); + textareaName.value = ""; + textareaDescription.value = ""; + } + + const handleEditModalOpening = (evt) => { + evt.preventDefault(); + let index = Number(evt.target.closest('.multiple-issues-upload__card').dataset.index); + const img = document.querySelector(".edit-modal__img"); + img.src = URL.createObjectURL(issuesToUpload[index].file); + modalIndex = index; + } + + const handlePreview = () => { + const container = document.querySelector(".preview-modal__container"); + container.innerHTML = ""; + for (let elem of issuesToUpload) { + const img = document.createElement("img"); + img.src = URL.createObjectURL(elem.file); + img.alt = "Предпросмотр"; + img.className = "preview-modal__image"; + container.append(img); + } + } + + const handleOnePreview = (evt) => { + evt.preventDefault(); + let index = Number(evt.target.closest('.multiple-issues-upload__card').dataset.index); + const container = document.querySelector(".preview-modal__container"); + container.innerHTML = ""; + const img = document.createElement("img"); + img.src = URL.createObjectURL(issuesToUpload[index].file); + img.alt = "Предпросмотр"; + img.className = "preview-modal__image"; + container.append(img); + } + + const multipleIssuesModal = new HystModal({ + linkAttributeName: "data-hystmodal", + beforeOpen: () => handleModalClosing(), + }); + + + init(); +})(); diff --git a/static/upload_module/style.css b/static/upload_module/style.css new file mode 100644 index 0000000..fcff799 --- /dev/null +++ b/static/upload_module/style.css @@ -0,0 +1,690 @@ +@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@200..700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yanone+Kaffeesatz:wght@200..700&display=swap'); + +.multiple-issues-upload { + margin: 0; + padding: 0; + box-sizing: border-box; + display: flex; + flex-direction: column; + --light-bg: #edebe9; + --dark-txt: #5a002d; + --page-title-red: #d00026; + --yellow-btn: #ec9005; + --ligth-yellow-btn: #efa821; + --disabled-yellow-btn: #d2ae73; + --gray-bg: #D9D9D9; + --gray-border: #aaaaaa; + --h: "Yanone Kaffeesatz", sans-serif; + --p: Arial, Helvetica, sans-serif; +} + +.multiple-issues-upload__container { + width: 100%; + overflow: auto; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__dropbox { + height: 500px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + background-color: var(--light-bg); + margin: 0; + padding: 0; +} + +.multiple-issues-upload__dropbox-input { + height: 100%; + width: 100%; + opacity: 0; + cursor: pointer; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__dropbox-label { + text-align: center; + font-family: var(--h); + line-height: 1.15; + font-size: 32px; + font-weight: 600; + color: var(--dark-txt); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; + padding: 0; +} + +.multiple-issues-upload__dropbox-disabled { + display: none; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__field { + box-sizing: border-box; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + background-color: white; + margin: 0; +} + +.multiple-issues-upload__title { + margin: 10px 0; + font-family: var(--h); + color: var(--page-title-red); + line-height: 1.15; + font-size: 32px; + font-weight: 600; + padding: 0; +} + +.multiple-issues-upload__add-button { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__button { + background-color: var(--ligth-yellow-btn); + margin: 10px 0; + font-family: var(--p); + line-height: 0.75; + font-size: 14px; + font-weight: 600; + border: none; + padding: 3px; + box-sizing: border-box; + min-width: 230px; + min-height: 35px; + color: black; + text-align: center; + cursor: pointer; + transition: .3s; +} + +.multiple-issues-upload__top-buttons { + margin: 0 0 10px 0; + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 0; +} + +.multiple-issues-upload__bottom-buttons { + position: relative; +} + +.multiple-issues-upload__button:hover:enabled { + filter: brightness(120%); +} + +.multiple-issues-upload__lds-roller_disabled { + display: none; +} + +/* from loading.io/css */ +.multiple-issues-upload__lds-roller, +.multiple-issues-upload__lds-roller div, +.multiple-issues-upload__lds-roller div:after { + box-sizing: border-box; +} +.multiple-issues-upload__lds-roller { + display: inline-block; + position: absolute; + top: 6px; + left: 20%; + width: 25px; + height: 25px; + transform: scale(0.3); +} +.multiple-issues-upload__lds-roller div { + animation: multiple-issues-upload__lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; +} +.multiple-issues-upload__lds-roller div:after { + content: " "; + display: block; + position: absolute; + width: 7.2px; + height: 7.2px; + border-radius: 50%; + background: currentColor; + margin: -3.6px 0 0 -3.6px; +} +.multiple-issues-upload__lds-roller div:nth-child(1) { + animation-delay: -0.036s; +} +.multiple-issues-upload__lds-roller div:nth-child(1):after { + top: 62.62742px; + left: 62.62742px; +} +.multiple-issues-upload__lds-roller div:nth-child(2) { + animation-delay: -0.072s; +} +.multiple-issues-upload__lds-roller div:nth-child(2):after { + top: 67.71281px; + left: 56px; +} +.multiple-issues-upload__lds-roller div:nth-child(3) { + animation-delay: -0.108s; +} +.multiple-issues-upload__lds-roller div:nth-child(3):after { + top: 70.90963px; + left: 48.28221px; +} +.multiple-issues-upload__lds-roller div:nth-child(4) { + animation-delay: -0.144s; +} +.multiple-issues-upload__lds-roller div:nth-child(4):after { + top: 72px; + left: 40px; +} +.multiple-issues-upload__lds-roller div:nth-child(5) { + animation-delay: -0.18s; +} +.multiple-issues-upload__lds-roller div:nth-child(5):after { + top: 70.90963px; + left: 31.71779px; +} +.multiple-issues-upload__lds-roller div:nth-child(6) { + animation-delay: -0.216s; +} +.multiple-issues-upload__lds-roller div:nth-child(6):after { + top: 67.71281px; + left: 24px; +} +.multiple-issues-upload__lds-roller div:nth-child(7) { + animation-delay: -0.252s; +} +.multiple-issues-upload__lds-roller div:nth-child(7):after { + top: 62.62742px; + left: 17.37258px; +} +.multiple-issues-upload__lds-roller div:nth-child(8) { + animation-delay: -0.288s; +} +.multiple-issues-upload__lds-roller div:nth-child(8):after { + top: 56px; + left: 12.28719px; +} +@keyframes multiple-issues-upload__lds-roller { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + + +.multiple-issues-upload__list { + box-sizing: border-box; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + width: 100%; + /*border: 1px solid var(--gray-border);*/ + padding: 10px 0; + margin: 0; +} + +.multiple-issues-upload__section-label { + margin: 10px 0; + font-family: var(--p); + line-height: 0.75; + font-size: 16px; + font-weight: 400; + padding: 0; +} + +.multiple-issues-upload__description { + box-sizing: border-box; + width: 100%; + /* border: none; */ + border: 1px solid var(--gray-border); + /* background-color: var(--gray-bg); */; + padding: 10px; + resize: none; + font-family: var(--p); + line-height: 0.75; + font-size: 14px; + font-weight: 400; + outline: none; + min-height: 170px; + margin: 0; +} + +.multiple-issues-upload__publication { + display: flex; + flex-direction: row; + height: 40px; + align-items: center; + box-sizing: border-box; + padding: 0 10px; + gap: 10px; + margin: 0; +} + +.multiple-issues-upload__publication-label { + font-family: var(--p); + line-height: 0.75; + font-size: 14px; + font-weight: 400; + text-align: center; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__publication-input { + margin: 0; + padding: 0; +} + +.multiple-issues-upload__submit-button { + background-color: var(--yellow-btn); + margin: 0; + padding: 0; + height: 100%; +} + +.multiple-issues-upload__elem { + height: 50px; + border: 1px dashed black; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__field_disabled { + display: none; + margin: 0; + padding: 0; +} + + +.multiple-issues-upload__card:last-child .multiple-issues-upload__card-button_type_move-right { + pointer-events: none; + opacity: .5; + cursor: none; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__card:first-child .multiple-issues-upload__card-button_type_move-left { + pointer-events: none; + opacity: .5; + cursor: none; + margin: 0; + padding: 0; +} + +.preview-modal__container { + max-width: 80vw; + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + padding: 15px; + box-sizing: border-box; + margin: 0; +} + +.preview-modal__image { + width: 100%; + object-fit: cover; + margin: 0; + padding: 0; +} + +.preview-modal { + border-radius: 15px; + margin: 100px 0; + padding: 0; +} + +.image-fit { + width: 100%; + height: 100%; + object-fit: cover; + z-index: 10; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__card { + position: relative; + width: 150px; + height: 240px; + background-color: #ebe5dd; + padding: 10px; + box-sizing: border-box; + overflow: hidden; + border-radius: 10px; + margin: 0; +} + +.multiple-issues-upload__card-thumbnail { + width: 130px; + height: 195px; + background-color: black; + overflow: hidden; + transition: .5s; + margin: 0; + padding: 0; + position: relative; + cursor: zoom-in; +} + +.multiple-issues-upload__card-thumbnail:hover { + filter: brightness(120%); +} + +.multiple-issues-upload__card-title-segment { + display: flex; + justify-content: flex-end; + height: 15px; + gap: 5px; + margin: 10px 0 0 0; + padding: 0; +} + +.multiple-issues-upload__card-title { + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + font-weight: normal; + max-width: 52px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin: 0 auto 0 auto; + padding: 0; +} + +.multiple-issues-upload__card-button { + width: 15px; + height: 15px; + margin: 0; + padding: 0; +} + +.edit-modal { + box-sizing: border-box; + width: 900px; + height: 600px; + padding: 10px 20px 10px 20px; + gap: 10px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.edit-modal__img-container { + box-sizing: border-box; + width: 425px; + height: 580px; + padding: 10px 5px 10px 10px; + gap: 10px; + overflow: hidden; +} + +.edit-modal__img { + width: 410px; + height: 560px; + object-fit: contain; +} + +.hystmodal__window { + width: auto; +} + +.multiple-issues-upload__submit-button:disabled { + pointer-events: none; + cursor: none; + color: transparent; + background-color: var(--disabled-yellow-btn); +} + +.edit-modal__text { + box-sizing: border-box; + width: 425px; + height: 580px; + padding: 10px 10px 10px 5px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.edit-modal__name-field { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + height: 20px; + width: 100%; +} + +.edit-modal__name { + font-family: var(--p); + font-size: 20px; + font-weight: 500; + line-height: 24px; + text-align: left; +} + +.edit-modal__close { + width: 20px; + height: 20px; + background-color: rgba(0, 0, 0, 0); + background-image: url("data:image/svg+xml;utf8, "); + border: none; + cursor: pointer; +} + +.edit-modal__text hr { + width: 100%; + height: 1px; + box-sizing: border-box; + margin: 10px 0 15px 0; + border: 1px solid var(--gray-border); +} + +.edit-modal__label { + font-family: var(--p); + line-height: 0.75; + font-size: 16px; + font-weight: 300; + margin: 0 0 5px; +} + +.edit-modal__textarea { + box-sizing: border-box; + width: 100%; + border: 1px solid var(--gray-border); + resize: none; + font-family: var(--p); + line-height: 0.75; + font-size: 14px; + font-weight: 400; + outline: none; + min-height: 30px; + margin-bottom: 15px; + padding: 10px; +} + +.edit-modal__description { + margin-bottom: 10px; + min-height: 360px +} + +.edit-modal__button { + background-color: var(--ligth-yellow-btn); + font-family: var(--p); + line-height: 0.75; + font-size: 14px; + font-weight: 600; + border: none; + padding: 3px; + box-sizing: border-box; + min-width: 100%; + min-height: 40px; + color: black; + text-align: center; + cursor: pointer; + transition: .3s; +} + +.edit-modal__button:active { + filter: brightness(120%); +} + +.multiple-issues-upload__card_onload_successful::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 10; + height: 100%; + background-color: #2b9422; + opacity: 30%; +} + +.multiple-issues-upload__card_onload_successful { + pointer-events: none; +} + +.multiple-issues-upload__card_onload_loading::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10; + background-color: #c8c600; + opacity: 30%; +} + +.multiple-issues-upload__card_onload_loading { + pointer-events: none; +} + +.multiple-issues-upload__card_onload_error::before { + pointer-events: none; + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 10; + height: 100%; + background-color: #990502; + opacity: 30%; +} + +.multiple-issues-upload__card-button_type_move-block { + pointer-events: none; + opacity: .5; + cursor: none; + margin: 0; + padding: 0; +} + +.multiple-issues-upload__card_onload_error .multiple-issues-upload__card-thumbnail:hover { + filter: none; +} + +.multiple-issues-upload__error { + margin: 10px 0; + font-family: var(--p); + line-height: 0.75; + font-size: 16px; + font-weight: 400; + padding: 0; + color: #990502; +} + +/*@media screen and (max-width: 950px) {*/ +/* .edit-modal {*/ +/* width: 450px;*/ +/* height: auto;*/ +/* flex-direction: column;*/ +/* }*/ + +/* .edit-modal__img-container {*/ +/* display: none;*/ +/* }*/ + +/* .edit-modal__text {*/ +/* padding: 10px 20px 10px 20px;*/ +/* }*/ +/*}*/ + +/*@media screen and (max-width: 800px) {*/ +/* .multiple-issues-upload__list {*/ +/* width: 330px;*/ +/* }*/ + +/* .multiple-issues-upload__container {*/ +/* width: 460px;*/ +/* }*/ + +/* .multiple-issues-upload__field {*/ +/* align-items: center;*/ +/* }*/ + +/* .multiple-issues-upload__section-label {*/ +/* margin: 20px 0 10px 0;*/ +/* }*/ + +/* .multiple-issues-upload__bottom-buttons {*/ +/* display: flex;*/ +/* flex-direction: column;*/ +/* margin-top: 20px;*/ +/* }*/ +/*}*/ + +/*@media screen and (max-width: 550px) {*/ +/* .multiple-issues-upload__container {*/ +/* width: 260px;*/ +/* }*/ + +/* .multiple-issues-upload__list {*/ +/* width: 170px;*/ +/* }*/ +/*}*/ + +/*@media screen and (max-width: 500px) {*/ +/* .edit-modal {*/ +/* width: 310px;*/ +/* }*/ + +/* .edit-modal__text {*/ +/* width: 310px;*/ +/* }*/ +/*}*/ + + diff --git a/static/template/template.html b/static/upload_module/template.html similarity index 63% rename from static/template/template.html rename to static/upload_module/template.html index c43d8c8..085946d 100644 --- a/static/template/template.html +++ b/static/upload_module/template.html @@ -1,28 +1,30 @@ - + Шаблон компонента + + + - - + + - - -

Здесь HTML-код компонента.

+