search

ZMYaro / holo-web

A CSS library that imitates the Android Holo themes. If you are looking for a similar library for Material Design, try https://MaterialZ.dev.
https://holo.zmyaro.com
MIT License
114 stars 25 forks source link

make .actionBar and actionBar.span size better with uncommon font-sizes #10

Closed marcoms closed 9 years ago

marcoms commented 10 years ago

changed static sizes for actionBar to ems, because if a larger font-size is used, the text would (IDK i haven't tried it on all browsers) likely overflow out of the actionBar itself. I've attached an image:

first

and after the commit:

after

Here, the actionBar is: (TEXT)

(where '|' denotes one em)

So the text is properly aligned in the middle, with 1em margin (line-height to be precise) vertically, and 1em horizontally. I have also changed body's padding to match this change.

ZMYaro commented 10 years ago

While I do need to fix the vertical spacing on action bar text, I believe action bars in Android actually ignore the default font size, and this library is supposed to mimic the behavior of native Android apps.

marcoms commented 10 years ago

I don't know how android sizes its widgets, but I noticed that the size of the action bar using holo-web was smaller than the native one, with this commit it should resize the bar to match the native one even with different dpis

ZMYaro commented 10 years ago

I made a few improvements in https://github.com/zmyaro/holo-web/commit/efc172f1d3a7d3b5d6ee928962d9e3f498add26a. How does that look on your end?

marcoms commented 10 years ago

It solves the original problem, but now if devices have much larger resolutions (retina etc.), I guess the actionBar text would look super-small?

ZMYaro commented 10 years ago

Can you upload a screenshot of what you are talking about?

marcoms commented 10 years ago

http://quirktools.com/screenfly/#u=http%3A//www.tjhsst.edu/%7E2012zyaro/holo/&w=2880&h=1800

ZMYaro commented 10 years ago

I do not have a retina MacBook to test on, but Holo Web looks fine on a Chromebook Pixel (2560×1700 at 239 PPI). Do some browsers on retina MacBooks render Holo Web differently from high-density Android, Chrome OS, and iOS devices?