glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Removed Sidebar

Browse Source 
Moved settings tab to popup
Added footer
This commit is contained in:
glax 2023-05-25 15:34:10 +02:00
parent 8dbc5446ad
commit 653cb699d0
3 changed files with 62 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
Website/index.html
View File

@ -18,12 +18,6 @@
<img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog"> <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
</topbar> </topbar>
<viewport> <viewport>
<sidebar>
<background-placeholder></background-placeholder>
<spacer></spacer>
<p style="text-align: center">Made with Blåhaj 🦈</p>
</sidebar>
<content> <content>
<div id="addPublication"> <div id="addPublication">
<p>+</p> <p>+</p>
@ -76,25 +70,33 @@
</publication-information> </publication-information>
</publication-viewer> </publication-viewer>
</popup> </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> </viewport>
<footer>
<settingstab id="settingstab"> <p style="text-align: center">Made with Blåhaj 🦈</p>
<span class="title">Download Location:</span> </footer>
<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>
<script src="apiConnector.js"></script> <script src="apiConnector.js"></script>
<script src="interaction.js"></script> <script src="interaction.js"></script>
</body> </body>

40
Website/interaction.js
View File

@ -1,31 +1,11 @@
const slideInRight = [ let publications = [];
{ 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 tasks = []; let tasks = [];
let toEditId; let toEditId;
const searchPublicationQuery = document.querySelector("#searchPublicationQuery"); const searchPublicationQuery = document.querySelector("#searchPublicationQuery");
const selectPublication = document.querySelector("#taskSelectOutput"); const selectPublication = document.querySelector("#taskSelectOutput");
const connectorSelect = document.querySelector("#connectors"); const connectorSelect = document.querySelector("#connectors");
const settingsTab = document.querySelector("#settingstab"); const settingsPopup = document.querySelector("#settingsPopup");
const settingsCog = document.querySelector("#settingscog"); const settingsCog = document.querySelector("#settingscog");
const selectRecurrence = document.querySelector("#selectReccurrence"); const selectRecurrence = document.querySelector("#selectReccurrence");
const tasksContent = document.querySelector("content"); const tasksContent = document.querySelector("content");
@ -49,6 +29,7 @@ const settingApiUri = document.querySelector("#settingApiUri");
settingsCog.addEventListener("click", () => OpenSettings()); settingsCog.addEventListener("click", () => OpenSettings());
document.querySelector("#blurBackgroundSettingsPopup").addEventListener("click", () => HideSettings());
closetaskpopup.addEventListener("click", () => HideAddTaskPopup()); closetaskpopup.addEventListener("click", () => HideAddTaskPopup());
document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup()); document.querySelector("#blurBackgroundTaskPopup").addEventListener("click", () => HideAddTaskPopup());
document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup()); document.querySelector("#blurBackgroundPublicationPopup").addEventListener("click", () => HidePublicationPopup());
@ -139,15 +120,6 @@ function AddTaskClick(){
HidePublicationPopup(); HidePublicationPopup();
} }
let slideIn = true;
function slide() {
if (slideIn)
settingsTab.animate(slideInRight, slideInRightTiming);
else
settingsTab.animate(slideInRight, slideOutRightTiming);
slideIn = !slideIn;
}
function ResetContent(){ function ResetContent(){
//Delete everything //Delete everything
tasksContent.replaceChildren(); tasksContent.replaceChildren();
@ -214,7 +186,11 @@ const fadeInTiming = {
function OpenSettings(){ function OpenSettings(){
GetSettingsClick(); GetSettingsClick();
slide(); settingsPopup.style.display = "flex";
}
function HideSettings(){
settingsPopup.style.display = "none";
} }
function GetSettingsClick(){ function GetSettingsClick(){

62
Website/style.css
View File

@ -90,22 +90,24 @@ viewport {
flex-flow: row; flex-flow: row;
flex-wrap: nowrap; flex-wrap: nowrap;
flex-grow: 1; flex-grow: 1;
height: 100%;
overflow-y: scroll;
} }
sidebar{ footer {
position: relative;
width: 20rem;
margin-bottom: 20px;
border-radius: 0 0 5px 0;
display: flex; 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 { content {
position: relative; position: relative;
flex-grow: 1; flex-grow: 1;
margin: 0 10px 10px 10px;
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -114,35 +116,28 @@ content {
align-content: start; align-content: start;
} }
settingstab{ settings {
position: absolute; width: 50%;
right: -20rem; background-color: var(--accent-color);
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;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: nowrap; z-index: 10;
position: absolute;
left: 25%;
top: 25%;
border-radius: 5px;
} }
settingstab > * { #settingsPopup{
margin: 0 20px; z-index: 10;
} }
settingstab input { settings > *{
padding: 3px; margin: 10px 5px;
border-radius: 3px;
border: 0;
margin: 2px 20px;
} }
settingstab .title { settings .title {
font-size: 14pt;
font-weight: bolder; font-weight: bolder;
margin-top: 20px;
} }
komga-settings { komga-settings {
@ -153,7 +148,7 @@ komga-settings {
} }
komga-settings input { komga-settings input {
margin: 2px 0; margin: 3px 0;
} }
#addPublication { #addPublication {
@ -232,8 +227,8 @@ publication img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; max-width: 100%;
height: 100%; max-height: 100%;
z-index: 0; z-index: 0;
} }
@ -268,7 +263,6 @@ addtask-window {
max-height: 80%; max-height: 80%;
padding: 0; padding: 0;
background-color: var(--accent-color); background-color: var(--accent-color);
z-index: 5;
border-radius: 5px; border-radius: 5px;
} }
@ -339,7 +333,7 @@ addtask-settings addtask-setting{
} }
#publicationViewerPopup{ #publicationViewerPopup{
z-index: 6; z-index: 5;
} }
publication-viewer{ publication-viewer{
@ -372,7 +366,7 @@ publication-viewer img {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
min-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
border-radius: 5px; border-radius: 5px;
z-index: 0; z-index: 0;