[feature] switch to layout width range input

css/base.css

@@ -60,9 +60,10 @@
   --z-index-link: 2000;
   --z-index-header: 3000;
   --z-index-tip: 4000;
-  --z-index-shade: 5000;
-  --z-index-modal: 6000;
-  --z-index-menu: 7000;
+  --z-container-edge: 5000;
+  --z-index-shade: 6000;
+  --z-index-modal: 7000;
+  --z-index-menu: 8000;
   --header-shade-color: transparent;
   --header-shade-opacity: none;
   --header-height: 0;
@@ -71,6 +72,8 @@
   --background-opacity: 1;
   --background-accent-opacity: 0;
   --background-blur: 0;
+  --layout-width: calc(70vw - var(--layout-width-gutter));
+  --layout-width-gutter: var(--gutter) * 8;
   /* breakpoint reference */
   /* can not be used in @media as of yet */
   --breakpoint-sm: 550px;

css/container.css

@@ -1,45 +1,29 @@
 .container {
   margin-left: auto;
   margin-right: auto;
-  transition: all var(--animation-speed-fast) ease-in-out;
+  position: relative;
+  width: var(--layout-width);
 }
 
-.is-layout-width-fluid .container,
-.is-layout-width-wide .container,
-.is-layout-width-thin .container {
-  width: calc(100vw - 4em);
+.container-edge {
+  background-color: transparent;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  width: calc(var(--layout-width) + var(--layout-width-gutter));
+  height: 100vh;
+  transform: translate(-50%, 0);
+  z-index: var(--z-container-edge);
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
 }
 
-@media (min-width: 550px) {
-  .is-layout-width-wide .container {
-    width: 80vw;
-  }
-
-  .is-layout-width-thin .container {
-    width: 60vw;
-  }
-}
+@media (min-width: 550px) {}
 
 @media (min-width: 900px) {}
 
-@media (min-width: 1100px) {
-  .is-layout-width-wide .container {
-    width: 75vw;
-  }
-
-  .is-layout-width-thin .container {
-    width: 40vw;
-  }
-}
-
-@media (min-width: 1600px) {
-  .is-layout-width-wide .container {
-    width: 70vw;
-  }
-
-  .is-layout-width-thin .container {
-    width: 30vw;
-  }
-}
+@media (min-width: 1100px) {}
+
+@media (min-width: 1600px) {}
 
 @media (min-width: 1600px) {}

css/form.css

@@ -62,7 +62,7 @@ input[type="text"][disabled] {
   padding: 0 calc(1em - var(--line-width));
   color: rgb(var(--form-input-text-disabled));
   border-width: var(--line-width);
-  border-color: rgb(var(--gray-02));
+  border-color: rgb(var(--form-input-text-disabled));;
   cursor: default;
   box-shadow: none;
 }

css/header.css

@@ -41,6 +41,17 @@
   border-bottom: var(--line-width) solid rgb(var(--accent));
 }
 
+.header-edge {
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--accent)), inset 0 0 0 calc(var(--line-width) * 2) rgba(var(--accent), 0.25);
+}
+
 .header-area {
   margin: 0 calc(var(--gutter) * -1);
   display: flex;

index.html

@@ -259,6 +259,7 @@
               <input id="control-layout-alignment-horizontal-right" class="control-layout-alignment-horizontal-right" type="radio" name="control-layout-alignment-horizontal" value="right" tabindex="1">
               <label for="control-layout-alignment-horizontal-right"><span class="label-icon"></span>Right</label>
             </div>
+            <p class="input-helper small muted">Effects may not be visible if the Search box is set to grow to fill available space.</p>
           </div>
           <div class="menu-item">
             <h1 class="menu-header">Vertical Alignment</h1>
@@ -298,7 +299,7 @@
             </div>
             <div class="input-wrap form-indent-1">
               <label for="control-header-shade-padding">Top & bottom padding</label>
-              <input id="control-header-shade-padding" class="control-header-shade-padding" type="range" min="2" max="20" value="0" tabindex="1">
+              <input id="control-header-shade-padding" class="control-header-shade-padding" type="range" min="1" max="25" value="0" tabindex="1">
             </div>
             <div class="checkbox-wrap form-indent-1">
               <input id="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
@@ -416,18 +417,10 @@
 
         <div class="menu-content-area menu-content-area-layout is-hidden">
           <div class="menu-item">
-            <h1 class="menu-header">Width</h1>
-            <div class="radio-wrap">
-              <input id="control-layout-width-fluid" class="control-layout-width-fluid" type="radio" name="control-layout-width" value="fluid" tabindex="1">
-              <label for="control-layout-width-fluid"><span class="label-icon"></span>Fluid</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-layout-width-wide" class="control-layout-width-wide" type="radio" name="control-layout-width" value="wide" tabindex="1">
-              <label for="control-layout-width-wide"><span class="label-icon"></span>Wide</label>
-            </div>
-            <div class="radio-wrap">
-              <input id="control-layout-width-thin" class="control-layout-width-thin" type="radio" name="control-layout-width" value="thin" tabindex="1">
-              <label for="control-layout-width-thin"><span class="label-icon"></span>Thin</label>
+            <h1 class="menu-header">Content container</h1>
+            <div class="input-wrap">
+              <label for="control-layout-width">Width</label>
+              <input id="control-layout-width" class="control-layout-width" type="range" min="30" max="100" value="0" tabindex="1">
             </div>
           </div>
           <div class="menu-item">
@@ -506,6 +499,7 @@
 <script src="js/keyboard.js"></script>
 <script src="js/background.js"></script>
 <script src="js/title.js"></script>
+<script src="js/layout.js"></script>
 <script src="js/init.js"></script>
 
 </html>

js/control.js

@@ -322,6 +322,17 @@ var control = (function() {
     element: helper.e(".control-header-shade-padding"),
     path: "header.shade.padding",
     type: "range",
+    additionalEvents: [{
+      event: "mousedown",
+      action: function() {
+        header.edge("show");
+      }
+    }, {
+      event: "mouseup",
+      action: function() {
+        header.edge("hide");
+      }
+    }],
     func: function() {
       render();
       header.render();
@@ -483,25 +494,24 @@ var control = (function() {
       link.render();
     }
   }, {
-    element: helper.e(".control-layout-width-fluid"),
+    element: helper.e(".control-layout-width"),
     path: "layout.width",
-    type: "radio",
-    func: function() {
-      render();
-    }
-  }, {
-    element: helper.e(".control-layout-width-wide"),
-    path: "layout.width",
-    type: "radio",
-    func: function() {
-      render();
-    }
-  }, {
-    element: helper.e(".control-layout-width-thin"),
-    path: "layout.width",
-    type: "radio",
+    type: "range",
+    additionalEvents: [{
+      event: "mousedown",
+      action: function() {
+        layout.edge("show");
+      }
+    }, {
+      event: "mouseup",
+      action: function() {
+        layout.edge("hide");
+      }
+    }],
     func: function() {
       render();
+      layout.render();
+      header.render();
     }
   }, {
     element: helper.e(".control-layout-scroll-past-end"),
@@ -680,10 +690,10 @@ var control = (function() {
           path: object.path,
           newValue: newValue
         });
-        // console.log(object.path, helper.getObject({
-        //   object: state.get(),
-        //   path: object.path
-        // }));
+        console.log(object.path, helper.getObject({
+          object: state.get(),
+          path: object.path
+        }));
       };
     };
     var bindControl = function(object) {
@@ -704,6 +714,13 @@ var control = (function() {
         action[object.element.tagName.toLowerCase()](object);
         data.save();
       }, false);
+      if (object.additionalEvents) {
+        object.additionalEvents.forEach(function(item, index) {
+          object.element.addEventListener(item.event, function() {
+            item.action();
+          }, false);
+        });
+      };
     };
     _allControl.forEach(function(arrayItem, index) {
       bindControl(arrayItem);
@@ -801,10 +818,6 @@ var control = (function() {
       urlText[state.get().bookmarks.url.style]();
     };
     var _layout = function() {
-      helper.removeClass(html, "is-layout-width-fluid");
-      helper.removeClass(html, "is-layout-width-wide");
-      helper.removeClass(html, "is-layout-width-thin");
-      helper.addClass(html, "is-layout-width-" + state.get().layout.width);
       if (state.get().layout.scrollPastEnd) {
         helper.addClass(html, "is-layout-scroll-past-end");
       } else {
@@ -812,9 +825,9 @@ var control = (function() {
       };
     };
     var _theme = function() {
-    helper.removeClass(html, "is-theme-style-dark");
-    helper.removeClass(html, "is-theme-style-light");
-    helper.addClass(html, "is-theme-style-" + state.get().theme.style);
+      helper.removeClass(html, "is-theme-style-dark");
+      helper.removeClass(html, "is-theme-style-light");
+      helper.addClass(html, "is-theme-style-" + state.get().theme.style);
     };
     var _editAdd = function() {
       if (state.get().header.editAdd.show) {

js/header.js

@@ -14,6 +14,26 @@ var header = (function() {
     });
   };
 
+  var edge = function(action) {
+    var header = helper.e(".header");
+    var container = helper.makeNode({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "header-edge"
+      }]
+    });
+    var state = {
+      show: function() {
+        header.appendChild(container);
+      },
+      hide: function() {
+        header.removeChild(helper.e(".header-edge"));
+      }
+    };
+    state[action]();
+  };
+
   var render = function() {
     var html = helper.e("html");
     var header = helper.e(".header");
@@ -68,8 +88,9 @@ var header = (function() {
 
   // exposed methods
   return {
-    init: init,
-    render: render
+    edge: edge,
+    render: render,
+    init: init
   };
 
 })();

js/init.js

@@ -44,6 +44,9 @@ keyboard.init();
 // bind tips
 tip.init();
 
+// render page title
+layout.init();
+
 // render header height padding
 header.init();
 

js/layout.js

@@ -0,0 +1,42 @@
+var layout = (function() {
+
+  var render = function() {
+    var html = helper.e("html");
+    html.style.setProperty("--layout-width", "calc(" + helper.getObject({
+      object: state.get(),
+      path: "layout.width"
+    }) + "vw - var(--layout-width-gutter))");
+  };
+
+  var edge = function(action) {
+    var body = helper.e("body");
+    var container = helper.makeNode({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "container container-edge"
+      }]
+    });
+    var state = {
+      show: function() {
+        body.appendChild(container);
+      },
+      hide: function() {
+        body.removeChild(helper.e(".container-edge"));
+      }
+    };
+    state[action]();
+  };
+
+  var init = function() {
+    render();
+  };
+
+  // exposed methods
+  return {
+    edge: edge,
+    render: render,
+    init: init
+  };
+
+})();

js/state.js

@@ -88,7 +88,7 @@ var state = (function() {
       sort: "none"
     },
     layout: {
-      width: "wide",
+      width: 72,
       scrollPastEnd: true,
       title: "New Tab"
     },

js/update.js

@@ -231,6 +231,11 @@ var update = (function() {
         delete data.state.layout.theme;
         data.version = "2.12.0";
       };
+      if (version.compare(data.version, "2.14.0") == -1) {
+        console.log("\t -- running update", "2.14.0");
+        data.state.layout.width = 72;
+        data.version = "2.14.0";
+      };
     };
     // if no update is needed
     // version bump

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.13.0";
+  var current = "2.14.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");