From 3035a948b9822a358b40fffddc89dca005b6ec97 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 28 Apr 2019 21:24:13 +0200
Subject: [PATCH] less hacky way to implement distraction free mode which also
 fixes scrollbar

---
 src/public/javascripts/services/entrypoints.js |  7 +------
 src/public/stylesheets/desktop.css             | 10 ++++++++++
 src/public/stylesheets/style.css               | 14 --------------
 3 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js
index d77504cba..9fa6f8f2a 100644
--- a/src/public/javascripts/services/entrypoints.js
+++ b/src/public/javascripts/services/entrypoints.js
@@ -85,12 +85,7 @@ function registerEntrypoints() {
 
     utils.bindShortcut('alt+m', e => {
         $(".hide-toggle").toggle();
-
-        const $container = $("#container");
-        // when hiding switch display to block, otherwise grid still tries to display columns which shows
-        // left empty column
-        $container.css("display", $container.css("display") === "grid" ? "block" : "grid");
-        $container.toggleClass("distraction-free-mode");
+        $("#container").toggleClass("distraction-free-mode");
     });
 
     // hide (toggle) everything except for the note content for distraction free writing
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 633b986e2..9a1118077 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -18,6 +18,16 @@ body {
     grid-gap: 10px;
 }
 
+#container.distraction-free-mode {
+    grid-template-areas:
+    "title"
+    "note-detail" !important;
+    grid-template-rows: auto
+    auto
+    !important;
+    grid-template-columns: 1fr !important;
+}
+
 #search-box {
     display: none;
     padding: 10px;
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 5143ab8c2..882a71651 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -450,20 +450,6 @@ div.ui-tooltip {
     border: 1px solid var(--main-border-color);
 }
 
-/*
-* .electron-in-page-search-window is a class specified to default
-* <webview> element for search window.
-*/
-.electron-in-page-search-window {
-    position: fixed;
-    top: 45px;
-    right: 10px;
-    width: 360px;
-    height: 55px;
-    display: none;
-    z-index: 1001;
-}
-
 /*
 * .search-inactive is added to search window <webview> when the window
 * is inactive.