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
Post by Eli Mesika----- 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
Post by Greg SheremetaHi,
Please check out the feature page for the new oVirt look-and-feel,
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.
.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.
<html>
<head>
<link rel="stylesheet" href="obrand.css" />
</head>
<body class="obrand_loginPageBackground"></body>
</html>
.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.
