Skip to content

Commit

Permalink
Switched to sprites for main images
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikeTschudi
MikeTschudi committed Aug 13, 2015
1 parent 12363ba commit d554b94
Show file tree
Hide file tree
Showing 15 changed files with 43 additions and 19 deletions.
Binary file added images/sprites.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 images/FB-f-Logo__blue_29.png → images/sprites_src/FB-f-Logo__blue_29.png
View file
File renamed without changes
0 images/Twitter_logo_blue_29.png → images/sprites_src/Twitter_logo_blue_29.png
View file
File renamed without changes
0 images/empty-heart.png → images/sprites_src/empty-heart.png
View file
File renamed without changes
0 images/empty-star.png → images/sprites_src/empty-star.png
View file
File renamed without changes
0 images/filled-heart.png → images/sprites_src/filled-heart.png
View file
File renamed without changes
0 images/filled-star.png → images/sprites_src/filled-star.png
View file
File renamed without changes
0 images/gp-29.png → images/sprites_src/gp-29.png
View file
File renamed without changes
0 images/guest-user_29.png → images/sprites_src/guest-user_29.png
View file
File renamed without changes
0 images/left-arrow.png → images/sprites_src/left-arrow.png
View file
File renamed without changes
0 images/right-arrow.png → images/sprites_src/right-arrow.png
View file
File renamed without changes
10 changes: 5 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,17 @@ <h2 class="screenreaderInfo">Photo gallery</h2>

<!-- Left and right controls -->
<a id="leftCarouselCtl" class="left carousel-control carousel-control-heartTL" href="#carousel" role="button" data-slide="prev">
<img id="previousImageBtn" src="images/left-arrow.png" class="glyphicon glyphicon-chevron-right" aria-hidden="true">
<span id="previousImageBtn" class="carousel-arrow sprites left-arrow" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="rightCarouselCtl" class="right carousel-control carousel-control-heartTL" href="#carousel" role="button" data-slide="next">
<img id="nextImageBtn" src="images/right-arrow.png" class="glyphicon glyphicon-chevron-right" aria-hidden="true">
<span id="nextImageBtn" class="carousel-arrow sprites right-arrow" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="hearts" class="heartsTL heartsBackground">
<img id="emptyHeart" class="heart" src="images/empty-heart.png" aria-hidden="false">
<img id="filledHeart" class="heart" src="images/filled-heart.png" aria-hidden="false">
<span id="emptyHeart" class="heart sprites empty-heart" aria-hidden="false"></span>
<span id="filledHeart" class="heart sprites filled-heart" aria-hidden="false"></span>
</div>
</article>

Expand Down Expand Up @@ -95,7 +95,7 @@ <h2 class="screenreaderInfo">Survey</h2>
<div id="ranking" class="ranking transparent">
<div id="rankLabel" class="profileRankLabel"></div>
<div id="level" class="profileRankLevel"></div>
<div class="profileRankStars"><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/><img src="images/empty-star.png"/></div>
<div class="profileRankStars"><div class="sprites empty-star"></div><div class="sprites empty-star"></div><div class="sprites empty-star"></div><div class="sprites empty-star"></div><div class="sprites empty-star"></div></div>
<div id="profileRankBar" class="profileRankBar">
<div id="profileRankBarFill" class="profileRankBarFill"></div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions js/app/handleUserSignin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ define(['lib/i18n.min!nls/resources.js', 'diag'], function (i18n, diag) {
initUI: function (buttonContainer) {

if (handleUserSignin.availabilities.guest) { //??? i18n
$('<div id="guestSignin" class="socialMediaButton guestOfficialColor" style="background-image:url(\'images/guest-user_29.png\')">'
$('<div id="guestSignin" class="socialMediaButton guestOfficialColor"><span class="socialMediaIcon sprites guest-user_29"></span>'
+ i18n.signin.guestLabel + '</div>').appendTo(buttonContainer);
$('#guestSignin').on('click', function () {
handleUserSignin.loggedIn = true;
Expand All @@ -207,7 +207,7 @@ define(['lib/i18n.min!nls/resources.js', 'diag'], function (i18n, diag) {
}

if (handleUserSignin.availabilities.facebook) {
$('<div id="facebookSignin" class="socialMediaButton facebookOfficialColor" style="background-image:url(\'images/FB-f-Logo__blue_29.png\')">Facebook</div>').appendTo(buttonContainer);
$('<div id="facebookSignin" class="socialMediaButton facebookOfficialColor"><span class="socialMediaIcon sprites FB-f-Logo__blue_29"></span>Facebook</div>').appendTo(buttonContainer);
$('#facebookSignin').on('click', function () {
// Force reauthorization. FB says, "Apps should build their own mechanisms for allowing switching
// between different Facebook user accounts using log out functions and should not rely upon
Expand All @@ -223,7 +223,7 @@ define(['lib/i18n.min!nls/resources.js', 'diag'], function (i18n, diag) {
}

if (handleUserSignin.availabilities.googleplus) {
$('<div id="googlePlusSignin" class="socialMediaButton googlePlusOfficialColor" style="background-image:url(\'images/gp-29.png\')">Google+</div>').appendTo(buttonContainer);
$('<div id="googlePlusSignin" class="socialMediaButton googlePlusOfficialColor"><span class="socialMediaIcon sprites gp-29"></span>Google+</div>').appendTo(buttonContainer);
$('#googlePlusSignin').on('click', function () {
// Google caveat for setting cookiepolicy to "none":
// The none value does not set cookies or session storage for the sign-in button
Expand All @@ -243,7 +243,7 @@ define(['lib/i18n.min!nls/resources.js', 'diag'], function (i18n, diag) {
}

if (handleUserSignin.availabilities.twitter) {
$('<div id="twitterSignin" class="socialMediaButton twitterOfficialColor" style="background-image:url(\'images/Twitter_logo_blue_29.png\')">Twitter</div>').appendTo(buttonContainer);
$('<div id="twitterSignin" class="socialMediaButton twitterOfficialColor"><span class="socialMediaIcon sprites Twitter_logo_blue_29"></span>Twitter</div>').appendTo(buttonContainer);
$('#twitterSignin').on('click', function () {
handleUserSignin.showTwitterLoginWin(false);
});
Expand Down
8 changes: 4 additions & 4 deletions js/app/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -478,11 +478,11 @@ diag.appendWithLF("block slide to " + data.direction); //???
$("#rankLabel")[0].innerHTML = prepareAppConfigInfo.appParams.contribLevels[level].label;
$("#level")[0].innerHTML = i18n.labels.label_level.replace("${0}", level);
if (level === 0) {
$("img", ".profileRankStars").attr("src", "images/empty-star.png");
$("div", ".profileRankStars").removeClass("filled-star").addClass("empty-star")
} else {
var stars = $("img:eq(" + (level - 1) + ")", ".profileRankStars");
stars.prevAll().andSelf().attr("src", "images/filled-star.png");
stars.nextAll().attr("src", "images/empty-star.png");
var stars = $("div:eq(" + (level - 1) + ")", ".profileRankStars");
stars.prevAll().andSelf().removeClass("empty-star").addClass("filled-star")
stars.nextAll().removeClass("filled-star").addClass("empty-star")
}

// If below top level, show how far to next level
Expand Down
36 changes: 30 additions & 6 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,14 +192,15 @@ header, section, footer, aside, nav, main, article, figure {
}
.socialMediaButton {
width: 80px;
height: 29px;
margin: 0 4px;
height: 60px;
margin: 4px;
cursor: pointer;
display: inline-block;
padding-top: 44px;
padding-bottom: 12px;
background-repeat: no-repeat;
background-position: center;
padding-top: 8px;
}
.socialMediaIcon {
display: block;
margin-left: 26px;
}
.guestOfficialColor {
color: black;
Expand Down Expand Up @@ -628,3 +629,26 @@ label+.radio {
color: #555;
font-size: 13px;
}

/* Generated using http://zerosprites.com/ */
.sprites { background: url(images/sprites.png) no-repeat; }
.FB-f-Logo__blue_29 { width: 29px; height: 29px; background-position: -72px -61px; }
.Twitter_logo_blue_29 { width: 29px; height: 29px; background-position: -72px -91px; }
.empty-heart { width: 64px; height: 60px; background-position: -37px 0; }
.empty-star { width: 33px; height: 31px; background-position: 0 -53px; }
.filled-heart { width: 64px; height: 60px; background-position: 0 -117px; }
.filled-star { width: 33px; height: 31px; background-position: 0 -85px; }
.gp-29 { width: 29px; height: 29px; background-position: -72px -121px; }
.guest-user_29 { width: 29px; height: 29px; background-position: -72px -151px; }
.left-arrow { width: 36px; height: 52px; background-position: 0 0; }
.right-arrow { width: 36px; height: 52px; background-position: -34px -61px; }

.carousel-arrow {
position: absolute;
top: 50%;
z-index: 5;
display: inline-block;
}
.empty-star { display: inline-block }
.filled-star { display: inline-block }

0 comments on commit d554b94

Please sign in to comment.