Skip to content

style: update SCSS and VTL files for improved layout and functionality #34535

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicobytes merged 6 commits into from
Feb 9, 2026
Merged

style: update SCSS and VTL files for improved layout and functionality #34535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e922353
style: update SCSS and VTL files for improved layout and functionality
nicobytes Feb 6, 2026
23a1fbb
refactor: standardize VTL file parsing logic for custom fields
nicobytes Feb 6, 2026
29b0722
chore: remove Prettier configuration for VTL files
nicobytes Feb 6, 2026
46aac99
style: enhance OG preview button accessibility
nicobytes Feb 6, 2026
b1cad87
Merge branch 'main' into 32651-edit-mode-the-redirect-url-field-in-ed…
nicobytes Feb 9, 2026
f906bc5
fix: remove readonly attribute from redirect URL input field
nicobytes Feb 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .../fields/dot-edit-content-custom-field/components/native-field/native-field.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
padding-right: $spacing-6;
}

button:not(.p-button):not(.custom-select-button),
button:not(.p-button):not(.custom-select-button):not(.custom-button),
input[type="button"],
input[type="submit"],
input[type="reset"] {
Expand Down
34 changes: 17 additions & 17 deletions dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_new.vtl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script type="application/javascript">
DotCustomFieldApi.ready(() => {
const cachettlField = DotCustomFieldApi.getField('cachettl');
const cachettlbox = document.getElementById('cachettlbox');
let currentValue = cachettlField.getValue() || '';
if(currentValue === '') {
currentValue = $config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS",15);
cachettlField.setValue(currentValue);
}
cachettlbox.value = currentValue;
cachettlbox.addEventListener('change', () => {
cachettlField.setValue(cachettlbox.value);
});
});
DotCustomFieldApi.ready(() => {
const cachettlField = DotCustomFieldApi.getField("cachettl");
const cachettlbox = document.getElementById("cachettlbox");

let currentValue = cachettlField.getValue() || "";
if (currentValue === "") {
currentValue = $config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS", 15);
cachettlField.setValue(currentValue);
}

cachettlbox.value = currentValue;

cachettlbox.addEventListener("change", () => {
cachettlField.setValue(cachettlbox.value);
});
});
</script>
<input type="text" id="cachettlbox"/>
<input type="text" id="cachettlbox" />
33 changes: 18 additions & 15 deletions dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/cachettl_custom_field_old.vtl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<script type="application/javascript">
dojo.ready(function() {
var currentValue=dojo.byId('cachettl').value;
if(currentValue==="") {
currentValue=$config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS",15);
dojo.byId('cachettl').value=currentValue;
}
new dijit.form.TextBox({
name: "cachettlbox",
value: currentValue,
onChange: function() {
dojo.byId('cachettl').value=this.get('value');
}
},"cachettlbox");
});
dojo.ready(function () {
var currentValue = dojo.byId("cachettl").value;
if (currentValue === "") {
currentValue = $config.getIntProperty("DEFAULT_PAGE_CACHE_SECONDS", 15);
dojo.byId("cachettl").value = currentValue;
}
new dijit.form.TextBox(
{
name: "cachettlbox",
value: currentValue,
onChange: function () {
dojo.byId("cachettl").value = this.get("value");
},
},
"cachettlbox",
);
});
</script>
<input id="cachettlbox"/>
<input id="cachettlbox" />
278 changes: 141 additions & 137 deletions dotCMS/src/main/webapp/WEB-INF/velocity/static/htmlpage_assets/og_preview_new.vtl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,161 +1,165 @@
<style>
#ogPreview_tag {display: none;}
#ogPreview_tag {
display: none;
}

.card-wrapper {
width: 600px;
height: 395px;
border: solid 1px #d3d3d3;
overflow: hidden;
}
.img-wrapper {
height: 313px;
overflow: hidden;
}
#cardImage {
object-fit: cover;
object-position: center center;
width: 600px;
height: 313px;
}
.text-wrapper {
text-align: left;
padding: 10px 12px;
background-color: #f2f3f5;
line-height: 16.8px;
height: 83px;
}
#cardHost {
text-transform: uppercase;
margin: 0;
color: #606770;
font-size: 12px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 16px;
margin-bottom: 2px;
}
#cardTitle {
font-weight: bold;
margin: 0 0 0.15em;
font-size: 16px;
color: #1d2129;
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
#cardDescription {
color: #606770;
font-size: 14px;
line-height: 20px;
word-break: break-word;
}
.card-wrapper {
width: 600px;
height: 395px;
border: solid 1px #d3d3d3;
overflow: hidden;
}
.img-wrapper {
height: 313px;
overflow: hidden;
}
#cardImage {
object-fit: cover;
object-position: center center;
width: 600px;
height: 313px;
}
.text-wrapper {
text-align: left;
padding: 10px 12px;
background-color: #f2f3f5;
line-height: 16.8px;
height: 83px;
}
#cardHost {
text-transform: uppercase;
margin: 0;
color: #606770;
font-size: 12px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 16px;
margin-bottom: 2px;
}
#cardTitle {
font-weight: bold;
margin: 0 0 0.15em;
font-size: 16px;
color: #1d2129;
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
#cardDescription {
color: #606770;
font-size: 14px;
line-height: 20px;
word-break: break-word;
}

/* Dialog styles */
#ogPreview {
border: none;
border-radius: 4px;
padding: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
#ogPreview::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
}
.dialog-title {
margin: 0;
font-size: 18px;
font-weight: bold;
color: #1877f2;
}
.dialog-close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #606770;
padding: 0;
line-height: 1;
}
.dialog-close-btn:hover {
color: #1d2129;
}
/* Dialog styles */
#ogPreview {
border: none;
border-radius: 4px;
padding: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
#ogPreview::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #d3d3d3;
background-color: #fff;
}
.dialog-title {
margin: 0;
font-size: 18px;
font-weight: bold;
color: #1877f2;
}
.dialog-close-btn {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #606770;
padding: 0;
line-height: 1;
}
.dialog-close-btn:hover {
color: #1d2129;
}
</style>

<button id="ogPreviewButton">Preview</button>

<dialog id="ogPreview">
<div class="dialog-header">
<h2 class="dialog-title">Facebook</h2>
<button id="ogPreviewCloseBtn" class="dialog-close-btn">&times;</button>
</div>
<div class="card-wrapper">
<div class="img-wrapper"><img id="cardImage" src=""></div>
<div class="text-wrapper">
<div id="cardHost">$!{host.map.aliases}</div>
<div id="cardTitle"></div>
<div id="cardDescription"></div>
</div>
<div class="dialog-header">
<h2 class="dialog-title">Facebook</h2>
<button id="ogPreviewCloseBtn" type="button" class="dialog-close-btn" aria-label="Close preview">&times;</button>
</div>
Comment thread
nicobytes marked this conversation as resolved.
<div class="card-wrapper">
<div class="img-wrapper"><img id="cardImage" src="" /></div>
<div class="text-wrapper">
<div id="cardHost">$!{host.map.aliases}</div>
<div id="cardTitle"></div>
<div id="cardDescription"></div>
</div>
</div>
</dialog>

<script>
function truncateDescription(text, maxLength) {
if (text.length > maxLength) {
return text.substring(0, maxLength) + "...";
}
return text;
function truncateDescription(text, maxLength) {
if (text.length > maxLength) {
return text.substring(0, maxLength) + "...";
}
return text;
}

DotCustomFieldApi.ready(() => {
const ogTitleField = DotCustomFieldApi.getField('ogTitle');
const ogDescriptionField = DotCustomFieldApi.getField('ogDescription');
const ogImageField = DotCustomFieldApi.getField('ogImage');
DotCustomFieldApi.ready(() => {
const ogTitleField = DotCustomFieldApi.getField("ogTitle");
const ogDescriptionField = DotCustomFieldApi.getField("ogDescription");
const ogImageField = DotCustomFieldApi.getField("ogImage");

const dialog = document.getElementById('ogPreview');
const previewButton = document.getElementById('ogPreviewButton');
const closeButton = document.getElementById('ogPreviewCloseBtn');
const cardImage = document.getElementById('cardImage');
const cardTitle = document.getElementById('cardTitle');
const cardDescription = document.getElementById('cardDescription');
const dialog = document.getElementById("ogPreview");
const previewButton = document.getElementById("ogPreviewButton");
const closeButton = document.getElementById("ogPreviewCloseBtn");
const cardImage = document.getElementById("cardImage");
const cardTitle = document.getElementById("cardTitle");
const cardDescription = document.getElementById("cardDescription");

// Open dialog and populate preview
previewButton.addEventListener('click', () => {
const ogTitle = ogTitleField.getValue() || '';
const ogDescription = ogDescriptionField.getValue() || '';
// Open dialog and populate preview
previewButton.addEventListener("click", () => {
const ogTitle = ogTitleField.getValue() || "";
const ogDescription = ogDescriptionField.getValue() || "";

// Get image from ogImage field container
const imgInode = ogImageField.getValue() || '';
const imgUrl = imgInode ? `/dA/${imgInode}/asset/500w/50q/` : "https://placehold.co/600x400";
// Get image from ogImage field container
const imgInode = ogImageField.getValue() || "";
const imgUrl = imgInode
? `/dA/${imgInode}/asset/500w/50q/`
: "https://placehold.co/600x400";
Comment thread
nicobytes marked this conversation as resolved.

// Truncate description to 92 characters
const truncatedDescription = truncateDescription(ogDescription, 92);
// Truncate description to 92 characters
const truncatedDescription = truncateDescription(ogDescription, 92);

// Update preview card
cardImage.src = imgUrl;
cardTitle.textContent = ogTitle;
cardDescription.textContent = truncatedDescription;
// Update preview card
cardImage.src = imgUrl;
cardTitle.textContent = ogTitle;
cardDescription.textContent = truncatedDescription;

dialog.showModal();
});
dialog.showModal();
});

// Close dialog
closeButton.addEventListener('click', () => {
dialog.close();
});
// Close dialog
closeButton.addEventListener("click", () => {
dialog.close();
});

// Close dialog when clicking outside
dialog.addEventListener('click', (e) => {
if (e.target === dialog) {
dialog.close();
}
});
// Close dialog when clicking outside
dialog.addEventListener("click", (e) => {
if (e.target === dialog) {
dialog.close();
}
});
});
</script>
Loading
Loading