----- Original Message ----- > From: "Greg Sheremeta" <[email protected]> > To: "Karli Sjöberg" <[email protected]> > Cc: [email protected], [email protected] > 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" <[email protected]> > > To: [email protected] > > Cc: [email protected], [email protected] > > 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" <[email protected]> > > > > To: [email protected] > > > > Cc: [email protected], [email protected] > > > > 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 > > > > > [email protected] > > > > > _______________________________________________ > > > > > Users mailing list > > > > > [email protected] > > > > > 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 > > > > [email protected] > > > > > > > > > > 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 > > [email protected] > > > 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 _______________________________________________ Arch mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/arch
