Merge pull request #211 from BarthPaleologue/FixSidePanelPadding

Improve side panels padding
BarthPaleologue · Dec 11, 2024 · 593ba66 · 593ba66
2 parents cb79bdc + b37a57f
commit 593ba66
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 20 deletions.
diff --git a/src/html/sidePanels.html b/src/html/sidePanels.html
@@ -46,6 +46,7 @@ <h3 data-i18n="sidePanel:supportFinancially">Support financially</h3>
 <div id="credits" class="sidePanel">
     <h2 data-i18n="sidePanel:credits">Credits</h2>
 
+    <!--TODO: localize-->
     <h3>Contributors:</h3>
     <div class="contributors-section">
         <img

diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss
@@ -1,9 +1,3 @@
-#settingsPanel {
-  display: flex;
-  flex-direction: column;
-  row-gap: 20px;
-}
-
 .map {
   color: white;
 
@@ -27,7 +21,7 @@
   .actionSingle,
   .subAction {
     transition: .2s;
-    padding-right: 10px;
+    padding: 10px;
 
     &:hover {
       background-color: rgba(255, 255, 255, 0.1);
@@ -45,10 +39,7 @@
 
     display: flex;
     flex-direction: column;
-
-    & > p {
-      margin-bottom: 0.5em;
-    }
+    padding: 10px;
 
     .subAction {
       display: flex;
@@ -59,6 +50,7 @@
 
       & > p {
         text-transform: capitalize;
+        padding-left: 10px;
         border-left: 1px solid white;
       }
     }
@@ -72,6 +64,7 @@
     column-gap: 10px;
 
     p {
+      padding: 0 10px;
       border: 1px solid white;
       min-width: 50px;
       text-align: center;

diff --git a/src/styles/mainMenu.scss b/src/styles/mainMenu.scss
@@ -77,6 +77,11 @@ h1 {
   box-shadow: 0 0 20px black;
   background: rgba(0, 0, 0, 0.8);
 
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  row-gap: 10px;
+
   &.visible {
     transform: scale(1);
     opacity: 1;
@@ -92,9 +97,9 @@ h1 {
 
   h3 {
     color: white;
-    padding: 0 20px;
     font-family: Nasalization, sans-serif;
     font-size: 2em;
+    margin-block-end: 0.5em;
   }
 
   #dropFileZone {
@@ -105,7 +110,7 @@ h1 {
     cursor: pointer;
     transition: 0.1s;
     border: 3px dashed grey;
-    margin: 0 10px;
+    padding: 20px;
 
     &.dragover {
       background: rgba(255, 255, 255, 0.1);
@@ -125,7 +130,6 @@ h1 {
       font-size: 1.5em;
       text-align: center;
       line-height: 1.5em;
-      padding: 0 20px;
     }
   }
 
@@ -134,7 +138,7 @@ h1 {
     font-family: Nasalization, sans-serif;
     line-height: 1.5em;
     font-size: 1.25em;
-    padding: 0 20px;
+    margin-block: 0;
 
     &[data-i18n] {
       white-space: pre-line; // necessary to use \n in the text
@@ -144,6 +148,7 @@ h1 {
       text-align: right;
       font-style: italic;
       padding-right: 60px;
+      margin: 40px 0;
     }
   }
 

diff --git a/src/styles/saveLoadingPanelContent.scss b/src/styles/saveLoadingPanelContent.scss
@@ -1,5 +1,5 @@
 #loadSavePanel {
-    padding-bottom: 10px;
+    padding: 10px;
 }
 
 .saveLoadingPanelContent {
@@ -12,15 +12,14 @@
     display: flex;
     flex-direction: column;
     row-gap: 10px;
-    padding: 0 10px;
 
     .cmdr {
         --cmdr-color: rgba(50, 50, 50, 0.5);
         .cmdrHeader {
             display: flex;
             justify-content: space-between;
             background: var(--cmdr-color);
-            padding: 10px;
+            padding: 10px 20px;
 
             .cmdrHeaderText {
                 display: flex;
@@ -49,14 +48,15 @@
 
             .saveContainer {
                 background: linear-gradient(90deg, var(--cmdr-color) 10px, rgba(0, 0, 0, 0.5) 10px);
-                padding: 20px 10px;
+                padding: 20px;
                 display: flex;
                 justify-content: space-between;
 
                 .saveText {
                     display: flex;
                     flex-direction: column;
                     row-gap: 10px;
+                    padding-left: 10px;
 
                     p {
                         margin-block: 0;

diff --git a/src/styles/tutorialsMenuPanel.scss b/src/styles/tutorialsMenuPanel.scss
@@ -42,6 +42,8 @@
       flex-direction: column;
       justify-content: flex-start;
       align-items: center;
+      row-gap: 10px;
+      padding: 10px;
 
       h2 {
         color: white;
@@ -51,7 +53,7 @@
       }
 
       img {
-        width: 90%;
+        width: 100%;
       }
 
       p {