Minimalist Service Report

Minimalist

Preview

Report Preview


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--
QUICK CUSTOMIZATION:
{% assign print_description = true %}
-->
<html>
  <head>
    <title>{{ plan.ministry.name }}:: {{ plan.dates }}</title>
    <style>
      /* Base */
      body { padding:0; margin:5px; color:#313336; font:13px/1.5 Verdana, Helvetica, Arial, sans-serif; }

      /* Table skeleton */
      table#plan { width:100%; border-collapse:collapse; margin-top:0; margin-bottom:15px; }
      table#plan thead { display:table-header-group; }
      table#plan th {
        border-left:1px solid #D7DBE4; border-right:1px solid #D7DBE4;
        color:#ADB3C0; font-weight:bold; padding:4px 7px 2px; vertical-align:middle;
      }
      /* Generic cells */
      table#plan td { text-align:left; font-size:1em; }
      table#plan tbody td { border:0; padding:15px; vertical-align:middle; }

      /* Time / length columns */
      .time { width:50px; text-align:left; vertical-align:middle; }
      .length { width:55px; text-align:left; vertical-align:middle; font-size:.9em; }

      /* Header row */
      table#plan .header {
        text-align:center; color:black; font-weight:bold; padding:4px 7px;
        font-size:1.0em; background:#b0b2b3;
      }

      /* Content cell */
      .element { text-align:left; font-size:0.9em; vertical-align:middle; padding:5px; }

      /* Song row shading */
      .song { background:#f7f7f7; }

      /* Titles */
      .song_title { font-style:italic; font-weight:bold; }
      .item_title { font-style:normal; }

      /* Description under title for songs */
      .song-description { font-style:normal; font-size:0.9em; color:#555; margin-top:2px; }

      /* Description for items on right */
      .description-inline { font-style:normal; font-size:0.9em; color:#7F7F7F; white-space:nowrap; }

      /* Key badge */
      .key {
        font-weight:bold; padding:2px 5px; margin-left:6px;
        background-color:#e6e6e6; border:1px solid #C0C0C0; display:inline-block; border-radius:3px;
      }

      /* Layout */
      .song-title-line { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
      .song-title-block { display:flex; flex-direction:column; align-items:flex-start; }
      .title-and-key { display:flex; align-items:baseline; gap:6px; }

      /* Page header */
      H1 { font-size:28px; font-weight:normal; margin:0; padding:0; }
      H2 { font-size:20px; font-weight:normal; }
      H3 { font-size:18px; margin-bottom:15px; }
      H4 { font-size:12px; font-weight:normal; margin-top:10px; margin-bottom:15px; }
      PRE { margin:0; padding:0; white-space:pre-wrap; font-size:.9em; }

      #header { padding:15px 0; color:black; line-height:.8em; margin: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>

    {% if hide_flow != true %}
      <table id="plan">
        <tbody>
          {% for item in plan.items %}
            {% case item.item_type %}

              {% when 'Header' %}
                <tr>
                  <td colspan="2" class="header">{{ item.title }}</td>
                </tr>

              {% else %}
                <tr class="{% if item.is_preservice or item.is_postservice %}preservice{% endif %}">
                  <td class="time{% if item.song %} song{% endif %}">{{ item.length }}</td>

                  <td class="item element{% if item.song %} song{% endif %}">
                    <div class="song-title-line">
                      <!-- LEFT: Title + Key -->
                      <span class="song-title-block">
                        <span class="title-and-key">
                          <span class="{% if item.song %}song_title{% else %}item_title{% endif %}">{{ item.title }}</span>
                          {% if item.arrangement.music_key %}
                            <span class="key">{{ item.arrangement.music_key }}</span>
                          {% endif %}
                        </span>

                        <!-- Description replaces arrangement name here for songs -->
                        {% if item.song and item.description %}
                          <span class="song-description">{{ item.description }}</span>
                        {% endif %}
                      </span>

                      <!-- RIGHT: Description for non-song items -->
                      {% if print_description and item.description %}
                        {% unless item.song %}
                          <span class="description-inline">{{ item.description }}</span>
                        {% endunless %}
                      {% endif %}
                    </div>
                  </td>
                </tr>

            {% endcase %}
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </body>
</html>