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

working on improving the expandable menu aesthetic

Browse Source
This commit is contained in:
Simon
2025-07-21 21:32:55 -04:00
parent 0507359262
commit 6daf2c2416
1 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+39 -28
View File
@@ -57,7 +57,7 @@
} }
.settingsContainer { .settingsContainer {
background-color: rgba(173, 165, 165, 0.8); background-color: rgba(173, 165, 165, 0.9);
z-index: 999; z-index: 999;
border: solid black 2px; border: solid black 2px;
@@ -136,27 +136,39 @@
.expandableMenuToggle { .expandableMenuToggle {
cursor: pointer; cursor: pointer;
padding: 0px 18px; margin: 0 0 0 0;
padding: .5rem 0 .5rem 0;
width: 100%; width: 100%;
} }
.expandableMenuToggle.active, .expandableMenuToggle:hover { .expandableMenuToggle.active, .expandableMenuToggle:hover {
background-color: rgba(173, 165, 165, 0.8); background-color: rgba(213, 205, 205, 1);
} }
.expandableMenu { .expandableMenu {
display: none; display: none;
padding: 0 1rem; padding: 0 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
border-left: 4px solid black; border-left: 4px solid rgba(213, 205, 205);
} }
.menuHeader { .menuHeader {
text-align: center; text-align: center;
width: 100%; width: 100%;
background-color: rgba(173, 165, 165, 0.8);
font-style: italic; font-style: italic;
font-weight: bold;
margin: 0;
} }
.containerListing {
}
.manageButtons {
display: flex;
flex-direction: reow;
justify-content: space-between;
margin: 1rem 0rem;
}
.bookmarkListingContainer { .bookmarkListingContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -220,28 +232,14 @@
cursor: pointer; cursor: pointer;
} }
#imageRemovalWarning {
color: red;
size: 3rem;
font-weight: bold;
user-select: none;
z-index: 1000;
display: inline;
align-self: center;
background-color: black;
border: solid red 0.25rem;
padding: 0.25rem;
}
</style> </style>
</head> </head>
<body> <body>
<div style="display: flex; flex-direction: column"> <div style="display: flex; flex-direction: column">
<div id="imageRemovalWarning" class="hidden">
IMAGE REMOVAL MODE ACTIVE!!
</div>
<a id="editToggle" onClick="toggleEditMode()" style="align-self: flex-end" <a id="editToggle" onClick="toggleEditMode()" style="align-self: flex-end"
>edit page</a >edit page
> </a>
<br /> <br />
@@ -826,7 +824,20 @@
` `
<div class="containerListing" id=${this.id + "-container-listing"}> <div class="containerListing" id=${this.id + "-container-listing"}>
<p class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)" id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p> <div style="display: "flex"; flex-direction: row; justify-content: space-between">
<p class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)" id=${this.id + "--listing-header"}>[${this.containerSettings.zIndex}]: ${this.name}</p>
<p id=${this.id + "--listing-active-indicator"}>
` /**
Wait i probably can't do that because of how the toggle grabs the next element
*/ + `
</div>
<div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;"> <div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;">
<p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: bookmarks</p> <p class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">+ ${this.name}: bookmarks</p>
@@ -1053,13 +1064,13 @@
</div> </div>
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-between;"> <div class="manageButtons">
<div id=${this.id + "--manage-buttons"}> <div id=${this.id + "--manage-buttons"} >
${zindex == numberTotalContainers ? `` : upButtons} ${zindex == numberTotalContainers ? `` : upButtons}
${zindex == 1 ? `` : downButtons} ${zindex == 1 ? `` : downButtons}
</div> </div>
<div> <div>
<button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete</button> <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete layer</button>
</div> </div>
</div> </div>
</div> </div>
@@ -1220,13 +1231,13 @@
</div> </div>
</div> </div>
<div style="display: flex; flex-direction: row; justify-content: space-between;"> <div class="manageButtons">
<div id=${this.id + "--manage-buttons"}> <div id=${this.id + "--manage-buttons"}>
${zindex == numberTotalContainers ? `` : upButtons} ${zindex == numberTotalContainers ? `` : upButtons}
${zindex == 1 ? `` : downButtons} ${zindex == 1 ? `` : downButtons}
</div> </div>
<div> <div>
<button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete</button> <button id=${this.id + "--delete-button"} onclick="deleteContainer(this)">delete layer</button>
</div> </div>
</div> </div>
</div> </div>