Commit ae65272b authored by Jose Ivan Vargas Lopez's avatar Jose Ivan Vargas Lopez Committed by Jose Ivan Vargas

Fixed Issuable sidebar so it remains closed on mobile/smaller screen devices

Added test to replicate the bug, also added a couple of helpers that can be reused
on the testing suite to resize the browser window, these helpers are located on the
spec/support/mobile_helpers.rb
parent b55c1bc4
...@@ -84,7 +84,6 @@ ...@@ -84,7 +84,6 @@
var $sidebarGutterToggle = $('.js-sidebar-toggle'); var $sidebarGutterToggle = $('.js-sidebar-toggle');
var $flash = $('.flash-container'); var $flash = $('.flash-container');
var bootstrapBreakpoint = bp.getBreakpointSize(); var bootstrapBreakpoint = bp.getBreakpointSize();
var checkInitialSidebarSize;
var fitSidebarForSize; var fitSidebarForSize;
// Set the default path for all cookies to GitLab's root directory // Set the default path for all cookies to GitLab's root directory
...@@ -246,19 +245,19 @@ ...@@ -246,19 +245,19 @@
return $document.trigger('breakpoint:change', [bootstrapBreakpoint]); return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
} }
}; };
checkInitialSidebarSize = function () {
bootstrapBreakpoint = bp.getBreakpointSize();
if (bootstrapBreakpoint === 'xs' || 'sm') {
return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
}
};
$window.off('resize.app').on('resize.app', function () { $window.off('resize.app').on('resize.app', function () {
return fitSidebarForSize(); return fitSidebarForSize();
}); });
window.addEventListener('beforeunload', function() {
// collapsed_gutter cookie hides the sidebar
var bpBreakpoint = bp.getBreakpointSize();
if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm') {
Cookies.set('collapsed_gutter', true);
}
});
gl.awardsHandler = new AwardsHandler(); gl.awardsHandler = new AwardsHandler();
checkInitialSidebarSize();
new Aside(); new Aside();
// bind sidebar events // bind sidebar events
new gl.Sidebar(); new gl.Sidebar();
}); });
......
---
title: Fixed Issuable sidebar not closing on smaller/mobile sized screens
merge_request:
author:
require 'rails_helper' require 'rails_helper'
feature 'Issue Sidebar', feature: true do feature 'Issue Sidebar', feature: true do
include WaitForAjax include WaitForAjax, MobileHelpers
let(:project) { create(:project, :public) } let(:project) { create(:project, :public) }
let(:issue) { create(:issue, project: project) } let(:issue) { create(:issue, project: project) }
...@@ -59,6 +59,30 @@ feature 'Issue Sidebar', feature: true do ...@@ -59,6 +59,30 @@ feature 'Issue Sidebar', feature: true do
end end
end end
context 'sidebar', js: true do
it 'changes size when the screen size is smaller' do
sidebar_selector = 'aside.right-sidebar.right-sidebar-collapsed'
# Resize the window
resize_screen_sm
# Make sure the sidebar is collapsed
expect(page).to have_css(sidebar_selector)
# Once is collapsed let's open the sidebard and reload
page.within(sidebar_selector) do
find('.js-sidebar-toggle').click
# we wait a bit so the sidebar finishes it's animation
sleep 1
end
refresh
expect(page).to have_css(sidebar_selector)
# Restore the window size as it was including the sidebar
restore_window_size
page.within(sidebar_selector) do
find('.js-sidebar-toggle').click
sleep 1
end
end
end
context 'creating a new label', js: true do context 'creating a new label', js: true do
it 'shows option to crate a new label is present' do it 'shows option to crate a new label is present' do
page.within('.block.labels') do page.within('.block.labels') do
......
module MobileHelpers
def resize_screen_sm
resize_window(900, 768)
end
def restore_window_size
resize_window(1366, 768)
end
def resize_window(width, height)
page.driver.resize_window width, height
end
end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment