diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-14 11:51:07 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-03-14 11:51:07 +0000 |
commit | 1a5992b5eb15a58223925877e90f7642aac6ce2d (patch) | |
tree | a4e63ac71e06b47e0df3ac68152467d368a06274 | |
parent | 23b0eeca280de8c1f36f863396cb0aee912c56b9 (diff) | |
download | gitlab-ce-1a5992b5eb15a58223925877e90f7642aac6ce2d.tar.gz |
Changed breakpoint size
Changed breakpoint class into singleton
-rw-r--r-- | app/assets/javascripts/application.js.coffee | 7 | ||||
-rw-r--r-- | app/assets/javascripts/breakpoints.coffee | 43 | ||||
-rw-r--r-- | app/assets/javascripts/sidebar.js.coffee | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 4 |
5 files changed, 34 insertions, 28 deletions
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index beee6f2ec6d..e9c6196e926 100644 --- a/app/assets/javascripts/application.js.coffee +++ b/app/assets/javascripts/application.js.coffee @@ -108,8 +108,7 @@ window.onload = -> setTimeout shiftWindow, 100 $ -> - breakpoints = new Breakpoints() - bootstrapBreakpoint = breakpoints.getBreakpointSize() + bootstrapBreakpoint = bp.getBreakpointSize() $(".nicescroll").niceScroll(cursoropacitymax: '0.4', cursorcolor: '#FFF', cursorborder: "1px solid #FFF") @@ -261,12 +260,12 @@ $ -> fitSidebarForSize = -> oldBootstrapBreakpoint = bootstrapBreakpoint - bootstrapBreakpoint = breakpoints.getBreakpointSize() + bootstrapBreakpoint = bp.getBreakpointSize() if bootstrapBreakpoint != oldBootstrapBreakpoint $(document).trigger('breakpoint:change', [bootstrapBreakpoint]) checkInitialSidebarSize = -> - bootstrapBreakpoint = breakpoints.getBreakpointSize() + bootstrapBreakpoint = bp.getBreakpointSize() if bootstrapBreakpoint is "xs" or "sm" $(document).trigger('breakpoint:change', [bootstrapBreakpoint]) diff --git a/app/assets/javascripts/breakpoints.coffee b/app/assets/javascripts/breakpoints.coffee index fd2ee8efa2c..73a42d99982 100644 --- a/app/assets/javascripts/breakpoints.coffee +++ b/app/assets/javascripts/breakpoints.coffee @@ -1,24 +1,33 @@ class @Breakpoints - BREAKPOINTS = ["xs", "sm", "md", "lg"] + instance = null; - constructor: -> - @setup() + class BreakpointInstance + BREAKPOINTS = ["xs", "sm", "md", "lg"] - setup: -> - allDeviceSelector = BREAKPOINTS.map (breakpoint) -> - ".device-#{breakpoint}" + constructor: -> + @setup() - if $(allDeviceSelector.join(",")).length - return + setup: -> + allDeviceSelector = BREAKPOINTS.map (breakpoint) -> + ".device-#{breakpoint}" - # Create all the elements - $.each BREAKPOINTS, (i, breakpoint) -> - $("body").append "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>" + return if $(allDeviceSelector.join(",")).length - getBreakpointSize: -> - allDeviceSelector = BREAKPOINTS.map (breakpoint) -> - ".device-#{breakpoint}" + # Create all the elements + $.each BREAKPOINTS, (i, breakpoint) -> + $("body").append "<div class='device-#{breakpoint} visible-#{breakpoint}'></div>" - $visibleDevice = $(allDeviceSelector.join(",")).filter(":visible") - - return $visibleDevice.attr("class").split("visible-")[1] + getBreakpointSize: -> + @setup() + + allDeviceSelector = BREAKPOINTS.map (breakpoint) -> + ".device-#{breakpoint}" + + $visibleDevice = $(allDeviceSelector.join(",")).filter(":visible") + + return $visibleDevice.attr("class").split("visible-")[1] + + @get: -> + return instance ?= new BreakpointInstance + +@bp = Breakpoints.get() diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index 5c68690979d..eea3f5ee910 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -1,4 +1,3 @@ -mobileWidth = 991 collapsed = 'page-sidebar-collapsed' expanded = 'page-sidebar-expanded' @@ -21,8 +20,7 @@ $(document).on("click", '.toggle-nav-collapse', (e) -> ) $ -> - breakpoints = new Breakpoints() - size = breakpoints.getBreakpointSize() + size = bp.getBreakpointSize() if size is "xs" or size is "sm" if $('.page-with-sidebar').hasClass(expanded) diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index a73643b35ad..4c4033e3ae7 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -144,7 +144,7 @@ header { .header-collapsed { margin-left: $sidebar_collapsed_width; - @media (min-width: $screen-sm-max) { + @media (min-width: $screen-md-min) { @include collapsed-header; } } @@ -152,7 +152,7 @@ header { .header-expanded { margin-left: $sidebar_collapsed_width; - @media (min-width: $screen-sm-max) { + @media (min-width: $screen-md-min) { margin-left: $sidebar_width; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 24608e6cff2..26df9acd2ae 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -34,7 +34,7 @@ @media (min-width: $screen-sm-min) { padding-right: $gutter_width; } - + } } @@ -205,7 +205,7 @@ @mixin expanded-sidebar { padding-left: $sidebar_collapsed_width; - @media (min-width: $screen-sm-max) { + @media (min-width: $screen-md-min) { padding-left: $sidebar_width; } |