diff --git a/assets/images/icons.png b/assets/images/icons.png
index 4f9f014b..93afb499 100644
Binary files a/assets/images/icons.png and b/assets/images/icons.png differ
diff --git a/assets/images/icons@2x.png b/assets/images/icons@2x.png
index 5e76ac21..a04f5b71 100644
Binary files a/assets/images/icons@2x.png and b/assets/images/icons@2x.png differ
diff --git a/assets/javascripts/app/app.coffee b/assets/javascripts/app/app.coffee
index 6499f9f0..fd5c57a3 100644
--- a/assets/javascripts/app/app.coffee
+++ b/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
diff --git a/assets/javascripts/app/settings.coffee b/assets/javascripts/app/settings.coffee
index af65232e..9e547eb9 100644
--- a/assets/javascripts/app/settings.coffee
+++ b/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
diff --git a/assets/javascripts/news.json b/assets/javascripts/news.json
index 735e7d7c..391bed88 100644
--- a/assets/javascripts/news.json
+++ b/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: Q and OpenTSDB"
], [
diff --git a/assets/javascripts/templates/sidebar_tmpl.coffee b/assets/javascripts/templates/sidebar_tmpl.coffee
index 80750590..c25fc8a3 100644
--- a/assets/javascripts/templates/sidebar_tmpl.coffee
+++ b/assets/javascripts/templates/sidebar_tmpl.coffee
@@ -53,6 +53,7 @@ sidebarFooter = (html) -> """"""
templates.sidebarSettings = ->
sidebarFooter """
+
"""
diff --git a/assets/javascripts/views/layout/document.coffee b/assets/javascripts/views/layout/document.coffee
index 358aa674..ed11ffec 100644
--- a/assets/javascripts/views/layout/document.coffee
+++ b/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'
diff --git a/assets/javascripts/views/layout/resizer.coffee b/assets/javascripts/views/layout/resizer.coffee
index 34200dc8..40e6ccd1 100644
--- a/assets/javascripts/views/layout/resizer.coffee
+++ b/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"
diff --git a/assets/javascripts/views/sidebar/sidebar.coffee b/assets/javascripts/views/sidebar/sidebar.coffee
index 55471bbd..fe2097a4 100644
--- a/assets/javascripts/views/sidebar/sidebar.coffee
+++ b/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) =>
diff --git a/assets/javascripts/views/sidebar/sidebar_hover.coffee b/assets/javascripts/views/sidebar/sidebar_hover.coffee
index 16bf24fc..a3ed51c2 100644
--- a/assets/javascripts/views/sidebar/sidebar_hover.coffee
+++ b/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
- if top >= @offsetTop
- @clone.style.top = top + 'px'
+ rect = $.rect(@cursor)
+ if rect.top >= @offsetTop
+ @clone.style.top = rect.top + 'px'
+ @clone.style.left = rect.left + 'px'
else
@hide()
return
diff --git a/assets/stylesheets/components/_app.scss b/assets/stylesheets/components/_app.scss
index eea85cce..9effe63f 100644
--- a/assets/stylesheets/components/_app.scss
+++ b/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 {
diff --git a/assets/stylesheets/components/_sidebar.scss b/assets/stylesheets/components/_sidebar.scss
index d029d274..45123628 100644
--- a/assets/stylesheets/components/_sidebar.scss
+++ b/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;
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index 3533d7d8..3a20b844 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/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%; }
}
diff --git a/assets/stylesheets/global/_icons.scss b/assets/stylesheets/global/_icons.scss
index eeccc3dc..e18c6dd3 100644
--- a/assets/stylesheets/global/_icons.scss
+++ b/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; }
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index a1dd1df7..c3677c47 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/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;
diff --git a/assets/stylesheets/global/variables-dark.scss b/assets/stylesheets/global/variables-dark.scss
index 54f747ac..de680537 100644
--- a/assets/stylesheets/global/variables-dark.scss
+++ b/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;
diff --git a/lib/app.rb b/lib/app.rb
index c4c69e90..f05c0e77 100644
--- a/lib/app.rb
+++ b/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
diff --git a/public/icons/ui/contract/16.png b/public/icons/ui/contract/16.png
new file mode 100644
index 00000000..d23cfd88
Binary files /dev/null and b/public/icons/ui/contract/16.png differ
diff --git a/public/icons/ui/contract/16@2x.png b/public/icons/ui/contract/16@2x.png
new file mode 100644
index 00000000..a9373149
Binary files /dev/null and b/public/icons/ui/contract/16@2x.png differ
diff --git a/public/icons/ui/expand/16.png b/public/icons/ui/expand/16.png
new file mode 100644
index 00000000..aeef7f9d
Binary files /dev/null and b/public/icons/ui/expand/16.png differ
diff --git a/public/icons/ui/expand/16@2x.png b/public/icons/ui/expand/16@2x.png
new file mode 100644
index 00000000..63381f8a
Binary files /dev/null and b/public/icons/ui/expand/16@2x.png differ
diff --git a/test/app_test.rb b/test/app_test.rb
index 83d9b06c..9c0cf42e 100644
--- a/test/app_test.rb
+++ b/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
diff --git a/views/app.erb b/views/app.erb
index c6b66fad..666589f1 100644
--- a/views/app.erb
+++ b/views/app.erb
@@ -1,4 +1,4 @@
-