Our Print Directory
Imports: 3

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

Report 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>