simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed divider re-render and added new design tip

Browse Source
This commit is contained in:
Simon
2025-08-23 15:03:30 -04:00
parent daa663059e
commit cc50553f14
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+13 -7
View File
@@ -195,7 +195,7 @@
.menuHeader { .menuHeader {
text-align: center; text-align: center;
width: 100%; width: 100%;
font-style: italic; font-style: normal;
font-weight: bold; font-weight: bold;
padding: 1rem 0; padding: 1rem 0;
margin: 0; margin: 0;
@@ -354,7 +354,7 @@
</p> </p>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>tips and tricks</p> <p>tips and design tricks</p>
<p class="expandedMenuIndicator">+</p> <p class="expandedMenuIndicator">+</p>
</div> </div>
<div class="expandableMenu"> <div class="expandableMenu">
@@ -377,6 +377,12 @@
<br /> then, add new sections to the layer without entering any label/link information. <br /> then, add new sections to the layer without entering any label/link information.
customize the layer's section text to your liking and place wherever you want. customize the layer's section text to your liking and place wherever you want.
</p> </p>
<p>
<u>vertical / horizontal lines</u>:<br />
create a bookmark layer and set the border to your desired line width. remove the
clock, date, and divider so that it's just an empty container, then shrink the container
all the way left or up so that it becomes just a line!
</p>
</div> </div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)"> <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
@@ -854,14 +860,14 @@
"beforeend", "beforeend",
` `
<div class="movable container" id=${this.id}> <div class="movable container" id=${this.id}>
<div> <div class="autoMarginHolder">
<div id=${this.id + "-header"} class="containerHeader"> <div id=${this.id + "-header"} class="containerHeader">
<div id=${this.id + "-date"}></div> <div id=${this.id + "-date"}></div>
<div id=${this.id + "-clock"}></div> <div id=${this.id + "-clock"}></div>
</div> </div>
<hr id=${this.id + "-divider"} /> <hr id=${this.id + "-divider"} />
<div id=${this.id + "-bookmarks"} ></div> <div id=${this.id + "-bookmarks"} ></div>
<div> </div>
</div> </div>
` `
); );
@@ -3229,10 +3235,10 @@
document.getElementById(containerId + "-divider").style.display = document.getElementById(containerId + "-divider").style.display =
checkboxChanged.target.checked ? "block" : "none"; checkboxChanged.target.checked ? "block" : "none";
if (checkboxChanged.target.checked && Object.keys(container.sections).length > 0) { if (!checkboxChanged.target.checked && Object.keys(container.sections).length > 0) {
document.getElementById(containerId + "-clock").style.marginBottom = "18px"; document.getElementById(containerId + "-header").style.marginBottom = "18px";
} else { } else {
document.getElementById(containerId + "-clock").style.marginBottom = "0px"; document.getElementById(containerId + "-header").style.marginBottom = "0px";
} }
} }