Improve printing feature with CSS

johan12345 commented 8 years ago

Hey! If you ever wanted to contribute to an Open Source project, but didn't know how, you just found a perfect place to start. We try to write this issue as instructive as possible, but as we're humans we almost certainly forgot to write something important in here. If you want to try to tackle this issue and get stuck at any point, please do not hesitate and ask us, either here on GitHub or via email at info@opacapp.de. We'll be very happy to help!

We think this issue is very suitable to people who are just starting with Open Source or Android development in general and have never done it before. We'd like to ask people with wide experience in contributing to leave this issue to beginners. Thanks!

Solving this issue requires very little experience in Java/Android programming, but you should be familiar with HTML and CSS.

How to get started

First of all, we recommend that you install the app and play around with it so you know how it looks and feels. Next, you should use git to download this GitHub repository and open the folder opacclient/ from within the repository (not the repository itself) in Android Studio.

Because of a Bug in Android Studio, some configuration files in the .idea folder might be deleted after opening the project for the first time. Run git checkout -- opacclient/.idea/ in the repository to revert this.

Press the green "Play" button to run it on your device. If this works, you have a working development setup, yay! If it doesn't, feel free to ask us for help!

What this is about

When you start the app and set up a library account, you can search this library's catalog, view the search result list and click on the results to get detailed information about a single item, including things like where it is located in the library. Pull Request #440 (see also issue #431) added a printing feature to the app, which means that these details can be sent to a printer using the print button (or overflow menu item on narrow screens) on devices with Android >= 4.4. The print feature is based on an HTML page that is generated by the app.

The printing feature is not yet included in the current version of the app on the Play Store, so you have to install the app from Android Studio if you want to try it.

This issue is about making the printed output a little nicer by applying some CSS to the generated HTML. We have listed some suggestions below, but if you have more ideas, feel free to ask us here and implement them afterwards.

How to do this

We recommend forking this repository and creating a special git branch for this issue before you start. This will make it easier for you to submit a pull request later. If you've never done this before, there are a lot of good guides out there and you can always ask us questions.

The file you need to look at is print_template.mustache. It is basically an HTML file that is filled with data using the Mustache templating language. You can add a <style> tag to the <head> section for your CSS. Below are some suggestions what could be done to improve the printed layout:

Text in tables should be aligned to the top of the cell (instead of centered). Text in the first column (<th>) should additionally be aligned to the right edge (instead of centered).
Cell padding could be increased
Data for copies and volumes is shown in multiple tables, one for each copy/volume. These tables should
- have a vertical margin between them so that they are distinguishable from each other
- be shown in two-column layouts (two tables next to each other). You can look at CSS3 multi-column layouts for this. Don't forget the -webkit- prefixes that are needed to support older versions of Chrome. We have not tried if it works like this with tables in the columns, so please contact us if you run into problems.
Below all the data, a text "printed from Web Opac App (opacapp.net)" should appear. You can make this slightly smaller than the rest of the text and change its color to gray.

As mentioned above, we are also open to additional suggestions about what could be improved.

We're excited to see your pull request!

If you get stuck, don't hestitate to ask. We bound ourselves to a Code of Conduct and we're committed to providing a welcoming experience and giving constructive, friendly and useful feedback on your contributions.

NPuhlmann commented 8 years ago

hey @johan12345, what is meant by "Data for copies and volumes is shown in multiple tables" ? How do I get this view? Whenever I search something there is just one table in the print view. I already added the suggestions and some other small things for example every odd column is gray so the table will be easier to read.

johan12345 commented 8 years ago

what is meant by "Data for copies and volumes is shown in multiple tables" ? How do I get this view?

In some libraries there is no information about copies and volumes, so there is only one table with the details.

When you select Kiel University Library, search for "Gerthsen" and select the 7th result ("Physik", the one from 2006) you will see a result with 5 copies, which is displayed using 5 separate tables under "Exemplare"
When you select Mannheim City Library, search for "Duden" and select "Gesamtwerk" under "Mediengruppe", you will find some results with multiple volumes. These are indeed not shown as a table, but as a list. I mixed that up when writing the issue. So what I wrote about those tables only applies to the copies, not to the volumes.

I already added the suggestions and some other small things for example every odd column is gray so the table will be easier to read.

Very nice :)

opacapp / opacclient