Merge pull request #398 from sharelatex/ja-track-changes

Fix style issues in IE 10

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']

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

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"

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"
   }
 }

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;
+}