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

Wed Feb 26 19:43:33 UTC 2014

----- Original Message -----
> From: "Greg Sheremeta" <gshereme at redhat.com>
> To: "Karli Sjöberg" <Karli.Sjoberg at slu.se>
> Cc: arch at ovirt.org, users at ovirt.org
> Sent: Thursday, February 20, 2014 9:07:06 AM
> Subject: Re: [Users] new oVirt look-and-feel -- feature page
> 
> 
> 
> ----- 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 8:17:07 AM
> > Subject: Re: [Users] new oVirt look-and-feel -- feature page
> > 
> > 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
> > 
> There is a new CSS trick in PatternFly that deals with this. Once I implement
> that, it should fix the tall-skinny resolution issue. I'll reply back.
> 
> Thanks!
> Greg

Tall-skinny issue was fixed with a combination of CSS tweaks and a slightly-tweaked background image.
See http://imgur.com/qVgWES9 for an example.

Thanks,
Greg