diff --git a/frontend/src/upload.js b/frontend/src/upload.js index ab8a0c13..ff11e00c 100644 --- a/frontend/src/upload.js +++ b/frontend/src/upload.js @@ -465,12 +465,14 @@ $(document).ready(function() { popupDiv.classList.add('popup'); const $popupMessage = $('
', { class: 'popup-message' }); $popupMessage.attr('data-l10n-id', 'deletePopupText'); - const $popupDelSpan = $('', { class: 'popup-yes' }); - $popupDelSpan.attr('data-l10n-id', 'deletePopupYes'); + const $popupAction = $('
', { class: 'popup-action' }); const $popupNvmSpan = $('', { class: 'popup-no' }); $popupNvmSpan.attr('data-l10n-id', 'deletePopupCancel'); + const $popupDelSpan = $('', { class: 'popup-yes' }); + $popupDelSpan.attr('data-l10n-id', 'deletePopupYes'); - $popupText.html([$popupMessage, $popupDelSpan, $popupNvmSpan]); + $popupText.html([$popupMessage, $popupAction]); + $popupAction.html([$popupNvmSpan, $popupDelSpan]); // add data cells to table row row.appendChild(name); diff --git a/public/main.css b/public/main.css index 2e7e1c43..29ac11de 100644 --- a/public/main.css +++ b/public/main.css @@ -275,33 +275,39 @@ tbody { /* The actual popup (appears on top) */ .popup .popuptext { visibility: hidden; - min-width: 115px; + min-width: 204px; + min-height: 105px; background-color: #fff; color: #000; - border: 1px solid #0297f8; + border: 1px solid #d7d7db; + padding: 15px 24px; + box-sizing: content-box; text-align: center; border-radius: 5px; - padding: 7px 8px; position: absolute; z-index: 1; - bottom: 8px; - right: -28px; + bottom: 20px; + left: -40px; transition: opacity 0.5s; opacity: 0; outline: 0; - box-shadow: 3px 3px 7px #888; + box-shadow: 3px 3px 7px rgba(136, 136, 136, 0.3); } /* Popup arrow */ .popup .popuptext::after { content: ""; position: absolute; - top: 100%; - right: 30px; - margin-left: -5px; - border-width: 5px; - border-style: solid; - border-color: #0297f8 transparent transparent; + bottom: -11px; + left: 20px; + background-color: #fff; + display: block; + width: 20px; + height: 20px; + transform: rotate(45deg); + border-radius: 0 0 5px; + border-right: 1px solid #d7d7db; + border-bottom: 1px solid #d7d7db; } .popup .show { @@ -310,15 +316,39 @@ tbody { } .popup-message { - margin-bottom: 4px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px #ebebeb solid; + color: #0c0c0d; + font-size: 15px; + font-weight: normal; + padding-bottom: 15px; + white-space: nowrap; + width: calc(100% + 48px); + margin-left: -24px; +} + +.popup-action { + margin-top: 15px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; } .popup-yes { color: #fff; background-color: #0297f8; border-radius: 5px; - padding: 2px 11px; + padding: 5px 25px; + font-weight: normal; cursor: pointer; + min-width: 94px; + box-sizing: border-box; + white-space: nowrap; + margin-left: 12px; } .popup-yes:hover { @@ -327,9 +357,19 @@ tbody { .popup-no { color: #4a4a4a; - border-radius: 6px; - padding: 3px 5px; + background-color: #fbfbfb; + border: 1px #c1c1c1 solid; + border-radius: 5px; + padding: 5px 25px; + font-weight: normal; + min-width: 94px; + box-sizing: border-box; cursor: pointer; + white-space: nowrap; +} + +.popup-no:hover { + background-color: #efeff1; } /** upload-progress **/ @@ -666,8 +706,7 @@ tbody { .social-links { display: flex; justify-content: space-between; - width: 9vw; - max-width: 94px; + width: 94px; } .social-links > a { @@ -685,6 +724,18 @@ tbody { margin-bottom: -5px; } +@media (max-device-width: 992px), (max-width: 992px) { + .popup .popuptext { + left: auto; + right: -40px; + } + + .popup .popuptext::after { + left: auto; + right: 36px; + } +} + @media (max-device-width: 768px), (max-width: 768px) { .description { margin: 0 auto 25px; @@ -737,6 +788,10 @@ tbody { .feedback { margin-top: 10px; + min-width: 30px; + max-width: 300px; + text-indent: 2px; + padding: 5px 5px 5px 20px; } #copy {