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?
Duncan
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
I
am just
thinking of a
short-term
solution yet.
For a
long-term
solution, I am
not sure which
framework is
good for
future
versions of
Hudson.
If
Hudson is
already using
the Spring
framework, I
think Spring
Mobile <http://projects.spring.io/spring-mobile/>
might have
less impact on
the current
structure.
Anyway, I must
start from
studying the
current Hudson
codebase.
Hi Kaz,
Excellent. For
some time I've
been debating
about changing
Hudson page
layout to
Bootstrap 3,
which if done
correctly will
automatically
take care of
mobile
usability. Do
you have any
framework in
mind?.
Otherwise I
will highly
recommend to
use Bootstrap.
I'll create a
branch for
you.
- 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
_______________________________________________
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
_______________________________________________
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
_______________________________________________
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
|
