diff --git a/services/web/Gruntfile.coffee b/services/web/Gruntfile.coffee index a52c1b8a55..99f29ed2a6 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' + src: ['./public/img/flags/24/*.png'] + dest: './public/img/sprite', coffee: diff --git a/services/web/app/views/layout/footer.jade b/services/web/app/views/layout/footer.jade index 7ef26b3493..bc57352086 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") + 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 diff --git a/services/web/public/img/sprite.png b/services/web/public/img/sprite.png new file mode 100644 index 0000000000..4de03050d5 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..8680e047e6 --- /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: 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; +} 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";