From ec3f355fdd40271cfbe5d56e9d87d4ae003c1698 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Wed, 26 Aug 2020 21:38:26 +0100
Subject: [PATCH] added a spacer between all and favourite themes

---
 public/css/style.scss | 28 +++++++++++++++++++++++++++-
 public/index.html     |  5 ++++-
 public/js/settings.js | 10 ++++++++--
 3 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 74e525b5c..5dc1e6263 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -2386,6 +2386,20 @@ key {
   }
 }
 
+@media only screen and (max-width: 1000px) {
+  #centerContent {
+    .pageSettings .section.themes .buttons,
+    .pageSettings .section.language .buttons,
+    .pageSettings .section.layout .buttons,
+    .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.fontFamily .buttons,
+    .pageSettings .section.funbox .buttons,
+    .pageSettings .section.keymapStyle .buttons {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+
 @media only screen and (max-width: 800px) {
   #centerContent {
     #top {
@@ -2424,7 +2438,7 @@ key {
       "text text"
       "buttons buttons";
 
-    .text {
+    & > .text {
       margin-bottom: 1rem;
     }
   }
@@ -2433,6 +2447,18 @@ key {
   #commandLineInput {
     width: 400px !important;
   }
+
+  #centerContent {
+    .pageSettings .section.themes .buttons,
+    .pageSettings .section.language .buttons,
+    .pageSettings .section.layout .buttons,
+    .pageSettings .section.keymapLayout .buttons,
+    .pageSettings .section.fontFamily .buttons,
+    .pageSettings .section.funbox .buttons,
+    .pageSettings .section.keymapStyle .buttons {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
 }
 
 .keymap {
diff --git a/public/index.html b/public/index.html
index 4744c679b..510ae6cc2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2156,7 +2156,10 @@
                     <div class="button saveCustomThemeButton">save</div>
                   </div>
                 </div>
-                <div tabContent="preset" class="tabContent buttons"></div>
+                <div tabContent="preset" class="tabContent">
+                  <div class="favThemes buttons"></div>
+                  <div class="allThemes buttons"></div>
+                </div>
               </div>
             </div>
             <div class="sectionSpacer"></div>
diff --git a/public/js/settings.js b/public/js/settings.js
index 24c13c903..50e1b23aa 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -276,15 +276,19 @@ async function fillSettingsPage() {
 }
 
 function refreshThemeButtons() {
-  let themesEl = $(".pageSettings .section.themes .buttons").empty();
+  let favThemesEl = $(
+    ".pageSettings .section.themes .favThemes.buttons"
+  ).empty();
+  let themesEl = $(".pageSettings .section.themes .allThemes.buttons").empty();
 
   getSortedThemesList().then((themes) => {
     //first show favourites
     if (config.favThemes.length > 0) {
+      favThemesEl.css({ paddingBottom: "1rem" });
       themes.forEach((theme) => {
         if (config.favThemes.includes(theme.name)) {
           let activeTheme = config.theme === theme.name ? "active" : "";
-          themesEl.append(
+          favThemesEl.append(
             `<div class="theme button" theme='${theme.name}' style="color:${
               theme.textColor
             };background:${theme.bgColor}">
@@ -294,6 +298,8 @@ function refreshThemeButtons() {
           );
         }
       });
+    } else {
+      favThemesEl.css({ paddingBottom: "0" });
     }
     //then the rest
     themes.forEach((theme) => {