From e5070eb88e0cb127df14f1c53e4962d3919e76de Mon Sep 17 00:00:00 2001
From: Rasmus Luha <rasmus.luha@gmail.com>
Date: Tue, 10 Jan 2023 15:55:53 +0200
Subject: add Avatar to modals
---
rannak/mangud/uliopilane/utlused/css/utlused.css | 159 ---------------
rannak/mangud/uliopilane/utlused/index.html | 12 +-
rannak/mangud/uliopilane/utlused/js/main.js | 217 ---------------------
rannak/mangud/uliopilane/utlused/main.js | 217 +++++++++++++++++++++
rannak/mangud/uliopilane/utlused/pildid/avatar.png | Bin 0 -> 668741 bytes
rannak/mangud/uliopilane/utlused/utlused.css | 169 ++++++++++++++++
6 files changed, 392 insertions(+), 382 deletions(-)
delete mode 100644 rannak/mangud/uliopilane/utlused/css/utlused.css
delete mode 100644 rannak/mangud/uliopilane/utlused/js/main.js
create mode 100644 rannak/mangud/uliopilane/utlused/main.js
create mode 100644 rannak/mangud/uliopilane/utlused/pildid/avatar.png
create mode 100644 rannak/mangud/uliopilane/utlused/utlused.css
(limited to 'rannak/mangud/uliopilane/utlused')
diff --git a/rannak/mangud/uliopilane/utlused/css/utlused.css b/rannak/mangud/uliopilane/utlused/css/utlused.css
deleted file mode 100644
index f4a3728..0000000
--- a/rannak/mangud/uliopilane/utlused/css/utlused.css
+++ /dev/null
@@ -1,159 +0,0 @@
-/* Mäng ise */
-@import url('https://fonts.googleapis.com/css?family=Montserrat');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Montserrat', sans-serif;
- background-color: #eee;
- color: #111;
- touch-action: none;
-}
-
-.moveOn{
- display: inline-block;
- border: none;
- padding: 6px 12px;
- margin-left: 11%;
- font-size: 1rem;
- font-weight: normal;
- text-align: center;
- cursor: pointer;
- border-radius: 4px;
- background-color: #4BB543;
- color: white;
-}
-
-button:disabled{
- opacity: 0.5;
- cursor: not-allowed;
-}
-
-
-/* Modal Stuff */
-
-
-.closeModalButton {
- border-radius: 50px;
-}
-
-.modalButton{
- position: absolute;
- top: 0;
- right: 0;
- padding: 25px !important;
- background-color: rgba(0,136,169,1) !important;
- border: none !important;
- border-radius: 50px !important;
- cursor: pointer !important;
- transition: all 0.3 ease 0 !important;
- margin: 3% !important;
- font-size: 1.05rem !important;
- max-width: 10% !important;
-}
-
-.modalButton:hover{
- background-color: rgba(0,136,169,0.8) !important;
-}
-
-
-
-
-/* later added stuff here */
-
-.wrapper {
- border-bottom: 3px solid gray;
- position: relative;
- display: flex;
- flex-wrap: wrap;
-}
-
-.empty {
- width: 7rem;
- height: 7rem;
-}
-
-.drag {
- position: absolute;
- width: 7rem;
- height: 7rem;
- z-index: 1;
-}
-
-.active {
- background-color: grey !important;
-}
-
-.done {
- background-color: green !important;
-}
-
-/* end of later added stuff */
-
-
-.draggable-elements {
- display: flex;
- justify-content: center;
- margin: 2rem;
-}
-.draggable {
- height: 5rem;
- width: 5rem;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 1.5rem;
- margin: 0rem 1rem;
- cursor: move;
- transition: opacity 0.2s;
-}
-
-.droppable {
- height: 10rem;
- width: 25rem;
- margin: 1rem auto;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- text-align: center;
- font-size: 8rem;
- font-weight: bold;
- background-color: #fff;
- border: 3px dashed #111;
- transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
-}
-.droppable span {
- font-size: 1.25rem;
- pointer-events: none; /* The element is never the target of pointer events */
-}
-
-/* Drag and Drop Related Styling */
-
-.droppable.droppable-hover {
- /* background-color: #bee3f0; */
- border-width: 5px;
- transform: scale(1.1);
-}
-.droppable.dropped {
- border-style: solid;
- color: #fff;
-}
-.droppable.dropped span {
- font-weight: bolder;
- margin-top: 0.5rem;
-}
-.droppable.dropped i {
- pointer-events: none;
-}
-.draggable.dragged {
- user-select: none;
- cursor: default;
-}
-.draggable.dragged:hover {
- opacity: 0.1;
-}
diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html
index c45ee26..3619059 100644
--- a/rannak/mangud/uliopilane/utlused/index.html
+++ b/rannak/mangud/uliopilane/utlused/index.html
@@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kuulsad Ütlused</title>
- <link rel="stylesheet" href="css/utlused.css">
+ <link rel="stylesheet" href="utlused.css">
<link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" type=text/css href="utlused.css">
@@ -30,10 +30,10 @@
<div class="modal-content">
<div class="modal-header">
- <h5 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
- <button type="button" class="closeModalButton" data-bs-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+ <div class="modalHeaderWrapper">
+ <h3 class="modal-title" id="myModalLabel">Sissejuhatus</h5>
+ </div>
+ <img class="avatar" alt="avatar" src="pildid/avatar.png"/>
</div>
<div class="modal-body">
@@ -115,7 +115,7 @@
</div>
- <script src="js/main.js"></script>
+ <script src="main.js"></script>
<!-- JavaScript Bundle with Popper -->
diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js
deleted file mode 100644
index 07b8d27..0000000
--- a/rannak/mangud/uliopilane/utlused/js/main.js
+++ /dev/null
@@ -1,217 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- let btn = document.querySelector('.modalButton');
- btn.click();
-});
-
-
-
-// Detecting part
-const isMobile = function(){
- const match = window.matchMedia('(pointer:coarse)');
- return (match && match.matches)
-}
-console.log(`${isMobile() ? 'mobile' : 'not mobile'}`);
-
-// Global Variables for Mobile
-let originalX = 0;
-let originalY = 0;
-let counter = 0;
-let itemAppend = null;
-
-if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') {
-
- const draggableElements = document.querySelectorAll(".draggable");
- const droppableElements = document.querySelectorAll(".droppable");
-
- draggableElements.forEach(elem => {
- elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data
- // elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged
- // elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete
- });
-
- droppableElements.forEach(elem => {
- elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target
- elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone
- elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target
- elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target
- });
-
- // Drag and Drop Functions //
-
- //Events fired on the drag target
- function dragStart(event) {
- event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value
- }
-
- //Events fired on the drop target
- function dragEnter(event) {
- if(!event.target.classList.contains("dropped")) {
- event.target.classList.add("droppable-hover");
- }
- }
-
- function dragOver(event) {
- if(!event.target.classList.contains("dropped")) {
- event.preventDefault(); // Prevent default to allow drop
- }
- }
-
- function dragLeave(event) {
- if(!event.target.classList.contains("dropped")) {
- event.target.classList.remove("droppable-hover");
- }
- }
-
-
- function drop(event) {
-
- event.preventDefault(); // This is in order to prevent the browser default handling of the data
- event.target.classList.remove("droppable-hover");
- const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method
- const droppableElementData = event.target.getAttribute("data-draggable-id");
- const isCorrectMatching = draggableElementData === droppableElementData;
-
- if(isCorrectMatching) {
- const draggableElement = document.getElementById(draggableElementData);
- event.target.classList.add("dropped");
- // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following:
- event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color;
- draggableElement.classList.add("dragged");
- draggableElement.setAttribute("draggable", "false");
- event.target.insertAdjacentHTML("afterbegin", `<i class="fas fa-${draggableElementData}"></i>`);
-
- counter++;
- console.log("counter:", counter)
- if (counter == 6){
- const btn = document.querySelector(".moveOn");
- btn.disabled = false;
- localStorage.setItem("roll", "Üliõpilase");
- btn.onclick = () => location.href = "../../../endPage";
- }
- } // If isCorrectMatchingEnd
- } // Drop Func End
-
-} // If Desktop End
-
-
-//If mobile
-
-else{
-
- const empty = Array.from(document.querySelectorAll('.empty'));
- const drags = document.querySelectorAll('.drag');
-
- drags.forEach(drag => {
- drag.addEventListener('pointerdown', pointerDown);
- drag.addEventListener('pointermove', pointerMove);
- drag.addEventListener('pointerup', pointerUp);
- })
-
-
- // Function when start touch
- function pointerDown(e){
- e.preventDefault();
-
- let remVal = parseInt(getComputedStyle(document.documentElement).fontSize);
- originalTop = e.target.getBoundingClientRect().top - 2*remVal;
- originalLeft = e.target.getBoundingClientRect().left - remVal;
- }
-
-
- // Function while movin
- function pointerMove(e){
- e.preventDefault();
-
- //Scrolling Part
- if (window.innerHeight - e.screenY < 600){
- window.scrollBy({
- top: 100, // could be negative value
- behavior: 'smooth'
- });
- }
-
- else if (e.clientY < 200){
- window.scrollBy({
- top: -100, // could be negative value
- behavior: 'smooth'
- });
- }
-
- nimi = e.target;
- if (!nimi.classList.contains('done')){
-
- nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`;
- nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`;
-
- empty.map(item => {
- if (
- nimi.getBoundingClientRect().top + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom &&
- nimi.getBoundingClientRect().right - nimi.offsetWidth / 2 > item.getBoundingClientRect().left &&
- nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top &&
- nimi.getBoundingClientRect().left + nimi.offsetWidth / 2 < item.getBoundingClientRect().right
- ) {
- item.classList.add('active');
- itemAppend = item;
- }
- else {
- item.classList.remove('active');
- }
- }); //empty.map loop end
- }
-
- // if currentDrag has class done
- else{
- console.log("has class done")
- }
-
- }
-
-
- // Function if touch is stopped
- function pointerUp(e){
- e.preventDefault();
-
- if (itemAppend != null){
-
- if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) {
- this.classList.add('done')
- this.parentElement.classList.add('done')
- itemAppend.classList.add('done');
- itemAppend.classList.remove('active');
-
- this.style.top = `${originalTop}px`;
- this.style.left = `${originalLeft}px`;
- //this.innerHTML="";
-
- counter++;
- console.log("counter:", counter)
- if (counter == 6){
- const btn = document.querySelector(".moveOn");
- btn.disabled = false;
- btn.onclick = () => location.href = "#";
- }
-
- }
- else {
-
- this.style.top = `${originalTop}px`;
- this.style.left = `${originalLeft}px`;
- this.parentElement.appendChild(this);
- itemAppend.classList.remove('active');
- }
- }
- else {
- this.style.top = `${originalTop}px`;
- this.style.left = `${originalLeft}px`;
- console.log("FakAp");
- } // PointerUp Func End
-
- window.scroll({
- top: 0,
- left: 0,
- behavior: 'smooth'
- });
- }
-
-
-} // If mobile End
diff --git a/rannak/mangud/uliopilane/utlused/main.js b/rannak/mangud/uliopilane/utlused/main.js
new file mode 100644
index 0000000..07b8d27
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/main.js
@@ -0,0 +1,217 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let btn = document.querySelector('.modalButton');
+ btn.click();
+});
+
+
+
+// Detecting part
+const isMobile = function(){
+ const match = window.matchMedia('(pointer:coarse)');
+ return (match && match.matches)
+}
+console.log(`${isMobile() ? 'mobile' : 'not mobile'}`);
+
+// Global Variables for Mobile
+let originalX = 0;
+let originalY = 0;
+let counter = 0;
+let itemAppend = null;
+
+if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') {
+
+ const draggableElements = document.querySelectorAll(".draggable");
+ const droppableElements = document.querySelectorAll(".droppable");
+
+ draggableElements.forEach(elem => {
+ elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data
+ // elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged
+ // elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete
+ });
+
+ droppableElements.forEach(elem => {
+ elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target
+ elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone
+ elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target
+ elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target
+ });
+
+ // Drag and Drop Functions //
+
+ //Events fired on the drag target
+ function dragStart(event) {
+ event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value
+ }
+
+ //Events fired on the drop target
+ function dragEnter(event) {
+ if(!event.target.classList.contains("dropped")) {
+ event.target.classList.add("droppable-hover");
+ }
+ }
+
+ function dragOver(event) {
+ if(!event.target.classList.contains("dropped")) {
+ event.preventDefault(); // Prevent default to allow drop
+ }
+ }
+
+ function dragLeave(event) {
+ if(!event.target.classList.contains("dropped")) {
+ event.target.classList.remove("droppable-hover");
+ }
+ }
+
+
+ function drop(event) {
+
+ event.preventDefault(); // This is in order to prevent the browser default handling of the data
+ event.target.classList.remove("droppable-hover");
+ const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method
+ const droppableElementData = event.target.getAttribute("data-draggable-id");
+ const isCorrectMatching = draggableElementData === droppableElementData;
+
+ if(isCorrectMatching) {
+ const draggableElement = document.getElementById(draggableElementData);
+ event.target.classList.add("dropped");
+ // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following:
+ event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color;
+ draggableElement.classList.add("dragged");
+ draggableElement.setAttribute("draggable", "false");
+ event.target.insertAdjacentHTML("afterbegin", `<i class="fas fa-${draggableElementData}"></i>`);
+
+ counter++;
+ console.log("counter:", counter)
+ if (counter == 6){
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ localStorage.setItem("roll", "Üliõpilase");
+ btn.onclick = () => location.href = "../../../endPage";
+ }
+ } // If isCorrectMatchingEnd
+ } // Drop Func End
+
+} // If Desktop End
+
+
+//If mobile
+
+else{
+
+ const empty = Array.from(document.querySelectorAll('.empty'));
+ const drags = document.querySelectorAll('.drag');
+
+ drags.forEach(drag => {
+ drag.addEventListener('pointerdown', pointerDown);
+ drag.addEventListener('pointermove', pointerMove);
+ drag.addEventListener('pointerup', pointerUp);
+ })
+
+
+ // Function when start touch
+ function pointerDown(e){
+ e.preventDefault();
+
+ let remVal = parseInt(getComputedStyle(document.documentElement).fontSize);
+ originalTop = e.target.getBoundingClientRect().top - 2*remVal;
+ originalLeft = e.target.getBoundingClientRect().left - remVal;
+ }
+
+
+ // Function while movin
+ function pointerMove(e){
+ e.preventDefault();
+
+ //Scrolling Part
+ if (window.innerHeight - e.screenY < 600){
+ window.scrollBy({
+ top: 100, // could be negative value
+ behavior: 'smooth'
+ });
+ }
+
+ else if (e.clientY < 200){
+ window.scrollBy({
+ top: -100, // could be negative value
+ behavior: 'smooth'
+ });
+ }
+
+ nimi = e.target;
+ if (!nimi.classList.contains('done')){
+
+ nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`;
+ nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`;
+
+ empty.map(item => {
+ if (
+ nimi.getBoundingClientRect().top + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom &&
+ nimi.getBoundingClientRect().right - nimi.offsetWidth / 2 > item.getBoundingClientRect().left &&
+ nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top &&
+ nimi.getBoundingClientRect().left + nimi.offsetWidth / 2 < item.getBoundingClientRect().right
+ ) {
+ item.classList.add('active');
+ itemAppend = item;
+ }
+ else {
+ item.classList.remove('active');
+ }
+ }); //empty.map loop end
+ }
+
+ // if currentDrag has class done
+ else{
+ console.log("has class done")
+ }
+
+ }
+
+
+ // Function if touch is stopped
+ function pointerUp(e){
+ e.preventDefault();
+
+ if (itemAppend != null){
+
+ if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) {
+ this.classList.add('done')
+ this.parentElement.classList.add('done')
+ itemAppend.classList.add('done');
+ itemAppend.classList.remove('active');
+
+ this.style.top = `${originalTop}px`;
+ this.style.left = `${originalLeft}px`;
+ //this.innerHTML="";
+
+ counter++;
+ console.log("counter:", counter)
+ if (counter == 6){
+ const btn = document.querySelector(".moveOn");
+ btn.disabled = false;
+ btn.onclick = () => location.href = "#";
+ }
+
+ }
+ else {
+
+ this.style.top = `${originalTop}px`;
+ this.style.left = `${originalLeft}px`;
+ this.parentElement.appendChild(this);
+ itemAppend.classList.remove('active');
+ }
+ }
+ else {
+ this.style.top = `${originalTop}px`;
+ this.style.left = `${originalLeft}px`;
+ console.log("FakAp");
+ } // PointerUp Func End
+
+ window.scroll({
+ top: 0,
+ left: 0,
+ behavior: 'smooth'
+ });
+ }
+
+
+} // If mobile End
diff --git a/rannak/mangud/uliopilane/utlused/pildid/avatar.png b/rannak/mangud/uliopilane/utlused/pildid/avatar.png
new file mode 100644
index 0000000..dd044fd
Binary files /dev/null and b/rannak/mangud/uliopilane/utlused/pildid/avatar.png differ
diff --git a/rannak/mangud/uliopilane/utlused/utlused.css b/rannak/mangud/uliopilane/utlused/utlused.css
new file mode 100644
index 0000000..3835300
--- /dev/null
+++ b/rannak/mangud/uliopilane/utlused/utlused.css
@@ -0,0 +1,169 @@
+/* Mäng ise */
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Montserrat', sans-serif;
+ background-color: #eee;
+ color: #111;
+ touch-action: none;
+}
+
+.moveOn{
+ display: inline-block;
+ border: none;
+ padding: 6px 12px;
+ margin-left: 11%;
+ font-size: 1rem;
+ font-weight: normal;
+ text-align: center;
+ cursor: pointer;
+ border-radius: 4px;
+ background-color: #4BB543;
+ color: white;
+}
+
+button:disabled{
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+
+/* Modal Stuff */
+.avatar {
+ border-radius: 20px;
+ width: 100% !important;
+}
+
+.modalHeaderWrapper{
+ text-align: center;
+ margin: 0 !important;
+ width: 100% !important;
+}
+
+
+.closeModalButton {
+ border-radius: 50px;
+}
+
+.modalButton{
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 10px !important;
+ background-color: rgba(0,136,169,1) !important;
+ border: none !important;
+ border-radius: 50px !important;
+ cursor: pointer !important;
+ transition: all 0.3 ease 0 !important;
+ margin: 2% !important;
+ font-size: 1.05rem !important;
+ max-width: 10% !important;
+}
+
+.modalButton:hover{
+ background-color: rgba(0,136,169,0.8) !important;
+}
+
+
+
+
+/* later added stuff here */
+
+.wrapper {
+ border-bottom: 3px solid gray;
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.empty {
+ width: 7rem;
+ height: 7rem;
+}
+
+.drag {
+ position: absolute;
+ width: 7rem;
+ height: 7rem;
+ z-index: 1;
+}
+
+.active {
+ background-color: grey !important;
+}
+
+.done {
+ background-color: green !important;
+}
+
+/* end of later added stuff */
+
+
+.draggable-elements {
+ display: flex;
+ justify-content: center;
+ margin: 2rem;
+}
+.draggable {
+ height: 5rem;
+ width: 5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.5rem;
+ margin: 0rem 1rem;
+ cursor: move;
+ transition: opacity 0.2s;
+}
+
+.droppable {
+ height: 10rem;
+ width: 25rem;
+ margin: 1rem auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ text-align: center;
+ font-size: 8rem;
+ font-weight: bold;
+ background-color: #fff;
+ border: 3px dashed #111;
+ transition: border-width 0.2s, transform 0.2s, background-color 0.4s;
+}
+.droppable span {
+ font-size: 1.25rem;
+ pointer-events: none; /* The element is never the target of pointer events */
+}
+
+/* Drag and Drop Related Styling */
+
+.droppable.droppable-hover {
+ /* background-color: #bee3f0; */
+ border-width: 5px;
+ transform: scale(1.1);
+}
+.droppable.dropped {
+ border-style: solid;
+ color: #fff;
+}
+.droppable.dropped span {
+ font-weight: bolder;
+ margin-top: 0.5rem;
+}
+.droppable.dropped i {
+ pointer-events: none;
+}
+.draggable.dragged {
+ user-select: none;
+ cursor: default;
+}
+.draggable.dragged:hover {
+ opacity: 0.1;
+}
--
cgit v1.2.3