From 783e87469046e2baa37f78a117d6defc03815121 Mon Sep 17 00:00:00 2001 From: benmanley Date: Wed, 12 Feb 2014 14:40:45 +0000 Subject: [PATCH 1/6] Fix positioning of paw sprites --- public/css/inventory.styl | 21 ++++++++++++++++++--- views/options/inventory/stable.jade | 2 +- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index 44c4819343..f562e010ac 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -96,9 +96,16 @@ menu.pets .customize-menu .pet-button border: none background: none white + +//adjust position of flying pig down to leave some room between rows +button[class*="Pet-FlyingPig"] + position: relative + top: 16px + .pet-not-owned width: 81px; height: 99px; + position: relative; /* Would use css3 filters and just display the original pet image with a black hue, but doesn't seem to work in Firefox or Opera */ /*filter: brightness(0%) @@ -106,9 +113,17 @@ menu.pets .customize-menu -moz-filter: brightness(0%) -o-filter: brightness(0%) -ms-filter: brightness(0%)*/ - - .PixelPaw - margin-top: 36px // align paw with pets, at the bottom of the button + + // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser) + .PixelPaw, .PixelPaw-Gold + position: absolute + top: 38px + left: 16px + +//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link +menu.pets-rare a + display: inline-block + vertical-align: top .selectableInventory background-color: lightgreen !important diff --git a/views/options/inventory/stable.jade b/views/options/inventory/stable.jade index d228ece0f2..b0ee055e24 100644 --- a/views/options/inventory/stable.jade +++ b/views/options/inventory/stable.jade @@ -76,7 +76,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .col-md-12 h4=env.t('rarePets') - menu + menu.pets-rare div button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom') button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom') From 03a23d81e41f628211aead15202ed754506c60f4 Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 21 Feb 2014 12:14:58 +0000 Subject: [PATCH 2/6] Move styles from stable.jade to inventory.styl file --- public/css/inventory.styl | 30 +++++++++++------------------ views/options/inventory/stable.jade | 8 +++----- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index f562e010ac..669be6a159 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -17,7 +17,8 @@ .equipment-title display: inline-block - vertical-align: middle + vertical-align: bottom + margin-right: 20px .stable .static-popover max-width: 550px @@ -96,16 +97,9 @@ menu.pets .customize-menu .pet-button border: none background: none white - -//adjust position of flying pig down to leave some room between rows -button[class*="Pet-FlyingPig"] - position: relative - top: 16px - .pet-not-owned width: 81px; height: 99px; - position: relative; /* Would use css3 filters and just display the original pet image with a black hue, but doesn't seem to work in Firefox or Opera */ /*filter: brightness(0%) @@ -113,17 +107,15 @@ button[class*="Pet-FlyingPig"] -moz-filter: brightness(0%) -o-filter: brightness(0%) -ms-filter: brightness(0%)*/ - - // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser) - .PixelPaw, .PixelPaw-Gold - position: absolute - top: 38px - left: 16px - -//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link -menu.pets-rare a - display: inline-block - vertical-align: top + + .PixelPaw + margin-top: 36px // align paw with pets, at the bottom of the button + +// styles for pets that have been fed until they evolve into a mount +.pet-evolved + opacity: 0.1 + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)" + //if this could be changed to the opacity talked about? can't figure it out .selectableInventory background-color: lightgreen !important diff --git a/views/options/inventory/stable.jade b/views/options/inventory/stable.jade index b0ee055e24..ee38d05564 100644 --- a/views/options/inventory/stable.jade +++ b/views/options/inventory/stable.jade @@ -58,9 +58,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%") button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]') .PixelPaw - // How to apply this style in stylus files? - button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)') - //if this could be changed to the opacity talked about? can't figure it out + button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0') .col-md-12 h4=env.t('questPets') menu.pets(type='list') @@ -72,11 +70,11 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%") button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]') .PixelPaw - button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)') + button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0') .col-md-12 h4=env.t('rarePets') - menu.pets-rare + menu div button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom') button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom') From c04caefaacf1da5a3a45e5c09a7ae2c4202e6f30 Mon Sep 17 00:00:00 2001 From: benmanley Date: Wed, 12 Feb 2014 14:40:45 +0000 Subject: [PATCH 3/6] Fix positioning of paw sprites --- public/css/inventory.styl | 21 ++++++++++++++++++--- views/options/inventory/stable.jade | 2 +- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index 468a9d15db..7ea3d17f54 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -97,9 +97,16 @@ menu.pets .customize-menu .pet-button border: none background: none white + +//adjust position of flying pig down to leave some room between rows +button[class*="Pet-FlyingPig"] + position: relative + top: 16px + .pet-not-owned width: 81px; height: 99px; + position: relative; /* Would use css3 filters and just display the original pet image with a black hue, but doesn't seem to work in Firefox or Opera */ /*filter: brightness(0%) @@ -107,9 +114,17 @@ menu.pets .customize-menu -moz-filter: brightness(0%) -o-filter: brightness(0%) -ms-filter: brightness(0%)*/ - - .PixelPaw - margin-top: 36px // align paw with pets, at the bottom of the button + + // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser) + .PixelPaw, .PixelPaw-Gold + position: absolute + top: 38px + left: 16px + +//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link +menu.pets-rare a + display: inline-block + vertical-align: top .selectableInventory background-color: lightgreen !important diff --git a/views/options/inventory/stable.jade b/views/options/inventory/stable.jade index d228ece0f2..b0ee055e24 100644 --- a/views/options/inventory/stable.jade +++ b/views/options/inventory/stable.jade @@ -76,7 +76,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .col-md-12 h4=env.t('rarePets') - menu + menu.pets-rare div button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom') button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom') From 8c2c940d888b55c2218afcb0d594891bc99dc3e0 Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 21 Feb 2014 12:14:58 +0000 Subject: [PATCH 4/6] Move styles from stable.jade to inventory.styl file --- public/css/inventory.styl | 27 +++++++++------------------ views/options/inventory/stable.jade | 8 +++----- 2 files changed, 12 insertions(+), 23 deletions(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index 7ea3d17f54..669be6a159 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -97,16 +97,9 @@ menu.pets .customize-menu .pet-button border: none background: none white - -//adjust position of flying pig down to leave some room between rows -button[class*="Pet-FlyingPig"] - position: relative - top: 16px - .pet-not-owned width: 81px; height: 99px; - position: relative; /* Would use css3 filters and just display the original pet image with a black hue, but doesn't seem to work in Firefox or Opera */ /*filter: brightness(0%) @@ -114,17 +107,15 @@ button[class*="Pet-FlyingPig"] -moz-filter: brightness(0%) -o-filter: brightness(0%) -ms-filter: brightness(0%)*/ - - // align paw with pets, at the bottom of the button (changing margin-top doesn't work cross-browser) - .PixelPaw, .PixelPaw-Gold - position: absolute - top: 38px - left: 16px - -//allow paw alignment to apply correctly to PixelPaw-Gold as it is inside a link -menu.pets-rare a - display: inline-block - vertical-align: top + + .PixelPaw + margin-top: 36px // align paw with pets, at the bottom of the button + +// styles for pets that have been fed until they evolve into a mount +.pet-evolved + opacity: 0.1 + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)" + //if this could be changed to the opacity talked about? can't figure it out .selectableInventory background-color: lightgreen !important diff --git a/views/options/inventory/stable.jade b/views/options/inventory/stable.jade index b0ee055e24..ee38d05564 100644 --- a/views/options/inventory/stable.jade +++ b/views/options/inventory/stable.jade @@ -58,9 +58,7 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%") button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]') .PixelPaw - // How to apply this style in stylus files? - button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)') - //if this could be changed to the opacity talked about? can't figure it out + button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0') .col-md-12 h4=env.t('questPets') menu.pets(type='list') @@ -72,11 +70,11 @@ script(type='text/ng-template', id='partials/options.inventory.pets.html') .progress-bar.progress-bar-success(style="width:{{user.items.pets[pet]/.5}}%") button(class="pet-button pet-not-owned", ng-if='!user.items.pets[pet]') .PixelPaw - button(class="pet-button Pet-{{pet}}" ng-if='user.items.pets[pet]<0',style='opacity:0.1;filter:alpha(opacity=10)') + button(class="pet-evolved pet-button Pet-{{pet}}", ng-if='user.items.pets[pet]<0') .col-md-12 h4=env.t('rarePets') - menu.pets-rare + menu div button(ng-if='user.items.pets["Wolf-Veteran"]', class="pet-button Pet-Wolf-Veteran", ng-class='{active: user.items.currentPet == "Wolf-Veteran"}', ng-click='choosePet("Wolf", "Veteran")', popover=env.t('veteranWolf'), popover-trigger='mouseenter', popover-placement='bottom') button(ng-if='user.items.pets["Wolf-Cerberus"]', class="pet-button Pet-Wolf-Cerberus", ng-class='{active: user.items.currentPet == "Wolf-Cerberus"}', ng-click='choosePet("Wolf", "Cerberus")', popover=env.t('cerberusPup'), popover-trigger='mouseenter', popover-placement='bottom') From 598088df03b18176dec45bb3512cbeace2058bc1 Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 21 Feb 2014 21:25:46 +0000 Subject: [PATCH 5/6] Delete -ms-filter value as it is automatically added when compiled --- public/css/inventory.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index 669be6a159..b442e30c9b 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -114,7 +114,6 @@ menu.pets .customize-menu // styles for pets that have been fed until they evolve into a mount .pet-evolved opacity: 0.1 - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)" //if this could be changed to the opacity talked about? can't figure it out .selectableInventory From e050bed42c30435973f4f86c399c467cd43320c7 Mon Sep 17 00:00:00 2001 From: benmanley Date: Fri, 21 Feb 2014 22:25:31 +0000 Subject: [PATCH 6/6] Remove obsolete comment --- public/css/inventory.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/public/css/inventory.styl b/public/css/inventory.styl index b442e30c9b..08cceeab57 100644 --- a/public/css/inventory.styl +++ b/public/css/inventory.styl @@ -114,7 +114,6 @@ menu.pets .customize-menu // styles for pets that have been fed until they evolve into a mount .pet-evolved opacity: 0.1 - //if this could be changed to the opacity talked about? can't figure it out .selectableInventory background-color: lightgreen !important