distribute client page images in to 3 css sprite files

this is to reduce the size of sprite images

web/Gemfile

@@ -148,6 +148,7 @@ gem 'zip-codes'
 #gem "browserify-rails", "~> 0.7"
 
 gem 'elasticsearch'
+gem 'css_sprite', '~> 2.4'
 
 gem 'logging', '1.7.2'
 

web/Gemfile.lock

@@ -137,6 +137,8 @@ GEM
     concurrent-ruby (1.1.8)
     connection_pool (2.2.3)
     crass (1.0.6)
+    css_sprite (2.4.0)
+      mini_magick
     database_cleaner (1.3.0)
     devise (3.3.0)
       bcrypt (~> 3.0)
@@ -457,6 +459,7 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2021.0212)
     mimemagic (0.3.5)
+    mini_magick (4.11.0)
     mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.14.3)
@@ -810,6 +813,7 @@ DEPENDENCIES
   cause
   coffee-rails
   coffee-script-source (= 1.12.2)
+  css_sprite (~> 2.4)
   database_cleaner (= 1.3.0)
   devise (= 3.3.0)
   elasticsearch

web/app/assets/stylesheets/client/client.css

@@ -94,5 +94,8 @@
  *= require landings/partner_agreement_v1
  *= require ./teachers
  *= require_directory ./react-components
-
+  *= require 'icon_css_sprite'
+ *= require 'logo_css_sprite'
+ *= require 'css_sprite'
+ 
 */

web/app/assets/stylesheets/css_sprite.scss

@@ -0,0 +1,96 @@
+.arrow_left_24, .arrow_right_24, .audio_capture_ftue, .avatar_generic, .avatar_generic_band,
+.checkmark, .computer_ftue, .down_arrow, .down_arrow_black_pad, .expand_arrows_left,
+.expand_arrows_right, .microphone_ftue, .recordbutton-off, .shopping-cart, .slider_gain_vertical,
+.slider_playcontrols, .slider_volume, .up_arrow {
+  background: url('/assets/css_sprite.png?1613113547') no-repeat;
+}
+.arrow_left_24 {
+  background-position: 0px 0px;
+  width: 24px;
+  height: 24px;
+ }
+.arrow_right_24 {
+  background-position: 0px -24px;
+  width: 24px;
+  height: 24px;
+ }
+.audio_capture_ftue {
+  background-position: 0px -48px;
+  width: 243px;
+  height: 70px;
+ }
+.avatar_generic {
+  background-position: 0px -118px;
+  width: 88px;
+  height: 88px;
+ }
+.avatar_generic_band {
+  background-position: 0px -206px;
+  width: 88px;
+  height: 88px;
+ }
+.checkmark {
+  background-position: 0px -294px;
+  width: 50px;
+  height: 50px;
+ }
+.computer_ftue {
+  background-position: 0px -344px;
+  width: 118px;
+  height: 105px;
+ }
+.down_arrow {
+  background-position: 0px -449px;
+  width: 12px;
+  height: 8px;
+ }
+.down_arrow_black_pad {
+  background-position: 0px -457px;
+  width: 13px;
+  height: 8px;
+ }
+.expand_arrows_left {
+  background-position: 0px -465px;
+  width: 28px;
+  height: 14px;
+ }
+.expand_arrows_right {
+  background-position: 0px -479px;
+  width: 28px;
+  height: 14px;
+ }
+.microphone_ftue {
+  background-position: 0px -493px;
+  width: 70px;
+  height: 113px;
+ }
+.recordbutton-off {
+  background-position: 0px -606px;
+  width: 20px;
+  height: 20px;
+ }
+.shopping-cart {
+  background-position: 0px -626px;
+  width: 40px;
+  height: 36px;
+ }
+.slider_gain_vertical {
+  background-position: 0px -662px;
+  width: 28px;
+  height: 11px;
+ }
+.slider_playcontrols {
+  background-position: 0px -673px;
+  width: 5px;
+  height: 16px;
+ }
+.slider_volume {
+  background-position: 0px -689px;
+  width: 8px;
+  height: 17px;
+ }
+.up_arrow {
+  background-position: 0px -706px;
+  width: 12px;
+  height: 8px;
+ }

web/app/assets/stylesheets/dialogs/dialog.css

@@ -3,4 +3,5 @@
  *
  *= require ./base_dialog
  *= require_directory .
+ *= require 'css_sprite'
 */

web/app/assets/stylesheets/icon_css_sprite.scss

@@ -0,0 +1,257 @@
+.icon_account, .icon_add, .icon_alert, .icon_alert_big, .icon_arrow,
+.icon_bands, .icon_blue_score, .icon_check_white, .icon_checkmark_circle, .icon_closetrack,
+.icon_comment, .icon_delete_sm, .icon_dollar, .icon_email, .icon_facebook,
+.icon_feed, .icon_findsession, .icon_followers, .icon_friend, .icon_gmail,
+.icon_goodquality, .icon_google, .icon_green_score, .icon_help, .icon_home,
+.icon_information_big, .icon_jamtracks, .icon_like, .icon_musicians, .icon_pausebutton,
+.icon_playbutton, .icon_pr, .icon_product, .icon_profile, .icon_purple_score,
+.icon_recording, .icon_recordings, .icon_red_score, .icon_resync, .icon_search,
+.icon_session, .icon_session_tiny, .icon_settings_lg, .icon_share, .icon_shopping_cart,
+.icon_stopbutton, .icon_twitter, .icon_users, .icon_yellow_score {
+  background: url('/assets/icon_css_sprite.png?1613113553') no-repeat;
+}
+.icon_account {
+  background-position: 0px 0px;
+  width: 27px;
+  height: 20px;
+ }
+.icon_add {
+  background-position: 0px -20px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_alert {
+  background-position: 0px -39px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_alert_big {
+  background-position: 0px -63px;
+  width: 96px;
+  height: 96px;
+ }
+.icon_arrow {
+  background-position: 0px -159px;
+  width: 7px;
+  height: 12px;
+ }
+.icon_bands {
+  background-position: 0px -171px;
+  width: 20px;
+  height: 19px;
+ }
+.icon_blue_score {
+  background-position: 0px -190px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_check_white {
+  background-position: 0px -202px;
+  width: 11px;
+  height: 12px;
+ }
+.icon_checkmark_circle {
+  background-position: 0px -214px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_closetrack {
+  background-position: 0px -238px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_comment {
+  background-position: 0px -250px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_delete_sm {
+  background-position: 0px -262px;
+  width: 13px;
+  height: 13px;
+ }
+.icon_dollar {
+  background-position: 0px -275px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_email {
+  background-position: 0px -299px;
+  width: 22px;
+  height: 21px;
+ }
+.icon_facebook {
+  background-position: 0px -320px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_feed {
+  background-position: 0px -344px;
+  width: 16px;
+  height: 16px;
+ }
+.icon_findsession {
+  background-position: 0px -360px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_followers {
+  background-position: 0px -379px;
+  width: 22px;
+  height: 12px;
+ }
+.icon_friend {
+  background-position: 0px -391px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_gmail {
+  background-position: 0px -405px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_goodquality {
+  background-position: 0px -429px;
+  width: 16px;
+  height: 16px;
+ }
+.icon_google {
+  background-position: 0px -445px;
+  width: 26px;
+  height: 26px;
+ }
+.icon_green_score {
+  background-position: 0px -471px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_help {
+  background-position: 0px -483px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_home {
+  background-position: 0px -495px;
+  width: 20px;
+  height: 15px;
+ }
+.icon_information_big {
+  background-position: 0px -510px;
+  width: 96px;
+  height: 96px;
+ }
+.icon_jamtracks {
+  background-position: 0px -606px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_like {
+  background-position: 0px -630px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_musicians {
+  background-position: 0px -642px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_pausebutton {
+  background-position: 0px -662px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_playbutton {
+  background-position: 0px -682px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_pr {
+  background-position: 0px -702px;
+  width: 58px;
+  height: 58px;
+ }
+.icon_product {
+  background-position: 0px -760px;
+  width: 61px;
+  height: 61px;
+ }
+.icon_profile {
+  background-position: 0px -821px;
+  width: 21px;
+  height: 18px;
+ }
+.icon_purple_score {
+  background-position: 0px -839px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_recording {
+  background-position: 0px -851px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_recordings {
+  background-position: 0px -875px;
+  width: 12px;
+  height: 13px;
+ }
+.icon_red_score {
+  background-position: 0px -888px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_resync {
+  background-position: 0px -900px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_search {
+  background-position: 0px -914px;
+  width: 19px;
+  height: 19px;
+ }
+.icon_session {
+  background-position: 0px -933px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_session_tiny {
+  background-position: 0px -957px;
+  width: 12px;
+  height: 12px;
+ }
+.icon_settings_lg {
+  background-position: 0px -969px;
+  width: 18px;
+  height: 18px;
+ }
+.icon_share {
+  background-position: 0px -987px;
+  width: 14px;
+  height: 14px;
+ }
+.icon_shopping_cart {
+  background-position: 0px -1001px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_stopbutton {
+  background-position: 0px -1021px;
+  width: 20px;
+  height: 20px;
+ }
+.icon_twitter {
+  background-position: 0px -1041px;
+  width: 24px;
+  height: 24px;
+ }
+.icon_users {
+  background-position: 0px -1065px;
+  width: 57px;
+  height: 57px;
+ }
+.icon_yellow_score {
+  background-position: 0px -1122px;
+  width: 12px;
+  height: 12px;
+ }

web/app/assets/stylesheets/landing/landing.css

@@ -14,4 +14,5 @@
 *= require landings/posa_activation
 *= require landings/simple_jamtracks
 *= require landings/simple_jamclass
+*= require 'css_sprite'
 */

web/app/assets/stylesheets/logo_css_sprite.scss

@@ -0,0 +1,39 @@
+.bandcamp-logo, .facebook-logo, .fandalism-logo, .reverbnation-logo, .soundcloud-logo,
+.twitter-logo, .website-logo {
+  background: url('/assets/logo_css_sprite.png?1613113548') no-repeat;
+}
+.bandcamp-logo {
+  background-position: 0px 0px;
+  width: 120px;
+  height: 19px;
+ }
+.facebook-logo {
+  background-position: 0px -19px;
+  width: 30px;
+  height: 30px;
+ }
+.fandalism-logo {
+  background-position: 0px -49px;
+  width: 22px;
+  height: 30px;
+ }
+.reverbnation-logo {
+  background-position: 0px -79px;
+  width: 58px;
+  height: 30px;
+ }
+.soundcloud-logo {
+  background-position: 0px -109px;
+  width: 44px;
+  height: 30px;
+ }
+.twitter-logo {
+  background-position: 0px -139px;
+  width: 37px;
+  height: 30px;
+ }
+.website-logo {
+  background-position: 0px -169px;
+  width: 98px;
+  height: 30px;
+ }

web/app/assets/stylesheets/web/web.css

@@ -34,4 +34,5 @@
 *= require_directory ../landings
 *= require icheck/minimal/minimal
 *= require_directory ../client/react-components
+*= require 'css_sprite'
 */

web/app/helpers/application_helper.rb

@@ -31,4 +31,16 @@ module ApplicationHelper
     Rails.application.config.bugsnag_notify_release_stages.include? Rails.env
   end
 
+  def image_sprite_tag(path, options = {})
+    base = File.basename(path, ".png")
+    cls = options.dig(:class) || ""
+    cls = cls.concat(" #{base}").strip
+    raw image_tag 'transparent-1x1.png', options.merge({ class: cls })
+  end
+
+  def css_image_sprite(options)
+    path = options.delete(:src)
+    image_sprite_tag(path, options)
+  end
+
 end

web/app/views/clients/_account.html.erb

@@ -4,7 +4,7 @@
         <!-- header -->
         <div class="content-head">
             <div class="content-icon">
-                <%= image_tag "content/icon_account.png", {:height => 18, :width => 18} %>
+                <%= image_sprite_tag "content/icon_account.png", {:height => 18, :width => 18} %>
             </div>
             <h1>my account</h1>
             <%= render "screen_navigation" %>

web/app/views/clients/_account_affiliate_partner.html.slim

@@ -2,7 +2,7 @@
 #account-affiliate-partner.screen.secondary layout='screen' layout-id='account/affiliatePartner'
   .content-head
     .content-icon
-      = image_tag "content/icon_account.png", :width => 27, :height => 20
+      = image_sprite_tag "content/icon_account.png", :width => 27, :height => 20
     h1 my account
     = render "screen_navigation"
 

web/app/views/clients/_account_audio_profile.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
     <!-- icon -->
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <!-- section head text -->
     <h1>my account</h1>

web/app/views/clients/_account_identity.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
     <!-- icon -->
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <!-- section head text -->
     <h1>my account</h1>

web/app/views/clients/_account_jamtracks.html.slim

@@ -2,7 +2,7 @@
 #account-jamtracks.screen.secondary layout='screen' layout-id='account/jamtracks'
   .content-head
     .content-icon
-      = image_tag "content/icon_account.png", :width => 27, :height => 20
+      = image_sprite_tag "content/icon_account.png", :width => 27, :height => 20
     h1 my account
     = render "screen_navigation"
 

web/app/views/clients/_account_onboarder.html.slim

@@ -1,7 +1,7 @@
 #account-onboarder.screen.secondary layout="screen" layout-id="account/onboarder"
   .content-head
     .content-icon
-      = image_tag "content/icon_account.png", :size => "27x20"
+      = image_sprite_tag "content/icon_account.png", :size => "27x20"
     h1
       | jamclass
     = render "screen_navigation"

web/app/views/clients/_account_payment_history.html.slim

@@ -2,7 +2,7 @@
 
   .content
     .content-head
-      .content-icon=image_tag("content/icon_account.png", height:20,  width:27 )
+      .content-icon=image_sprite_tag("content/icon_account.png", height:20,  width:27 )
       h1 my account
       =render "screen_navigation"
     .content-body

web/app/views/clients/_account_profile.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
 
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
 
     <h1>my account</h1>

web/app/views/clients/_account_profile_avatar.html.erb

@@ -4,7 +4,7 @@
   <div class="content-head">
     <!-- icon -->
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <!-- section head text -->
     <h1>my account</h1>

web/app/views/clients/_account_profile_experience.html.erb

@@ -1,7 +1,7 @@
 <div layout="screen" id="account-profile-experience" layout-id="account/profile/experience" class="screen secondary">
   <div class="content-head">
     <div class="content-icon">
-      <%= image_tag "content/icon_account.png", {:width => 27, :height => 20} %>
+      <%= image_sprite_tag "content/icon_account.png", {:width => 27, :height => 20} %>
     </div>
     <h1>my account</h1>
     <%= render "screen_navigation" %>