Laker-Compendium icon indicating copy to clipboard operation
Laker-Compendium copied to clipboard

CSS

Open mtamony opened this issue 12 years ago • 5 comments

Wow, the CSS in the example seems to be very messed up. It might be good to get it cleaned up. I am trying to go through it right now with Chrome and there are duplications in the size of things. This might only have a bad effect with all the different Android sizes.

mtamony avatar Dec 14 '12 22:12 mtamony

doesnt it stretches the image and ignores the aspect ration? Better would be something like: Height:auto; width:100% or using the css-background-options, cover or contain.

thanks!

ffranke avatar Dec 17 '12 09:12 ffranke

Has anyone viewed their book in the various browsers? I'm totally confused with the upper TOC. I have 4 different views right now with the same CSS targets.

TOC Laker

mtamony avatar Dec 22 '12 00:12 mtamony

Hey! Thats because Laker was never designed for tablet and phone sizes other than iphone and iPad.

cheers

ffranke avatar Dec 22 '12 12:12 ffranke

iPhone and iPad are simply tablets and phones according to @media tags in CSS. This is an interesting observation from Friar designer.

Okay, the issue with the Laker Compendium (as of version 1.4) in Friar Framework is that it uses a custom client side include library: http://www.massimocorner.com/libraries/csi/

This is nice because it makes the code more reusable by extracting repeating parts out into files that can be included in other files. You can verify this by going to "introduction.html" in Laker and viewing the source. In the opening tag, you will clearly see the following code:

Then you can find the table of content div which loads the "inc/toc.html" file into that div using a Client Side Include:

However, Android doesn't seem to support any client side includes for security reasons: http://stackoverflow.com/questions/9003402/jquery-and-phonegap-include-a-html-file-clientside-with-html-or-js

This is not a standard way of making web pages so I am not surprised it does not work in Android's WebView due to its strict security settings. See point number three in the list below, this is the method that the CSI library in Laker Compendium tries to use, and which Android rejects. http://en.wikipedia.org/wiki/Server_Side_Includes#Client_Side_Includes

The standardized method to accomplish the same thing would be through something like an iframe, which is the first option listed in the link above. If you really need to get Laker working, I can recommend that you refactor the code from using the CSI library into using iframes. Alternatively, I can also recommend contacting the author of Laker in hopes that maybe he will look into it as well.

mtamony avatar Dec 26 '12 16:12 mtamony

Thanks for the insights! Didn't know about that!

ffranke avatar Dec 27 '12 19:12 ffranke