Color With Series Art & Detail
Imports: 1

This is the Color Plan report with Series art and Detail added.

Preview

Report Preview


<!--
QUICK CUSTOMIZATION:

  {% assign print_item_times = false %}
	{%assign print_item_details = true %)
  {% assign length_before_after_none = "after" %}

	ITEM NOTES  
		TO ONLY PRINT SPECIFIC ITEM NOTE CATEGORIES SET THIS TO false
  		{% assign all_item_notes = false %}

		SPECIFIC CATEGORY NAMES OF ITEM NOTES TO PRINT (make sure all_item_notes above is false)
		{% array my_notes = "Person", "General" %}

		DON'T TOUCH THIS CODE
        {% if all_item_notes == true %}
       		 {% assign selected_item_notes = plan.ministry.plan_item_note_categories %}
        {% else %}
       		 {% assign selected_item_notes = my_notes %}
        {% endif %}

CATEGORY NAME OF PEOPLE TO PRINT AT BOTTOM OF REPORT
{% assign plan_person_category = "Band" %}

-->
<html>

    <head>
        <title>{{ plan.ministry.name }}:: {{ plan.dates }}</title>
        <style>
            
            body { padding:0; margin:5px; color: #313336;
                   font: 13px/1.5 "Myriad Pro", "Myriad", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
                 }
            table#plan { width: 100%; border-collapse: collapse; margin-top:0px; margin-bottom: 15px; }
            table#plan th { 
                            border-left: 1px solid #D7DBE4; border-right: 1px solid #D7DBE4;
                            color: #ADB3C0;
                            font-weight: bold;
                            padding: 4px 7px 2px 7px;
                            vertical-align: middle;
                          }
            table#plan td { text-align: center; font-size: 1em  }
            table#plan tbody, #plan thead { border: 0px solid #D7DBE4; }
	    table#plan thead { display: table-header-group; }
            table#plan tbody td { border: 1px solid #D7DBE4; padding: 2px; vertical-align: middle; }
            table#plan .preservice { background-color: #f5f5f5; color: #7F7F7F; font-style: italic; }
            table#plan .time { width: 70px; text-align: center; vertical-align: middle; }
            table#plan .length { width: 55px; text-align: center; vertical-align: middle; font-size: .9em; }
            table#plan .note_column { width: ; text-align: center; vertical-align: middle; }
            table#plan .header { text-align: center;
                                 color: white;
                                 font-weight: normal;
                                 padding: 4px 7px;
                                 font-size: 0.9em;
                                 background: #4A6084;
                                }
            table#plan .note { text-align: center; font-size: .9em; vertical-align: middle;  }

            table#plan .element { text-align: left;
                                  font-size: 1em;
                                  vertical-align: middle;
                                  padding: 6px;
                      }
            table#plan .element .description { font-size: 0.8em; color: #7F7F7F; font-style: normal; }

            table#plan .song { 
                               background: #ECF0F6;
                               background: -moz-linear-gradient(top, #F4F7FA 0%, #ECF0F6 100%);
                               background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F4F7FA), color-stop(100%,#ECF0F6));
                               background: -webkit-linear-gradient(top, #F4F7FA 0%,#ECF0F6 100%);
                               background: -o-linear-gradient(top, #F4F7FA 0%,#ECF0F6 100%);
                               background: -ms-linear-gradient(top, #F4F7FA 0%,#ECF0F6 100%);
                               background: linear-gradient(top, #F4F7FA 0%,#ECF0F6 100%);
                              }
            table#plan .media { 
                               background: #F1F8E8;
                               background: -moz-linear-gradient(top, #F7FBF2 0%, #F1F8E8 100%);
                               background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F7FBF2), color-stop(100%, #F1F8E8));
                               background: -webkit-linear-gradient(top, #F7FBF2 0%,#F1F8E8 100%);
                               background: -o-linear-gradient(top, #F7FBF2 0%,#F1F8E8 100%);
                               background: -ms-linear-gradient(top, #F7FBF2 0%,#F1F8E8 100%);
                               background: linear-gradient(top, #F7FBF2 0%,#F1F8E8 100%);
                              }


            table#plan .footer { text-align: center;
                                 font-size: .9em; vertical-align: middle;
                                 padding: 0px; }
            
            table#header { width: 100%; border: none; padding: 0; border-collapse: collapse; }
            table#header td { padding: 2px; vertical-align: top; }

H1 {  font-size: 2.5em;
      font-weight: normal;
      text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9);
      }
H2 {  font-size: 2em;
      font-weight: normal;
      padding: 20px 35px;
      margin: 0;
      line-height: 1em;
      text-shadow: 0 1px 0 white;
      }
H3 {  
      font-size: 1.4em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
      }

PRE { margin: 0; padding: 0; white-space: pre-wrap; font-size: .9em; }

.person { margin-right: 15px; float: left; }
.position { font-weight: bold; }


#header {
          padding: 5px 20px;
          background: #364663;
          color: white;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
          border-bottom: 1px solid #444B57;
          border-left: 1px solid #4A5A72;
          border-right: 1px solid #4A5A72;
          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
          line-height: .8em;
          margin: 0;
          margin-bottom: 15px;
          }
#header img { float: right; height: 80px; margin-right: -15px; }
#titles { background: #F0F2F6;
          color: #3D4A60;
          border: 1px solid #D7DBE4;
          font-size: 2em;
          font-weight: normal;
          padding: 15px 20px;
          margin: 0;
          line-height: 1em;
          text-shadow: 0 1px 0 white;
          }
#titles img { border: 2px solid #C4C9D4;
              border-image: initial;
          }
#plan_title { font-style: normal;
              font-size: .65em;
              display: block;
              color: #6D7684;
              margin: 4px 0 0 0;
          }
        </style>
    </head>
<body>
{% comment %}<img style="float: left; margin-right: 15px; height: 50px;" src="{{ organization.logo_url }}" />{% endcomment %}

<div id="header">
  <h1>{{ plan.ministry.name }}</h1>
  <h3>{{ plan.dates }}</h3>
</div>

<div id="titles">
  <img style="float: left; margin-right: 15px; height: 50px;" src="{{ plan.series_artwork_url }}" />
  <div id="series_title">{{ plan.series_title }}</div>
  <div id="plan_title">{{ plan.plan_title }}</div>  
</div>

  <table id="plan">
	<thead>
		<tr>
          {% if print_item_times %}
			{% for time in plan.plan_times %}
          		<th class="time">{{ time.starts_at | date: '%m/%d<br/>%I:%M%p' | downcase }}</th>
          		<!-- {% increment colspan %} -->
			{% endfor %}
          {% endif %}

          {% if length_before_after_none == "before" %}
         	<th class="length">Length</th> <!-- {% increment colspan %} -->
          {% endif %}
			<th align="left">Element</th> <!-- {% increment colspan %} -->
          
          {%if print_item_details %}<pre class="description">{{ item.details }}</pre>{% endif %}

          
          	{% for my_note in selected_item_notes %}
              <th>
                  {% if all_item_notes == true %}
                      {{ my_note.name }}
                  {% else %}
                      {{ my_note }}
                  {% endif %}
              </th> <!-- {% increment colspan %} -->
			{% endfor %}
          
          {% if length_before_after_none == "after" %}
         	<th class="length">Length</th> <!-- {% increment colspan %} -->
          {% endif %}

		</tr>
	</thead>
    
	<tbody>
        {% for item in plan.items %}
            {% case item.item_type %}
            {% when 'Header' %}
				<tr>
                    <td colspan="{{ colspan }}" class="header">{{ item.title }}</td>
				</tr>
            {% else %}
      			{% assign item_class = ''%}
      			{% if item.is_preservice or item.is_postservice %}
      				{% assign item_class = 'preservice ' %}
				{% endif %}

				<tr class="{{ item_class }}">
                    {% if print_item_times %}
                      {% for time in plan.plan_times %}
                          <td class="time item {{item_class}}  {{ item.item_type }}">
                              {% for item_time in item.times %}
                                  {% if item_time.time_id == time.id %}
                                      {{ item_time.actual_time | date: '%I:%M%p' | downcase }}
                                  {% endif %}
                              {% endfor %}
                          </td>
                      {% endfor %}
                  	{% endif %}
                   
                  	{% if length_before_after_none == "before" %}
						<td class="item length {{item_class}} {{ item.item_type }}">{{ item.clean_length }}</td>
                  	{% endif %}
					<td class="item element {{item_class}} {{ item.item_type }}">
                        {{ item.title }}
                        <div class="description">{{ item.description }}</div>
					</td>
					{% for my_note in selected_item_notes %}
						<td class="item note note_column {{item_class}} {{ item.item_type }}">
						{% for note in item.notes %}
							{% if note.category_name == my_note.name or note.category_name == my_note %}
                     			{{ note.note }}
                     		{% endif %}
                     	{% endfor %}
                    	</td>
					{% endfor %}
                  
                    {% if length_before_after_none == "after" %}
						<td class="item length {{item_class}} {{ item.item_type }}">{{ item.clean_length }}</td>
                  	{% endif %}
   			   </tr>
            {% endcase %}

        {% endfor %}
	</tbody>
  </table>

			    {% for plan_person in plan.plan_people_not_declined %}
				{% if plan_person.person.name != null %}
				    {% if plan_person.category.name == plan_person_category %}
					<div class="person">
					  <span class="position">{{ plan_person.position }}: </span>{{ plan_person.person.name }}
					</div>
				    {% endif %}
				{% endif %}
                            {% endfor %}

</body>

</html>