mvp for using sprites for flags, needs border removing

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'
+				src: ['./public/img/flags/24/*.png']
+				dest: './public/img/sprite',
 
 
 		coffee:

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")
+							img(class="icon 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")
+											img(class="icon 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: 34px;
+  height: 34px;
+}
+.icon-cn {
+  background-position: -0px -34px;
+  width: 34px;
+  height: 34px;
+}
+.icon-da {
+  background-position: -0px -68px;
+  width: 34px;
+  height: 34px;
+}
+.icon-de {
+  background-position: -0px -102px;
+  width: 34px;
+  height: 34px;
+}
+.icon-en {
+  background-position: -0px -136px;
+  width: 34px;
+  height: 34px;
+}
+.icon-es {
+  background-position: -0px -170px;
+  width: 34px;
+  height: 34px;
+}
+.icon-fi {
+  background-position: -0px -204px;
+  width: 34px;
+  height: 34px;
+}
+.icon-fr {
+  background-position: -0px -238px;
+  width: 34px;
+  height: 34px;
+}
+.icon-it {
+  background-position: -0px -272px;
+  width: 34px;
+  height: 34px;
+}
+.icon-ja {
+  background-position: -0px -306px;
+  width: 34px;
+  height: 34px;
+}
+.icon-cs {
+  background-position: -0px -340px;
+  width: 34px;
+  height: 34px;
+}
+.icon-nl {
+  background-position: -0px -374px;
+  width: 34px;
+  height: 34px;
+}
+.icon-no {
+  background-position: -0px -408px;
+  width: 34px;
+  height: 34px;
+}
+.icon-pl {
+  background-position: -0px -442px;
+  width: 34px;
+  height: 34px;
+}
+.icon-pt {
+  background-position: -0px -476px;
+  width: 34px;
+  height: 34px;
+}
+.icon-ru {
+  background-position: -0px -510px;
+  width: 34px;
+  height: 34px;
+}
+.icon-sv {
+  background-position: -0px -544px;
+  width: 34px;
+  height: 34px;
+}
+.icon-tr {
+  background-position: -0px -578px;
+  width: 34px;
+  height: 34px;
+}
+.icon-uk {
+  background-position: -0px -612px;
+  width: 34px;
+  height: 34px;
+}
+.icon-zh-CN {
+  background-position: -0px -646px;
+  width: 34px;
+  height: 34px;
+}

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