Mailing List Archive

[PATCH] WebFrontend: Fix icon sprite locations in CSS
All 'background-position's must be given as *negative* values, as it
describes the start position relative to the top-left corner of the HTML
element where painting the background images starts.
---
mythtv/html/tv/css/icons.css | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/mythtv/html/tv/css/icons.css b/mythtv/html/tv/css/icons.css
index 2ccf64e74a..5ca5c0a20a 100644
--- a/mythtv/html/tv/css/icons.css
+++ b/mythtv/html/tv/css/icons.css
@@ -13,35 +13,35 @@

.icon_flautoexpire
{
- background-position: 108px 0px;
+ background-position: -36px 0px;
}

.icon_flbookmark
{
- background-position: 72px 0px;
+ background-position: -72px 0px;
}

.icon_flcommflag
{
- background-position: 108px 0px;
+ background-position: -108px 0px;
}

.icon_flwatched
{
- background-position: 0px 27px;
+ background-position: 0px -27px;
}

.icon_hd720
{
- background-position: 36px 27px;
+ background-position: -36px -27px;
}

.icon_hd1080
{
- background-position: 72px 27px;
+ background-position: -72px -27px;
}

.icon_hdtv
{
- background-position: 108px 27px;
+ background-position: -108px -27px;
}
--
2.17.0

_______________________________________________
mythtv-dev mailing list
mythtv-dev@mythtv.org
http://lists.mythtv.org/mailman/listinfo/mythtv-dev
http://wiki.mythtv.org/Mailing_List_etiquette
MythTV Forums: https://forum.mythtv.org
Re: [PATCH] WebFrontend: Fix icon sprite locations in CSS [ In reply to ]
On 05/05/2018 06:02 AM, Philipp Matthias Hahn wrote:
> All 'background-position's must be given as *negative* values, as it
> describes the start position relative to the top-left corner of the HTML
> element where painting the background images starts.
> ---
> mythtv/html/tv/css/icons.css | 14 +++++++-------
> 1 file changed, 7 insertions(+), 7 deletions(-)
>
> diff --git a/mythtv/html/tv/css/icons.css b/mythtv/html/tv/css/icons.css
> index 2ccf64e74a..5ca5c0a20a 100644
> --- a/mythtv/html/tv/css/icons.css
> +++ b/mythtv/html/tv/css/icons.css
> @@ -13,35 +13,35 @@
>
> .icon_flautoexpire
> {
> - background-position: 108px 0px;
> + background-position: -36px 0px;
> }
>
> .icon_flbookmark
> {
> - background-position: 72px 0px;
> + background-position: -72px 0px;
> }
>
> .icon_flcommflag
> {
> - background-position: 108px 0px;
> + background-position: -108px 0px;
> }
>
> .icon_flwatched
> {
> - background-position: 0px 27px;
> + background-position: 0px -27px;
> }
>
> .icon_hd720
> {
> - background-position: 36px 27px;
> + background-position: -36px -27px;
> }
>
> .icon_hd1080
> {
> - background-position: 72px 27px;
> + background-position: -72px -27px;
> }
>
> .icon_hdtv
> {
> - background-position: 108px 27px;
> + background-position: -108px -27px;
> }

Tested on Chromium 65.0 and Vivaldi 1.16 fine (also
on an Android phone/Chrome 66.0.)

Does this need testing on other browsers before
committing?

--
Bill
_______________________________________________
mythtv-dev mailing list
mythtv-dev@mythtv.org
http://lists.mythtv.org/mailman/listinfo/mythtv-dev
http://wiki.mythtv.org/Mailing_List_etiquette
MythTV Forums: https://forum.mythtv.org
Re: [PATCH] WebFrontend: Fix icon sprite locations in CSS [ In reply to ]
Hello,

Am 06.05.2018 um 19:37 schrieb Bill Meek:
> On 05/05/2018 06:02 AM, Philipp Matthias Hahn wrote:
>> All 'background-position's must be given as *negative* values, as it
>> describes the start position relative to the top-left corner of the HTML
>> element where painting the background images starts.
...
> Tested on Chromium 65.0 and Vivaldi 1.16 fine (also
> on an Android phone/Chrome 66.0.)

Thank you for testing this.

> Does this need testing on other browsers before
> committing?

I think no, as this the CSS sprite trick is quiet common and used by
many sites nowadays: <https://www.w3schools.com/css/css_image_sprites.asp>

The old version already worked somehow, but only as the background
repeats by default: the +27px for the Y-axis workes as there are only
two rows (total height 2*27px): |+27px| = |-27px|.
But for the X-axis is did not work, as there are 4 columns (total width
4*36px), so |-36px| = |3*36px| = |+108px|.
It was clearly showing for the "commflag" and "expired" icons (the used
the same x-offset, so the were the same), but harder for the 2nd row, as
those 3 HD,HD720,HD1080 icons look very similar - only comparing it to
the HTML tool-tip showed that they were all reversed.

Philipp
_______________________________________________
mythtv-dev mailing list
mythtv-dev@mythtv.org
http://lists.mythtv.org/mailman/listinfo/mythtv-dev
http://wiki.mythtv.org/Mailing_List_etiquette
MythTV Forums: https://forum.mythtv.org
Re: [PATCH] WebFrontend: Fix icon sprite locations in CSS [ In reply to ]
On 06/05/18 18:37, Bill Meek wrote:

> On 05/05/2018 06:02 AM, Philipp Matthias Hahn wrote:
>> All 'background-position's must be given as *negative* values, as it
>> describes the start position relative to the top-left corner of the HTML
>> element where painting the background images starts.
>> ---
>>   mythtv/html/tv/css/icons.css | 14 +++++++-------
>>   1 file changed, 7 insertions(+), 7 deletions(-)
>>
>> diff --git a/mythtv/html/tv/css/icons.css b/mythtv/html/tv/css/icons.css
>> index 2ccf64e74a..5ca5c0a20a 100644
>> --- a/mythtv/html/tv/css/icons.css
>> +++ b/mythtv/html/tv/css/icons.css
>> @@ -13,35 +13,35 @@
>>     .icon_flautoexpire
>>   {
>> -    background-position: 108px 0px;
>> +    background-position: -36px 0px;
>>   }
>>     .icon_flbookmark
>>   {
>> -    background-position: 72px 0px;
>> +    background-position: -72px 0px;
>>   }
>>     .icon_flcommflag
>>   {
>> -    background-position: 108px 0px;
>> +    background-position: -108px 0px;
>>   }
>>     .icon_flwatched
>>   {
>> -    background-position: 0px 27px;
>> +    background-position: 0px -27px;
>>   }
>>     .icon_hd720
>>   {
>> -    background-position: 36px 27px;
>> +    background-position: -36px -27px;
>>   }
>>     .icon_hd1080
>>   {
>> -    background-position: 72px 27px;
>> +    background-position: -72px -27px;
>>   }
>>     .icon_hdtv
>>   {
>> -    background-position: 108px 27px;
>> +    background-position: -108px -27px;
>>   }
>
> Tested on Chromium 65.0 and Vivaldi 1.16 fine (also
> on an Android phone/Chrome 66.0.)
>
> Does this need testing on other browsers before
> committing?
>

Might be worth asking the opinion of Stuart Morgan since he did all the
work on the WebFrontend. Don't know if he still does but he used to hang
out on IRC all the time but not seen or heard much from him in a while.

Paul H.
_______________________________________________
mythtv-dev mailing list
mythtv-dev@mythtv.org
http://lists.mythtv.org/mailman/listinfo/mythtv-dev
http://wiki.mythtv.org/Mailing_List_etiquette
MythTV Forums: https://forum.mythtv.org
Re: [PATCH] WebFrontend: Fix icon sprite locations in CSS [ In reply to ]
On 05/07/2018 04:03 AM, Paul Harrison wrote:
> Might be worth asking the opinion of Stuart Morgan since he did all the work on the WebFrontend. Don't know if he still does but he used to hang
> out on IRC all the time but not seen or heard much from him in a while.

Done, thanks. He isn't on right now, but we'll see if he spots it.
Otherwise, I'll just commit to 30-Pre for now.

--
Bill
_______________________________________________
mythtv-dev mailing list
mythtv-dev@mythtv.org
http://lists.mythtv.org/mailman/listinfo/mythtv-dev
http://wiki.mythtv.org/Mailing_List_etiquette
MythTV Forums: https://forum.mythtv.org