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

Fix style issues in IE 10
This commit is contained in:
James Allen
2017-01-25 15:55:15 +01:00
committed by GitHub
5 changed files with 46 additions and 23 deletions
+11 -3
View File
@@ -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']
@@ -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
@@ -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"
+6 -3
View File
@@ -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"
}
}
@@ -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;
}