From 002a7ff9848a9b917b2cde78608caa7fac31dee8 Mon Sep 17 00:00:00 2001
From: Steffen van Bergerem <svbergerem@online.de>
Date: Sun, 21 Aug 2016 10:02:20 +0200
Subject: [PATCH] Fix stream shortcuts on small screens
---
.../javascripts/app/views/stream/shortcuts.js | 28 +++++++++----------
features/desktop/keyboard_navigation.feature | 15 ++++++++++
features/step_definitions/custom_web_steps.rb | 4 +--
.../keyboard_navigation_steps.rb | 2 +-
4 files changed, 31 insertions(+), 18 deletions(-)
diff --git a/app/assets/javascripts/app/views/stream/shortcuts.js b/app/assets/javascripts/app/views/stream/shortcuts.js
index b09c6e753b..dd62588c9f 100644
--- a/app/assets/javascripts/app/views/stream/shortcuts.js
+++ b/app/assets/javascripts/app/views/stream/shortcuts.js
@@ -1,7 +1,7 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.StreamShortcuts = Backbone.View.extend({
- _headerSize: 50,
+ _headerSize: 60,
events: {
"keydown": "_onHotkeyDown",
@@ -57,35 +57,35 @@ app.views.StreamShortcuts = Backbone.View.extend({
gotoNext: function() {
// select next post: take the first post under the header
- var stream_elements = this.$('div.stream_element.loaded');
+ var streamElements = this.$("div.stream_element.loaded");
var posUser = window.pageYOffset;
- for (var i = 0; i < stream_elements.length; i++) {
- if(stream_elements[i].offsetTop>posUser+this._headerSize){
- this.selectPost(stream_elements[i]);
+ for (var i = 0; i < streamElements.length; i++) {
+ if (Math.round($(streamElements[i]).offset().top) > posUser + this._headerSize) {
+ this.selectPost(streamElements[i]);
return;
}
}
// standard: last post
- if(stream_elements[stream_elements.length-1]){
- this.selectPost(stream_elements[stream_elements.length-1]);
+ if (streamElements[streamElements.length - 1]) {
+ this.selectPost(streamElements[streamElements.length - 1]);
}
},
gotoPrev: function() {
// select previous post: take the first post above the header
- var stream_elements = this.$('div.stream_element.loaded');
+ var streamElements = this.$("div.stream_element.loaded");
var posUser = window.pageYOffset;
- for (var i = stream_elements.length-1; i >=0; i--) {
- if(stream_elements[i].offsetTop<posUser+this._headerSize){
- this.selectPost(stream_elements[i]);
+ for (var i = streamElements.length - 1; i >= 0; i--) {
+ if (Math.round($(streamElements[i]).offset().top) < posUser + this._headerSize) {
+ this.selectPost(streamElements[i]);
return;
}
}
// standard: first post
- if(stream_elements[0]){
- this.selectPost(stream_elements[0]);
+ if (streamElements[0]) {
+ this.selectPost(streamElements[0]);
}
},
@@ -118,7 +118,7 @@ app.views.StreamShortcuts = Backbone.View.extend({
var selected=this.$('div.stream_element.loaded.shortcut_selected');
selected.removeClass('shortcut_selected').removeClass('highlighted');
//move to new post
- window.scrollTo(window.pageXOffset, element.offsetTop-this._headerSize);
+ window.scrollTo(window.pageXOffset, Math.round($(element).offset().top - this._headerSize));
//add the selection and selected-class to new post
element.className+=" shortcut_selected highlighted";
},
diff --git a/features/desktop/keyboard_navigation.feature b/features/desktop/keyboard_navigation.feature
index 9e4b24cf80..7d26aaea32 100644
--- a/features/desktop/keyboard_navigation.feature
+++ b/features/desktop/keyboard_navigation.feature
@@ -60,3 +60,18 @@ Feature: Keyboard navigation
When I press the "J" key somewhere
Then post 2 should be highlighted
And I should have navigated to the highlighted post
+
+ Scenario: navigate downwards on a small screen
+ When I resize my window to 800x600
+ And I press the "J" key somewhere
+ Then post 1 should be highlighted
+ And I should have navigated to the highlighted post
+
+ When I press the "J" key somewhere
+ Then post 2 should be highlighted
+ And I should have navigated to the highlighted post
+
+ Given I expand the publisher
+ When I press the "J" key in the publisher
+ Then post 2 should be highlighted
+ And I close the publisher
diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb
index 73e9db02ef..3883d2acf4 100644
--- a/features/step_definitions/custom_web_steps.rb
+++ b/features/step_definitions/custom_web_steps.rb
@@ -241,9 +241,7 @@ And "I wait for notifications to load" do
end
When /^I resize my window to 800x600$/ do
- page.execute_script <<-JS
- window.resizeTo(800,600);
- JS
+ page.driver.resize(800, 600)
end
Then 'I should see an image attached to the post' do
diff --git a/features/step_definitions/keyboard_navigation_steps.rb b/features/step_definitions/keyboard_navigation_steps.rb
index 2573abc0e3..9bf47c478c 100644
--- a/features/step_definitions/keyboard_navigation_steps.rb
+++ b/features/step_definitions/keyboard_navigation_steps.rb
@@ -13,5 +13,5 @@ Then /^post (\d+) should be highlighted$/ do |position|
end
And /^I should have navigated to the highlighted post$/ do
- find(".shortcut_selected")["offsetTop"].to_i.should == page.evaluate_script("window.pageYOffset + 50").to_i
+ expect(page.evaluate_script("window.pageYOffset + 60 - $('.shortcut_selected').offset().top").to_i).to be(0)
end
--
GitLab