Skip to content

Commit

Permalink
start using css sprites
Browse files Browse the repository at this point in the history
  • Loading branch information
@ishmael
ishmael committed Jun 28, 2010
1 parent 5f4e40d commit ddce3fd
Show file tree
Hide file tree
Showing 27 changed files with 72 additions and 45 deletions.
4 changes: 2 additions & 2 deletions app/helpers/categories_helper.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ def nodes(categories,parent_id)
tree= categories.select { |item| item.parent_id == parent_id }
tree.sort_by(&:name).each do |categoria|
if (categoria.user_id == @current_user.id)
ret += '<li class="moveable droppable "><div class="categoryname button"><div class="categorytext">'+ link_to( categoria.name,category_path(categoria.id))+ '</div>'
ret += '<li class="moveable droppable "><div class="categoryname drag-button"><div class="categorytext">'+ link_to( categoria.name,category_path(categoria.id))+ '</div>'
ret += link_to image_tag("/images/led-ico/delete.png",:alt =>I18n.t('layout.application.delete')), category_path(categoria.id) , {:confirm => I18n.t('layout.application.deletemessage'), :method => :delete ,:class => 'ico' , :title => I18n.t('layout.application.delete')}
ret += link_to image_tag("/images/led-ico/pencil.png",:alt => I18n.t('layout.application.edit')), edit_category_path(categoria.id),{:class =>'ico', :title => I18n.t('layout.application.edit')}
ret += link_to image_tag("/images/led-ico/arrow_divide.png",:alt => I18n.t('layout.application.share')), new_polymorphic_path([categoria,:categories_user]),{:class =>'ico', :title => I18n.t('layout.application.share')}
else
ret += '<li><div class="categoryname button"><div class="categorytext">'+ link_to( categoria.name,category_path(categoria.id))+ '</div>'
ret += '<li><div class="categoryname drag-button"><div class="categorytext">'+ link_to( categoria.name,category_path(categoria.id))+ '</div>'
end
ret += '</div>'
if (categoria.user_id == @current_user.id)
Expand Down
9 changes: 4 additions & 5 deletions app/views/dashboard/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
</div>
</div>
</div>
<div class="box box-100 altbox">
<div id="charts_content" class="box box-100 altbox">
<div id="charts" class="yui-navset boxin">
<div class="header">
<h3>
Expand All @@ -91,23 +91,22 @@
</li><% end %>
</ul>
</div>
<div class="content">
<div class="content">
<div class="yui-content">
<% chart_settings = render '/charts/expenditure_by_year_settings.xml',:layout => false %><% chart_settings = chart_settings.gsub(/\r\n?/, "") %>
<% uniq_currencies.each_with_index do |ycurrency,i| %>
<div id="<%='tab'+i.to_s %>">
<div id="<%='yearchart'+i.to_s %>" class="full_chart"></div>
<% chart_settings = render '/charts/expenditure_by_year_settings.xml',:layout => false %><% chart_settings = chart_settings.gsub(/\r\n?/, "") %>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/amcharts/amcolumn.swf", "<%='yearchart'+i.to_s %>", "978", "250", "8", "#ffffff");
so.addVariable("path", "/amcharts/");
so.addVariable("chart_settings","<%= chart_settings %>");
so.addVariable("data_file", escape("<%= expenditure_by_year_path :format =>:xml,:currency => ycurrency %>"));
so.addVariable("additional_chart_settings", "<settings><strings><no_data><%= I18n.t('layout.charts.no_data') %><\/no_data><\/strings><\/settings>");
so.addVariable("preloader_color", "#000000");
so.write("<%='yearchart'+i.to_s %>");
// ]]>
</script>

</div>
<% end %>
</div>
Expand Down
3 changes: 1 addition & 2 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%= I18n.t('layout.application.title') %></title>
<%= stylesheet_link_tag 'reset-min','main'%>
<%= stylesheet_link_tag 'reset-min','main-min'%>
<!--javascript-->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>

Expand Down Expand Up @@ -45,7 +45,6 @@
<p class="right">Phosney.com 2009.</p>
</div>

<!--<%= javascript_include_tag 'yui3/yui/yui-min','application','swfobject' %>-->
<%= javascript_include_tag 'application' %>
<%= yield :javascript_includes %>
</body><!--/end #b_main-->
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/loggedout_layout.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
YUI().use('yui2-fonts');
</script>
<%= yield :javascript_includes %>
<%= stylesheet_link_tag 'reset','main' %>
<%= stylesheet_link_tag 'reset-min','main-min' %>

</head>
<body id="login" class="yui-skin-sam">
Expand Down
2 changes: 1 addition & 1 deletion app/views/partials/_quickmovement.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<% form_for @quick_movement, :url => { :controller => 'movements',:action => "quickcreate"},:html =>{:class => 'plain'} do |f| %>
<% form_for @quick_movement, :url => { :controller => 'movements',:action => "quickcreate"},:html =>{:class => 'plain', :id => 'new_quick_movement'} do |f| %>
<div class="quickmovement-div">
<label for='quickmov_account'><%= I18n.t('layout.bankaccounts.accountname')%></label>
<div id="quickmov_account_container"></div>
Expand Down
2 changes: 1 addition & 1 deletion app/views/users/_form.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
<dd><%= form.password_field :password_confirmation , :class => 'txt' %></dd><dt><%= form.label :email%></dt>
<dd><%= form.text_field :email , :class => 'txt'%></dd>
<dt><%= form.label :locale,I18n.t('layout.users.locale') %></dt>
<dd><div id="locale_container"></div><%= form.select(:locale, [['Português', 'pt'], ['English', 'en']]) %></dd>
<dd><div id="locale_container"></div><%= form.select(:locale, [['Português', 'pt'], ['English', 'en']],{},{:id => "user_locale"}) %></dd>
Binary file removed public/images/altheaderbox.png
View file
Binary file not shown.
Binary file removed public/images/altheadertab.png
View file
Binary file not shown.
Binary file added public/images/background-sprites.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed public/images/header.png
View file
Binary file not shown.
Binary file removed public/images/headerbox.png
View file
Binary file not shown.
Binary file removed public/images/headertab.png
View file
Binary file not shown.
Binary file removed public/images/msg-error.png
View file
Binary file not shown.
Binary file removed public/images/msg-info.png
View file
Binary file not shown.
Binary file removed public/images/msg-ok.png
View file
Binary file not shown.
Binary file removed public/images/msg-warn.png
View file
Binary file not shown.
Binary file removed public/images/pagination.gif
View file
Binary file not shown.
Binary file removed public/images/tfoot.gif
View file
Binary file not shown.
Binary file removed public/images/thead.gif
View file
Binary file not shown.
Binary file removed public/images/txt-error.gif
View file
Binary file not shown.
Binary file removed public/images/txt.gif
View file
Binary file not shown.
5 changes: 3 additions & 2 deletions public/javascripts/application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
oLinkLogoutButton.setStyle( 'visibility', 'visible');
});

Event.onAvailable("new_movement", function () {
Event.onAvailable("new_quick_movement", function () {
document.getElementById("quickmov_category")[0].value = 0;
var oSelectButtonAccount = new YAHOO.widget.Button({
id: "quickmov_accountbutton",
Expand Down Expand Up @@ -317,7 +317,8 @@
});

Event.onContentReady("calendarpicker-button", function () {
YAHOO.util.Dom.setStyle('new_movement', 'visibility', 'visible');
YAHOO.util.Dom.setStyle('new_quick_movement', 'visibility', 'visible');

});

var onCheckedButtonChange = function (p_oEvent) {
Expand Down
2 changes: 1 addition & 1 deletion public/javascripts/categories_dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
if ( parent.indexOf('yui') >=0)
{
parent = 0;
alert(parent);

}
YUI().use("io-base", function(Y) {
var uri = 'update_parent_id?id='+id + '&parent_id='+parent;
Expand Down
4 changes: 2 additions & 2 deletions public/javascripts/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
var YAHOO = Y.YUI2;
var Event = YAHOO.util.Event;

Event.onContentReady("charts", function () {
Event.onAvailable("charts", function () {

var tabView = new YAHOO.widget.TabView('charts');

YAHOO.util.Dom.setStyle('charts_content', 'visibility', 'visible');
});
});
}());
4 changes: 3 additions & 1 deletion public/javascripts/movements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
oButtonGroupQM.check(1);

oButtonGroupQM.on("checkedButtonChange", onCheckedButtonChange);
YAHOO.util.Dom.setStyle('mov_debit', 'visibility', 'visible');
YAHOO.util.Dom.setStyle('mov_credit', 'visibility', 'visible');
});

var onCheckedButtonChange = function (p_oEvent) {
Expand Down Expand Up @@ -274,7 +276,7 @@
// by the user.

oButton.on("click", onButtonClick);

YAHOO.util.Dom.setStyle('movements_controller', 'visibility', 'visible');
});
});

Expand Down
2 changes: 1 addition & 1 deletion public/stylesheets/main-min.css
View file

Large diffs are not rendered by default.

78 changes: 52 additions & 26 deletions public/stylesheets/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@ body{
input.txt,
textarea {
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
border: 1px solid #999; background: #ffffff url("/images/txt.gif") repeat-x; padding: 4px 2px 5px 4px;
border: 1px solid #999; background: #ffffff url("/images/background-sprites.png") repeat-x 0px -716px; padding: 4px 2px 5px 4px;
}

.fieldWithErrors input,textarea {
border: 1px solid red;
background-image: url("/images/txt-error.gif");
background-image: url("/images/background-sprites.png") repeat-x 0px -694px;
}

.tl {text-align: left !important;}
Expand All @@ -45,7 +45,7 @@ textarea {
STRUCTURE */
#container{ overflow:hidden; width:1000px; margin:0px auto 0px auto;}
#mainheader{
background:url("/images/header.png") repeat-x scroll 0 0 #0F508D;
background:#0F508D url("/images/background-sprites.png") repeat-x scroll 0px -162px ;
padding-bottom:1px;
border-bottom:3px solid #2A9FEC;
width:100%;
Expand All @@ -61,7 +61,17 @@ STRUCTURE */
#quick_movement{
margin:0 auto;padding: 3px;background:#ffffff;width:994px;height:50px; }

#new_movement {visibility:hidden;}
#new_quick_movement {visibility:hidden;}

#mov_debit, #mov_credit,#movements_controller ,#movement_category_id {visibility:hidden;}

#category_parent_id, #shared_category {visibility:hidden;}

#account_currency {visibility:hidden;}

#user_locale {visibility:hidden;}

#charts_content {visibility:hidden;}
/*
#profile_info{vertical-align:bottom;float:right;display:inline-block;}
Expand Down Expand Up @@ -210,7 +220,7 @@ LOGO */

#quick_movement .fieldWithErrors input,textarea {
border: 1px solid red;
background-image: url("/images/txt-error.gif");
background-image: url("/images/background-sprites.png") repeat-x 0px -694px;
}

#quick_movement div.errormessages {
Expand Down Expand Up @@ -342,10 +352,10 @@ a.yuimenuitemlabel {
-webkit-border-top-right-radius: 5px !important;
background: #489CD4 !important; border: 0 !important; float: left; margin: 0 0 0 5px !important; padding: 8px 13px 6px !important; color: #fff !important;
}
.yui-navset .yui-nav li.selected a {background: #fff url("/images/headertab.png") repeat-x !important; color: #444 !important;}
.yui-navset .yui-nav li.selected a {background: #fff url("/images/background-sprites.png") repeat-x 0px -322px !important; color: #444 !important;}
.yui-navset .yui-nav li a:hover,
.yui-navset .yui-nav li a:focus,
.yui-navset .yui-nav li a:active {background: #fff url("/images/headertab.png") repeat-x !important; color: #444 !important;}
.yui-navset .yui-nav li a:active {background: #fff url("/images/background-sprites.png") repeat-x 0px -322px !important; color: #444 !important;}

#charts div.yui-content {border :0; background-color:transparent;}

Expand All @@ -358,10 +368,10 @@ a.yuimenuitemlabel {
.msg p {margin: 0 0 8px 0; padding-left: 25px;}
.msg p strong {font-weight:bold;}
.msg div {margin: 0 0 8px 0; padding-left: 25px;}
.msg-ok {border-color: #a6d877; background: #d2ecba url("/images/msg-ok.png") repeat-x; color: #336801;}
.msg-error {border-color: #f3abab; background: #f9c9c9 url("/images/msg-error.png") repeat-x; color: #8d0d0d;}
.msg-warn {border-color: #d7e059; background: #f3f7aa url("/images/msg-warn.png") repeat-x; color: #6c6600;}
.msg-info {border-color: #9fd1f5; background: #c3e6ff url("/images/msg-info.png") repeat-x; color: #005898;}
.msg-ok {border-color: #a6d877; background: #d2ecba url("/images/background-sprites.png") repeat-x 0px -456px; color: #336801;}
.msg-error {border-color: #f3abab; background: #f9c9c9 url("/images/background-sprites.png") repeat-x 0px -362px; color: #8d0d0d;}
.msg-warn {border-color: #d7e059; background: #f3f7aa url("/images/background-sprites.png") repeat-x 0px -503px; color: #6c6600;}
.msg-info {border-color: #9fd1f5; background: #c3e6ff url("/images/background-sprites.png") repeat-x 0px -409px; color: #005898;}
.msg-ok p {background: url("/images/led-ico/accept.png") 0 50% no-repeat;}
.msg-error p {background: url("/images/led-ico/cross_octagon.png") 0 50% no-repeat;}
.msg-warn p {background: url("/images/led-ico/exclamation_octagon_fram.png") 0 50% no-repeat;}
Expand All @@ -382,7 +392,7 @@ a.yuimenuitemlabel {
.boxin {box-shadow: #aaa 0 0 10px; -webkit-box-shadow: #aaa 0 0 10px; -moz-box-shadow: #aaa 0 0 10px; border: 1px solid #999; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background: #fff;}
/* boxes' headers */
.box .header {
background: #3d3d3d url("/images/headerbox.png") repeat-x;
background: #3d3d3d url("/images/background-sprites.png") repeat-x 0px -272px;
border-top: 1px solid #444;
border-radius: 5px 5px 0 0;
-moz-border-radius-topleft: 5px;
Expand All @@ -399,7 +409,7 @@ a.yuimenuitemlabel {
margin-left:0px !important;
/*width:480px !important;*/
}
.altbox .header { border-top-color: #0a81d0; background: #0f518e url("/images/altheaderbox.png") repeat-x;}
.altbox .header { border-top-color: #0a81d0; background: #0f518e url("/images/background-sprites.png") repeat-x 0px -36px;}
.box .header h3 {position: relative; top: 2px; display: inline; font-size: 150%; color: #fff; text-shadow: #151515 0 1px 0;font-weight:normal;}
.altbox .header h3 {text-shadow: #003d68 0 1px 0;}
.box .header .button {
Expand Down Expand Up @@ -480,7 +490,7 @@ ul.actions li {
ul.actions a { text-decoration: none; color: #fff ;}


.pagination {border-top: 1px solid #999;min-height:19px;background: #fff url("/images/pagination.gif") repeat-x; text-align: center; color: #333 !important;}
.pagination {border-top: 1px solid #999;min-height:19px;background: #fff url("/images/background-sprites.png") repeat-x 0px -550px; text-align: center; color: #333 !important;}
.pagination div {position: relative; top: -1px; padding: 12px 10px 6px; min-height:16px;}
.pagination a {
border: 0; background: #ebebeb url("/images/pagination-item.gif") repeat-x; margin: 0 5px; padding: 6px 10px; color: #333 !important;
Expand All @@ -495,24 +505,40 @@ ul.actions a { text-decoration: none; color: #fff ;}
.pagination .current {background: url("/images/pagination-arrow.gif") 50% 0 no-repeat; padding: 15px 10px 8px;}


.drag-button {text-decoration:none; border: 1px solid #00487a; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #0567ad url("/images/altbutton.gif") repeat-x; padding: 5px 9px 5px; text-shadow: #00487a 1px 1px 0; color: #fff;}
.drag-button:hover,
.drag-button:focus,
.drag-button:active {border-color: #272727; background: #2a2a2a url("/images/button.gif") repeat-x; text-shadow: #000 1px 1px 0; color: #fff;}


.altbox .drag-button {border: 1px solid #272727; background: #2a2a2a url("/images/altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0;}
.altbox .drag-button:hover,
.altbox .drag-button:focus,
.altbox .drag-button:active {border-color: #00487a; background: #0567ad url("/images/button.gif") repeat-x; text-shadow: #00487a 1px 1px 0; color: #fff;}



/* stylish buttons with rounded corners */
.button {text-decoration:none; border: 1px solid #00487a; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #0567ad url("/images/button.gif") repeat-x; padding: 5px 9px 5px; text-shadow: #00487a 1px 1px 0; color: #fff; cursor: pointer;}
.button {text-decoration:none; border: 1px solid #00487a; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background: #0567ad url("/images/background-sprites.png") repeat-x 0px -126px; padding: 5px 9px 5px; text-shadow: #00487a 1px 1px 0; color: #fff; cursor: pointer;}
.button:hover,
.button:focus,
.button:active {border-color: #272727; background: #2a2a2a url("/images/altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0; color: #fff;}
.button:active {border-color: #272727; background: #2a2a2a url("/images/background-sprites.png") repeat-x 0px 0px; text-shadow: #000 1px 1px 0; color: #fff;}

/* alternative colors */
.altbox .button {border: 1px solid #272727; background: #2a2a2a url("/images/altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0;}
.altbox .button {border: 1px solid #272727;background: #2a2a2a url("/images/background-sprites.png") repeat-x 0px 0px; text-shadow: #000 1px 1px 0;}
.altbox .button:hover,
.altbox .button:focus,
.altbox .button:active {border-color: #00487a; background: #0567ad url("/images/button.gif") repeat-x; text-shadow: #00487a 1px 1px 0; color: #fff;}
.altbutton {border: 1px solid #272727; background: #2a2a2a url("/images/altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0;}
.altbox .button:active {border-color: #00487a; background: #0567ad url("/images/background-sprites.png") repeat-x 0px -126px; text-shadow: #00487a 1px 1px 0; color: #fff;}


.altbutton {border: 1px solid #272727; background: #2a2a2a url("/images/background-sprites.png") repeat-x 0px 0px; text-shadow: #000 1px 1px 0;}
.altbutton:hover,
.altbutton:focus,
.altbutton:active {border-color: #00487a; background: #0567ad url("/images/button.gif") repeat-x; text-shadow: #00487a 1px 1px 0; color: #fff;}
.altbox .altbutton {border: 1px solid #00487a; background: #0567ad url("/images/button.gif") repeat-x; text-shadow: #00487a 1px 1px 0;}
.altbutton:active {border-color: #00487a; background: #0567ad url("/images/background-sprites.png") repeat-x 0px -126px; text-shadow: #00487a 1px 1px 0; color: #fff;}
.altbox .altbutton {border: 1px solid #00487a; background: #0567ad url("/images/background-sprites.png") repeat-x 0px -126px; text-shadow: #00487a 1px 1px 0;}
.altbox .altbutton:hover,
.altbox .altbutton:focus,
.altbox .altbutton:active {border-color: #272727; background: #2a2a2a url("/images/altbutton.gif") repeat-x; text-shadow: #000 1px 1px 0; color: #fff;}
.altbox .altbutton:active {border-color: #272727; background: #2a2a2a url("/images/background-sprites.png") repeat-x 0px 0px; text-shadow: #000 1px 1px 0; color: #fff;}
/* tags in the header */
.box .header ul {position: absolute; right: 9px; bottom: 0;}
.box .header ul li {display: inline;}
Expand All @@ -527,12 +553,12 @@ ul.actions a { text-decoration: none; color: #fff ;}
.box .header ul a.active,
.box .header ul a:hover,
.box .header ul a:focus,
.box .header ul a:active {background: #fff url("/images/headertab.png") repeat-x; color: #444;}
.box .header ul a:active {background: #fff url("/images/background-sprites.png") repeat-x 0px -322px; color: #444;}
.altbox .header ul a {background-color: #489cd4;}
.altbox .header ul a.active,
.altbox .header ul a:hover,
.altbox .header ul a:focus,
.altbox .header ul a:active {background: #fff url("/images/altheadertab.png") repeat-x; color: #0f518e;}
.altbox .header ul a:active {background: #fff url("/images/background-sprites.png") repeat-x 0px -86px; color: #0f518e;}

/* boxes' content types – tabular */
.box .content {margin-bottom: 5px;}
Expand All @@ -547,7 +573,7 @@ ul.actions a { text-decoration: none; color: #fff ;}
.box .content table th.first,
.box .content table td.first {padding-left: 20px;}
.box .content table thead th,
.box .content table thead td {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("/images/thead.gif") repeat-x; text-shadow: #fff 0 1px 0;}
.box .content table thead td {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("/images/background-sprites.png") repeat-x 0px -646px; text-shadow: #fff 0 1px 0;}
.box .content table tbody tr.first th,
.box .content table tbody tr.first td {border-top: 1px solid #bbb;}
.altbox .content table tbody {color: #00305d;}
Expand All @@ -563,7 +589,7 @@ ul.actions a { text-decoration: none; color: #fff ;}

.box .content table a.ico-comms {border: 0; background: url("/images/ico-tablecomms.gif") 50% 60% no-repeat; padding: 10px; color: #fff;}
.box .content table tfoot th,
.box .content table tfoot td {border-top: 1px solid #ccc; background: #fff url("/images/tfoot.gif") repeat-x;}
.box .content table tfoot td {border-top: 1px solid #ccc; background: #fff url("/images/background-sprites.png") repeat-x 0px -598px;}
/* boxes' content types – simple list */
.box .content ul.simple li {clear: both; padding: 10px 20px 8px 20px; overflow: hidden;}
.box .content table tr.even th,
Expand Down

0 comments on commit ddce3fd

Please sign in to comment.