[Users] new oVirt look-and-feel -- feature page

Wed Feb 19 13:17:07 UTC 2014

On Wed, 2014-02-19 at 07:22 -0500, Greg Sheremeta wrote:
> 
> ----- Original Message -----
> > From: "Karli Sjöberg" <Karli.Sjoberg at slu.se>
> > To: gshereme at redhat.com
> > Cc: users at ovirt.org, arch at ovirt.org
> > Sent: Wednesday, February 19, 2014 1:43:43 AM
> > Subject: Re: [Users] new oVirt look-and-feel -- feature page
> > 
> > On Tue, 2014-02-18 at 16:19 -0500, Greg Sheremeta wrote:
> > > Hi,
> > > 
> > > Please check out the feature page for the new oVirt look-and-feel,
> > > PatternFly based:
> > > http://www.ovirt.org/Features/NewLookAndFeelPatternFlyPhase1.
> > > 
> > > Comments are welcome.
> > > 
> > > Thanks,
> > > Greg
> > > 
> > > Greg Sheremeta
> > > Red Hat, Inc.
> > > Sr. Software Engineer, RHEV
> > > Cell: 919-807-1086
> > > gshereme at redhat.com
> > > _______________________________________________
> > > Users mailing list
> > > Users at ovirt.org
> > > http://lists.ovirt.org/mailman/listinfo/users
> > 
> > Looks really nice! Is the background canvas vectorized? Isn´t it going
> > to become rather slow loading such a big picture otherwise... And how is
> > it going to handle scaling of browser windows? How´d it look on smaller
> > resolutions e.g 960x640?
> > 
> > 
> > 
> > --
> > 
> > Med Vänliga Hälsningar
> > 
> > -------------------------------------------------------------------------------
> > Karli Sjöberg
> > Swedish University of Agricultural Sciences Box 7079 (Visiting Address
> > Kronåsvägen 8)
> > S-750 07 Uppsala, Sweden
> > Phone:  +46-(0)18-67 15 66
> > karli.sjoberg at slu.se
> > 
> 
> It's not vectorized. It's a PNG, size is 248.0 kB ... which isn't horrible. After the first load, it'll be stored in browser cache.
> 
> It's set to scale in such a way that the aspect ratio is maintained. It uses the CSS3 property "background-size" to achieve this. I think it looks pretty perfect at any resolution.
> 
> Here's the full CSS for it:
> 
> .obrand_loginPageBackground {
>     background-image: url(images/ovirt_bg.png);
>     background-size: 100% auto;
>     background-repeat: repeat-x;
>     background-color: #1d2226;
>     position: absolute;
>     bottom: 0;
>     left: 0;
>     right: 0;
>     top: 0;
> }
> 
> Thanks!
> Greg

Yupp, just checking, since it´s not made to tile like a parallax, I was
just curious if you had some special trick up your sleave.

And maybe I´m just nit-picking here, but I made a quick test, just to
demonstrate what I would percieve as a problem of having one big picture
as background.

obrand.html:
<html>
  <head>
    <link rel="stylesheet" href="obrand.css" />
  </head>
  <body class="obrand_loginPageBackground"></body>
</html>

obrand.css:
.obrand_loginPageBackground {
    background-image: url(ovirt_bg.png);
    background-size: 100% auto;
    background-repeat: repeat-x;
    background-color: #1d2226;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

I attached a snapshot of how scaling your browser window in the "wrong"
way breaks it´s aspect ratio and how that´s just handled by
"background-color" in a rather...boring way. Of course scaling the
window _that_ small is ridiculous, it´s just to demonstrate the aspect
issue that would be for smartphones e.g, on this welcome screen.

So my concern here is most of all about the aspect ratio issues involved
with having just one big picture as a background. Most sites I´ve seen
have either just code, a lot of small pics, parallaxing ones, or one
insanely big picture, talking Ultra-HD 4k big, just to be absolutely
sure it´s not going to scale in this unwanted way.

Am I wrong?

-- 

Med Vänliga Hälsningar

-------------------------------------------------------------------------------
Karli Sjöberg
Swedish University of Agricultural Sciences Box 7079 (Visiting Address
Kronåsvägen 8)
S-750 07 Uppsala, Sweden
Phone:  +46-(0)18-67 15 66
karli.sjoberg at slu.se
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot.png
Type: image/png
Size: 33243 bytes
Desc: Screenshot.png
URL: <http://lists.ovirt.org/pipermail/users/attachments/20140219/719c15d6/attachment-0001.png>