Removed Sidebar
Moved settings tab to popup Added footer
This commit is contained in:
parent
8dbc5446ad
commit
653cb699d0
@ -18,12 +18,6 @@
|
||||
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
|
||||
</topbar>
|
||||
<viewport>
|
||||
<sidebar>
|
||||
<background-placeholder></background-placeholder>
|
||||
|
||||
<spacer></spacer>
|
||||
<p style="text-align: center">Made with Blåhaj 🦈</p>
|
||||
</sidebar>
|
||||
<content>
|
||||
<div id="addPublication">
|
||||
<p>+</p>
|
||||
@ -76,25 +70,33 @@
|
||||
</publication-information>
|
||||
</publication-viewer>
|
||||
</popup>
|
||||
|
||||
<popup id="settingsPopup">
|
||||
<blur-background id="blurBackgroundSettingsPopup"></blur-background>
|
||||
<settings>
|
||||
<span class="title">Settings</span>
|
||||
<div>
|
||||
<span class="title">Download Location:</span>
|
||||
<span id="downloadLocation"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">API-URI</span>
|
||||
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
|
||||
</div>
|
||||
<komga-settings>
|
||||
<span class="title">Komga</span>
|
||||
<div>Configured: <span id="komgaConfigured">✅❌</span></div>
|
||||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||||
<div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
|
||||
<input type="submit" value="Update" onclick="UpdateKomgaSettings()">
|
||||
</komga-settings>
|
||||
</settings>
|
||||
</popup>
|
||||
</viewport>
|
||||
|
||||
<settingstab id="settingstab">
|
||||
<span class="title">Download Location:</span>
|
||||
<span id="downloadLocation"></span>
|
||||
<span class="title">API-URI</span>
|
||||
<label for="settingApiUri"></label><input placeholder="https://" type="text" id="settingApiUri">
|
||||
<komga-settings>
|
||||
<span class="title">Komga</span>
|
||||
<div>Configured: <span id="komgaConfigured">✅❌</span></div>
|
||||
<label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
|
||||
<label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
|
||||
<label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
|
||||
<div><label for="komgaUpdateTime" style="margin-right: 5px;">Update Time</label><input id="komgaUpdateTime" type="time" value="00:01:00" step="10"></div>
|
||||
<input type="submit" value="Update" onclick="UpdateKomgaSettings()">
|
||||
</komga-settings>
|
||||
</settingstab>
|
||||
|
||||
<footer>
|
||||
<p style="text-align: center">Made with Blåhaj 🦈</p>
|
||||
</footer>
|
||||
<script src="apiConnector.js"></script>
|
||||
<script src="interaction.js"></script>
|
||||
</body>
|
||||
|
||||
@ -1,31 +1,11 @@
|
||||
const slideInRight = [
|
||||
{ right: "-20rem" },
|
||||
{ right: "0" }
|
||||
];
|
||||
|
||||
const slideInRightTiming = {
|
||||
duration: 200,
|
||||
iterations: 1,
|
||||
fill: "forwards",
|
||||
easing: "ease-out"
|
||||
}
|
||||
|
||||
const slideOutRightTiming = {
|
||||
direction: "reverse",
|
||||
duration: 200,
|
||||
iterations: 1,
|
||||
fill: "forwards",
|
||||
easing: "ease-in"
|
||||
}
|
||||
|
||||
let publications = [];
|
||||
let publications = [];
|
||||
let tasks = [];
|
||||
let toEditId;
|
||||
|
||||
const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
|
||||
const selectPublication = document.querySelector("#taskSelectOutput");
|
||||
const connectorSelect = document.querySelector("#connectors");
|
||||
const settingsTab = document.querySelector("#settingstab");
|
||||
const settingsPopup = document.querySelector("#settingsPopup");
|
||||
const settingsCog = document.querySelector("#settingscog");
|
||||
const selectRecurrence = document.querySelector("#selectReccurrence");
|
||||
const tasksContent = document.querySelector("content");
|
||||
@ -49,6 +29,7 @@ const settingApiUri = document.querySelector("#settingApiUri");
|
||||
|
||||
|
||||
settingsCog.addEventListener("click", () => OpenSettings());
|
||||
document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
|
||||
closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
|
||||
document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
|
||||
document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
|
||||
@ -139,15 +120,6 @@ function AddTaskClick(){
|
||||
HidePublicationPopup();
|
||||
}
|
||||
|
||||
let slideIn = true;
|
||||
function slide() {
|
||||
if (slideIn)
|
||||
settingsTab.animate(slideInRight, slideInRightTiming);
|
||||
else
|
||||
settingsTab.animate(slideInRight, slideOutRightTiming);
|
||||
slideIn = !slideIn;
|
||||
}
|
||||
|
||||
function ResetContent(){
|
||||
//Delete everything
|
||||
tasksContent.replaceChildren();
|
||||
@ -214,7 +186,11 @@ const fadeInTiming = {
|
||||
|
||||
function OpenSettings(){
|
||||
GetSettingsClick();
|
||||
slide();
|
||||
settingsPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
function HideSettings(){
|
||||
settingsPopup.style.display = "none";
|
||||
}
|
||||
|
||||
function GetSettingsClick(){
|
||||
|
||||
@ -90,22 +90,24 @@ viewport {
|
||||
flex-flow: row;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
sidebar{
|
||||
position: relative;
|
||||
width: 20rem;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 0 0 5px 0;
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
content {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
margin: 0 10px 10px 10px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -114,35 +116,28 @@ content {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
settingstab{
|
||||
position: absolute;
|
||||
right: -20rem;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
width: 20rem;
|
||||
height: calc(100% - var(--topbar-height) - 40px);
|
||||
margin-bottom: 10px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
settings {
|
||||
width: 50%;
|
||||
background-color: var(--accent-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
left: 25%;
|
||||
top: 25%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
settingstab > * {
|
||||
margin: 0 20px;
|
||||
#settingsPopup{
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
settingstab input {
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
margin: 2px 20px;
|
||||
settings > *{
|
||||
margin: 10px 5px;
|
||||
}
|
||||
|
||||
settingstab .title {
|
||||
font-size: 14pt;
|
||||
settings .title {
|
||||
font-weight: bolder;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
komga-settings {
|
||||
@ -153,7 +148,7 @@ komga-settings {
|
||||
}
|
||||
|
||||
komga-settings input {
|
||||
margin: 2px 0;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
#addPublication {
|
||||
@ -232,8 +227,8 @@ publication img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@ -268,7 +263,6 @@ addtask-window {
|
||||
max-height: 80%;
|
||||
padding: 0;
|
||||
background-color: var(--accent-color);
|
||||
z-index: 5;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -339,7 +333,7 @@ addtask-settings addtask-setting{
|
||||
}
|
||||
|
||||
#publicationViewerPopup{
|
||||
z-index: 6;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
publication-viewer{
|
||||
@ -372,7 +366,7 @@ publication-viewer img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
z-index: 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user