better css for expandable menu / help tab implemented
This commit is contained in:
+145
-112
@@ -141,16 +141,21 @@
|
||||
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 0;
|
||||
padding: .5rem 0 .5rem 0;
|
||||
padding: .5rem 0rem .5rem .5rem;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.expandableMenuToggle.active, .expandableMenuToggle:hover {
|
||||
background-color: rgba(213, 205, 205, 1);
|
||||
}
|
||||
.expandedMenuIndicator {
|
||||
margin: 0 1rem 0 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.expandableMenu {
|
||||
display: none;
|
||||
padding: 0 1rem;
|
||||
padding: 1rem 0 0 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-left: 4px solid rgba(213, 205, 205);
|
||||
}
|
||||
@@ -160,6 +165,7 @@
|
||||
width: 100%;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
padding: 1rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -195,6 +201,10 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#noContainerWarning {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 4rem;
|
||||
}
|
||||
@@ -244,8 +254,7 @@
|
||||
<a id="editToggle" onClick="toggleEditMode()" style="align-self: flex-end"
|
||||
>edit page
|
||||
</a>
|
||||
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="settingsContainer" class="movable settingsContainer hidden">
|
||||
<div id="tabList">
|
||||
@@ -267,62 +276,107 @@
|
||||
- modification hardcoded
|
||||
-->
|
||||
<div id="instructionsForm">
|
||||
<p id="helpText">
|
||||
<p>
|
||||
you are now editing the page!<br /><br />
|
||||
this is the settings box. there are various tabs containing various
|
||||
customization options for your startpage experience. you can create
|
||||
and categorize bookmarks, customize the bookmark box to your taste,
|
||||
change the wallpaper, and add + maniuplate any image you want!<br /><br />
|
||||
<b>[ <i>let it be known</i> ]</b><br />
|
||||
<i
|
||||
>your changes will only be saved when you stop editing the page.
|
||||
to cancel your live edits, refresh the page without hitting
|
||||
save.</i
|
||||
><br /><br />
|
||||
<b>[ <i>bookmark tips</i> ]</b><br />
|
||||
to group bookmarks together, just enter them with the same section.
|
||||
bookmarks without a section will stay at the top. you can remove
|
||||
individual bookmarks or whole sections, and sections can be
|
||||
rearranged. there's also a button in this menu to full reset.<br /><br />
|
||||
<b>[ <i>customization tips</i> ]</b><br />
|
||||
everything on the screen can be dragged around and resized. left
|
||||
click and drag to move, right click and drag to resize!<br /><br />
|
||||
you can add as many images to the background and resize them as you
|
||||
wish, but they can only be added via URL. i have provided a quick
|
||||
link to a place to upload your own images if you have specific
|
||||
things in mind, but you can also make a beautiful collage of random
|
||||
photographs you find without using any disk space.<br /><br />
|
||||
<b>[ <i>changing font</i> ]</b><br />
|
||||
|
||||
this is the settings box - there are various tabs containing various
|
||||
customization options for your startpage experience.<br /><br />
|
||||
|
||||
this box is adjustable, just like every layer you add to the page.
|
||||
you can drag it around the page, and dragging with right click will
|
||||
adjust the size of the layer.<br /><br />
|
||||
|
||||
on the "layers" tab, you can add two types of layers to the page:
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
<b>bookmark layer:</b><br />a customizable box that can serve as a clock,
|
||||
tell you the date, and hold bookmarks all at once. it can also just be
|
||||
one of those things.<br /><br />to group a layer's bookmarks together, enter
|
||||
links all with the same "section". uncategorized (no section) bookmarks
|
||||
will stay at the top.
|
||||
</li><br />
|
||||
<li>
|
||||
<b>image layer:</b><br />paste any URL that points directly at an image
|
||||
(right click on a picture on any website and click "copy link to image")
|
||||
to add it to the page.<br /><br />use "free transform" in the "global
|
||||
settings" tab to change the image resizing mode when customizing the page.
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
your changes will be saved to the page when you exit editing mode.<br /><br />
|
||||
if you've made edits you wish to undo, refresh the page without disabling
|
||||
editing mode.<br /><br />
|
||||
|
||||
that concludes the basics. there's some more advanced information below:
|
||||
</p>
|
||||
|
||||
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
|
||||
<p>sharing / stashing your work</p>
|
||||
<p class="expandedMenuIndicator">+</p>
|
||||
</div>
|
||||
<div class="expandableMenu">
|
||||
<p>
|
||||
you can export your entire current page's setup to your clipboard in the
|
||||
"import / export" tab. open a text file and paste the contents to store
|
||||
your theme for later or for sharing with others.<br /><br />
|
||||
|
||||
to load in a theme, simply paste the output of the export button into the
|
||||
"import" input, and refresh the page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
|
||||
<p>setting fonts</p>
|
||||
<p class="expandedMenuIndicator">+</p>
|
||||
</div>
|
||||
<div class="expandableMenu">
|
||||
<p>
|
||||
you can use any font that is available on
|
||||
<a href="https://fonts.google.com/" target="blank">google fonts</a>.
|
||||
FYI, if you have multiple fonts selected only the first one will be
|
||||
loaded, and it will be the regular version (if there are variants of
|
||||
the font)<br /><br />
|
||||
to load a font:<br />
|
||||
1.) on google fonts, click on a font you like, press the "get font"
|
||||
button, and then press the "get embed code" button. <br />2.) under
|
||||
the "web" tab (you are already probably on it), copy the stuff
|
||||
under: "embed code in the <head> of your html" (it should be a
|
||||
few lines starting with <link>)<br />3.) paste contents into
|
||||
the "change font" input, found on the "container" tab of this
|
||||
floating menu.<br /><br /><b>[ <i>back-up themes!</i> ]</b><br />
|
||||
you can export your entire current setup to import again later (save
|
||||
ur moodboards or share with friends). this is primarily useful
|
||||
because everything for this page is stored as a cookie. so, if you
|
||||
reset your browser history or cache, your startpage will be lost!!
|
||||
unless you have it backed up 8]
|
||||
<br /><br />
|
||||
clicking 'export data' will fill your clipboard with your currently
|
||||
saved data (make sure you've saved your changes before exporting),
|
||||
simply paste the contents into a text file for safekeeping. to load
|
||||
a saved configuration, just paste the exported text and hit
|
||||
import.<br /><br />
|
||||
if you somehow lose your bookmark box off-screen, use the "reset box
|
||||
customization" options to get it back. you will lose your other
|
||||
customizations tho :[<br /><br />
|
||||
|
||||
beware, if you have multiple font families selected (it keeps track of
|
||||
all of the fonts you press "get font" on), only the first one will be
|
||||
loaded. also, only regular versions of fonts are supported.<br /><br />
|
||||
|
||||
to load a font:<br />
|
||||
|
||||
1.) on google fonts, open a font you like, and press the "get font"
|
||||
button. then, press the "get embed code" button.<br /><br />
|
||||
|
||||
2.) there will be a section on the right with various tabs ("web",
|
||||
"android", "ios", ..) under the "web" tab (you are already probably
|
||||
on it), click the "copy code" button under the option titled:
|
||||
"embed code in the <head> of your html" (it should be a
|
||||
few lines starting with "<link ...", right at the very top)<br /><br />
|
||||
|
||||
3.) paste copied contents into the "change font" input, found on the desired
|
||||
layer's "text options"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
|
||||
<p>tips and tricks</p>
|
||||
<p class="expandedMenuIndicator">+</p>
|
||||
</div>
|
||||
<div class="expandableMenu">
|
||||
<p>
|
||||
there are some keyboard shortcuts for your convenience:<br />
|
||||
"e" = enables editing mode<br />
|
||||
esc = disables editing mode (and saves page)<br />
|
||||
"1"-"4" = jump between settings box tabs<br />
|
||||
</p>
|
||||
<p>
|
||||
floating text:<br />
|
||||
for floating text anywhere on the page,
|
||||
remove the border and set the background opacity of a layer to
|
||||
zero. then, add new sections to the bookmark list without any links.
|
||||
customize the layer's "section" text to your liking and place freely.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="containerForm" onsubmit="return false">
|
||||
<div>
|
||||
<h2 class="menuHeader">add bookmark layer</h2>
|
||||
@@ -346,7 +400,7 @@
|
||||
/>
|
||||
<input
|
||||
id="newImageContainerUrlInput"
|
||||
placeholder="direct url to image"
|
||||
placeholder="direct URL to image"
|
||||
style="width: 100%;"
|
||||
type="text"
|
||||
/>
|
||||
@@ -453,9 +507,6 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
todo: image for labels
|
||||
</body>
|
||||
|
||||
<script>
|
||||
@@ -734,7 +785,7 @@
|
||||
loadBookmarkListings() {
|
||||
if (Object.keys(this.sections).length == 0) {
|
||||
let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
|
||||
bookmarkListings.innerHTML = "(you have no bookmarks)";
|
||||
bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -835,9 +886,8 @@
|
||||
</div>
|
||||
<div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block;">
|
||||
|
||||
|
||||
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
|
||||
<p>+ ${this.name}: bookmarks</p>
|
||||
<p>${this.name}: bookmarks</p>
|
||||
<p class="expandedMenuIndicator">+</p>
|
||||
</div>
|
||||
<div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
|
||||
@@ -862,7 +912,7 @@
|
||||
id=${this.id + "-url-input"}
|
||||
type="text" name="url"
|
||||
placeholder="enter URL for bookmark"
|
||||
style="width: 20rem"
|
||||
style="width: 20rem;"
|
||||
/>
|
||||
<br />
|
||||
|
||||
@@ -882,7 +932,7 @@
|
||||
/>
|
||||
<br />
|
||||
|
||||
<button id=${this.id + "-add-link-button"} onclick="addLink(this)">add link</button>
|
||||
<button id=${this.id + "-add-link-button"} onclick="addLink(this)">add it</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1034,7 +1084,26 @@
|
||||
<input id=${this.id + "-settings-bg-alpha"} />
|
||||
</div>
|
||||
|
||||
<p class="menuHeader">border + shape</p>
|
||||
<p class="menuHeader">layer shape</p>
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-radius"}>roundness (0 = square, 90 = circle): </label>
|
||||
<input id=${this.id + "-settings-border-radius"} placeholder="" />
|
||||
</div>
|
||||
|
||||
<p class="menuHeader">border</p>
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-color"}>set border color: </label>
|
||||
<input id=${this.id + "-settings-border-color"} type="color" />
|
||||
</div>
|
||||
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-width"}>set border width (0px = no border): </label>
|
||||
<input id=${this.id + "-settings-border-width"} placeholder="0 for none" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<p class="menuHeader">shadow / glow</p>
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
|
||||
<input id=${this.id + "-settings-shadow-color"} type="color" />
|
||||
@@ -1044,22 +1113,7 @@
|
||||
<label>shadow opacity:</label>
|
||||
<input id=${this.id + "-settings-shadow-alpha"} />
|
||||
</div>
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-color"}>set border color: </label>
|
||||
<input id=${this.id + "-settings-border-color"} type="color" />
|
||||
</div>
|
||||
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-width"}>set border width (0 = no border): </label>
|
||||
<input id=${this.id + "-settings-border-width"} placeholder="0 for none" />
|
||||
</div>
|
||||
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-border-radius"}>container roundedness (0 = right angles): </label>
|
||||
<input id=${this.id + "-settings-border-radius"} placeholder="0 for square" />
|
||||
</div>
|
||||
|
||||
<p class="menuHeader">shadow / glow</p>
|
||||
<div class="containerOptionListing">
|
||||
<label for=${this.id + "-settings-shadow-x"}>x-offset (in px): </label>
|
||||
<input id=${this.id + "-settings-shadow-x"} placeholder="all 0 for none" />
|
||||
@@ -1698,40 +1752,6 @@
|
||||
JSON.parse(localStorage.getItem("containerMapValues")) || [];
|
||||
numberTotalContainers = containerMapValues.length;
|
||||
|
||||
|
||||
/** to ensure that container listings are rendered in order of zindex
|
||||
let tempContainerMap = new Map();
|
||||
for (let i = 0; i < numberTotalContainers; i++) {
|
||||
tempContainerMap.set(containerMapValues[i].id, {
|
||||
id: containerMapValues[i].id,
|
||||
name: containerMapValues[i].name,
|
||||
x: containerMapValues[i].x,
|
||||
y: containerMapValues[i].y,
|
||||
height: containerMapValues[i].height,
|
||||
width: containerMapValues[i].width,
|
||||
imageUrl: containerMapValues[i].imageUrl,
|
||||
containerSettings: containerMapValues[i].containerSettings,
|
||||
sections: containerMapValues[i].sections
|
||||
});
|
||||
}
|
||||
|
||||
for (let i = 1; i <= numberTotalContainers; i++) {
|
||||
let tempContainerData = tempContainerMap.get(zIndexMap.get(String(i)));
|
||||
console.log(tempContainerData);
|
||||
containerDataMap.set(tempContainerData.id, new Container(
|
||||
tempContainerData.id,
|
||||
tempContainerData.name,
|
||||
tempContainerData.x,
|
||||
tempContainerData.y,
|
||||
tempContainerData.height,
|
||||
tempContainerData.width,
|
||||
tempContainerData.imageUrl,
|
||||
tempContainerData.containerSettings,
|
||||
tempContainerData.sections
|
||||
));
|
||||
|
||||
}*/
|
||||
|
||||
for (let i = 0; i < numberTotalContainers; i++) {
|
||||
containerDataMap.set(containerMapValues[i].id, new Container(
|
||||
containerMapValues[i].id,
|
||||
@@ -1746,6 +1766,19 @@
|
||||
));
|
||||
}
|
||||
|
||||
/**
|
||||
if (numberTotalContainers == 0) {
|
||||
new Container(
|
||||
"container-0",
|
||||
"setup help",
|
||||
"15",
|
||||
"15",
|
||||
"150",
|
||||
"100",
|
||||
undefined,
|
||||
);
|
||||
}*/
|
||||
|
||||
|
||||
/** set up + load settings menu data */
|
||||
settingsMenuData = JSON.parse(
|
||||
|
||||
Reference in New Issue
Block a user