From gshereme at redhat.com Thu Feb 20 09:07:07 2014 Content-Type: multipart/mixed; boundary="===============4322890825355595433==" MIME-Version: 1.0 From: Greg Sheremeta To: users at ovirt.org Subject: Re: [Users] new oVirt look-and-feel -- feature page Date: Thu, 20 Feb 2014 09:07:06 -0500 Message-ID: <1963042993.3483574.1392905226663.JavaMail.zimbra@redhat.com> In-Reply-To: 5F9E965F5A80BC468BE5F40576769F09733A0F47@exchange2-1 --===============4322890825355595433== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable ----- Original Message ----- > From: "Karli Sj=C3=B6berg" > To: gshereme(a)redhat.com > Cc: users(a)ovirt.org, arch(a)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=C3=B6berg" > > > To: gshereme(a)redhat.com > > > Cc: users(a)ovirt.org, arch(a)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(a)redhat.com > > > > _______________________________________________ > > > > Users mailing list > > > > Users(a)ovirt.org > > > > http://lists.ovirt.org/mailman/listinfo/users > > > = > > > Looks really nice! Is the background canvas vectorized? Isn=C2=B4t it= going > > > to become rather slow loading such a big picture otherwise... And how= is > > > it going to handle scaling of browser windows? How=C2=B4d it look on = smaller > > > resolutions e.g 960x640? > > > = > > > = > > > = > > > -- > > > = > > > Med V=C3=A4nliga H=C3=A4lsningar > > > = > > > ---------------------------------------------------------------------= ---------- > > > Karli Sj=C3=B6berg > > > Swedish University of Agricultural Sciences Box 7079 (Visiting Address > > > Kron=C3=A5sv=C3=A4gen 8) > > > S-750 07 Uppsala, Sweden > > > Phone: +46-(0)18-67 15 66 > > > karli.sjoberg(a)slu.se > > > = > > = > > It's not vectorized. It's a PNG, size is 248.0 kB ... which isn't horri= ble. > > 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 lo= oks > > 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=C2=B4s not made to tile like a parallax, I = was > just curious if you had some special trick up your sleave. > = > And maybe I=C2=B4m 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: > > > > > > > = > 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=C2=B4s aspect ratio and how that=C2=B4s just handled by > "background-color" in a rather...boring way. Of course scaling the > window _that_ small is ridiculous, it=C2=B4s just to demonstrate the aspe= ct > 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=C2=B4ve se= en > 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=C2=B4s not going to scale in this unwanted way. > = > Am I wrong? > = > = > = > -- > = > Med V=C3=A4nliga H=C3=A4lsningar > = > -------------------------------------------------------------------------= ------ > Karli Sj=C3=B6berg > Swedish University of Agricultural Sciences Box 7079 (Visiting Address > Kron=C3=A5sv=C3=A4gen 8) > S-750 07 Uppsala, Sweden > Phone: +46-(0)18-67 15 66 > karli.sjoberg(a)slu.se > = There is a new CSS trick in PatternFly that deals with this. Once I impleme= nt that, it should fix the tall-skinny resolution issue. I'll reply back. Thanks! Greg --===============4322890825355595433==--