- Mobile friendly changes including removing background image

brookesi · Jul 2, 2024 · 4bf5a3c · 4bf5a3c
1 parent 2cfaf4a
commit 4bf5a3c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 26 deletions.
diff --git a/Mongoose_Traveller2e/MongooseTraveller.css b/Mongoose_Traveller2e/MongooseTraveller.css
@@ -5,9 +5,9 @@ select[multiple]:focus option:checked {
 
 .charsheet {
     background-color: lightgray;
-    background-image: url("https://s3.amazonaws.com/files.d20.io/images/350870005/di7b7xENUb5XlsOdBNS_QA/max.jpg?1689681759");
+    /*background-image: url("https://s3.amazonaws.com/files.d20.io/images/350870005/di7b7xENUb5XlsOdBNS_QA/max.jpg?1689681759");
     background-color: rgba(255,255,255,0.8);
-    background-blend-mode: lighten;
+    background-blend-mode: lighten;*/
 }
 
 /* ----- Tabs ----- */
@@ -188,6 +188,7 @@ div.sheet-settings {
 /* ----- Number boxes ----- */
 input[type="number"] {
     -moz-appearance: textfield;
+    width: 3.5em !important;
 }
 
 input[type="number"]:hover {
@@ -726,7 +727,7 @@ input.sheet-rollselect[value="bane"] ~ .sheet-button:not(.sheet-roll_bane) {
 
 .sheet-mod_toggle button,
 .sheet-roll_toggle button {
-    width: 100px !important;
+    width: 12vw !important;
 }
 
 .sheet-mod-switch[value="1"] ~ .sheet-mod_toggle,
@@ -1327,7 +1328,7 @@ button.sheet-tab {
     outline: none !important;
     cursor: pointer;
     z-index: 1;
-    width: 110px;
+    width: 12vw;
     content: attr(title);
     display: inline;
     height: 35px;
@@ -1679,7 +1680,8 @@ sheet-vehicle h3 {
     margin-right: auto;
     width: 98%;
     display: grid;
-    grid-template-columns: 95px 45px 45px 45px 95px 45px 45px 45px 95px 45px 45px 45px;
+    /* grid-template-columns: 95px 45px 45px 45px 95px 45px 45px 45px 95px 45px 45px 45px; */
+    grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr 0.5fr 1fr 0.5fr 0.5fr 0.5fr;
     column-gap: 10px;
 }
 
@@ -1867,7 +1869,7 @@ sheet-vehicle h3 {
 
 .sheet-laf-finance input {
     display: block;
-    width: 100px !important;
+    width: 120px !important;
 }
 
 .sheet-laf-otherwealth {
@@ -2534,4 +2536,45 @@ span.sheet-charmancer_actions-panel {
   justify-content: flex-end;
 }
 
-
+/* ---------------------------------------------------------------------
+   M O B I L E  C S S
+   --------------------------------------------------------------------- */
+@media only screen and (pointer: coarse) {
+    /* css that only affects sheet on mobile. Play around with "max-width" vaule, might differ between phones */
+    .sheet-laf-characteristics {
+        margin-left: auto;
+        margin-right: auto;
+        width: 98%;
+        display: grid;
+        grid-template-columns: 1fr 0.5fr 0.5fr 0.5fr;
+        grid-template-rows: auto;
+        column-gap: 10px;
+    }
+
+    .sheet-mobilehide {
+        display: none;
+    }
+
+    button.sheet-type,
+    button.sheet-tab {
+        margin-top: 1px;
+        margin-bottom: 1px;
+        line-height: 20px;
+        outline: none !important;
+        cursor: pointer;
+        z-index: 1;
+        width: 14vw;
+        content: attr(title);
+        display: inline;
+        height: 35px;
+        background: white;
+        padding-left: 2px;
+        padding-right: 2px;
+        font-size: 2.7vw;
+        font-weight: bold;
+        text-align: center;
+        color: black;
+        font-family: "Trebuchet MS", Helvetica, sans-serif;
+        text-shadow: none;
+    }
+}
diff --git a/Mongoose_Traveller2e/MongooseTraveller.html b/Mongoose_Traveller2e/MongooseTraveller.html
@@ -86,13 +86,13 @@
             <span data-i18n="temp-u">Temp</span>
             <span data-i18n="mod-u">Mod</span>
             <span></span>
-            <span data-i18n="rating-u">Rating</span>
-            <span data-i18n="temp-u">Temp</span>
-            <span data-i18n="mod-u">Mod</span>
-            <span></span>
-            <span data-i18n="rating-u">Rating</span>
-            <span data-i18n="temp-u">Temp</span>
-            <span data-i18n="mod-u">Mod</span>
+            <span class="sheet-mobilehide" data-i18n="rating-u">Rating</span>
+            <span class="sheet-mobilehide" data-i18n="temp-u">Temp</span>
+            <span class="sheet-mobilehide" data-i18n="mod-u">Mod</span>
+            <span class="sheet-mobilehide" ></span>
+            <span class="sheet-mobilehide" data-i18n="rating-u">Rating</span>
+            <span class="sheet-mobilehide" data-i18n="temp-u">Temp</span>
+            <span class="sheet-mobilehide" data-i18n="mod-u">Mod</span>
         </div>
         <div class="sheet-laf-characteristics">
             <span>
@@ -469,7 +469,7 @@ <h5 data-i18n="location-u">Location</h5>
     <div class="sheet-tab-content sheet-skills sheet-pc">
         <br>
         <h5>
-            <input type="checkbox" name="attr_Skill" class="sheet-power sheet-groupfunds" value="1"/><span></span><span data-i18n="skillstoshow-u">&nbsp;&nbsp;&nbsp;Select which skills to show</span>
+            <input type="checkbox" name="attr_Skill" class="sheet-power sheet-groupfunds" value="1"/><span></span><span style="margin-left: 10px;" data-i18n="skillstoshow-u">Select which skills to show</span>
         </h5><br>
         <div>
             <input type="checkbox" name="attr_Skill_Show" class="sheet-hider sheet-hidden" value="1"/>
@@ -9920,16 +9920,6 @@ <h3 class="sheet-bold">Trade Log</h3>
             }
         });
 
-
-
-
-
-
-
-
-
-
-
     </script>
 </div>
 

diff --git a/Mongoose_Traveller2e/translation.json b/Mongoose_Traveller2e/translation.json
@@ -171,7 +171,7 @@
 	"askmodifier-u": "Ask for Modifier?",
 	"inventory-u": "Inventory",
 	"studyperiod-u": "Study Period",
-	"skillstoshow-u": "&nbsp;&nbsp;&nbsp; Select which skills to show",
+	"skillstoshow-u": "Select which skills to show",
 	"admin-u": "Admin",
 	"advocate-u": "Advocate",
 	"animals-u": "Animals",