Tabs not readable on small phones #180

rafdulaf · Sep 18, 2023 · c987ef3 · c987ef3
1 parent de4558e
commit c987ef3
Show file tree

Hide file tree

Showing 36 changed files with 199 additions and 75 deletions.
diff --git a/Batman/data/rules/lang/rules.en.json b/Batman/data/rules/lang/rules.en.json
@@ -2,6 +2,7 @@
     "list": {
         "corebox": {
             "title": "Rule<wbr/>book",
+            "shorttitle": "Rule",
             "download": "https://the-overlord.net/index.php?/files/file/91-batman-gotham-city-chronicles-rulebook-coreboxes/",
             "pages": 46
         },
@@ -22,6 +23,7 @@
         },
         "narrows": {
             "title": "Narrows Chronicles",
+            "shorttitle": "Narrows Chronic.",
             "download": "https://the-overlord.net/index.php?/files/file/98-batman-gotham-city-chronicles-narrows-chronicles-booklet/",
             "pages": 1
         }

diff --git a/Batman/data/rules/lang/rules.fr.json b/Batman/data/rules/lang/rules.fr.json
@@ -2,6 +2,7 @@
     "list": {
         "corebox": {
             "title": "Livre des règles",
+            "shorttitle": "Règles",
             "download": "https://the-overlord.com/index.php?/files/file/147-batman-gotham-city-chronicles-livret-de-r%C3%A8gles-bo%C3%AEtes-de-base/",
             "pages": 46
         },
@@ -22,6 +23,7 @@
         },
         "narrows": {
             "title": "Narrows Chronicles",
+            "shorttitle": "Narrows Chronic.",
             "download": "https://the-overlord.com/index.php?/files/file/159-batman-gotham-city-chronicles-livret-narrows-chronicles/",
             "pages": 1
         }

diff --git a/Batman/engine/Version.json b/Batman/engine/Version.json
@@ -1,3 +1,3 @@
 {
-    "version": "0.24.12"
+    "version": "0.24.13"
 }
diff --git a/Batman/engine/general/nav.css b/Batman/engine/general/nav.css
@@ -373,6 +373,9 @@
 }
 
 
+.nav-menu .l, .nav-menu.short .s { display: unset; }
+.nav-menu .s, .nav-menu.short .l { display: none; }
+
 .nav-menu a {
     font-size: calc(var(--primary-size) * 1rem);
     white-space: nowrap;
@@ -389,31 +392,63 @@
     font-size: calc(var(--primary-size) * 0.925rem);
 }
 .nav-menu.size7 a {
-    font-size: calc(var(--primary-size) * 0.9rem);
+    line-height: calc(var(--primary-line-height) * 1.1875rem);
+    white-space: unset;
 }
 .nav-menu.size6 a {
     font-size: calc(var(--primary-size) * 0.875rem);
+    line-height: 39px;
+    white-space: nowrap;
 }
+.nav-menu.size5 a wbr { display: unset; }
 .nav-menu.size5 a {
-    font-size: calc(var(--primary-size) * 0.925rem);
     line-height: calc(var(--primary-line-height) * 1.1875rem);
     white-space: unset;
 }
-.nav-menu.size5 a wbr { display: unset; }
+.nav-menu.size4 a wbr { display: none; }
 .nav-menu.size4 a {
-    font-size: calc(var(--primary-size) * 0.9rem);
+    font-size: calc(var(--primary-size) * 0.85rem);
+    line-height: 39px;
+    white-space: nowrap;
 }
+.nav-menu.size3 a wbr { display: unset; }
 .nav-menu.size3 a {
-    font-size: calc(var(--primary-size) * 0.875rem);
+    line-height: calc(var(--primary-line-height) * 1.1875rem);
+    white-space: unset;
 }
+.nav-menu.size2 a wbr { display: none; }
 .nav-menu.size2 a {
-    font-size: calc(var(--primary-size) * 0.85rem);
+    font-size: calc(var(--primary-size) * 0.825rem);
+    line-height: 39px;
+    white-space: nowrap;
 }
+.nav-menu.size1 a wbr { display: unset; }
 .nav-menu.size1 a {
-    font-size: calc(var(--primary-size) * 0.825rem);
+    line-height: calc(var(--primary-line-height) * 1.1875rem);
+    white-space: unset;
+}
+.nav-menu.size0 a wbr { display: none; }
+.nav-menu.size0 a {
+    font-size: calc(var(--primary-size) * 0.8rem);
+    line-height: 39px;
+    white-space: nowrap;
+}
+.nav-menu.size-1 a wbr { display: unset; }
+.nav-menu.size-1 a {
+    line-height: calc(var(--primary-line-height) * 1.1875rem);
+    white-space: unset;
+}
+.nav-menu.size-2 a wbr { display: none; }
+.nav-menu.size-2 a {
+    font-size: calc(var(--primary-size) * 0.775rem);
+    line-height: 39px;
+    white-space: nowrap;
+}
+.nav-menu.size-3 a wbr { display: unset; }
+.nav-menu.size-3 a {
+    line-height: calc(var(--primary-line-height) * 1.1875rem);
+    white-space: unset;
 }
-
-
 
 
 

diff --git a/Batman/engine/general/nav.js b/Batman/engine/general/nav.js
@@ -253,7 +253,7 @@ Nav = {
 
         var tb = $(".header .toolbar")
         var maxWidth = $(".header").width() - tb.width();
-        var maxHeight = 60;
+        var maxHeight = 40;
 
         for (var i = 0; i < sizes.length; i++)
         {
@@ -512,11 +512,10 @@ Nav = {
     {
             var slider = $(s);
 
-            var sizes = ["size10", "size9", "size8", "size7", "size6", "size5", "size4", "size3", "size2", "size1"];
+            var sizes = ["size10", "size9", "size8", "size7", "size6", "size5", "size4", "size3", "size2", "size1", "size0", "size-1", "size-2", "size-3"];
 
             slider.removeClass(sizes.join(" "));
 
-
             var tabs = slider.find("a");
             var maxWidth = tabs.width();
 
@@ -526,23 +525,35 @@ Nav = {
                 $(button).width(tabs.offset().left);
             }
 
-            for (var i = 0; i < sizes.length; i++)
+            var tooSmall;
+            slider.addClass("normal").removeClass("short");
+            resize("span.l");
+            if (tooSmall)
             {
-                var tooSmall = false;
-                tabs.each(function(tindex, t) {
-                    if ($("span", t).width() > maxWidth)
+                slider.removeClass(sizes.join(" "));
+                slider.addClass("short").removeClass("normal");
+                resize("span.s");
+            }
+            function resize(selector)
+            {
+                for (var i = 0; i < sizes.length; i++)
+                {
+                    tooSmall = false;
+                    tabs.each(function(tindex, t) {
+                        if ($(selector, t).width() > maxWidth)
+                        {
+                            tooSmall = true;
+                            return false;
+                        }
+                    });
+                    if (tooSmall)
                     {
-                        tooSmall = true;
-                        return false;
+                        slider.addClass(sizes[i]);
+                    }
+                    else
+                    {
+                        break;
                     }
-                });
-                if (tooSmall)
-                {
-                    slider.addClass(sizes[i]);
-                }
-                else
-                {
-                    break;
                 }
             }
     },
@@ -553,7 +564,7 @@ Nav = {
         var subzone = "";
         for (var i in tabs)
         {
-            subcode += "<a href=\"javascript:void(0)\"><span>" + tabs[i].label + "</span></a>";
+            subcode += "<a href=\"javascript:void(0)\"><span class='l'>" + tabs[i].label + "</span><span class='s'>" + (tabs[i].shortLabel || tabs[i].label) + "</span></a>";
             subzone += "<div id=\"" + tabs[i].id + "\"></div>";
         }
 

diff --git a/Batman/engine/rules/lang/rules.fr.js b/Batman/engine/rules/lang/rules.fr.js
@@ -1,6 +1,7 @@
 Rules._i18n = {
     'menu': "Règles",
     'skills': "Compétences",
+    'shortskills': "Comp.",
     'clarification': "Clarification :",
 
     'viewer-search': "Recherche dans le document",

diff --git a/Batman/engine/rules/rules.js b/Batman/engine/rules/rules.js
@@ -9,6 +9,7 @@ var Rules = {
 
         Rules._rules = [{
             label: Rules._i18n.skills, 
+            shortLabel: Rules._i18n.shortskills, 
             id: "skills", 
             download: Encyclopedia.skills.link
         }];
@@ -17,7 +18,8 @@ var Rules = {
             if (About._hasExpansion(Encyclopedia.rules.list[i].origins) || window.About && About.getPreference("rules-showmine") === "false")
             {
                 Rules._rules.push({
-                    label: Encyclopedia.rules.list[i].title, 
+                    label: Encyclopedia.rules.list[i].title,
+                    shortLabel: Encyclopedia.rules.list[i].shorttitle, 
                     id: Encyclopedia.rules.list[i].id,
                     download: Encyclopedia.rules.list[i].download,
                     pages: Encyclopedia.rules.list[i].pages

diff --git a/Batman/engine/studio/studio_item.js b/Batman/engine/studio/studio_item.js
@@ -10,7 +10,7 @@ var StudioItem = {
     _itemHeight: 300,
 
     preinit: function() {
-        Studio._slides.push({   label: this._i18n.tab, id: this.name, onShow: this.onShow.bind(this),  onHide: this.onHide.bind(this) });
+        Studio._slides.push({ label: this._i18n.tab, shortLabel: this._i18n.shorttab, id: this.name, onShow: this.onShow.bind(this),  onHide: this.onHide.bind(this) });
     },
 
     init: function() {

diff --git a/Conan/data/rules/lang/rules.en.json b/Conan/data/rules/lang/rules.en.json
@@ -2,16 +2,19 @@
     "list": {
         "heroes": {
             "title": "Heroes's book",
+            "shorttitle": "Heroes",
             "download": "http://www.monolithedition.com/download/rules/CONAN_Heroesrulebook_V2_US_SD.pdf",
             "pages": 24
         },
         "overlord": {
             "title": "Overlord's book",
+            "shorttitle": "Overlord",
             "download": "http://www.monolithedition.com/download/rules/CONAN_King_Overlordbook_V2_US_SD.pdf",
             "pages": 14
         },
         "tomeofskelos": {
             "title": "Tome of Skelos",
+            "shorttitle": "Skelos",
             "download": "https://the-overlord.net/index.php?/files/file/174-tome-of-skelos-final-version-of-the-solocoop-rules/",
             "pages": 11
         }

diff --git a/Conan/data/rules/lang/rules.fr.json b/Conan/data/rules/lang/rules.fr.json
@@ -2,16 +2,19 @@
     "list": {
         "heroes": {
             "title": "Livre des héros",
+            "shorttitle": "Héros",
             "download": "https://the-overlord.com/index.php?/files/file/2-livret-de-r%C3%A8gles-des-h%C3%A9ros/",
             "pages": 24
         },
         "overlord": {
             "title": "Livre de l'Overlord",
+            "shorttitle": "Overlord",
             "download": "https://the-overlord.com/index.php?/files/file/3-livret-de-r%C3%A8gles-de-l%E2%80%99overlord/",
             "pages": 14
         },
         "tomeofskelos": {
             "title": "Tome de Skelos",
+            "shorttitle": "Skelos",
             "download": "https://the-overlord.com/index.php?/files/file/232-livre-de-skelos-r%C3%A8gle-solocoop-version-finale/",
             "pages": 12
         }

diff --git a/Conan/data/rules/lang/rules.it.json b/Conan/data/rules/lang/rules.it.json
@@ -2,16 +2,19 @@
     "list": {
         "heroes": {
             "title": "Libro degli Eroi",
+            "shorttitle": "Eroi",
             "download": "https://the-overlord.net/index.php?/files/file/156-conan-heroesrulebook-v21-ita/",
             "pages": 24
         },
         "overlord": {
             "title": "Libro dell'Overlord",
+            "shorttitle": "Overlord",
             "download": "https://the-overlord.net/index.php?/files/file/157-conan_king_overlordbook_v21_ita_txt/",
             "pages": 14
         },
         "tomeofskelos": {
             "title": "Libro di Skelos",
+            "shorttitle": "Skelos",
             "download": "https://the-overlord.net/index.php?/files/file/173-tome-of-skelos-italian-translation-final-version-of-the-solocoop-rules/",
             "pages": 12
         }

diff --git a/Conan/encyclopedia/equipments/equipments.js b/Conan/encyclopedia/equipments/equipments.js
@@ -1,7 +1,7 @@
 var EncyclopediaEquipments = {
     preinit: function()
     {
-        Encyclopedia._slides.push({   label: EncyclopediaEquipments._i18n.tab, id: "encyclopedia-equipment", onShow: EncyclopediaEquipments.onShow,  onHide: EncyclopediaEquipments.onHide });
+        Encyclopedia._slides.push({ label: EncyclopediaEquipments._i18n.tab, shortLabel: EncyclopediaEquipments._i18n.shorttab, id: "encyclopedia-equipment", onShow: EncyclopediaEquipments.onShow,  onHide: EncyclopediaEquipments.onHide });
 
         EncyclopediaEquipments._facets = Utils.mergeObject([
             {

diff --git a/Conan/encyclopedia/equipments/lang/equipments.en.js b/Conan/encyclopedia/equipments/lang/equipments.en.js
@@ -1,5 +1,6 @@
 EncyclopediaEquipments._i18n = {
-    'tab': "Equip<wbr/>ments",
+    'tab': "Equipments",
+    'shorttab': "Equip.",
     'transfertToStudio': "Copy the card into the studio",
     'transfertOK': "The card was copied to the equipment cards studio",
     'transfertConfirm': "Do you want to copy the card into the studio in order to edit it or print it?",

diff --git a/Conan/encyclopedia/equipments/lang/equipments.fr.js b/Conan/encyclopedia/equipments/lang/equipments.fr.js
@@ -1,5 +1,6 @@
 EncyclopediaEquipments._i18n = {
-    'tab': "Equipe<wbr/>ments",
+    'tab': "Equipements",
+    'shorttab': "Equip.",
     'transfertToStudio': "Copier la carte dans le studio",
     'transfertOK': "La carte a été copiée dans le studio des cartes d'équipements",
     'transfertConfirm': "Voulez-vous copier la carte dans le studio pour pouvoir la modifier ou l'imprimer ?",

diff --git a/Conan/encyclopedia/equipments/lang/equipments.it.js b/Conan/encyclopedia/equipments/lang/equipments.it.js
@@ -1,5 +1,6 @@
 EncyclopediaEquipments._i18n = {
-    'tab': "Equip<wbr/>aggiamento",
+    'tab': "Equipaggiamento",
+    'shorttab': "Equip.",
     'transfertToStudio': "Copia la carta nello Studio",
     'transfertOK': "La carta è stata copiata nelle carte equipaggiamento dello Studio.",
     'transfertConfirm': "Vuoi copiare la carta nello Studio per modificarla o stamparla?",

diff --git a/Conan/encyclopedia/heroes/heroes.js b/Conan/encyclopedia/heroes/heroes.js
@@ -1,7 +1,7 @@
 var EncyclopediaHeroes = {
     preinit: function()
     {
-        Encyclopedia._slides.push({   label: EncyclopediaHeroes._i18n.tab, id: "encyclopedia-heroes", onShow: EncyclopediaHeroes.onShow,  onHide: EncyclopediaHeroes.onHide });
+        Encyclopedia._slides.push({ label: EncyclopediaHeroes._i18n.tab, shortLabel: EncyclopediaHeroes._i18n.shorttab, id: "encyclopedia-heroes", onShow: EncyclopediaHeroes.onShow,  onHide: EncyclopediaHeroes.onHide });
 
 
         EncyclopediaHeroes._facets = Utils.mergeObject([

diff --git a/Conan/encyclopedia/models/lang/models.en.js b/Conan/encyclopedia/models/lang/models.en.js
@@ -1,5 +1,6 @@
 EncyclopediaModels._i18n = {
-    'tab': "Minia<wbr/>tures",
+    'tab': "Miniatures",
+    'shorttab': "Minis",
     'from': "Available in:",
     'fromAnd': "<br/>and",
     'model': "miniature",

diff --git a/Conan/encyclopedia/models/lang/models.fr.js b/Conan/encyclopedia/models/lang/models.fr.js
@@ -1,5 +1,6 @@
 EncyclopediaModels._i18n = {
-    'tab': "Figu<wbr/>rines",
+    'tab': "Figurines",
+    'shorttab': "Figs",
     'from': "Disponible dans :",
     'fromAnd': "<br/>et",
     'model': "figurine",

diff --git a/Conan/encyclopedia/models/lang/models.it.js b/Conan/encyclopedia/models/lang/models.it.js
@@ -1,5 +1,6 @@
 EncyclopediaModels._i18n = {
-    'tab': "Minia<wbr/>ture",
+    'tab': "Miniature",
+    'shorttab': "Mini",
     'from': "Disponibile in:",
     'fromAnd': "<br/>e",
     'model': "miniatura",

diff --git a/Conan/encyclopedia/models/models.js b/Conan/encyclopedia/models/models.js
@@ -1,7 +1,7 @@
 var EncyclopediaModels = {
     preinit: function()
     {
-        Encyclopedia._slides.push({   label: EncyclopediaModels._i18n.tab, id: "encyclopedia-models", onShow: EncyclopediaModels.onShow,  onHide: EncyclopediaModels.onHide });
+        Encyclopedia._slides.push({ label: EncyclopediaModels._i18n.tab, shortLabel: EncyclopediaModels._i18n.shorttab, id: "encyclopedia-models", onShow: EncyclopediaModels.onShow,  onHide: EncyclopediaModels.onHide });
 
         EncyclopediaModels._facets = Utils.mergeObject([
             {

diff --git a/Conan/encyclopedia/spells/lang/spells.it.js b/Conan/encyclopedia/spells/lang/spells.it.js
@@ -1,5 +1,6 @@
 EncyclopediaSpells._i18n = {
     'tab': "Incantesimi",
+    'shorttab': "Incant.",
     'transfertToStudio': "Copia la carta nello Studio",
     'transfertOK': "La carta è stata copiata nello Studio",
     'transfertConfirm': "Vuoi copiare la carta nello Studio per modificarla o stamparla?",

diff --git a/Conan/encyclopedia/spells/spells.js b/Conan/encyclopedia/spells/spells.js
@@ -1,7 +1,7 @@
 var EncyclopediaSpells = {
     preinit: function()
     {
-        Encyclopedia._slides.push({   label: EncyclopediaSpells._i18n.tab, id: "encyclopedia-spell", onShow: EncyclopediaSpells.onShow,  onHide: EncyclopediaSpells.onHide });
+        Encyclopedia._slides.push({ label: EncyclopediaSpells._i18n.tab, shortLabel: EncyclopediaSpells._i18n.shorttab, id: "encyclopedia-spell", onShow: EncyclopediaSpells.onShow,  onHide: EncyclopediaSpells.onHide });
 
         EncyclopediaSpells._facets = Utils.mergeObject([
             {

diff --git a/Conan/encyclopedia/tiles/lang/tiles.it.js b/Conan/encyclopedia/tiles/lang/tiles.it.js
@@ -1,5 +1,6 @@
 EncyclopediaTiles._i18n = {
     'tab': "Tessere",
+    'shorttab': "Tess.",
     'transfertToStudio': "Copia la carta nello Studio",
     'transfertOK': "La carta è stata copiata nello Studio",
     'transfertConfirm': "Vuoi copiare la carta nello Studio per modificarla o stamparla?",