Giter Club home page Giter Club logo

cloud-app-printing-multiple-slips-per-page's Introduction

Cloud-app-printing-multiple-slips-per-page

The app allows printing from Alma's Printout Queue, with few printouts on one page. It has 4 built-in templates: 2 columns, 3 columns, and 4 columns. It also has a template for 1 column which helps when the printouts are short and then additional printouts can fit into the page, one below the other. Actually, the same goes for the 2/3/4 columns templates: if there is enough space on the page for another row the row is added. Selecting the template is done in the Settings section.

If non of the built-in templates are suitable for your needs, you can create your own. Under Configuration (available for admin users) - you can create a custom template. Use the folder button to open a template as a starting point, provide a name and save. Technical details below.

To report a problem, please open an issue by clicking here.

How to create customized templates

The printouts are received from Alma as HTML snippets and placed into DIV elements, one after the other. Each div has the class "letter". Each row of "letters" is surrounded by an additional DIV, which has the class "row".

A template is actually the CSS that positions and styles those DIVs. Start your own templates by choosing one of the built-in templates, For example "Standard 2 per line format" showen below:

.row {
	display: grid;
	grid-template-columns: 49% 49%;
}
.letter {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 5px;
	word-break: break-word;
}
@media print {
	.row {
		break-inside: avoid;
	}
}

Class "row" defines how many letters will be in each row. In this example 'grid-template-columns: 49% 49%' means that there are 2 slips per row, each taking 49% of the width of the page. Please note that the app uses this line also for determining how many DIVs of class "row" to place in the DIV of class "letter".

In the "letter" class we can change the style of the individual printouts. We used here a light gray 1px border. If you like to make the border thicker you might need to change the grid's style to "48% 48%" since the border takes up space in the overall 100% of the page.

The last part (@media print) makes sure that when the printouts are actually printed (or Print-preview) the 2nd row will be placed on the same page as the 1st row, only if there is enough space for it there. If not, it is moved to the top of the 2nd page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.