8:07 a.m.
----- Original Message -----
From: "Karli Sjöberg" <Karli.Sjoberg(a)slu.se>
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öberg" <Karli.Sjoberg(a)slu.se>
> > 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´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(a)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(a)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