Alternative mobile UI

Simounet · Jan 8, 2024 · dacc2d1 · dacc2d1
1 parent 0736dfc
commit dacc2d1
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/images/hand.svg b/images/hand.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{$language}" class="{if="isset($_COOKIE['theme']) && $_COOKIE['theme'] === 'dark'"}dark-theme {/if}no-js">
+<html lang="{$language}" class="{if="isset($_COOKIE['theme']) && $_COOKIE['theme'] === 'dark'"}dark-theme {/if}{if="isset($_COOKIE['ui-side']) && $_COOKIE['ui-side'] === 'left'"}ui-side-reverse {/if}no-js">
 <head>
     <meta charset="UTF-8">
     <title>{$delimiter=' · '}{if="isset($currentFeed)"}{$currentFeed->getName()}{$delimiter}{/if}{if="isset($currentFolder)"}{$currentFolder->getName()}{$delimiter}{/if}LeedVibes</title>
@@ -222,6 +222,16 @@ <h2 class="feed-add-title">{function="_t('ADD_FEED')"}</h2>
                             <use xlink:href="#svg-logout" />
                         </svg>
                     </a>
+                    <button class="settings-item ui-side-button" data-js="ui-side">
+                        <svg
+                            width="15"
+                            height="15"
+                            role="img"
+                        >
+                            <title>{function="_t('LEEDVIBES_TOGGLE_UI')"}</title>
+                            <use xlink:href="#svg-hand" />
+                        </svg>
+                    </button>
                 {/if}
                 <button class="shortcuts-toggle js-shortcuts-toggle settings-item" title="{function="_t('LEEDVIBES_SHORTCUTS_BUTTON_TITLE')"}" >
                     <svg

diff --git a/js/script.js b/js/script.js
@@ -298,7 +298,24 @@ $(function () {
         markAsRead(button);
     });
 });
+
+const uiSideToggle = function () {
+    const uiSideCookieKey = 'ui-side';
+    const uiSide = {
+        LEFT: 'left',
+        RIGHT: 'right'
+    };
+
+    document.querySelector('[data-js="ui-side"]').addEventListener('click', () => {
+        const usedHand = document.querySelector('html').classList.toggle('ui-side-reverse')
+            ? uiSide.LEFT
+            : uiSide.RIGHT;
+        cookieHelper.set(uiSideCookieKey, usedHand);
+    });
+};
+
 document.addEventListener('DOMContentLoaded', function (event) {
+    uiSideToggle();
     const firstSentinelEl = document.getElementsByClassName('js-article__header')[0];
     const articlesPerPage = $('[data-articles-per-page]').data('articles-per-page');
     if (typeof (firstSentinelEl) !== 'object') {

diff --git a/locale/en.json b/locale/en.json
@@ -21,6 +21,7 @@
   "LEEDVIBES_SHARE": "Share",
   "LEEDVIBES_SHORTCUTS_BUTTON_TITLE": "Shortcut list",
   "LEEDVIBES_SHORTCUTS_ICON": "Shortcuts icon",
+  "LEEDVIBES_TOGGLE_UI": "Toggle the user interface",
   "LEEDVIBES_UNREAD": "unread",
   "LEEDVIBES_UNREADS": "unreads"
 }
diff --git a/locale/fr.json b/locale/fr.json
@@ -21,6 +21,7 @@
   "LEEDVIBES_SHARE": "Partager",
   "LEEDVIBES_SHORTCUTS_BUTTON_TITLE": "Liste des raccourcis",
   "LEEDVIBES_SHORTCUTS_ICON": "Icone des raccourcis",
+  "LEEDVIBES_TOGGLE_UI": "Basculer l'interface utilisateur",
   "LEEDVIBES_UNREAD": "non lu",
   "LEEDVIBES_UNREADS": "non lus"
 }
diff --git a/sass/style.scss b/sass/style.scss
@@ -470,6 +470,20 @@ html:not(.no-js) .feed--closed {
     }
 }
 
+.ui-side-reverse .ui-side-button {
+    transform: scaleX(-1);
+
+    @media($breakpoint-min) {
+        display: none;
+    }
+}
+
+.ui-side-reverse .article__header {
+    @media($breakpoint-max) {
+        grid-template-areas: "favicon site date" "mark title favorite";
+    }
+}
+
 .feed-icon {
     margin-right: 0.3em;
     vertical-align: middle;

diff --git a/svg-list.html b/svg-list.html
@@ -3,6 +3,7 @@
         <symbol id="svg-add" viewBox="0 0 15 15"><path d="M15 8.5H8.5V15h-2V8.5H0v-2h6.5V0h2v6.5H15v2z" fill="#fff"/></symbol>
         <symbol id="svg-check" viewBox="0 0 30 25"><path d="M3.865 8.61l8.098 7.687L26.136 0 30 3.426 12.423 25 0 12.5z"/></symbol>
         <symbol id="svg-favorite" viewBox="0 0 15 15"><path d="M0 5.602h1.406l4.278.03L7.12 1.41 7.56 0l.438 1.44 1.318 4.254 4.278.092 1.406.03-1.143.857-3.486 2.602 1.235 4.286.41 1.44-1.143-.885-3.46-2.633-3.485 2.54-1.172.828.44-1.408 1.345-4.23L1.144 6.49zm2.842 1.01l2.52 2.02.292.215-.117.337-.996 3.183 2.64-1.927.265-.185.265.214 2.577 1.96L9.38 9.24l-.09-.337.264-.214 2.608-1.96-3.222-.06-.322-.03-.117-.337-.965-3.153L6.48 6.275l-.12.336H2.843z"/></symbol>
+        <symbol id="svg-hand" width="15" height="15" viewBox="0 0 512 512"><path d="M451.083 73.486c0-14.63-11.884-26.502-26.481-26.502-14.616 0-26.463 11.871-26.463 26.502v130.835c-5.35-1.31-11.057-2.544-17.066-3.778V36.018c0-14.631-11.904-26.464-26.482-26.464-14.615 0-26.482 11.833-26.482 26.464v153.511a737.428 737.428 0 0 0-17.046-3.542V26.465C311.062 11.9 299.196 0 284.617 0c-14.673 0-26.481 11.9-26.481 26.465v153.068c-6.009 0-11.602.518-17.047 1.385V74.014c0-14.594-11.904-26.436-26.483-26.436-14.634 0-26.463 11.842-26.463 26.436 0 0-.189 184.036-.114 188.106-3.05 25.599-49.14-26.191-89.543-37.177-42.794-11.683-53.625 28.999-11.659 62.257 70.897 56.293 132.13 177.913 132.13 224.605 66.446 0 124.595.039 181.308.039 11.406-43.413 50.818-79.63 50.818-195.4z" style="stroke-width:1.16559;fill:#fff"/></symbol>
         <symbol id="svg-logout" viewBox="0 0 15 15"><g fill="#fff"><path d="M12.5 3.75l2.5 2.5-2.5 2.5V6.875H6.562c-.17 0-.312-.14-.312-.313v-.625c0-.17.14-.312.313-.312H12.5V3.75z"/><path d="M11.25 4.375V.312c0-.17-.14-.312-.313-.312H.313C.14 0 0 .14 0 .313v11.796c0 .33 0 .39.36.57L5 15v-2.5h5.938c.17 0 .312-.14.312-.313V8.125H10v3.125H5V2.5L3.125 1.25H10v3.125h1.25z"/></g></symbol>
         <symbol id="svg-menu" viewBox="0 0 15 15"><path d="M0 6.072h15v2.846H0zM0 12.143h15v2.846H0zM0 0h15v2.846H0z" fill="#fff" /></symbol>
         <symbol id="svg-reload" viewBox="0 0 15 15"><path d="M2.983 7.626c0-2.547 2.046-4.612 4.57-4.612 1.088 0 2.083.393 2.866 1.037L8.622 5.777l5.676.652.045-6.15-1.747 1.68C11.26.744 9.496 0 7.555 0 3.382 0 0 3.415 0 7.626c0 .157.014-.13.024.025l3.048.434c-.057-.29-.09-.15-.09-.458zm11.993-.277l-3.048-.434c.058.292.088.15.088.46 0 2.545-2.045 4.61-4.568 4.61-1.086 0-2.078-.39-2.86-1.03L6.38 9.23.707 8.58.66 14.727l1.75-1.68C3.744 14.26 5.507 15 7.444 15 11.618 15 15 11.586 15 7.375c0-.157-.014.13-.024-.026z" fill="#fff"/></symbol>