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/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 46aa4b96d1..9b31516b3f 100644 --- a/services/web/app/views/project/editor/review-panel.jade +++ b/services/web/app/views/project/editor/review-panel.jade @@ -1,6 +1,15 @@ #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" entries="reviewPanel.resolvedComments" threads="reviewPanel.commentThreads" resolved-ids="reviewPanel.resolvedThreadIds" diff --git a/services/web/package.json b/services/web/package.json index b658525760..3408ede468 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -67,10 +67,12 @@ "rolling-rate-limiter": "git+https://github.com/ShaneKilkelly/rolling-rate-limiter.git#master" }, "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" } } diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less index bba679eb17..da9fa7eb43 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,14 +120,11 @@ .rp-size-expanded & { display: flex; align-items: center; + justify-content: space-between; 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; @@ -338,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 1px; .rp-state-overview & { margin-left: 0; @@ -590,6 +591,7 @@ z-index: 2; } .rp-nav-item { + display: block; color: lighten(@rp-type-blue, 25%); flex: 0 0 50%; border-top: solid 3px transparent; @@ -788,7 +790,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; @@ -811,7 +813,9 @@ } } .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. + 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; } @@ -839,6 +843,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); @@ -863,3 +868,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; +}