Looks good. Should we get rid off this
rounded edge and make the top bar equal in height every where?
- Winston
I am now testing a solid-color header layout on my
server < http://alfa.vx68k.org/hudson/>.
It still requires adjustments but it should look better on
mobile devices than the original image background..
To make the footer section at the bottom of the browser
window if the contents are short, I finally wrote these
scripts in order to avoid non-portable flexboxes:
jQuery(window).resize(function (event) {
var height = jQuery(window).height();
height -= jQuery("#top-box").height() +
jQuery("#bottom-box").height();
jQuery("#content-box").css("min-height", height + "px");
});
jQuery(window).load(function (event) {
jQuery(window).resize();
});
Sometimes, a moving footer is visible but it should work on
most browsers. You might choose better ids than I did.
Please suggest better ones. :)
By the way, a fixed height footer can be written with no
script but only with CSS. Are you OK with a fixed height
footer?
I did the most of grid rewrites in the
main layout but it would be better to reorganize the
header section if I continue the work so that we
have a header across the entire browser window
because grids cannot reorder items and merely
constraints width ratios of them.
I was finally forced to use a flexbox < http://www.w3.org/TR/css-flexbox-1/>
to display the footer at the bottom of the
browser window if possible because
height="100%" (or style="height: 100%") did
not work for it. If the content is longer,
the footer is placed at the end ordinarily
even if a flexbox is used.
Any older browsers that do not support flexbox
will just display the footer in the middle of
the window if the content is shorter than the
window height. Internet Explorer 11 is claimed
to support flexbox but strangely it worked as if
it did not support it in my environment.
That's my homework. :)
Many tables are used for layouts
and I must check the result of my change and
correct broken layout each time. Now I
wonder why 8em top margin was added to
footer parts and worked properly in the
original table-based layout.
Nice!
For everyone, here’s the contrast
between this version and the default:
Here’s the hudson-ci.org server
on my phone - magnifying glass
required!
And the new version - now much more
readable:
Question Kaz - Can you get the
search field to wrap down to the next
screen?
Kaz,
I see the improvement in
font sizing when I run on my
phone, but when I first
tried this this morning I’m
sure that the page also
re-arranged itself with the
sidebar moving up above the
Jobs table - it may have
been my imagination though?
Just
FYI, as the first
step, I added the
viewport meta
element to my
installation of
Hudson at < http://alfa.vx68k.org/hudson/>.
The window content
does no longer
simply overflow
from the right
edge of the
browser window
(but still
overflows on a
narrow window) and
is visible on
mobile devices
with readable font
size by default.
Welcome
back. Pure is
a CSS-only
framework that
I think has
basic
components
with maximal
customizability.
It is hosted
on GitHub https://github.com/yahoo/pure
and we can
regenerate CSS
files
ourselves, but
I feel
pre-generated
CSSs are
enough to use
with addition
of several
custom CSS
rules. I have
not tried it
in Hudson yet
but I will do
it anyway
soon.
Back
from vacation
now.
With the
Eclipse CQ
process there
are two
factors - one
is the license
and the second
is the code
provenance.
Can it be
determined
exactly who
wrote this
code and who
may have a
stake in it.
If a brand new
library is
asked for then
the Eclipse
legal folks
will probably
want to get in
touch with the
authors of the
code to
confirm all
that stuff.
I’ll be
happy to
submit CQs
once you’ve
determined
that a
particular set
of libraries
is going to
tick your
boxes, we
should
probably try
and get
approval
sooner rather
than later
:-)
Duncan
Unfortunately
I don't know
the answer.
Duncan does
all the CQ
process for
Hudson third
party
libraries and
Framework (I
guess he is on
vacation).
I did a search
at Eclipse
IPzilla for
per-approved
CQs for
- Twitter
Bootstrap
- Zurb
Foundation
- Yahoo
PureCss
I found only
approval for
Twitter
Bootstrap
That doesn't
mean we can't
get approval
for other
Frameworks. It
will take a
while though.
So feel free
to experiment
with purecss.
- Winston
This
is the license
terms applied
to Pure. Do
you think it
can be
rejected?
Copyright
2014 Yahoo!
Inc. All
rights
reserved.
Redistribution
and use in
source and
binary forms,
with or
without
modification,
are permitted
provided that
the following
conditions are
met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
* Neither the name of the Yahoo! Inc. nor the
names of its contributors may be used to endorse or promote products
derived from this software without specific prior written permission.
THIS
SOFTWARE IS
PROVIDED BY
THE COPYRIGHT
HOLDERS AND
CONTRIBUTORS
"AS IS" AND
ANY EXPRESS OR
IMPLIED
WARRANTIES,
INCLUDING, BUT
NOT LIMITED
TO, THE
IMPLIED
WARRANTIES OF
MERCHANTABILITY
AND FITNESS
FOR A
PARTICULAR
PURPOSE ARE
DISCLAIMED. IN
NO EVENT SHALL
YAHOO! INC. BE
LIABLE FOR ANY
DIRECT,
INDIRECT,
INCIDENTAL,
SPECIAL,
EXEMPLARY, OR
CONSEQUENTIAL
DAMAGES
(INCLUDING,
BUT NOT
LIMITED TO,
PROCUREMENT OF
SUBSTITUTE
GOODS OR
SERVICES; LOSS
OF USE, DATA,
OR PROFITS; OR
BUSINESS
INTERRUPTION)
HOWEVER CAUSED
AND ON ANY
THEORY OF
LIABILITY,
WHETHER IN
CONTRACT,
STRICT
LIABILITY, OR
TORT
(INCLUDING
NEGLIGENCE OR
OTHERWISE)
ARISING IN ANY
WAY OUT OF THE
USE OF THIS
SOFTWARE, EVEN
IF ADVISED OF
THE
POSSIBILITY OF
SUCH DAMAGE.
Normalize.css
License
Copyright
(c) Nicolas
Gallagher and
Jonathan Neal
Permission
is hereby
granted, free
of charge, to
any person
obtaining a
copy of this
software and
associated
documentation
files (the
"Software"),
to deal in the
Software
without
restriction,
including
without
limitation the
rights to use,
copy, modify,
merge,
publish,
distribute,
sublicense,
and/or sell
copies of the
Software, and
to permit
persons to
whom the
Software is
furnished to
do so, subject
to the
following
conditions:
The above
copyright
notice and
this
permission
notice shall
be included in
all copies or
substantial
portions of
the Software.
THE
SOFTWARE IS
PROVIDED "AS
IS", WITHOUT
WARRANTY OF
ANY KIND,
EXPRESS OR
IMPLIED,
INCLUDING BUT
NOT LIMITED TO
THE WARRANTIES
OF
MERCHANTABILITY,
FITNESS FOR A
PARTICULAR
PURPOSE AND
NONINFRINGEMENT.
IN NO EVENT
SHALL THE
AUTHORS OR
COPYRIGHT
HOLDERS BE
LIABLE FOR ANY
CLAIM, DAMAGES
OR OTHER
LIABILITY,
WHETHER IN AN
ACTION OF
CONTRACT, TORT
OR OTHERWISE,
ARISING FROM,
OUT OF OR IN
CONNECTION
WITH THE
SOFTWARE OR
THE USE OR
OTHER DEALINGS
IN THE
SOFTWARE.
In
addition to
Foundation and
Skeleton
mentioned
previously, I
found another
one, Pure < http://purecss.io/>
today. It
offers
1/5-based grid
in addition to
1/24-based
one, and it is
quite small
(17 KB
minified
compared to
120 KB of
Bootstrap)
while offering
common
components
like tables,
menus,
buttons, etc.
It looks quite
young but it
could be more
widely used in
the future as
it is made by
Yahoo. It
does not use
_javascript_ at
all but it can
be extended or
combined with
scripts, and
It is licensed
under the
3-clause BSD
License
instead of the
MIT as the
former ones.
It is provided
in several
modules and we
can use only
the modules we
need while we
can still use
all-in-one
file (it is
still 17 KB).
I like its
modular design
and small
footprint, so
I will
experiment a
small number
of page design
with it.
I know
about both
Bootstrap and
Foundation. I
never used
Skeleton. In
another
project, I
started out
with
Foundation. It
is an
excellent
framework.
Eventually I
switched to
Bootstrap
because of
some issues in
Foundation 5
and couldn't
find
documentation
or forum
support to
resolve them.
Foundation is
similar to
Bootstrap in
concept and is
also licensed
by the MIT
License. Its
CSS file is a
bit larger
than Bootstrap
but it
wouldn't be a
big problem
IMO. It seems
as widely used
as Bootstrap
is and it
might be an
alternative to
Bootstrap if
we don't need
glyphicons at
all.
Skeleton, on
the other
hand, is more
primitive and
smaller in CSS
file size
(1/10 even
without
minimization)
but still has
grid-based
layout
responsiveness,
and is also
licensed by
the MIT
License. As
it is smaller
than Bootstrap
or Foundation,
It has fewer
components but
basic HTML
elements, and
doesn't use
_javascript_,
either. If we
want to
customize our
UI heavily, it
might be most
flexible since
it is pure CSS
without any
preprocessor
like Less or
Sass.
Finally in
regard to
mobile
usability,
Foundation and
Skeleton uses
larger default
line height
(160%) than
Bootstrap does
(140%). It
would make it
easier to tap
linked text on
small
devices. It
is one of the
good points of
the two, I
think.
It is a
combination of
_javascript_ and
CSS.
_javascript_ is
needed only
for advanced
use. Once you
are ready, let
me know, I'll
explain where
to apply the
changes. Mean
while you
might want to
read the
document I put
together
several years
ago to get an
understanding
of how Hudson
UI is
generated.
https://wiki.eclipse.org/Hudson-ci/documentation#Hudson_Architecture_Documents
(both Web/REST
and View
architectures
may be useful)
I
just learned
Bootstrap is
mostly
implemented in
CSS. It looks
very easy to
use it in any
websites so I
will try it
myself before
experimenting
it with
Hudson. Thank
you for the
helpful
information.
OK,
though I am
not familiar
with Bootstrap
at all, I will
take a look
into it for a
long-term
solution.
Hi Kaz,
Sure you can
work on the
short term
solution. For
long term let
us use
Bootstrap.
Hudson does
not use
Spring. It has
proprietary UI
and REST
framework.
Hudson UI can
accommodate
third party
Layout
framework like
Bootstrap.
Thanks,
Winston
_______________________________________________
hudson-dev mailing list
hudson-dev@xxxxxxxxxxx
To change your delivery options, retrieve your password, or unsubscribe from this list, visit
https://dev.eclipse.org/mailman/listinfo/hudson-dev
|
