CSS responsiveness Issue. Cannot see all columns on multiple pages

[wookielover]

To help with identifying and fixing issues, please include as much information as possible, including:

LazyLibrarian version number (50ddefedf211e9ba95f8eab5b8be1518cda475f0)

Operating system used (windows)

Interface in use (bookstrap)

Source of your LazyLibrarian installation (git)

Resolution 1680x1050 Dont have 1920x1080

Browsers affected: tested on edge & Chrome with same issue

Theme independent. Happens on all themes.

There appears to be a problem in the bootstrap.min.css resolution responsiveness where the columns are getting cutoff on the right side. It appears the columns aren't sizing properly as they are requiring 1250px of space to display all of the columns but the container is 1170px per the @media tag.

@media (min-width:1200px){ .container{ width:1170px }

I don't know CSS that great so my troubleshooting is kind of limited. It does this on all three lazylibrarain installations i have and all browsers.

1024x768

1280X960

1680X1050

Additionally the CSS is using the bootstrap.min.css from https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css instead of the local copy under lazylibrarian/data/css. Not sure if that is intentional.

And one last note is that the CSS is a mess. Everything is formatted on one line which makes troubleshooting extremely difficult. The same goes for datatables.min. I know they were autogenerated files but good god!! :-P There are css formatters which can be used to make it cleaner. CleanCSS has a good one and many others as well.

[philborman]

My knowledge of css is practically zero. I think the auto-generated files are from the bootswatch site and are intentionally as small as possible, all whitespace stripped. We should be using the local copy rather than the remote one as it makes sure we can still run if there is no internet connectivity, but at least that part should be easy to fix. I think if you take the "min" part out of the url you get the full fat version.

Not sure if the original author of the bookstrap interface is still around, haven't heard anything for a while. He seemed very familiar with the system so maybe a simple fix for him. Not so for me. Maybe there is a later version than 3.3.6 available that fixes the issue?

[philborman]

Well, 3.3.7 has exactly the same @media tag so no help there, and that's the last of the 3.3 series. Will have a hunt around a bit tomorrow.

[Code-Slave]

Sam issue. it looks like it may be a wrapping issue in booktitle

[philborman]

The remote copy of bootstrap is intentional as it's users choice of theme. If you have no internet connection we use the local copy which is fixed theme. We don't ship lazylibrarian with all possible themes. Might add some code to download users preferred and save it.

[wookielover]

The remote copy of bootstrap is intentional as it's users choice of theme. If you have no internet connection we use the local copy which is fixed theme. We don't ship lazylibrarian with all possible themes. Might add some code to download users preferred and save it.

Ah. I get it. Each theme has its own bootstrap.min.

Sam issue. it looks like it may be a wrapping issue in booktitle

So i took a look at the book title field in the inspector and noticed that the book title field, latest book, and the author table fields are buttons with the class button.btn.btn-link. The whitespace property for the .btn class is set to no-wrap so then the .btn-link also does not wrap. Here are the options for the whitespace property.

normal - Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default nowrap | Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a
tag is encountered pre | Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the pre tag in HTML pre-line | Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks pre-wrap | Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks initial | Sets this property to its default value. Read about initial inherit | Inherits this property from its parent element. 

Setting an attribute of whitespace:normal in the .btn-link class allows the text of those button links to wrap accordingly. However, this then creates another minor issue with presentation and style. The text of the buttons are set to be center justified so multi line wrapping doesn't look so hot without a fix. Adding a text-align:left attribute to the .btn-link class fixes that issue. This would need to be tested properly of course.

I posted some screenshots.

Before

Normal

Normal and text align left.

[philborman]

Looks good to me, but because each theme has its own bootstrap.min file it gets complicated. Do we have to edit all the bootstrap.min files or can we remove/replace the btn class on the buttons in our html so we have say class=button tbn-link without the problematic btn , or can we add back whitespace and alignment later?

[wookielover]

You could add the selector into the base.html page in the style tag that is already there and then only the one file is updated since that is inherited by each file. I tested that and it does work, but it seems to me that if you are using themes to control the formatting and whatnot, the best practice would probably be to incorporate the change into each theme css since really this is a theme design issue. Also that way we would make sure not to affect buttons etc when its viewed as webkit etc. I did not test the change to base.html in mobile or other views besides desktop.

.button.btn.btn-link { white-space:normal; text-align:left; }

[philborman]

ok thanks, think I understand. Some of those buttons don't need to be buttons anyway, they can just be links (eg author names) The only ones that need to be buttons are the ones that show a popup rather than a simple redirect. Might be easier to just change those few rather than mess around with the theme css ?

[philborman]

ok, changed all the links into plain links, all the buttons are now class="button btn-link text-left" and also hide the ratings on small screens as the image isn't resizable. The only page where sizing still seems to be an issue is log page when debug is on, but you might need all that info so just have to use the column toggles or scroll. See what you think...

[wookielover]

Looks pretty good to me. The font size might get a couple minor complaints from people as it is a little smaller now, but It works very well.

On a side note. I wanted to say that I really appreciate your responsiveness to issues and your attempts to mitigate and fix bugs quickly. Both issues I have posted have been corrected very quickly. For a long time LL just kind of sat and rotted away without much active development. It is becoming a more mature application all the time and it is much appreciated by everyone who uses the application.

[philborman]

Thanks, I'm learning all the time. Not a programmer by profession, just a hobby. I retired a few yearsago and working on this stops me getting bored!