Merge pull request #271 from sharelatex/sprites

Sprites

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:

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

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

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

services/web/public/stylesheets/components/footer.less

@@ -23,3 +23,8 @@ footer.site-footer {
 		}
 	}
 }
+
+.icon-lang {
+	display: inline-block;
+	vertical-align: middle;
+}

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