Our Print Directory
This is our print directory it gives us what we wanted in a Directory that other options have not been able to as of yet.
Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html, * {font-family: lato, sans-serif; line-height:1.4em; margin: 0;}
@page {margin: .5in 0;} /*-- PDF margin reset --*/
body {margin: 0;}
/*-- Baseline Fonts --*/
h1 {font-size: 14.5pt; font-weight: bold;} /*-- Report Title --*/
h2 {font-size: 13.5pt;} /*-- Household Name --*/
h3 {font-size: 10.5pt; font-weight:normal;} /*-- Household Address --*/
li {font-size: 9pt;} /*-- List Info, Person's Info --*/
li.name {font-size: 10.5pt;} /*-- Person's Name --*/
.btn {font-size: 9pt; font-weight: bold;} /*-- Print Button --*/
/*-- Baseline Spacing --*/
.header h1 {margin: 0 0 1em;} /*-- Report Title --*/
.main h2 {margin: 0 1em 0 0;} /*-- Household Name --*/
.main h3 {margin: 0;} /*-- Household Address --*/
li.name {margin-bottom: .25em;} /*-- Person's Name --*/
.household-item {margin-top: .5em; page-break-inside: avoid;}
.household-details:after {content: "";display: table;clear: both;}
.item-header {background: rgb(238, 238, 238); border: 1px solid #eeeeee; clear: both; padding:0.5em 1em;}
.item-header:after {content: "";display: table;clear: both;}
.item-header h2 {float:left;}
.item-header h3 {float:right;}
ul.list-info {list-style:none; margin: 0 0 1.5em 0; padding: 0;}
.adults {clear:both; padding: .5em 0 0 0; width: 100%;}
.children {border-top: 1px dashed rgb(200,200,200); clear:both; padding:.5em 0 0; width:100%;}
.entry {float:left; margin:0 0 .5em 0; padding-left: .15em; width: 225px; height: 90px; display: flex;}
.entry:after {content: "";display: table;clear: both;}
.children .entry {margin: 0 0 .5em 0; padding-left: .15em;}
.avatar {border: 3px solid rgb(221, 221, 221); float:left; margin-right: .5em; width: 3.6em; align-self: flex-start; border-radius: 50%;}
.entry ul {float:left; list-style:none; margin:0; padding:0;}
li.email {overflow-wrap: break-word; width: 170px; word-wrap: break-word;} /*-- allows long emails to break into multiple lines --*/
/*----- Font size equivalents for screen. This provides a more accurate preview of print sizes on a monitor ----*/
@media screen {
h1 {font-size: 20px; font-weight: bold; margin-top:0;}
h2 {font-size: 18px;}
h3 {font-size: 14px; font-weight:normal;}
h4 {font-size: 14px font-weight: bold;}
li {font-size: 12px;}
li.name {font-size: 14px; font-weight: bold; margin-bottom: 4px;}
.btn {font-size: 12px;}
/*----- The wrapper class controls the preview frame in the HTML generated report. ----*/
/*----- Please note that PDFs are generated in portrait orientation. To print in landscape, generate the report in HTML and print from your browser -----*/
/*----- Portrait view = max-width: 740px; Landscape view = max-width: 1040px ----*/
.wrapper {padding: 1em; border: 1px solid rgb(204,204,204); margin:1.5em auto; max-width:740px;}
.alert {background-color: #eff4fd; color: #8a6d3b; display: flex; flex-direction: row-reverse; list-style: none; margin-bottom: 1.25em; margin-top: 0; padding: 1em; text-align:right;}
.alert li {margin-left: 32px;}
.alert a.btn {background: #5282e5; border-radius: 3px; color: #fff; padding: 0.7em; text-decoration: none;}
.alert a.btn:hover {background: #6283c1;}
}
@media print {
.no-print {display: none;} /*----- Apply this class to any element you do not want on the print view ----*/
body {margin: .15in;} /*----- Adjust this to change the page margins for printing ----*/
.entry {width: 258px;}
li.email {width: 184px;}
}
</style>
</head>
<body>
<!------ print to PDF bar ---->
<div class="no-print">
<ul class="alert" role="alert">
<li>
<a href="https://people.planningcenteronline.com/reports/{{ report.id }}.pdf?list_id={{list.id}}" class="btn">Print to PDF</a>
</li>
</ul>
</div>
<!----- END print to PDF bar ----->
<div class="wrapper">
<div class="main">
{% assign sorted_households = households | sort_natural: 'name' %}
{% for household in sorted_households %}
<div class="household-item">
<div class="item-header">
<h2>{{ household.name }}</h2>
{% if household.primary_address.postal_address.size > 0 %}
<h3>{{ household.primary_address.postal_address }}</h3>
{% endif %}
</div>
<div class="household-details">
{% if household.active_adults.size > 0 %}
<div class="adults">
<!--- List Primary Contact First -->
{% for adult in household.active_adults %}
{% if adult.id == household.primary_contact.id %}
<div class="entry">
<img class="avatar" src="{{ adult.photo_url}}">
<ul>
<li class="name">
{% if adult.name_suffix != "" %}
{{ adult.first_name | append: "," }}
{% else %}
{{ adult.first_name }}
{% endif %}
{% if adult.last_name != household.primary_contact.last_name %}{{ adult.last_name }}{% endif %}
{{ adult.name_suffix }}
</li>
<li>{{ adult.primary_phone_number }}</li>
<li class="email">{{ adult.primary_email }}</li>
<li>{% if adult.birthdate.date|strip|size != 0 %}
{{ adult.birthdate | date: "%B %d" | prepend: "Birthday: " }}
{% endif %}
</li>
<li>{% if adult.anniversary|strip|size != 0 %}
{{ adult.anniversary | date: "%B %d" | prepend: "Anniversary: " }}
{% endif %}
</li>
</ul>
</div>
{% endif %}
{% endfor %}
<!-- End Listing the primary contact -->
<!-- List all adults with the exception of the primary -->
{% for adult in household.active_adults %}
{% unless adult.id == household.primary_contact.id %}
<div class="entry">
<img class="avatar" src="{{ adult.photo_url}}">
<ul>
<li class="name">
{% if adult.name_suffix != "" %}
{{ adult.first_name | append: "," }}
{% else %}
{{ adult.first_name }}
{% endif %}
{% if adult.last_name != household.primary_contact.last_name %}{{ adult.last_name }}{% endif %}
{{ adult.name_suffix }}
</li>
<li>{{ adult.primary_phone_number }}</li>
<li class="email">{{ adult.primary_email }}</li>
<li>{% if adult.birthdate.date|strip|size != 0 %}
{{ adult.birthdate | date: "%B %d" | prepend: "Birthday: " }}
{% endif %}
</li>
<li>{% if adult.anniversary|strip|size != 0 %}
{{ adult.anniversary | date: "%B %d" | prepend: "Anniversary: " }}
{% endif %}
</li>
</ul>
</div>
{% endunless %}
{% endfor %}
<!-- End Listing all adults with the exception of the primary -->
</div>
{% endif %}
{% if household.active_children.size > 0 %}
<div class="children">
{% for child in household.active_children %}
<div class="entry">
<img class="avatar" src="{{ child.photo_url}}">
<ul>
<li class="name">
{% if child.name_suffix != "" %}
{{ child.first_name | append: "," }}
{% else %}
{{ child.first_name }}
{% endif %}
{% if child.last_name != household.primary_contact.last_name %}{{ child.last_name }}{% endif %}
{{ child.name_suffix }}
</li>
<li>{{ child.primary_phone_number }}</li>
<li class="email">{{ child.primary_email }}</li>
<li>{{ child.age }} {{ child.grade_name }}</li>
<li>{% if child.birthdate.date|strip|size != 0 %}{{ child.birthdate | date: "%B %d" | prepend: "Birthday: " }}{% endif %}</li>
</ul>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>