From 1682b2d71d3f8c71e1bd784a6724e4a726591281 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Tue, 6 Oct 2020 17:28:03 +0100
Subject: [PATCH] added a setting to control the width of the content

---
 public/css/style.scss   | 12 +++++++++++
 public/index.html       | 46 +++++++++++++++++++++++++++++++++++++++++
 public/js/settings.js   |  1 +
 public/js/userconfig.js | 22 ++++++++++++++++++--
 4 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 3c7eddce3..eb959919f 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -807,6 +807,18 @@ a:hover {
   align-items: center;
   z-index: 999;
   grid-template-rows: auto 1fr auto;
+  &.wide125{
+    max-width: 1250px;
+  }
+  &.wide150{
+    max-width: 1500px;
+  }
+  &.wide200{
+    max-width: 2000px;
+  }
+  &.widemax{
+    max-width: unset;
+  }
 }
 
 #caret {
diff --git a/public/index.html b/public/index.html
index aa878a9a0..e6a18a1a8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2266,6 +2266,52 @@
               <!-- <div class="text">Change the font family for the site</div> -->
               <div class="buttons"></div>
             </div>
+            <div class="section pageWidth">
+              <h1>page width</h1>
+              <div class="text">Control the width of the content.</div>
+              <div class="buttons">
+                <div
+                  class="button"
+                  pageWidth="100"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  100%
+                </div>
+                <div
+                  class="button"
+                  pageWidth="125"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  125%
+                </div>
+                <div
+                  class="button"
+                  pageWidth="150"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  150%
+                </div>
+                <div
+                  class="button"
+                  pageWidth="200"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  200%
+                </div>
+                <div
+                  class="button"
+                  pageWidth="max"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  Max
+                </div>
+              </div>
+            </div>
             <div class="sectionSpacer"></div>
           </div>
 
diff --git a/public/js/settings.js b/public/js/settings.js
index 949ff60ff..b02a60616 100644
--- a/public/js/settings.js
+++ b/public/js/settings.js
@@ -214,6 +214,7 @@ settingsGroups.capsLockBackspace = new SettingsGroup(
 settingsGroups.layout = new SettingsGroup("layout", changeLayout);
 settingsGroups.language = new SettingsGroup("language", changeLanguage);
 settingsGroups.fontSize = new SettingsGroup("fontSize", changeFontSize);
+settingsGroups.pageWidth = new SettingsGroup("pageWidth", setPageWidth);
 settingsGroups.caretStyle = new SettingsGroup("caretStyle", setCaretStyle);
 settingsGroups.paceCaretStyle = new SettingsGroup("paceCaretStyle", setPaceCaretStyle);
 settingsGroups.timerStyle = new SettingsGroup("timerStyle", setTimerStyle);
diff --git a/public/js/userconfig.js b/public/js/userconfig.js
index 98b6ef607..b22f322bb 100644
--- a/public/js/userconfig.js
+++ b/public/js/userconfig.js
@@ -59,7 +59,8 @@ let defaultConfig = {
   swapEscAndTab: false,
   showOutOfFocusWarning: true,
   paceCaret: "off",
-  paceCaretCustomSpeed: 100
+  paceCaretCustomSpeed: 100,
+  pageWidth: "100"
 };
 
 let cookieConfig = null;
@@ -199,7 +200,7 @@ function applyConfig(configObj) {
     setShowOutOfFocusWarning(configObj.showOutOfFocusWarning, true);
     setPaceCaret(configObj.paceCaret, true);
     setPaceCaretCustomSpeed(configObj.paceCaretCustomSpeed, true);
-
+    setPageWidth(configObj.pageWidth, true);
 
     config.startGraphsAtZero = configObj.startGraphsAtZero;
     // if (
@@ -500,6 +501,23 @@ function toggleColorfulMode() {
   saveConfigToCookie();
 }
 
+function setPageWidth(val, nosave) {
+  if (val == null || val == undefined) {
+    val = "100";
+  }
+  config.pageWidth = val;
+  $("#centerContent").removeClass("wide125");
+  $("#centerContent").removeClass("wide150");
+  $("#centerContent").removeClass("wide200");
+  $("#centerContent").removeClass("widemax");
+
+
+  if (val !== "100") {
+    $("#centerContent").addClass('wide' + val);
+  }
+  if (!nosave) saveConfigToCookie();
+}
+
 function setCaretStyle(caretStyle, nosave) {
   if (caretStyle == null || caretStyle == undefined) {
     caretStyle = "default";