Fix loaders

Website/modules/Search.tsx

@@ -127,7 +127,7 @@ export default function Search({apiUri, jobInterval, closeSearch} : {apiUri: str
                     : selectedConnector.supportedLanguages.map(language => <option value={language} key={language}>{language}</option>)}
             </select>
             <button id="Searchbox-button" type="submit" onClick={ExecuteSearch} disabled={loading}>Search</button>
-            <Loader loading={loading} style={{width:"40px", height:"40px"}}/>
+            <Loader loading={loading} style={{width:"40px", height:"40px", zIndex: 50}}/>
         </div>
         <img alt="Close Search" id="closeSearch" src="../media/close-x.svg" onClick={closeSearch} />
         <div id="SearchResults">

Website/modules/Settings.tsx

@@ -1,7 +1,7 @@
 import IFrontendSettings from "./interfaces/IFrontendSettings";
 import '../styles/settings.css';
 import '../styles/react-toggle.css';
-import React, {LegacyRef, MutableRefObject, Ref, RefObject, useEffect, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import INotificationConnector, {NotificationConnectorItem} from "./interfaces/INotificationConnector";
 import NotificationConnectorFunctions from "./NotificationConnectorFunctions";
 import ILocalLibrary, {LocalLibraryItem} from "./interfaces/ILocalLibrary";
@@ -61,13 +61,13 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
                         <img alt="Close Settings" className="close" src="../media/close-x.svg" onClick={() => setShowSettings(false)}/>
                     </div>
                     <div id="SettingsPopUpBody" className="popupBody">
-                        <Loader loading={loadingBackend} style={{width: "64px", height: "64px", margin: "calc(sin(70)*(50% - 40px))", zIndex: 100, padding: 0, borderRadius: "50%", border: 0}}/>
+                        <Loader loading={loadingBackend} style={{width: "64px", height: "64px", margin: "25vh calc(sin(70)*(50% - 40px))", zIndex: 100, padding: 0, borderRadius: "50%", border: 0, minWidth: "initial", maxWidth: "initial"}}/>
                         <div className="settings-apiuri">
-                            <label>ApiUri</label>
+                            <h3>ApiUri</h3>
                             <input type="url" defaultValue={frontendSettings.apiUri} onChange={(e) => setFrontendSettings({...frontendSettings, apiUri:e.currentTarget.value})} id="ApiUri" />
                         </div>
                         <div className="settings-jobinterval">
-                            <label>Default Job-Interval</label>
+                            <h3>Default Job-Interval</h3>
                             <input type="time" min="00:30" max="23:59" defaultValue={dateToStr(new Date(frontendSettings.jobInterval))} onChange={(e) => setFrontendSettings({...frontendSettings, jobInterval: new Date(e.currentTarget.valueAsNumber-60*60*1000) ?? frontendSettings.jobInterval})}/>
                         </div>
                         <div className="settings-bwimages">
@@ -121,6 +121,18 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
                                            .finally(() => setLoadingBackend(false));
                                    }} />
                         </div>
+                        <div className="settings-useragent">
+                            <h3>User Agent</h3>
+                            <input type="text" defaultValue={backendSettings ? backendSettings.userAgent : ""}
+                                   onChange={(e) => {
+                                       if(backendSettings === null)
+                                           return;
+                                       setLoadingBackend(true);
+                                       BackendSettings.UpdateUserAgent(apiUri, e.currentTarget.value)
+                                           .then(() => setBackendSettings({...backendSettings, userAgent: e.currentTarget.value}))
+                                           .finally(() => setLoadingBackend(false));
+                                   }} />
+                        </div>
                         <div className="settings-requestLimits">
                             <h3>Request Limits:</h3>
                             <label htmlFor="Default">Default</label>
@@ -142,24 +154,16 @@ export default function Settings({ backendConnected, apiUri, frontendSettings, s
                             <input id="MangaCover" type="number" defaultValue={backendSettings ? backendSettings.requestLimits.MangaCover : 0} disabled={backendSettings ? false : !loadingBackend}
                                    onChange={(e) => ChangeRequestLimit(RequestType.MangaCover, e.currentTarget.valueAsNumber)} />
                         </div>
-                        <div className="settings-useragent">
-                            <label>User Agent</label>
-                            <input type="text" defaultValue={backendSettings ? backendSettings.userAgent : ""}
-                                   onSubmit={(e) => {
-                                       if(backendSettings === null)
-                                           return;
-                                       setLoadingBackend(true);
-                                       BackendSettings.UpdateUserAgent(apiUri, e.currentTarget.value)
-                                           .then(() => setBackendSettings({...backendSettings, userAgent: e.currentTarget.value}))
-                                           .finally(() => setLoadingBackend(false));
-                                   }} />
+                        <div>
+                            <h3>Notification Connectors:</h3>
+                            {notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} key={c.name} />)}
+                            <NotificationConnectorItem apiUri={apiUri} notificationConnector={null} key="New Notification Connector" />
+                        </div>
+                        <div>
+                            <h3>Local Libraries:</h3>
+                            {localLibraries.map(l => <LocalLibraryItem apiUri={apiUri} library={l} key={l.localLibraryId} />)}
+                            <LocalLibraryItem apiUri={apiUri} library={null} key="New Local Library" />
                         </div>
-                        <h3>Notification Connectors:</h3>
-                        {notificationConnectors.map(c => <NotificationConnectorItem apiUri={apiUri} notificationConnector={c} key={c.name} />)}
-                        <NotificationConnectorItem apiUri={apiUri} notificationConnector={null} key="New Notification Connector" />
-                        <h3>Local Libraries:</h3>
-                        {localLibraries.map(l => <LocalLibraryItem apiUri={apiUri} library={l} key={l.localLibraryId} />)}
-                        <LocalLibraryItem apiUri={apiUri} library={null} key="New Local Library" />
                     </div>
                 </div>
                 : null

Website/modules/interfaces/IManga.tsx

@@ -115,8 +115,8 @@ export function MangaItem({apiUri, mangaId, children} : {apiUri: string, mangaId
                     setSettingThreshold(true);
                     MangaFunctions.SetIgnoreThreshold(apiUri, mangaId, e.currentTarget.valueAsNumber).finally(()=>setSettingThreshold(false));
                 }} />
-                <Loader loading={settingThreshold} />
-                out of <span className="MangaItem-Props-Threshold-Available">{latestChapterAvailable ? latestChapterAvailable.chapterNumber : <Loader loading={loadingChapterStats}/>}</span>
+                <Loader loading={settingThreshold} style={{margin: "-10px -45px"}}/>
+                out of <span className="MangaItem-Props-Threshold-Available">{latestChapterAvailable ? latestChapterAvailable.chapterNumber : <Loader loading={loadingChapterStats} style={{margin: "-10px -35px"}} />}</span>
             </div>
             {children ? children.map(c => {
                 if(c instanceof Element)

Website/modules/interfaces/INotificationConnector.tsx

@@ -74,7 +74,7 @@ function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificati
                   disabled={notificationConnector != null} onChange={(e)=> setInfo({...info, body: e.currentTarget.value})}  />
         {notificationConnector != null ? null :
             (
-                <p className="NotificationConnectorItem-Explanation">Explanation Text</p>
+                <p className="NotificationConnectorItem-Explanation">Formatting placeholders: "%title" and "%text" can be placed in url, header-values and body and will be replaced when notifications are sent</p>
             )}
         <div className="NotificationConnectorItem-Headers">
             {headerElements}
@@ -93,7 +93,7 @@ function DefaultItem({apiUri, notificationConnector}:{apiUri: string, notificati
                 NotificationConnectorFunctions.CreateNotificationConnector(apiUri, info)
                     .finally(() => setLoading(false));
             }}>Add</button>
-            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"calc(sin(70)*(50% - 40px))"}}/>
+            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
         </>
     </div>
 }

Website/modules/interfaces/records/IGotifyRecord.tsx

@@ -45,7 +45,7 @@ export function GotifyItem ({apiUri} : {apiUri: string}) : ReactElement{
                 NotificationConnectorFunctions.CreateGotify(apiUri, record)
                     .finally(() => setLoading(false));
             }}>Add</button>
-            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"calc(sin(70)*(50% - 40px))"}}/>
+            <Loader loading={loading} style={{width:"40px",height:"40px"}}/>
         </>
     </div>;
 }

Website/modules/interfaces/records/ILunaseaRecord.tsx

@@ -30,7 +30,7 @@ export function LunaseaItem ({apiUri} : {apiUri: string}) : ReactElement{
                 NotificationConnectorFunctions.CreateLunasea(apiUri, record)
                     .finally(() => setLoading(false));
             }}>Add</button>
-            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"calc(sin(70)*(50% - 40px))"}}/>
+            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
         </>
     </div>;
 }

Website/modules/interfaces/records/INtfyRecord.tsx

@@ -56,7 +56,7 @@ export function NtfyItem ({apiUri} : {apiUri: string}) : ReactElement{
                 NotificationConnectorFunctions.CreateNtfy(apiUri, info)
                     .finally(() => setLoading(false));
             }}>Add</button>
-            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"calc(sin(70)*(50% - 40px))"}}/>
+            <Loader loading={loading} style={{width:"40px",height:"40px",margin:"25vh calc(sin(70)*(50% - 40px))"}}/>
         </>
     </div>;
 }

Website/styles/loader.css

@@ -12,6 +12,7 @@ span[is-loading="loading"] {
     position: fixed;
     background-color: var(--secondary-color);
     background-blend-mode: lighten;
+    margin: 25vh calc(sin(70)*(50% - 40px));
 }
 
 span[is-loading="loading"]:before,

Website/styles/settings.css

@@ -16,16 +16,33 @@
 
 #SettingsPopUpBody {
     display: flex;
-    flex-direction: column;
+    flex-flow: row wrap;
     justify-content: flex-start;
 }
 
 #SettingsPopUpBody > * {
-    margin: 5px auto;
+    margin: 5px 2px;
     border: 1px solid var(--primary-color);
-    padding: 5px;
-    width: calc(100% - 10px);
     border-radius: 5px;
+    padding: 0 5px;
+    max-width: calc(100% - 10px);
+    min-width: calc(30% - 10px);
+    flex-grow: 1;
+    flex-basis: 0;
+}
+
+#SettingsPopUpBody > * > .LocalLibraryFunctions, #SettingsPopUpBody > * > div > .NotificationConnectorItem {
+    border: 1px solid var(--primary-color);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 5px;
+    margin: 5px -5px -1px -5px;
+    padding: 5px;
+}
+
+#SettingsPopUpBody > *:has(.NotificationConnectorItem) {
+    width: 100%;
+    flex-basis: 100%;
 }
 
 #SettingsPopUpBody label {