V:: v.0.8.3

Minor style fixes

Author: RussCoder

extension/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "DjVu.js Viewer",
     "short_name": "DV",
-    "version": "0.8.2.0",
+    "version": "0.8.3.0",
     "author": "RussCoder",
     "homepage_url": "https://github.com/RussCoder/djvujs",
     "description": "Opens links to .djvu files. Allows opening files from a local disk. Processes <object> & <embed> tags.",

viewer/CHANGELOG.md

@@ -1,5 +1,10 @@
 # DjVu.js Viewer's Changelog
 
+## v.0.8.3 (14.11.2021)
+
+- French translation update.
+- Minor style fixes.
+
 ## v.0.8.2 (23.09.2021)
 
 - Support for big images (up to 20K * 20K pixels) in the single page view mode.

viewer/src/DjVuViewer.js

@@ -17,7 +17,7 @@ const Events = constant({
 
 export default class DjVuViewer extends EventEmitter {
 
-    static VERSION = '0.8.2';
+    static VERSION = '0.8.3';
 
     static Events = Events;
     static Constants = Constants;

viewer/src/components/Language/LanguagePanel.jsx

@@ -11,25 +11,31 @@ const LanguagePanelRoot = styled.div`
     display: flex;
     font-size: 20px;
     margin-top: 0.5em;
-    align-items: center;
+    align-items: flex-end;
     justify-content: center;
     flex-wrap: wrap;
+    padding: 0 0.5em;
 `;
 
 const selectedLanguageItem = css`
     border-bottom: 3px solid var(--highlight-color);
     color: var(--highlight-color);
     cursor: default;
+    padding-top: 0;
 `;
 
 const LanguageItem = styled.div`
     margin-left: 0.5em;
+    margin-bottom: 0.2em;
     cursor: pointer;
     white-space: nowrap;
+    padding-top: 2px;
+    border-bottom: 1px solid transparent;
+    vertical-align: top;
 
     ${p => p.$selected ? selectedLanguageItem : `
         :hover {
-            border-bottom: 1px solid var(--color);
+            border-color: var(--color);
         }
     `};
 `;
@@ -56,7 +62,7 @@ export const LanguagePanel = () => {
                     </LanguageItem>
                 );
             })}
-            <AddLanguageButton css={`font-size: 1.5em;`} />
+            <AddLanguageButton css={`font-size: 1.5em; align-self: center;`} />
         </LanguagePanelRoot>
     );
 };

viewer/src/components/LeftPanel/ContentsPanel.jsx

@@ -24,6 +24,12 @@ const Header = styled.div`
     padding-bottom: 0.2em;
     display: flex;
     justify-content: space-between;
+
+    span:first-child {
+        margin-right: 0.5em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 `;
 
 class ContentsPanel extends React.Component {
@@ -58,7 +64,7 @@ class ContentsPanel extends React.Component {
         return (
             <Root>
                 <Header>
-                    <span css={`margin-right: 0.5em;`}>{t("Contents")}</span>
+                    <span>{t("Contents")}</span>
                     <CloseButton
                         onClick={() => dispatch({ type: ActionTypes.CLOSE_CONTENTS })}
                     />

viewer/src/components/cssMixins.js

@@ -2,6 +2,7 @@ import { css } from "styled-components";
 
 export const iconButton = css`
     cursor: pointer;
+    flex: 0 0 auto;
 
     &:hover {
         transform: scale(1.1);

viewer/src/locales/French.js

@@ -241,7 +241,7 @@ export default {
     "Menu":
         "Menu",
     "Document":
-        "Document"
+        "Document",
     "About":
         "À propos",
     "Print":
@@ -260,4 +260,4 @@ export default {
         "Page entier",
     "Fullscreen mode":
         "Plein écran",
-};
+};

viewer/src/locales/Italian.js

@@ -260,4 +260,4 @@ export default {
         "Modalità a piena pagina",
     "Fullscreen mode":
         "Modalità a pieno schermo",
-};
+};