lib/tasks/css_sprites.rake
public/images/icons/arrow_down.png
public/images/icons/arrow_right.png
public/images/icons/arrow_up.png
public/images/icons/logo.gif
public/images/icons/rss.gif
public/images/icons/sort_asc.gif
public/images/icons/sort_desc.gif
public/images/icons/sort_none.gif
public/images/sprite.png
public/images/sprite2.png
public/images/sprites.png
public/stylesheets/sprites.css
@@ -59,4 +59,14 @@ module ApplicationHelper
def create_or_update_button(object)
submit_tag (object.new_record? ? 'Create'[] : 'Update'[]), :disable_with => (object.new_record? ? 'Creating'[] : 'Updating'[]) + '…'
end
+
+ def css_image_tag(url, options = {})
+ extension = File.extname(url)
+ key = File.basename(url, extension)
+
+ css_class = "sprite-#{key} css-sprite"
+ css_class += " " + options.delete(:class) if options[:class]
+
+ content_tag(:span, '', options.merge(:class => css_class))
+ end
end
app/helpers/application_helper.rb
@@ -17,11 +17,11 @@ module DashboardHelper
before = position[:then].to_i
if now < before
- return image_tag('arrow_up.png')
+ return css_image_tag('arrow_up.png')
elsif now == before
- return image_tag('arrow_right.png')
+ return css_image_tag('arrow_right.png')
elsif now > before
- return image_tag('arrow_down.png')
+ return css_image_tag('arrow_down.png')
end
''
end
app/helpers/dashboard_helper.rb
@@ -9,7 +9,7 @@ module LogsHelper
end
def icon_link(game_id, icon, message, url)
- link_to(image_tag("icons/#{icon}.png"), url) + ' ' + format_message(game_id, message)
+ link_to(css_image_tag("icons/#{icon}.png"), url) + ' ' + format_message(game_id, message)
end
def log_uri(log)
app/helpers/logs_helper.rb
@@ -31,7 +31,7 @@
- else
%td
- = link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this user's matches"[]), game_matches_path(@game, :filter => game_participation.user_id)
+ = link_to css_image_tag('icons/game.png', :class => 'team', :title => "Show this user's matches"[]), game_matches_path(@game, :filter => game_participation.user_id)
= user_link_full(@game, game_participation.user)
%td= game_participation.ranking
%td= game_participation.matches_played
app/views/dashboard/_leaderboard.html.haml
@@ -1,5 +1,5 @@
#logs
- = link_to image_tag('rss.gif'), log_feed_url(current_game), :class => 'rss'
+ = link_to css_image_tag('rss.gif'), log_feed_url(current_game), :class => 'rss'
%h3= 'Events'[]
.list
app/views/dashboard/_logs.html.haml
@@ -4,7 +4,7 @@
%html{ :xmlns => 'http://www.w3.org/1999/xhtml', :lang => "en" }
%head
%title= page_title
- = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'screen', :media => 'screen, projection', :cache => 'cache/all'
+ = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'sprites', 'screen', :media => 'screen, projection', :cache => 'cache/all'
/[if IE]
= stylesheet_link_tag 'lib/ie', :media => 'screen, projection'
= yield :head
@@ -15,14 +15,14 @@
#links
= render :partial => 'shared/login'
- #logo= link_to image_tag('logo.gif'), root_url
+ #logo= link_to css_image_tag('logo.gif'), root_url
#menu.clear
.column.span-20= render :partial => 'shared/menu'
- unless current_game.nil? || current_game.new_record?
#add_match.column.span-4.last
- if enabled_users.size >= current_game.team_size * 2
- = link_to_function image_tag('icons/add.png') + ' ' + 'Add match'[], "scoreKeeper.newMatch.toggle()"
+ = link_to_function css_image_tag('icons/add.png') + ' ' + 'Add match'[], "scoreKeeper.newMatch.toggle()"
- else
- if current_game.team_size * 2 - enabled_users.size == 1
#user_minimum= 'Add one more user'[:add_one_more_user]
app/views/layouts/application.html.haml
@@ -6,7 +6,7 @@
- unless @page_title.blank?
= ' - '
= @page_title
- = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'screen', :media => 'screen, projection', :cache => 'cache/all'
+ = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'sprites', 'screen', :media => 'screen, projection', :cache => 'cache/all'
= stylesheet_link_tag 'print', :media => 'print'
/[if IE]
= stylesheet_link_tag 'lib/ie', :media => 'screen, projection'
@@ -18,7 +18,7 @@
#hd
#links
- #logo= link_to image_tag('logo.gif'), root_url
+ #logo= link_to css_image_tag('logo.gif'), root_url
- unless @page_title.blank?
%h2#page_title= @page_title
app/views/layouts/login.html.haml
@@ -8,7 +8,7 @@
- unless @page_title.blank?
= ' - '
= @page_title
- = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'screen', :media => 'screen, projection', :cache => 'cache/all'
+ = stylesheet_link_tag 'lib/reset', 'lib/typography', 'lib/grid', 'lib/forms', 'sprites', 'screen', :media => 'screen, projection', :cache => 'cache/all'
= stylesheet_link_tag 'print', :media => 'print'
/[if IE]
= stylesheet_link_tag 'lib/ie', :media => 'screen, projection'
@@ -17,7 +17,7 @@
%body.public
.container
#hd
- #logo= link_to image_tag('logo.gif'), root_url
+ #logo= link_to css_image_tag('logo.gif'), root_url
- unless @page_title.blank?
- if @page_title_options[:show]
app/views/layouts/public.html.haml
@@ -1,24 +1,24 @@
- sorted_teams = Match.sort_teams_by_filter(match.teams, params[:filter])
%td.members
- = link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(:game_id => match.game_id, :filter => sorted_teams.first.team_ids)
+ = link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(:game_id => match.game_id, :filter => sorted_teams.first.team_ids)
= render :partial => 'matches/members', :locals => { :team => sorted_teams.first }
%td.score{ :nowrap => 'nowrap' }
- if sorted_teams.first.score > sorted_teams.last.score
- = image_tag('icons/medal_gold_2.png', :class => 'winner')
+ = css_image_tag('icons/medal_gold_2.png', :class => 'winner')
- else
- = image_tag('icons/blank.gif', :width => 16, :height => 16, :class => 'loser')
+ = css_image_tag('icons/blank.gif', :width => 16, :height => 16, :class => 'loser')
= sorted_teams.collect(&:score).join(' - ')
- if sorted_teams.last.score > sorted_teams.first.score
- = image_tag('icons/medal_gold_2.png', :class => 'winner')
+ = css_image_tag('icons/medal_gold_2.png', :class => 'winner')
- else
- = image_tag('icons/blank.gif', :width => 16, :height => 16, :class => 'loser')
+ = css_image_tag('icons/blank.gif', :width => 16, :height => 16, :class => 'loser')
%td.members
- = link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(:game_id => match.game_id, :filter => sorted_teams.last.team_ids)
+ = link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(:game_id => match.game_id, :filter => sorted_teams.last.team_ids)
= render :partial => 'matches/members', :locals => { :team => sorted_teams.last }
%td.comments
- = link_to image_tag('icons/comment.png', :class => 'comments', :alt => 'Comment on this match'[]) + " (#{match.comments_count})", game_match_path(match.game_id, match)
\ No newline at end of file
+ = link_to css_image_tag('icons/comment.png', :class => 'comments', :alt => 'Comment on this match'[]) + " (#{match.comments_count})", game_match_path(match.game_id, match)
\ No newline at end of file
app/views/matches/_match_columns.html.haml
@@ -34,9 +34,9 @@
= will_paginate @matches
#feeds
- = link_to image_tag('rss.gif') + ' ' + 'Atom feed (all matches)'[], match_feed_url(current_game), :class => 'rss'
+ = link_to css_image_tag('rss.gif') + ' ' + 'Atom feed (all matches)'[], match_feed_url(current_game), :class => 'rss'
- unless params[:filter].blank?
- = link_to image_tag('rss.gif') + ' ' + 'Atom feed (filtered)'[], match_feed_url(current_game, :filter => params[:filter]), :class => 'rss'
+ = link_to css_image_tag('rss.gif') + ' ' + 'Atom feed (filtered)'[], match_feed_url(current_game, :filter => params[:filter]), :class => 'rss'
- content_for :head do
= auto_discovery_link_tag :atom, match_feed_url(current_game), :title => 'All matches'[]
@@ -50,4 +50,4 @@
- if @filter.length == 1
= link_to 'Show user details'[], game_user_path(current_game, @filter.first)
- elsif @filter.length > 1
- %p= link_to image_tag('icons/chart_bar.png') + ' ' + 'Show team details'[], game_team_path(current_game, @filter.collect(&:id).join(','))
\ No newline at end of file
+ %p= link_to css_image_tag('icons/chart_bar.png') + ' ' + 'Show team details'[], game_team_path(current_game, @filter.collect(&:id).join(','))
\ No newline at end of file
app/views/matches/index.html.haml
@@ -38,7 +38,7 @@
%span.index= '#' + (index + 1).to_s + ' '
%span.user= link_to(h(comment.user.name), game_user_path(@match.game_id, comment.user), :name => "c#{comment.id}") + ' '
- if @match.winner.memberships.collect(&:user_id).include?(comment.user_id)
- %span.medal= image_tag('icons/medal_gold_2.png', :class => 'winner') + ' '
+ %span.medal= css_image_tag('icons/medal_gold_2.png', :class => 'winner') + ' '
%span.time= time_ago_in_words(comment.created_at) + ' ago'
.content{ :id => "content_#{comment.id}" }
= render :partial => 'comments/comment', :object => comment
app/views/matches/show.html.haml
@@ -15,8 +15,8 @@
- @teams.each do |team|
%tr{ :class => cycle('even', 'odd') }
%td.user
- = link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(current_game, :filter => team[:team_ids])
- = link_to image_tag('icons/chart_bar.png', :class => 'team'), game_team_path(current_game, team[:team_ids])
+ = link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(current_game, :filter => team[:team_ids])
+ = link_to css_image_tag('icons/chart_bar.png', :class => 'team'), game_team_path(current_game, team[:team_ids])
= team[:players].collect { |u| user_link(current_game, u)}.join(', ')
%td.ranking= team[:total_ranking]
app/views/teams/index.html.haml
@@ -23,7 +23,7 @@
= link_to image_tag(user.mugshot.public_filename(:thumb), :alt => h(user.name)), game_user_path(current_game, user)
= link_to h(user.name), game_user_path(current_game, user)
- .matchlink= link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]) + ' ' + 'Show matches'[], game_matches_path(current_game, :filter => @ids.join(','))
+ .matchlink= link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]) + ' ' + 'Show matches'[], game_matches_path(current_game, :filter => @ids.join(','))
%table.for_against
%tr
app/views/teams/show.html.haml
@@ -26,8 +26,8 @@
%tbody
- @teams.each do |team|
%tr{ :class => cycle('even', 'odd') }
- %td= link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(@game, :filter => team[:team].team_ids)
- %td= link_to image_tag('icons/chart_bar.png', :class => 'team'), game_team_path(@game, team[:team].team_ids)
+ %td= link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this team's matches"[]), game_matches_path(@game, :filter => team[:team].team_ids)
+ %td= link_to css_image_tag('icons/chart_bar.png', :class => 'team'), game_team_path(@game, team[:team].team_ids)
%td= link_to team[:team_mate].name, game_user_path(@game, team[:team_mate])
%td= team[:team_mate_game_participation].ranking.to_i
%td= team[:played]
@@ -42,7 +42,7 @@
- if @user.mugshot
.mugshot= image_tag @user.mugshot.public_filename(:thumb), :alt => h(@user.name)
- .matchlink= link_to image_tag('icons/game.png', :class => 'team', :alt => "Show this user's matches"[]) + ' ' + 'Show matches'[], game_matches_path(@game, :filter => @user.id)
+ .matchlink= link_to css_image_tag('icons/game.png', :class => 'team', :alt => "Show this user's matches"[]) + ' ' + 'Show matches'[], game_matches_path(@game, :filter => @user.id)
#counts
%p.position
app/views/users/show.html.haml
@@ -10,7 +10,7 @@ config.whiny_nils = true
# Show full error reports and disable caching
config.action_controller.consider_all_requests_local = true
-config.action_controller.perform_caching = true
+config.action_controller.perform_caching = false
config.action_view.debug_rjs = true
# Don't care if the mailer can't send
config/environments/development.rb
@@ -1,3 +1,6 @@
+.css-sprite
+ :vertical-align text-bottom
+
a
:color #3589AF
:text-decoration none
@@ -70,9 +73,6 @@ textarea
:padding-right 21px
:padding-top 9px
:color #FFFFFF
-
- img
- :vertical-align text-bottom
#user_minimum
:padding-right 21px
@@ -285,7 +285,7 @@ table.form
:padding-right 5px
&.header
- :background-image url('/images/sort_none.gif')
+ :background-image url('/images/icons/sort_none.gif')
:cursor pointer
:font-weight bold
:background-repeat no-repeat
@@ -294,11 +294,11 @@ table.form
:margin-left -1px
&.headerSortUp
- :background-image url('/images/sort_asc.gif')
+ :background-image url('/images/icons/sort_asc.gif')
:background-color #3399CC
&.headerSortDown
- :background-image url('/images/sort_desc.gif')
+ :background-image url('/images/icons/sort_desc.gif')
:background-color #3399CC
a
public/stylesheets/sass/screen.sass
@@ -1,3 +1,6 @@
+.css-sprite {
+ vertical-align: text-bottom; }
+
a {
color: #3589AF;
text-decoration: none; }
@@ -60,8 +63,6 @@ textarea {
padding-right: 21px;
padding-top: 9px;
color: #FFFFFF; }
- #menu #add_match a img {
- vertical-align: text-bottom; }
#menu #add_match #user_minimum {
padding-right: 21px;
padding-top: 9px;
@@ -235,7 +236,7 @@ table.form {
padding-left: 5px;
padding-right: 5px; }
.list table th.header {
- background-image: url('/images/sort_none.gif');
+ background-image: url('/images/icons/sort_none.gif');
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
@@ -243,10 +244,10 @@ table.form {
padding-right: 20px;
margin-left: -1px; }
.list table th.headerSortUp {
- background-image: url('/images/sort_asc.gif');
+ background-image: url('/images/icons/sort_asc.gif');
background-color: #3399CC; }
.list table th.headerSortDown {
- background-image: url('/images/sort_desc.gif');
+ background-image: url('/images/icons/sort_desc.gif');
background-color: #3399CC; }
.list table th a {
color: #CCEEFF; }
public/stylesheets/screen.css
public/images/arrow_down.png
public/images/arrow_right.png
public/images/arrow_up.png
public/images/logo.gif
public/images/rss.gif
public/images/sort_asc.gif
public/images/sort_desc.gif
public/images/sort_none.gif
a3793694b1dd4ac08ced4f21706b3dc254a5fc22
Lars G. Sehested
lars@larssehested.com
http://github.com/larssg/score-keeper/commit/248ad24cfca5cf826633c3b6803f17eb097ffb39
248ad24cfca5cf826633c3b6803f17eb097ffb39
2009-06-27T18:59:09-07:00
2009-06-27T18:59:09-07:00
Use CSS sprites
cd8864ec5a783d0e036b68c5c412a7bac9fb568f
Lars G. Sehested
lars@larssehested.com