diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index a52c1b8a55..78ce4190d0 100644 --- a/services/web/Gruntfile.coffee +++ b/services/web/Gruntfile.coffee @@ -17,8 +17,9 @@ module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-watch' grunt.loadNpmTasks 'grunt-parallel' grunt.loadNpmTasks 'grunt-exec' - # grunt.loadNpmTasks 'grunt-contrib-imagemin' grunt.loadNpmTasks 'grunt-contrib-cssmin' + # grunt.loadNpmTasks 'grunt-contrib-imagemin' + # grunt.loadNpmTasks 'grunt-sprity' config = @@ -59,6 +60,14 @@ module.exports = (grunt) -> # interlaced:false # optimizationLevel: 7 + # sprity: + # sprite: + # options: + # cssPath:"/img/" + # 'style': '../../public/stylesheets/app/sprites.less' + # margin: 0 + # src: ['./public/img/flags/24/*.png'] + # dest: './public/img/sprite' coffee: diff --git a/services/web/README.md b/services/web/README.md index 00d94343ab..323b43f028 100644 --- a/services/web/README.md +++ b/services/web/README.md @@ -6,9 +6,17 @@ web-sharelatex is the front-end web service of the open-source web-based collabo It serves all the HTML pages, CSS and javascript to the client. web-sharelatex also contains a lot of logic around creating and editing projects, and account management. + The rest of the ShareLaTeX stack, along with information about contributing can be found in the [sharelatex/sharelatex](https://github.com/sharelatex/sharelatex) repository. +Build process +---------------- + +web-sharelatex uses [Grunt](http://gruntjs.com/) to build its front-end related assets. + +Image processing tasks are commented out in the gruntfile and the needed packages aren't presently in the project's `package.json`. If the images need to be processed again (minified and sprited), start by fetching the packages (`npm install grunt-contrib-imagemin grunt-sprity`), then *decomment* the tasks in `Gruntfile.coffee`. After this, the tasks can be called (explicitly, via `grunt imagemin` and `grunt sprity`). + Unit test status ---------------- diff --git a/services/web/app/views/layout/footer.jade b/services/web/app/views/layout/footer.jade index 7ef26b3493..ea7a36e2ae 100644 --- a/services/web/app/views/layout/footer.jade +++ b/services/web/app/views/layout/footer.jade @@ -15,7 +15,7 @@ footer.site-footer aria-expanded="false", tooltip="#{translate('language')}" ) - img(src="/img/flags/24/#{currentLngCode}.png") + figure(class="icon icon-lang icon-#{currentLngCode}") ul.dropdown-menu(role="menu") li.dropdown-header #{translate("language")} @@ -23,9 +23,9 @@ footer.site-footer if !subdomainDetails.hide li.lngOption a.menu-indent(href=subdomainDetails.url+currentUrl) - img(src="/img/flags/24/#{subdomainDetails.lngCode}.png") + figure(class="icon icon-lang icon-#{subdomainDetails.lngCode}") | #{translate(subdomainDetails.lngCode)} - + //- img(src="/img/flags/24/.png") each item in nav.left_footer li if item.url diff --git a/services/web/public/img/sprite.png b/services/web/public/img/sprite.png new file mode 100644 index 0000000000..366d994ce8 Binary files /dev/null and b/services/web/public/img/sprite.png differ diff --git a/services/web/public/stylesheets/app/sprites.less b/services/web/public/stylesheets/app/sprites.less new file mode 100644 index 0000000000..8b658648f0 --- /dev/null +++ b/services/web/public/stylesheets/app/sprites.less @@ -0,0 +1,105 @@ + +.icon { + background-image: url('/img/sprite.png'); +} + +.icon-ko { + background-position: -0px -0px; + width: 24px; + height: 24px; +} +.icon-cn { + background-position: -0px -24px; + width: 24px; + height: 24px; +} +.icon-da { + background-position: -0px -48px; + width: 24px; + height: 24px; +} +.icon-de { + background-position: -0px -72px; + width: 24px; + height: 24px; +} +.icon-en { + background-position: -0px -96px; + width: 24px; + height: 24px; +} +.icon-es { + background-position: -0px -120px; + width: 24px; + height: 24px; +} +.icon-fi { + background-position: -0px -144px; + width: 24px; + height: 24px; +} +.icon-fr { + background-position: -0px -168px; + width: 24px; + height: 24px; +} +.icon-it { + background-position: -0px -192px; + width: 24px; + height: 24px; +} +.icon-ja { + background-position: -0px -216px; + width: 24px; + height: 24px; +} +.icon-cs { + background-position: -0px -240px; + width: 24px; + height: 24px; +} +.icon-nl { + background-position: -0px -264px; + width: 24px; + height: 24px; +} +.icon-no { + background-position: -0px -288px; + width: 24px; + height: 24px; +} +.icon-pl { + background-position: -0px -312px; + width: 24px; + height: 24px; +} +.icon-pt { + background-position: -0px -336px; + width: 24px; + height: 24px; +} +.icon-ru { + background-position: -0px -360px; + width: 24px; + height: 24px; +} +.icon-sv { + background-position: -0px -384px; + width: 24px; + height: 24px; +} +.icon-tr { + background-position: -0px -408px; + width: 24px; + height: 24px; +} +.icon-uk { + background-position: -0px -432px; + width: 24px; + height: 24px; +} +.icon-zh-CN { + background-position: -0px -456px; + width: 24px; + height: 24px; +} diff --git a/services/web/public/stylesheets/components/footer.less b/services/web/public/stylesheets/components/footer.less index 7a3bc66723..32adc1ee90 100644 --- a/services/web/public/stylesheets/components/footer.less +++ b/services/web/public/stylesheets/components/footer.less @@ -23,3 +23,8 @@ footer.site-footer { } } } + +.icon-lang { + display: inline-block; + vertical-align: middle; +} \ No newline at end of file diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less index b516adff3e..0377e4e828 100755 --- a/services/web/public/stylesheets/style.less +++ b/services/web/public/stylesheets/style.less @@ -73,3 +73,4 @@ @import "app/wiki.less"; @import "app/translations.less"; @import "app/contact-us.less"; +@import "app/sprites.less";