Add an icon in the sidebar to constrain the width of the UI

(only visible when applicable)

assets/javascripts/app/app.coffee

@@ -11,6 +11,7 @@
     return unless @browserCheck()
     @showLoading()
 
+    @el = $('._app')
     @store = new Store
     @appCache = new app.AppCache if app.AppCache.isEnabled()
     @settings = new app.Settings @store

assets/javascripts/app/settings.coffee

@@ -2,6 +2,7 @@ class app.Settings
   SETTINGS_KEY = 'settings'
   DOCS_KEY = 'docs'
   DARK_KEY = 'dark'
+  LAYOUT_KEY = 'layout'
   SIZE_KEY = 'size'
 
   @defaults: ->
@@ -60,6 +61,15 @@ class app.Settings
     catch
     return
 
+  setLayout: (value) ->
+    try
+      if value
+        Cookies.set LAYOUT_KEY, value, path: '/', expires: 1e8
+      else
+        Cookies.expire LAYOUT_KEY
+    catch
+    return
+
   setSize: (value) ->
     try
       Cookies.set SIZE_KEY, value, path: '/', expires: 1e8
@@ -69,6 +79,7 @@ class app.Settings
   reset: ->
     try Cookies.expire DOCS_KEY
     try Cookies.expire DARK_KEY
+    try Cookies.expire LAYOUT_KEY
     try Cookies.expire SIZE_KEY
     try @store.del(SETTINGS_KEY)
     return

assets/javascripts/news.json

@@ -1,5 +1,8 @@
 [
   [
+    "2015-08-03",
+    "Added an icon in the sidebar to constrain the width of the UI (visible when applicable)."
+  ], [
     "2015-08-02",
     "New documentations: <a href=\"/q/\">Q</a> and <a href=\"/opentsdb/\">OpenTSDB</a>"
   ], [

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -53,6 +53,7 @@ sidebarFooter = (html) -> """<div class="_sidebar-footer">#{html}</div>"""
 templates.sidebarSettings = ->
   sidebarFooter """
     <a class="_sidebar-footer-link _sidebar-footer-light" title="Toggle light" data-light></a>
+    <a class="_sidebar-footer-link _sidebar-footer-layout" title="Toggle layout" data-layout></a>
     <a class="_sidebar-footer-link _sidebar-footer-edit" data-pick-docs>Select documentation</a>
   """
 

assets/javascripts/views/layout/document.coffee

@@ -1,4 +1,6 @@
 class app.views.Document extends app.View
+  MAX_WIDTH_CLASS = '_max-width'
+
   @el: document
 
   @shortcuts:
@@ -26,6 +28,13 @@ class app.views.Document extends app.View
     app.appCache?.updateInBackground()
     return
 
+  toggleLayout: ->
+    wantsMaxWidth = !app.el.classList.contains(MAX_WIDTH_CLASS)
+    app.el.classList[if wantsMaxWidth then 'add' else 'remove'](MAX_WIDTH_CLASS)
+    app.settings.setLayout(if wantsMaxWidth then MAX_WIDTH_CLASS else false)
+    app.appCache?.updateInBackground()
+    return
+
   setTitle: (title) ->
     @el.title = if title then "DevDocs - #{title}" else 'DevDocs API Documentation'
 

assets/javascripts/views/layout/resizer.coffee

@@ -17,10 +17,11 @@ class app.views.Resizer extends app.View
     @size = @style.getAttribute('data-size')
     return
 
-  MIN = 250
+  MIN = 260
   MAX = 600
 
   resize: (value, save) ->
+    value -= app.el.offsetLeft
     return unless value > 0
     value = Math.min(Math.max(Math.round(value), MIN), MAX)
     newSize = "#{value}px"

assets/javascripts/views/sidebar/sidebar.coffee

@@ -83,6 +83,9 @@ class app.views.Sidebar extends app.View
     else if event.target.hasAttribute? 'data-light'
       $.stopEvent(event)
       app.document.toggleLight()
+    else if event.target.hasAttribute? 'data-layout'
+      $.stopEvent(event)
+      app.document.toggleLayout()
     return
 
   onGlobalClick: (event) =>

assets/javascripts/views/sidebar/sidebar_hover.coffee

@@ -39,9 +39,10 @@ class app.views.SidebarHover extends app.View
 
   position: =>
     if @cursor
-      top = $.rect(@cursor).top
+      rect = $.rect(@cursor)
-      if top >= @offsetTop
+      if rect.top >= @offsetTop
-        @clone.style.top = top + 'px'
+        @clone.style.top = rect.top + 'px'
+        @clone.style.left = rect.left + 'px'
       else
         @hide()
     return

assets/stylesheets/components/_app.scss

@@ -4,12 +4,19 @@
   height: 100%;
   padding-top: $headerHeight;
   overflow: hidden;
+  background: $contentBackground;
   -webkit-transition: opacity .2s;
           transition: opacity .2s;
   @extend %border-box;
 
   ._booting > & { opacity: 0; }
   ._noscript > & { display: none; }
+
+  &._max-width {
+    margin: 0 auto;
+    max-width: $maxWidth;
+    box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
+  }
 }
 
 ._booting {

assets/stylesheets/components/_sidebar.scss

@@ -339,6 +339,11 @@
 
   @media #{$mediumScreen} { width: $sidebarMediumWidth; }
 
+  ._max-width & {
+    left: calc(50% - #{$maxWidth} / 2);
+    @media (max-width: #{$maxWidth}) { left: 0; }
+  }
+
   &:before {
     content: '';
     position: absolute;
@@ -358,7 +363,7 @@
   overflow: hidden;
   height: 2.5rem;
   line-height: 1rem;
-  padding: .75rem;
+  padding: .75rem .25rem .75rem .75rem;
   font-size: .875em;
   cursor: pointer;
   @extend %border-box;
@@ -385,15 +390,15 @@
 
 ._sidebar-footer-light {
   float: right;
-  width: 2.5rem;
+  width: 2rem;
   padding: 0;
-  opacity: .6;
+  opacity: .65;
 
   &:before {
     float: none;
     position: absolute;
     top: .75rem;
-    left: .75rem;
+    left: .25rem;
 
     @if $style == 'dark' {
       @extend %icon-light-white;
@@ -403,6 +408,35 @@
   }
 }
 
+._sidebar-footer-layout {
+  float: right;
+  width: 2rem;
+  padding: 0;
+  opacity: .65;
+
+  &:before {
+    float: none;
+    position: absolute;
+    top: .75rem;
+    left: .375rem;
+    @if $style == 'dark' {
+      @extend %icon-expand-white;
+    } @else {
+      @extend %icon-expand;
+    }
+
+    ._max-width & {
+      @if $style == 'dark' {
+        @extend %icon-contract-white;
+      } @else {
+        @extend %icon-contract;
+      }
+    }
+  }
+
+  @media (max-width: #{$maxWidth + .1rem}) { display: none; }
+}
+
 ._sidebar-footer-save {
   margin-right: 1px;
   font-weight: bold;

assets/stylesheets/global/_base.scss

@@ -1,7 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
-  background: $contentBackground;
+  background: $documentBackground;
 
   @media #{$mediumScreen} { font-size: 93.75%; }
 }

assets/stylesheets/global/_icons.scss

@@ -107,3 +107,7 @@
 ._icon-vue:before           { background-position: -3rem -8rem; }
 ._icon-opentsdb:before      { background-position: -4rem -8rem; }
 ._icon-q:before             { background-position: -5rem -8rem; }
+%icon-expand                { background-position: -6rem -8rem; }
+%icon-contract              { background-position: -7rem -8rem; }
+%icon-expand-white          { background-position: -8rem -8rem; }
+%icon-contract-white        { background-position: -9rem -8rem; }

assets/stylesheets/global/_variables.scss

@@ -3,11 +3,13 @@ $monoFont: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
 $style: 'light';
 
+$maxWidth: 80rem;
 $headerHeight: 3rem;
 $sidebarWidth: 18rem;
 $sidebarMediumWidth: 16rem;
 
 $contentBackground: #fff;
+$documentBackground: #fafafa;
 
 $textColor: #333;
 $textColorLight: #666;
@@ -19,7 +21,7 @@ $focusBackground: #e5e5e5;
 $focusBorder: #d4d4d4;
 $focusText: #000;
 
-$loadingText: #e6e6e6;
+$loadingText: #ccc;
 $splashText: #bbb;
 $promoText: #bbb;
 

assets/stylesheets/global/variables-dark.scss

@@ -3,11 +3,13 @@ $monoFont: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 
 $style: 'dark';
 
+$maxWidth: 80rem;
 $headerHeight: 3rem;
 $sidebarWidth: 18rem;
 $sidebarMediumWidth: 16rem;
 
 $contentBackground: #303030;
+$documentBackground: #404040;
 
 $textColor: #c9c9c9;
 $textColorLight: #858585;

lib/app.rb

@@ -146,6 +146,10 @@ class App < Sinatra::Application
       @app_size ||= cookies[:size].nil? ? '18rem' : "#{cookies[:size]}px"
     end
 
+    def app_layout
+      cookies[:layout]
+    end
+
     def app_theme
       @app_theme ||= cookies[:dark].nil? ? 'default' : 'dark'
     end

test/app_test.rb

@@ -31,6 +31,12 @@ class AppTest < MiniTest::Spec
       get '/'
       assert_includes last_response.body, 'data-size="42px"'
     end
+
+    it "sets layout from cookie" do
+      set_cookie('layout=foo')
+      get '/'
+      assert_includes last_response.body, 'class="_app foo"'
+    end
   end
 
   describe "/[static-page]" do
@@ -92,6 +98,12 @@ class AppTest < MiniTest::Spec
       get '/manifest.appcache'
       assert_includes last_response.body, '42px'
     end
+
+    it "sets layout from cookie" do
+      set_cookie('layout=foo_layout')
+      get '/manifest.appcache'
+      assert_includes last_response.body, 'foo_layout'
+    end
   end
 
   describe "/[doc]" do

views/app.erb

@@ -1,4 +1,4 @@
-<div class="_app">
+<div class="_app<%= " #{app_layout}" if app_layout %>">
   <header class="_header">
     <a class="_home-link"></a>
     <a class="_menu-link"></a>

views/manifest.erb

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# <%= app_theme %> <%= app_size %>
+# <%= app_theme %> <%= app_size %> <%= app_layout %>
 
 CACHE:
 /