Skip to content

Commit

Permalink
Fixed chrome bug that adds div elements inside paragraphs on enter ke…
Browse files Browse the repository at this point in the history 
…y, media modal styles improvement.
  • Loading branch information
@givanz
givanz committed Sep 23, 2024
1 parent 838b155 commit 1a7e4a7
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 53 deletions.
40 changes: 31 additions & 9 deletions css/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17809,6 +17809,7 @@ https://github.com/givanz/VvvebJs
.tree > ol li.file .file-actions {
display: none;
position: absolute;
background-color: var(--bs-body-bg);
top: 0px;
right: 2px; }
.tree > ol li.file .file-actions .btn {
Expand All @@ -17819,7 +17820,9 @@ https://github.com/givanz/VvvebJs
border-radius: 4px;
--bs-btn-border-color: rgba(var(--bs-link-color-rgb), 0.25); }
.tree > ol li.page > label {
background-image: url(../libs/builder/icons/panel.svg); }
background-image: url(../libs/builder/icons/post.svg); }
.tree > ol li.url > label {
background-image: url(../../../js/vvvebjs/icons/panel.svg); }
.tree > ol li input {
position: absolute;
left: 0;
Expand Down Expand Up @@ -18818,7 +18821,7 @@ li[data-type] {
.sections-container {
width: 100%;
background: var(--bs-body-bg);
padding-top: 1rem; }
padding: 1rem; }
.sections-container > div.section-item {
box-shadow: 0px 0px 1px 0px var(--bs-primary);
box-shadow: 0px 0px 1px 0px rgba(18, 83, 205, 0.7), 0px 0px 5px 0px rgba(18, 83, 205, 0.1);
Expand Down Expand Up @@ -18860,7 +18863,7 @@ li[data-type] {
.sections-container > div.section-item .controls .info {
margin-left: 0.2rem; }
.sections-container > div.section-item .controls .info .name {
font-size: 13px; }
font-size: 12px; }
.sections-container > div.section-item .controls .info .type {
font-size: 12px; }
.sections-container > div.section-item .controls .buttons {
Expand Down Expand Up @@ -19166,7 +19169,8 @@ div.section, .header > ol {

.form-select {
-webkit-appearance: none;
-moz-appearance: none; }
-moz-appearance: none;
box-shadow: rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px; }

input[type="number"] {
-moz-appearance: textfield;
Expand Down Expand Up @@ -19216,6 +19220,10 @@ input[type="number"]:focus {
.form-control::placeholder {
opacity: 0.7; }

.form-control {
font-size: inherit;
box-shadow: rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px inset; }

.btn-link:hover {
text-decoration: none; }

Expand Down Expand Up @@ -19756,7 +19764,10 @@ body > section, body > footer, body > header {
.btn-icon {
font-weight: 500;
text-transform: capitalize;
margin-bottom: 0px; }
margin-bottom: 0px;
box-shadow: 1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), 1px 1px 2px 1px rgba(var(--bs-body-bg-rgb), 0.15) inset;
border: none;
position: relative; }
.btn-icon i:first-child {
display: inline-block;
margin-right: 0.3rem;
Expand All @@ -19766,21 +19777,32 @@ body > section, body > footer, body > header {
box-shadow: 0px 0px 1px 0px #3478f2;
background-color: var(--bs-body-bg); }
.btn-icon.btn-outline-primary:hover {
color: var(--bs-link-color-rgb);
color: var(--bs-link-color);
background: #f8f9fa; }
.btn-icon.btn-outline-primary i {
background: transparent; }
.btn-icon.btn-outline-secondary {
box-shadow: 0px 0px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset;
box-shadow: 1px 1px 1px 0px rgba(var(--bs-body-color-rgb), 0.07); }
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(var(--bs-body-color-rgb), 0.12) 0px 1px 2px 0px, rgba(var(--bs-body-color-rgb), 0.08) 0px 0px 0px 1px; }
.btn-icon.btn-secondary {
box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; }
.btn-icon.btn-secondary i {
background: transparent; }
.btn-icon.btn-primary {
box-shadow: -1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), -1px 1px 2px 0px rgba(var(--bs-body-bg-rgb), 0.15) inset; }
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(var(--bs-primary-rgb), 0.4) 0px 1px 2px 0px, rgba(var(--bs-primary-rgb), 0.8) 0px 0px 0px 1px; }
.btn-icon.btn-primary i {
/*background: rgba(var(--bs-body-bg-rgb), 0.1);*/ }
.btn-icon:after {
content: ".";
background-image: linear-gradient(rgba(var(--bs-body-bg-rgb), 1), rgba(var(--bs-body-bg-rgb), 0));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.16; }
.btn-icon.btn-outline-secondary:after, .btn-icon.btn-outline-primary:after {
background-image: linear-gradient(rgba(var(--bs-body-color-rgb), 0), rgba(var(--bs-body-color-rgb), 1));
opacity: 0.03; }

label.form-check .form-check-input {
float: none;
Expand Down
2 changes: 1 addition & 1 deletion demo/landing
Submodule landing updated 82 files
+2 −1 about.html
+2 −1 blank-breadcrumb.html
+2 −1 blank.html
+4 −2 cart/cart.html
+2 −1 cart/compare.html
+95 −85 checkout/checkout.html
+2 −1 checkout/confirm.html
+2 −1 checkout/order.html
+2 −1 contact.html
+10 −9 content/archive.html
+10 −9 content/category.html
+10 −9 content/index.html
+2 −1 content/page.html
+2 −1 content/post-image-header.html
+2 −1 content/post-image-hero.html
+2 −1 content/post.html
+2 −1 content/tag.html
+2 −1 content/user.html
+7 −2 css/admin-post-editor.css
+6 −0 css/custom.css
+11 −5 css/style.bundle.css
+7 −2 css/style.css
+3 −3 download.html
+3 −3 email/order/new.html
+2 −1 error404.html
+2 −1 error500.html
+2 −1 index-blog.html
+2 −1 index-excerpts.html
+1 −4 index-landing.html
+3 −4 index-nav-hero.html
+2 −1 index-no-sidebar.html
+4 −5 index-slider.html
+2 −1 index.coming-soon.html
+3 −4 index.html
+2 −1 index.maintenance.html
+2 −1 portfolio.html
+2 −1 pricing.html
+284 −262 product/category.html
+2 −1 product/manufacturer.html
+2 −1 product/product.html
+2 −1 product/vendor.html
+1 −1 scss/_base.scss
+1 −1 scss/sections/navigation/navigation-1.scss
+1 −1 scss/sections/navigation/navigation-2.scss
+1 −1 scss/sections/navigation/navigation-3.scss
+2 −1 scss/sections/navigation/navigation-4.scss
+2 −1 search/index.html
+96 −105 sections/sections.js
+2 −1 services.html
+2 −1 src/_includes/cart-dropdown.html
+2 −1 src/cart/cart.html
+3 −2 src/checkout/_checkout-cart-summary.html
+47 −43 src/checkout/_payment.html
+49 −45 src/checkout/_shipping.html
+1 −1 src/content/archive.html
+1 −1 src/content/category.html
+1 −1 src/content/index.html
+3 −3 src/email/order/new.html
+7 −6 src/product/_sidebar.html
+0 −1 src/sections/hero/hero-1.html
+1 −1 src/sections/hero/hero-3.html
+1 −1 src/sections/hero/hero-6.html
+1 −1 src/sections/hero/hero-7.html
+2 −2 src/sections/hero/hero-slider.html
+8 −13 src/user/downloads.html
+2 −1 user/address.html
+2 −1 user/address/edit.html
+2 −1 user/comments.html
+10 −14 user/downloads.html
+2 −1 user/edit.html
+2 −1 user/index.html
+2 −1 user/login.html
+2 −1 user/order-tracking.html
+2 −1 user/order.html
+2 −1 user/orders.html
+2 −1 user/orders/order.html
+2 −1 user/profile.html
+2 −1 user/reset.html
+2 −1 user/reset/reset.html
+2 −1 user/return-form.html
+2 −1 user/signup.html
+2 −1 user/wishlist.html
16 changes: 14 additions & 2 deletions libs/builder/builder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -764,6 +764,16 @@ Vvveb.WysiwygEditor = {
e.preventDefault();
return false;
});

doc.addEventListener('keydown', event => {
if (event.key === 'Enter') {
let target = event.target.closest("[contenteditable]");
if (target) {
doc.execCommand('insertLineBreak');
event.preventDefault();
}
}
})
},

undo: function(element) {
Expand Down Expand Up @@ -2531,8 +2541,10 @@ Vvveb.Gui = {
});
};

form.removeEventListener("submit", submitForm);
form.addEventListener("submit", submitForm);
if (!form.dataset.init) {
form.addEventListener("submit", submitForm);
form.dataset.init = true;
}
},

setDesignerMode : function () {
Expand Down
37 changes: 23 additions & 14 deletions libs/media/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@

.filemanager .breadcrumbs {
color: var(--bs-primary-text);
margin-left:20px;
font-size: 1.2rem;
//font-size: 1.2rem;
//font-weight: 500;
line-height: 35px;
}
Expand All @@ -31,12 +30,12 @@
}

.filemanager .breadcrumbs a:hover {
text-decoration: underline;
color: var(--bs-link-color);
}

.filemanager .breadcrumbs .arrow {
color: var(--bs-border-color);
font-size: 24px;
color: var(--bs-secondary-border-subtle);
//font-size: 24px;
font-weight: 500;
line-height: 20px;
}
Expand Down Expand Up @@ -277,12 +276,11 @@
}

.filemanager .nothingfound {
background-color: #373743;
background-color: var(--bs-light-border-subtle);
/*background-color: rgba(var(--bs-primary-rgb), 0.1);*/
border:1px solid var(--bs-primary-bg-subtle);
width: 23em;
height: 21em;
margin: 0 auto;
display: none;
border-radius:20px;
text-align:center;
-webkit-animation: showSlowlyElement 700ms; /* Chrome, Safari, Opera */
Expand All @@ -291,14 +289,20 @@

.filemanager .nothingfound .nofiles {
margin: 30px auto;
top: 3em;
border-radius: 50%;
position:relative;
background-color: #d72f6e;
background-color: var(--bs-primary-bg-subtle);
width: 11em;
height: 11em;
line-height: 11.4em;
line-height: 15em;
}

.filemanager .nothingfound .nofiles i {
font-size: 7rem;
transform: rotate(270deg);
line-height: 1rem;
}
/*
.filemanager .nothingfound .nofiles:after {
content: 'x';
position: absolute;
Expand All @@ -309,6 +313,7 @@
font-weight: 600;
right: 0;
}
*/

.filemanager .nothingfound span {
margin: 0 auto auto;
Expand Down Expand Up @@ -403,7 +408,9 @@
.icon.folder:before {
content: '';
float: left;
background-color: rgba(var(--bs-primary-rgb), 0.5);
//background-color: rgba(var(--bs-primary-rgb), 0.5);
background:linear-gradient(var(--bs-primary-bg-subtle), rgba(var(--bs-primary-rgb), 0.4));
background:linear-gradient(var(--bs-primary-border-subtle), rgba(var(--bs-primary-rgb), 0.6));

width: 1.5em;
height: 0.45em;
Expand All @@ -421,11 +428,13 @@
float: left;
clear: left;

background-color: rgba(var(--bs-primary-rgb), 1);
//background-color: rgba(var(--bs-primary-rgb), 1);
//background-color: var(--bs-primary-border-subtle);
background:linear-gradient(var(--bs-primary-border-subtle), rgba(var(--bs-primary-rgb), 0.6));
width: 3em;
height: 2.25em;

border-radius: 0.1em;
border-radius: 0.2em;
}
.icon.folder.full:before {
height: 0.55em;
Expand Down
41 changes: 27 additions & 14 deletions libs/media/media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ class MediaModal {
<div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="MediaModalLabel">Media</h5>
<h5 class="modal-title fw-normal" id="MediaModalLabel">Media</h5>
<button type="button" class="btn btn-sm" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="la la-times la-lg"></i></span>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<!-- <span aria-hidden="true"><i class="la la-times la-lg"></i></span> -->
</button>
</div>
<div class="modal-body">
Expand All @@ -30,23 +30,23 @@ class MediaModal {
<div class="top-right d-flex justify-content-between">
<div class="align-left">
<div class="">
<div class="breadcrumbs"></div>
</div>
<div class="align-right">
<div class="">
<div class="search">
<input type="search" id="media-search-input" placeholder="Find a file.." />
</div>
<button class="btn btn-outline-secondary btn-sm btn-icon me-5 float-end border-secondary-subtle"
<button class="btn btn-outline-secondary btn-sm btn-icon me-5 float-end"
data-bs-toggle="collapse"
data-bs-target=".upload-collapse"
aria-expanded="false"
>
<i class="la la-cloud-upload-alt la-lg"></i>
Upload new file
<i class="la la-upload la-lg"></i>
Upload file
</button>
</div>
Expand Down Expand Up @@ -75,8 +75,16 @@ class MediaModal {
<ul class="data" id="media-files"></ul>
<div class="nothingfound">
<div class="nofiles"></div>
<span>No files here.</span>
<div class="nofiles">
<i class="la la-folder-open"></i>
</div>
<div>No files here.</div>
<div class="mt-4">
<button class="btn btn-outline-secondary btn-sm btn-icon" data-bs-toggle="collapse" data-bs-target=".upload-collapse" aria-expanded="false">
<i class="la la-upload la-lg"></i>
Upload file
</button>
</div>
</div>
</div>
</div>
Expand All @@ -89,8 +97,14 @@ class MediaModal {
</div>
<div class="align-right">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary save-btn">Add selected</button>
<button type="button" class="btn btn-secondary btn-icon me-1" data-bs-dismiss="modal">
<i class="la la-times"></i>
<span>Cancel</span>
</button>
<button type="button" class="btn btn-primary btn-icon save-btn">
<i class="la la-check"></i>
<span>Add selected</span>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -250,7 +264,7 @@ class MediaModal {
let _search = this;

_search.querySelectorAll('span').forEach(function (el,i) { el.style.display = "none";});
search.style.display = "";
search.style.display = "block";
search.focus();

});
Expand Down Expand Up @@ -542,7 +556,6 @@ _

fetch(deleteUrl, {method: "POST", body: {file}})
.then((response) => {
console.log(response);
if (!response.ok) { throw new Error(response) }
return response.text()
})
Expand Down
14 changes: 8 additions & 6 deletions scss/_builder.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1695,7 +1695,7 @@ li[data-type]
.sections-container {
width:100%;
background:var(--bs-body-bg);
padding-top:1rem;
padding:1rem;

> div.section-item {

Expand Down Expand Up @@ -1752,7 +1752,7 @@ padding-top:1rem;
.info {
margin-left:0.2rem;
.name {
font-size: 13px;
font-size: 12px;
}
.type {
font-size: 12px;
Expand Down Expand Up @@ -2056,6 +2056,7 @@ div.section {
.form-select {
-webkit-appearance: none;
-moz-appearance: none;
box-shadow:rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px;
}


Expand Down Expand Up @@ -2131,9 +2132,10 @@ input[type="number"]:focus {
opacity:0.7;
}

.form-control, .form-select {
//box-shadow: 1px 1px 3px 0px rgba(var(--bs-body-color-rgb), 0.05) inset;
//background-color:rgba(var(--bs-secondary-color-rgb), 0.01);
.form-control
{
font-size:inherit;
box-shadow:rgba(var(--bs-body-color-rgb), 0.08) 0px 1px 2px 0px inset;
}

.btn-link:hover {
Expand Down Expand Up @@ -2590,7 +2592,7 @@ img.preview {
min-height: 250px;
height: 500px;
resize: both;
overflow: hidden;
overflow: hidden;
box-shadow: 0px 1px 5px 0px rgba(var(--bs-body-color-rgb), 0.15);
background: var(--bs-body-bg);

Expand Down
Loading

0 comments on commit 1a7e4a7

Please sign in to comment.