From e0f3593bffc3d6d51bece67b6a9c07ed0b6d1acd Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 18 Jan 2017 15:38:18 +0000 Subject: [PATCH 1/8] Add autoprefixer to Grunt tasks. --- services/web/Gruntfile.coffee | 14 +++++++++++--- services/web/package.json | 9 ++++++--- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index 2444c8cb0d..7ae6cba36c 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -1,5 +1,6 @@ fs = require "fs" PackageVersions = require "./app/coffee/infrastructure/PackageVersions" +require('es6-promise').polyfill() module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-coffee' @@ -18,6 +19,7 @@ module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-watch' grunt.loadNpmTasks 'grunt-parallel' grunt.loadNpmTasks 'grunt-exec' + grunt.loadNpmTasks 'grunt-postcss' # grunt.loadNpmTasks 'grunt-contrib-imagemin' # grunt.loadNpmTasks 'grunt-sprity' @@ -136,8 +138,14 @@ module.exports = (grunt) -> files: "public/stylesheets/style.css": "public/stylesheets/style.less" - - + postcss: + options: + map: true, + processors: [ + require('autoprefixer')({browsers: [ 'last 2 versions', 'ie >= 10' ]}) + ] + dist: + src: 'public/stylesheets/style.css' env: run: @@ -366,7 +374,7 @@ module.exports = (grunt) -> grunt.registerTask 'compile:server', 'Compile the server side coffee script', ['clean:app', 'coffee:app', 'coffee:app_dir', 'compile:modules:server'] grunt.registerTask 'compile:client', 'Compile the client side coffee script', ['coffee:client', 'coffee:sharejs', 'wrap_sharejs', "compile:modules:client", 'compile:modules:inject_clientside_includes'] - grunt.registerTask 'compile:css', 'Compile the less files to css', ['less'] + grunt.registerTask 'compile:css', 'Compile the less files to css', ['less', 'postcss:dist'] grunt.registerTask 'compile:minify', 'Concat and minify the client side js', ['requirejs', "file_append", "exec:cssmin",] grunt.registerTask 'compile:unit_tests', 'Compile the unit tests', ['clean:unit_tests', 'coffee:unit_tests'] grunt.registerTask 'compile:acceptance_tests', 'Compile the acceptance tests', ['clean:acceptance_tests', 'coffee:acceptance_tests'] diff --git a/services/web/package.json b/services/web/package.json index cfd2379f73..cd1d43c455 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -67,10 +67,12 @@ "passport-saml": "^0.15.0" }, "devDependencies": { + "autoprefixer": "^6.6.1", "bunyan": "0.22.1", - "translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master", "chai": "", "chai-spies": "", + "clean-css": "^3.4.18", + "es6-promise": "^4.0.5", "grunt-available-tasks": "0.4.1", "grunt-bunyan": "0.5.0", "grunt-contrib-clean": "0.5.0", @@ -79,7 +81,6 @@ "grunt-contrib-requirejs": "0.4.1", "grunt-contrib-watch": "^1.0.0", "grunt-env": "0.4.4", - "clean-css": "^3.4.18", "grunt-exec": "^0.4.7", "grunt-execute": "^0.2.2", "grunt-file-append": "0.0.6", @@ -87,9 +88,11 @@ "grunt-mocha-test": "0.9.0", "grunt-newer": "^1.2.0", "grunt-parallel": "^0.5.1", + "grunt-postcss": "^0.8.0", "grunt-sed": "^0.1.1", "sandboxed-module": "0.2.0", "sinon": "", - "timekeeper": "" + "timekeeper": "", + "translations-sharelatex": "git+https://github.com/sharelatex/translations-sharelatex.git#master" } } From 5489514d7a7ae410229550c179fc6bc1f1dfd3ed Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Wed, 18 Jan 2017 15:38:34 +0000 Subject: [PATCH 2/8] Add some compatibility style rules for IE10. --- .../web/app/views/project/editor/review-panel.jade | 1 + .../public/stylesheets/app/editor/review-panel.less | 13 ++++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index 0419884502..ccb5cb035f 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -1,6 +1,7 @@ #review-panel .review-panel-toolbar resolved-comments-dropdown( + class="rp-flex-block" entries="reviewPanel.resolvedComments" threads="reviewPanel.commentThreads" resolved-ids="reviewPanel.resolvedThreadIds" diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 54142f2dcc..5de21f913a 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -32,6 +32,7 @@ .rp-button() { + display: block; // IE doesn't do flex with inline items. background-color: @rp-highlight-blue; color: #FFF; text-align: center; @@ -119,6 +120,7 @@ .rp-size-expanded & { display: flex; align-items: center; + justify-content: space-around; padding: 0 5px; } // .rp-state-current-file & { @@ -592,6 +594,7 @@ z-index: 2; } .rp-nav-item { + display: block; color: lighten(@rp-type-blue, 25%); flex: 0 0 50%; border-top: solid 3px transparent; @@ -813,7 +816,8 @@ } } .resolved-comments-scroller { - flex: 0 0 100%; + flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding. + width: 100%; // We need to set the width explicitly, as flex-basis won't work. padding: 5px; overflow-y: auto; } @@ -865,3 +869,10 @@ display: block; } } + +// Helper class for elements which aren't treated as flex-items by IE10, e.g: +// * inline items; +// * unknown elements (elements which aren't standard DOM elements, such as custom element directives) +.rp-flex-block { + display: block; +} From 3b9a599276ed5adf00e63ee5a4935be772c9eed3 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 11:57:49 +0000 Subject: [PATCH 3/8] Fix entries z-index issues on IE10. --- .../public/stylesheets/app/editor/review-panel.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 5de21f913a..0d167a1b3e 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -123,12 +123,8 @@ justify-content: space-around; padding: 0 5px; } - // .rp-state-current-file & { - // position: absolute; - // top: 0; - // left: 0; - // right: 0; - // } + + position: relative; height: @rp-toolbar-height; border-bottom: 1px solid @rp-border-grey; background-color: @rp-bg-dim-blue; @@ -793,7 +789,7 @@ position: absolute; width: 300px; left: -150px; - max-height: 90%; + max-height: ~"calc(100vh - 100px)"; margin-top: @rp-entry-arrow-width * 1.5; margin-left: 1em; background-color: @rp-bg-blue; From 76ea469970c068147da6ec7579a58b93c1d28009 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 12:12:34 +0000 Subject: [PATCH 4/8] Reposition the track-changes indicator element to avoid issues with IE positioning. --- services/web/app/views/project/editor/editor.jade | 9 --------- services/web/app/views/project/editor/review-panel.jade | 8 ++++++++ .../web/public/stylesheets/app/editor/review-panel.less | 1 + 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade index e02b9ec3d0..bcb778fda4 100644 --- a/services/web/app/views/project/editor/editor.jade +++ b/services/web/app/views/project/editor/editor.jade @@ -59,15 +59,6 @@ div.full-size( renderer-data="reviewPanel.rendererData" ) - a.rp-track-changes-indicator( - href - ng-if="editor.wantTrackChanges" - ng-click="toggleReviewPanel();" - ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" - ) Track changes is - strong on - - include ./review-panel .ui-layout-east diff --git a/services/web/app/views/project/editor/review-panel.jade b/services/web/app/views/project/editor/review-panel.jade index ccb5cb035f..cdd99612da 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -1,4 +1,12 @@ #review-panel + a.rp-track-changes-indicator( + href + ng-if="editor.wantTrackChanges" + ng-click="toggleReviewPanel();" + ng-class="{ 'rp-track-changes-indicator-on-dark' : darkTheme }" + ) Track changes is + strong on + .review-panel-toolbar resolved-comments-dropdown( class="rp-flex-block" diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 0d167a1b3e..d66c7b8f7c 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -841,6 +841,7 @@ border-bottom-left-radius: 3px; font-size: 10px; z-index: 2; + white-space: nowrap; &.rp-track-changes-indicator-on-dark { background-color: rgba(88, 88, 88, .8); From cd975c6190859d56df7bb588dd0d9a6c703f9153 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 15:43:26 +0000 Subject: [PATCH 5/8] Make resolved comments dropdown scrollable in IE. --- services/web/public/stylesheets/app/editor/review-panel.less | 1 + 1 file changed, 1 insertion(+) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index d66c7b8f7c..97d93e8b9f 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -814,6 +814,7 @@ .resolved-comments-scroller { flex: 0 0 auto; // Can't use 100% in the flex-basis key here, IE won't account for padding. width: 100%; // We need to set the width explicitly, as flex-basis won't work. + max-height: ~"calc(100vh - 100px)"; // We also need to explicitly set the max-height, IE won't compute the flex-determined height. padding: 5px; overflow-y: auto; } From a4ca7e2ca99149c358e8db27fce9982a332aea6b Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 16:54:34 +0000 Subject: [PATCH 6/8] Fix padding in the review panel toolbar for IE. --- services/web/public/stylesheets/app/editor/review-panel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 97d93e8b9f..2b933afdbe 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -120,7 +120,7 @@ .rp-size-expanded & { display: flex; align-items: center; - justify-content: space-around; + justify-content: space-between; padding: 0 5px; } From 1970ab4e63fd9c9431d77135f487461d22fcf0c1 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 16:55:21 +0000 Subject: [PATCH 7/8] Ensure that the change text fits the entry UI in IE. --- services/web/public/stylesheets/app/editor/review-panel.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 2b933afdbe..0696a8640c 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -336,6 +336,9 @@ .rp-entry-details { line-height: 1.4; margin-left: 5px; + // We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0). + // This is needed to ensure that IE makes the element fill the available space. + flex: 1 0 0px; .rp-state-overview & { margin-left: 0; From 73c1016f4a89d8304af1fbb91a4a8b5ebd5aacd7 Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 19 Jan 2017 16:58:16 +0000 Subject: [PATCH 8/8] Avoid using 0px, because minifiers might convert the value to 0, which will still cause issues on IE. --- services/web/public/stylesheets/app/editor/review-panel.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index 0696a8640c..5fba75c032 100644 --- a/services/web/public/stylesheets/app/editor/review-panel.less +++ b/services/web/public/stylesheets/app/editor/review-panel.less @@ -338,7 +338,7 @@ margin-left: 5px; // We need to set any low-enough flex base size (0px), making it growable (1) and non-shrinkable (0). // This is needed to ensure that IE makes the element fill the available space. - flex: 1 0 0px; + flex: 1 0 1px; .rp-state-overview & { margin-left: 0;