fix(GUI): footer logo, OPDS login styles, TTS settings and voice sele…

…ction, misc. CSS fixes (PR #2105) * fix responsive in opds login page * add logo in footer + app name in header in library * move tts options in relevant popover * fix allpublications height with new footer + hide menu icon in opds publicationCards
edrlab · Apr 25, 2024 · 7e60288 · 7e60288
1 parent 31e72e4
commit 7e60288
Show file tree

Hide file tree

Showing 12 changed files with 186 additions and 201 deletions.
diff --git a/src/main/redux/sagas/auth.ts b/src/main/redux/sagas/auth.ts
@@ -934,6 +934,10 @@ const htmlLoginTemplate = (
                     max-height: 75px;
                     max-width: 150px;
                 }
+
+                @media only screen and (max-width: 600px) {
+                    display: none;
+                }
             }
     
             .login form {
@@ -1006,6 +1010,12 @@ const htmlLoginTemplate = (
                 display: flex;
                 align-items: center;
                 gap: 10px;
+
+                @media only screen and (max-width: 1000px) {
+                    position: unset;
+                    width: 100%;
+                    justify-content: end;
+                }
             }
 
             .submit_button {

diff --git a/src/renderer/assets/icons/logo_edrlab.svg b/src/renderer/assets/icons/logo_edrlab.svg
diff --git a/src/renderer/assets/styles/components/aboutFooter.scss b/src/renderer/assets/styles/components/aboutFooter.scss
@@ -28,10 +28,18 @@
     align-items: center;
     justify-content: end;
     gap: 10px;
-    height: 30px;
+    height: 75px;
     width: calc(100% - 247px);
     background-color: var(--color-secondary);
 
+    svg {
+        width: 45px;
+    }
+
+    p {
+        margin: 0;
+    }
+
     @media screen and (width <= 800px) {
         width: calc(100% - 112px);
     }

diff --git a/src/renderer/assets/styles/components/allPublicationsPage.scss b/src/renderer/assets/styles/components/allPublicationsPage.scss
@@ -305,7 +305,7 @@
 .allBook_table {
     &_wrapper {
         overflow: auto;
-        inset: 280px 20px 30px 26px;
+        inset: 280px 20px 75px 26px;
         padding: 0;
         margin-top: 0;
         margin-bottom: 0.4em;

diff --git a/src/renderer/assets/styles/components/readerHeader.scss b/src/renderer/assets/styles/components/readerHeader.scss
@@ -200,24 +200,18 @@
 .Tts_popover_container {
     display: flex;
     align-items: center;
-    height: 75px;
+    height: fit-content;
     background-color: var(--color-extralight-grey);
     box-shadow: 0 6px 10px 0 var(--color-medium-grey);
     border-radius: 6px;
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 10px;
     border: 1px solid var(--color-medium-grey);
+    gap: 20px;
 
-    li {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: start;
-        border-right: 1px solid var(--color-medium-grey);
-        height: 50px;
-        padding: 0 20px;
 
+    .react_aria_ComboBox{
         .react_aria_Input {
             background-color: var(--color-secondary)!important;
             color: var(--color-primary)!important;
@@ -231,6 +225,27 @@
             background-color: var(--color-secondary);
             color: var(--color-primary);
         }
+
+        .react_aria_ComboBox {
+            margin: 0;
+        }
+    }
+
+    .ttsSelectRate {
+        .react_aria_ComboBox {
+            margin-bottom: 5px;
+            padding: 0;
+        }
+    }
+
+    .ttsSelectRate, .ttsSelectVoice {
+        input {
+            padding-left: 10px;
+        }
+
+        .my_combobox_container {
+            width: 280px;
+        }
     }
 }
 

diff --git a/src/renderer/assets/styles/global.scss b/src/renderer/assets/styles/global.scss
@@ -84,7 +84,7 @@ section {
   color: var(--color-primary);
 
   &:has(.footer_wrapper) {
-    padding-bottom: 40px;
+    padding-bottom: 100px;
   }
 
   &::-webkit-scrollbar {
@@ -297,7 +297,7 @@ nav + nav + .breadcrumb + .main {
   color: var(--color-primary);
   font-size: 14px;
   position: fixed;
-  bottom: 50px;
+  bottom: 100px;
   right: 55px;
   width: calc(100% - 320px);
   display: flex;

diff --git a/src/renderer/assets/styles/header.scss b/src/renderer/assets/styles/header.scss
@@ -41,7 +41,7 @@
     flex-direction: column;
     justify-content: space-between;
     padding: 30px 20px;
-    height: calc(100% - 60px);
+    height: calc(100% - 100px);
 
     & button {
       font-family: Nunito, sans-serif;

diff --git a/src/renderer/library/components/catalog/AboutThoriumButton.tsx b/src/renderer/library/components/catalog/AboutThoriumButton.tsx
@@ -27,6 +27,8 @@ import { Link } from "@r2-shared-js/models/publication-link";
 
 import { apiAction } from "../../apiAction";
 import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
+import * as EdrlabLogo from "readium-desktop/renderer/assets/icons/logo_edrlab.svg";
+import SVG from "readium-desktop/renderer/common/components/SVG";
 
 const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
 
@@ -53,13 +55,16 @@ class AboutThoriumButton extends React.Component<IProps, undefined> {
         const { __ } = this.props;
         return (
             <section className={stylesFooter.footer_wrapper}>
-                <a onClick={this.about} onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                        this.about();
-                    }
-                }}
-                tabIndex={0}>{__("catalog.about.title", { appName: capitalizedAppName })}</a>
-                <p>- {`v${_APP_VERSION}`}</p>
+ <div>
+                   <p>{`v${_APP_VERSION}`}</p>
+                   <a onClick={this.about} onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            this.about();
+                        }
+                    }}
+                    tabIndex={0}>{__("catalog.about.title", { appName: capitalizedAppName })}</a>
+                </div>
+                <SVG ariaHidden svg={EdrlabLogo} />
             </section>
         );
     }

diff --git a/src/renderer/library/components/layout/LibraryHeader.tsx b/src/renderer/library/components/layout/LibraryHeader.tsx
@@ -23,6 +23,7 @@ import * as CatalogsIcon from "readium-desktop/renderer/assets/icons/catalogs-ic
 import * as ShelfIcon from "readium-desktop/renderer/assets/icons/shelf-icon.svg";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 import { Settings } from "../settings/Settings";
+import { _APP_NAME } from "readium-desktop/preprocessor-directives";
 
 interface NavigationHeader {
     route: string;
@@ -85,14 +86,17 @@ class Header extends React.Component<IProps, undefined> {
     public render(): React.ReactElement<{}> {
         const { __ } = this.props;
 
+        const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
+
         return (<>
             <SkipLink
                 className={stylesHeader.skip_link}
                 anchorId="main-content"
                 label={__("accessibility.skipLink")}
             />
             <nav className={stylesHeader.main_navigation_library} role="navigation" aria-label={__("header.home")}>
-                <ul>
+                <h1 style={{textAlign: "center", color: "#AFB1B6", fontSize: "30px", marginBottom: "10px"}}>{capitalizedAppName}</h1>
+                <ul style={{paddingTop: "10px"}}>
                     <div>
                     {
                         headerNav.map(

diff --git a/src/renderer/library/components/publication/PublicationCard.tsx b/src/renderer/library/components/publication/PublicationCard.tsx
@@ -193,6 +193,8 @@ class PublicationCard extends React.Component<IProps> {
                         <div style={{ display: "flex", alignItems: "end", height: "50px", width: "100%", justifyContent: isOpds ? "flex-end" : "space-between" }}>
                             {isOpds ? <></>
                                 : <span className={stylesButtons.button_secondary_blue}>{pubFormat}</span>}
+                                {isOpds ? <></>
+                            :
                             <Menu
                                 button={(
                                     <SVG title={`${__("accessibility.bookMenu")} (${publicationViewMaybeOpds.documentTitle})`} svg={MenuIcon} />
@@ -205,7 +207,7 @@ class PublicationCard extends React.Component<IProps> {
                                     <CatalogMenu
                                         publicationView={publicationViewMaybeOpds as PublicationView}
                                     />}
-                            </Menu>
+                            </Menu>}
                         </div>
                     </div>
                 </div>