Fix for 'leave site' popup when adding new component from component box

givanz · Jun 3, 2023 · 0c6a5a6 · 0c6a5a6
1 parent 307acda
commit 0c6a5a6
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 17 deletions.
diff --git a/css/editor.css b/css/editor.css
@@ -14183,7 +14183,7 @@ body {
         opacity: 1;
         width: 29%;
         margin-right: 1.5rem; }
-        #vvveb-builder #add-section-box .blocks-list ol li a.name, #vvveb-builder #add-section-box .sections-list ol li a.name {
+        #vvveb-builder #add-section-box .blocks-list ol li .name, #vvveb-builder #add-section-box .sections-list ol li .name {
           background: rgba(255, 255, 255, 0.9);
           background: rgba(0, 0, 0, 0.7);
           background: rgba(var(--bs-link-color-rgb), 0.7);
@@ -14202,7 +14202,7 @@ body {
           -webkit-box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25); }
           #vvveb-builder #add-section-box .blocks-list ol li:hover:before, #vvveb-builder #add-section-box .sections-list ol li:hover:before {
             opacity: 0.15; }
-          #vvveb-builder #add-section-box .blocks-list ol li:hover a.name, #vvveb-builder #add-section-box .sections-list ol li:hover a.name {
+          #vvveb-builder #add-section-box .blocks-list ol li:hover .name, #vvveb-builder #add-section-box .sections-list ol li:hover .name {
             visibility: visible; }
   #vvveb-builder .component-properties-sidepane {
     z-index: 0;
@@ -14715,7 +14715,7 @@ li[data-type] {
               background-color: var(--bs-body-bg);
               opacity: 1;
               text-align: center; }
-              .drag-elements-sidepane ul > li ol li[data-type]:hover a {
+              .drag-elements-sidepane ul > li ol li[data-type]:hover .add-section-btn {
                 visibility: visible; }
 
 .sections-container {
@@ -14844,7 +14844,7 @@ li[data-type] {
   cursor: grab;
   opacity: 1;
   margin: 1rem; }
-  .blocks .drag-elements-sidepane li[data-type] a.name, .sections .drag-elements-sidepane li[data-type] a.name {
+  .blocks .drag-elements-sidepane li[data-type] .name, .sections .drag-elements-sidepane li[data-type] .name {
     background: rgba(255, 255, 255, 0.9);
     background: rgba(0, 0, 0, 0.7);
     background: rgba(var(--bs-link-color-rgb), 0.7);
@@ -14863,7 +14863,7 @@ li[data-type] {
     -webkit-box-shadow: 0px 1px 5px 2px rgba(var(--bs-link-color-rgb), 0.25); }
     .blocks .drag-elements-sidepane li[data-type]:hover:before, .sections .drag-elements-sidepane li[data-type]:hover:before {
       opacity: 0.15; }
-    .blocks .drag-elements-sidepane li[data-type]:hover a.name, .sections .drag-elements-sidepane li[data-type]:hover a.name {
+    .blocks .drag-elements-sidepane li[data-type]:hover .name, .sections .drag-elements-sidepane li[data-type]:hover .name {
       visibility: visible; }
   .blocks .drag-elements-sidepane li[data-type]:before, .sections .drag-elements-sidepane li[data-type]:before {
     content: " ";
@@ -14878,7 +14878,7 @@ li[data-type] {
     transition: opacity 0.5s; }
   .blocks .drag-elements-sidepane li[data-type] img.preview, .sections .drag-elements-sidepane li[data-type] img.preview {
     max-width: 100%; }
-  .blocks .drag-elements-sidepane li[data-type] a.name, .sections .drag-elements-sidepane li[data-type] a.name {
+  .blocks .drag-elements-sidepane li[data-type] .name, .sections .drag-elements-sidepane li[data-type] .name {
     visibility: hidden; }
 
 .components .drag-elements-sidepane li[data-type],
@@ -15386,7 +15386,8 @@ input[type="color"] {
   overflow-x: hidden; }
 
 img.preview {
-  max-width: 100%; }
+  max-width: 100%;
+  margin: auto; }
 
 .hint {
   position: relative;
@@ -15540,3 +15541,6 @@ label.form-check .form-check-input {
   display: block;
   margin-left: auto;
   margin-right: auto; }
+
+video, audio {
+  max-width: 100%; }
diff --git a/libs/builder/builder.js b/libs/builder/builder.js
@@ -831,9 +831,9 @@ Vvveb.Builder = {
 					if (component)
 					{
 						item = $(`<li data-section="${group}" data-drag-type="component" data-type="${componentType}" data-search="${component.name.toLowerCase()}">
-							<a href="#">${component.name}</a>
+							<span>${component.name}</span>
 						</li>`);
-						//item = $('<li data-section="' + group + '" data-drag-type=component data-type="' + componentType + '" data-search="' + component.name.toLowerCase() + '"><a href="#">' + component.name + "</a></li>");
+						//item = $('<li data-section="' + group + '" data-drag-type=component data-type="' + componentType + '" data-search="' + component.name.toLowerCase() + '"><span>' + component.name + "</span></li>");
 
 						if (component.image) {
 
@@ -884,8 +884,8 @@ Vvveb.Builder = {
 					if (section)
 					{
 						item = $(`<li data-section="${group}" data-type="${sectionType}" data-search="${section.name.toLowerCase()}">
-									<a class="name" href="#">${section.name}</a>
-									<a class="add-section-btn" href="" title="Add section"><i class="la la-plus"></i></a>
+									<span class="name">${section.name}</span>
+									<div class="add-section-btn" title="Add section"><i class="la la-plus"></i></div>
 									<img class="preview" src="" loading="lazy">
 								</li>`);
 
@@ -942,7 +942,7 @@ Vvveb.Builder = {
 					if (block)
 					{
 						item = $(`<li data-section="${group}" data-drag-type="block" data-type="${blockType}" data-search="${block.name.toLowerCase()}">
-									<a class="name" href="#">${block.name}</a>
+									<span class="name">${block.name}</span>
 									<img class="preview" src="" loading="lazy">
 								</li>`);
 

diff --git a/scss/_builder.scss b/scss/_builder.scss
@@ -164,8 +164,8 @@ $font-size-base: 16px;
 		cursor:grab;
 		opacity:1;
 
-		a.name {
-			//background: var(--bs-secondary-bg-subtle);
+		.name {
+			//background: rgba(var(--bs-secondary-color-rgb), 0.03);
 			background: rgba(255,255,255,0.9);
 			background: rgba(0,0,0,0.7);
 			background: rgba(var(--bs-link-color-rgb), 0.7);
@@ -192,7 +192,7 @@ $font-size-base: 16px;
 				opacity: 0.15;
 			}
 
-			a.name {
+			.name {
 				visibility:visible;
 			}
 		}		
@@ -1513,7 +1513,7 @@ li[data-type]
 				  opacity:1;
 				  text-align:center;
 
-				  a {
+				  .add-section-btn {
 					//color:$blue;
 					visibility:visible;
 				  }
@@ -1708,7 +1708,7 @@ padding-top:1rem;
 				max-width:100%;
 			}
 
-			a.name {
+			.name {
 				//display:none;
 				visibility:hidden;
 			}
@@ -2296,6 +2296,7 @@ input[type="color"] {
 
 img.preview {
 	max-width:100%;
+	margin:auto;
 }
 
 

diff --git a/scss/editor.scss b/scss/editor.scss
@@ -185,3 +185,7 @@ label.form-check .form-check-input {
     margin-left: auto;
     margin-right: auto;
 }
+
+video, audio {
+	max-width:100%;
+}