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

Settings styling

Browse Source
This commit is contained in:
glax 2024-10-22 18:32:20 +02:00
parent d621422ae3
commit 46ea39245e
2 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
Website/modules/Settings.tsx
View File

@ -154,38 +154,38 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
</div> </div>
</div> </div>
<div className="settings-section"> <div className="settings-section" >
LIBRARY CONNECTORS LIBRARY CONNECTORS
<div className="settings-section-content"> <div className="settings-section-content">
<div className="section-item"> <div className="section-item" connector-status={GetKomga() === undefined ? "Not Configured" : "Configured"}>
<span className="settings-section-title"> <span className="settings-section-title">
<img src='../media/connector-icons/komga.svg' alt="Komga Logo" /> <img src='../media/connector-icons/komga.svg' alt="Komga Logo"/>
Komga Komga
</span> </span>
<label htmlFor="komgaUrl"></label> <label htmlFor="komgaUrl">URL</label>
<input placeholder={GetKomga() != undefined ? GetKomga()?.baseUrl : "URL"} id="komgaUrl" type="text" /> <input placeholder={GetKomga() != undefined ? GetKomga()?.baseUrl : "URL"} id="komgaUrl" type="text" />
<label htmlFor="komgaUsername"></label> <label htmlFor="komgaUsername">Username</label>
<input placeholder={GetKomga() != undefined ? "***" : "Username"} id="komgaUsername" type="text" /> <input placeholder={GetKomga() != undefined ? "***" : "Username"} id="komgaUsername" type="text" />
<label htmlFor="komgaPassword"></label> <label htmlFor="komgaPassword">Password</label>
<input placeholder={GetKomga() != undefined ? "***" : "Password"} id="komgaPassword" type="password" /> <input placeholder={GetKomga() != undefined ? "***" : "Password"} id="komgaPassword" type="password" />
<div className="section-buttons-container"> <div className="section-actions">
<span>Test</span> <span>Test</span>
<span>Reset</span> <span>Reset</span>
<span>Apply</span> <span>Apply</span>
</div> </div>
</div> </div>
<div className="section-item"> <div className="section-item" connector-status={GetKavita() === undefined ? "Not Configured" : "Configured"}>
<span className="settings-section-title"> <span className="settings-section-title">
<img src='../media/connector-icons/kavita.png' alt="Kavita Logo" /> <img src='../media/connector-icons/kavita.png' alt="Kavita Logo"/>
Kavita Kavita
</span> </span>
<label htmlFor="kavitaUrl"></label> <label htmlFor="kavitaUrl">URL</label>
<input placeholder={GetKavita() != undefined ? GetKavita()?.baseUrl : "URL"} id="kavitaUrl" type="text" /> <input placeholder={GetKavita() != undefined ? GetKavita()?.baseUrl : "URL"} id="kavitaUrl" type="text" />
<label htmlFor="kavitaUsername"></label> <label htmlFor="kavitaUsername">Username</label>
<input placeholder={GetKavita() != undefined ? "***" : "Username"} id="kavitaUsername" type="text" /> <input placeholder={GetKavita() != undefined ? "***" : "Username"} id="kavitaUsername" type="text" />
<label htmlFor="kavitaPassword"></label> <label htmlFor="kavitaPassword">Password</label>
<input placeholder={GetKavita() != undefined ? "***" : "Password"} id="kavitaPassword" type="password"/> <input placeholder={GetKavita() != undefined ? "***" : "Password"} id="kavitaPassword" type="password"/>
<div className="section-buttons-container"> <div className="section-actions">
<span>Test</span> <span>Test</span>
<span>Reset</span> <span>Reset</span>
<span>Apply</span> <span>Apply</span>
@ -197,40 +197,40 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
<div className="settings-section"> <div className="settings-section">
NOTIFICATION CONNECTORS NOTIFICATION CONNECTORS
<div className="settings-section-content"> <div className="settings-section-content">
<div className="section-item"> <div className="section-item" connector-status={GetGotify() === undefined ? "Not Configured" : "Configured"}>
<span className="settings-section-title"> <span className="settings-section-title">
<img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo" /> <img src='../media/connector-icons/gotify-logo.png' alt="Gotify Logo"/>
Gotify Gotify
</span> </span>
<label htmlFor="gotifyUrl"></label> <label htmlFor="gotifyUrl">URL</label>
<input placeholder={GetGotify() != undefined ? GetGotify()?.endpoint : "URL"} id="gotifyUrl" type="text" /> <input placeholder={GetGotify() != undefined ? GetGotify()?.endpoint : "URL"} id="gotifyUrl" type="text" />
<label htmlFor="gotifyAppToken"></label> <label htmlFor="gotifyAppToken">AppToken</label>
<input placeholder={GetGotify() != undefined ? GetGotify()?.appToken : "AppToken"} id="gotifyAppToken" type="text" /> <input placeholder={GetGotify() != undefined ? GetGotify()?.appToken : "AppToken"} id="gotifyAppToken" type="text" />
<div className="section-buttons-container"> <div className="section-actions">
<span>Test</span> <span>Test</span>
<span>Reset</span> <span>Reset</span>
<span>Apply</span> <span>Apply</span>
</div> </div>
</div> </div>
<div className="section-item"> <div className="section-item" connector-status={GetLunasea() === undefined ? "Not Configured" : "Configured"}>
<span className="settings-section-title"> <span className="settings-section-title">
<img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo" /> <img src='../media/connector-icons/lunasea.png' alt="Lunasea Logo"/>
LunaSea LunaSea
</span> </span>
<label htmlFor="lunaseaWebhook"></label> <label htmlFor="lunaseaWebhook">Webhook id</label>
<input placeholder={GetLunasea() != undefined ? GetLunasea()?.id : "device/:id or user/:id"} id="lunaseaWebhook" type="text"/> <input placeholder={GetLunasea() != undefined ? GetLunasea()?.id : "device/:id or user/:id"} id="lunaseaWebhook" type="text"/>
<div className="section-buttons-container"> <div className="section-actions">
<span>Test</span> <span>Test</span>
<span>Reset</span> <span>Reset</span>
<span>Apply</span> <span>Apply</span>
</div> </div>
</div> </div>
<div className="section-item"> <div className="section-item" connector-status={GetNtfy() === undefined ? "Not Configured" : "Configured"}>
<span className="settings-section-title"> <span className="settings-section-title">
<img src='../media/connector-icons/ntfy.svg' alt="ntfy Logo"/> <img src='../media/connector-icons/ntfy.svg' alt="ntfy Logo"/>
Ntfy Ntfy
</span> </span>
<label htmlFor="ntfyEndpoint"></label> <label htmlFor="ntfyEndpoint">URL</label>
<input placeholder={GetNtfy() != undefined ? GetNtfy()?.endpoint : "URL"} id="ntfyEndpoint" type="text"/> <input placeholder={GetNtfy() != undefined ? GetNtfy()?.endpoint : "URL"} id="ntfyEndpoint" type="text"/>
<label htmlFor="ntfyUsername">Username</label> <label htmlFor="ntfyUsername">Username</label>
<input placeholder={GetNtfy() != undefined ? "***" : "Username"} id="ntfyUsername" type="text"/> <input placeholder={GetNtfy() != undefined ? "***" : "Username"} id="ntfyUsername" type="text"/>
@ -238,7 +238,7 @@ export default function Settings({backendConnected, apiUri, settings, changeSett
<input placeholder={GetNtfy() != undefined ? "***" : "Password"} id="ntfyPassword" type="password"/> <input placeholder={GetNtfy() != undefined ? "***" : "Password"} id="ntfyPassword" type="password"/>
<label htmlFor="ntfyTopic">Topic</label> <label htmlFor="ntfyTopic">Topic</label>
<input placeholder={GetNtfy() != undefined ? GetNtfy()?.topic : "Topic"} id="ntfyTopic" type="text"/> <input placeholder={GetNtfy() != undefined ? GetNtfy()?.topic : "Topic"} id="ntfyTopic" type="text"/>
<div className="section-buttons-container"> <div className="section-actions">
<span>Test</span> <span>Test</span>
<span>Reset</span> <span>Reset</span>
<span>Apply</span> <span>Apply</span>

27
Website/styles/settings.css
View File

@ -36,6 +36,7 @@
} }
.section-item { .section-item {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 22%; width: 22%;
@ -46,7 +47,15 @@
border-width: 1px; border-width: 1px;
border-color: lightgray; border-color: lightgray;
margin: 7px; margin: 7px;
padding: 5px; padding: 5px 5px 35px;
}
.section-item[connector-status="Not Configured"]{
border-color: var(--primary-color);
}
.section-item[connector-status="Configured"]{
border-color: green;
} }
.section-item > .settings-section-title { .section-item > .settings-section-title {
@ -65,3 +74,19 @@
border-radius: 5px; border-radius: 5px;
} }
.section-item .section-actions {
position: absolute;
bottom: 0;
display: flex;
justify-content: space-around;
margin: 5px;
width: 100%;
}
.section-actions > span {
border: 1px solid lightgray;
padding: 3px 5px 2px;
width: 10ch;
text-align: center;
border-radius: 3px;
}