From eb12dc7ab009798e4648e71b5163ca18e07ca76f Mon Sep 17 00:00:00 2001
From: Chuck Scott <cscott@gaslightmedia.com>
Date: Tue, 30 Aug 2016 16:18:31 -0400
Subject: [PATCH] Modify appearance and descriptive text to improve useability.

---
 views/admin/events/edit.html         |   1 -
 views/admin/events/editSchedule.html | 111 ++++++++++++++++-----------
 2 files changed, 66 insertions(+), 46 deletions(-)

diff --git a/views/admin/events/edit.html b/views/admin/events/edit.html
index ee39850..9f665db 100644
--- a/views/admin/events/edit.html
+++ b/views/admin/events/edit.html
@@ -595,7 +595,6 @@
                     $('#recurCalendarDialog_' + recurID).attr('title', 'Select Dates for ' + recurName);
     
                     $('#recurCalendarDialog_' + recurID).dialog({
-                        position: { my: 'right bottom-15', at: 'left top', of: '#recurSpecDates_' + recurID},
                         minWidth: 600
                     });
                     // Color to change calendar cell to (in rgb so it compares to our test below)
diff --git a/views/admin/events/editSchedule.html b/views/admin/events/editSchedule.html
index 17a3b27..6b1fa5a 100644
--- a/views/admin/events/editSchedule.html
+++ b/views/admin/events/editSchedule.html
@@ -26,7 +26,7 @@
                                     <input id="recurSchedName_{$r.id}" data-id="{$r.id}" type="text" name="Recur{$r.id}_name" value="{$r.name}" class="glm-form-text-input-small recurrence-input">
                                 </td>
                             </tr>
-<!--                            <tr><th colspan="2">First occurrence for this schedule</th></tr>  -->
+                            <tr><td colspan="2"><h2>Time Of Day For Event</h2></td></tr>
                             <tr>
                                 <th>All Day Event:</th>
                                 <td>
@@ -44,43 +44,45 @@
                                 <th {if $newRecurrence.fieldRequired.end_time}class="glm-required"{/if}>End Time:</th>
                                 <td><input data-id="{$r.id}" type="text" name="Recur{$r.id}_end_time" value="{trim($r.end_time.time)}" class="glm-form-text-input-veryshort glm-time-input recurrence-input"></td>
                             </tr>
-                            <tr><td colspan="2">&nbsp;</td></tr>
+                            <tr><td colspan="2"><h2>Dates Over Which Event Occurs</h2></td></tr>
                             <tr>
-                                <th {if $newRecurrence.fieldRequired.from_date}class="glm-required"{/if}>Start Date:</th>
+                                <th {if $newRecurrence.fieldRequired.from_date}class="glm-required"{/if}>First Date:</th>
                                 <td>
                                     <input data-id="{$r.id}" type="text" name="Recur{$r.id}_from_date" value="{$r.from_date.date}" class="glm-form-text-input-small glm-date-input recurrence-input" placeholder="Click to Select Date/Time">
                                 </td>
                             </tr>
                             <tr>
-                                <th {if $newRecurrence.fieldRequired.to_date}class="glm-required"{/if}>End Date:</th>
+                                <th {if $newRecurrence.fieldRequired.to_date}class="glm-required"{/if}>Last Date:</th>
                                 <td>
                                     <input data-id="{$r.id}" type="text" name="Recur{$r.id}_to_date" value="{$r.to_date.date}" class="glm-form-text-input-small glm-date-input recurrence-input" placeholder="Click to Select Date/Time">
                                 </td>
                             </tr>
+                            <tr><td colspan="2"><h2>Dates On Which Event Occurs</h2></td></tr>
                             <tr>
-                                <th>Recurring Event:</th>
+                                <th>Not every day?</th>
                                 <td width="90%">
                                     <input id="recurringEvent_{$r.id}" data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_recurring" class="recurring-checkbox recurrence-input" {if $r.recurring.value} checked{/if}>
-                                    Setup a detailed schedule.<br>Leave this un-checked for events that occur<br>every day from Start Date to End Date.
+                                    Setup a detailed schedule.
                                 </td>
                             </tr>
+                            <tr><td colspan="2">Leave this un-checked for events that occur every day from Start Date through End Date.</td></tr>
                         </table>
                     </td>
                     <td>
                         <table width="100%">
-
                             <tr>
-                                <th></th>
+                                <th colspan="2"></th>
                                 <th>
                                     <a id="deleteRecurrence_{$r.id}" data-id="{$r.id}" class="button button-secondary glm-button glm-right delete-recurrence recurring-checkbox">Delete this Event Schedule</a>
                                 </th>
                             </tr>
                             <tbody id="recurringExclude_{$r.id}"{if !$r.recurring.value} class="glm-hidden"{/if}>
-                                <tr><td colspan="2"><h2 style="text-align: center;">Recurring Schedule for Event</h2></td></tr>
-                                <tr><td colspan="2">Use the fields below to establish a recurring monthly, weekly, or daily schedule for your event. If any event dates don't fit this recurring schedule, use the "Add Specific Dates..." section below.</td></tr>
-                                <tr><td colspan="2">&nbsp;</td></tr>
+                                <tr><td colspan="3"><h2 style="text-align: center;">Recurring Schedule for Event</h2></td></tr>
+                                <tr><td colspan="3">Use the fields below to establish a recurring monthly, weekly, or daily schedule on which your event occurs from "First Date" through "Last Date" on left. If any event dates don't fit this recurring schedule, use the "Add Specific Dates..." section below.</td></tr>
+                                <tr><td colspan="3">&nbsp;</td></tr>
                                 <tr>
                                     <th>Months</th>
+                                    <td>&nbsp;&nbsp;<div data-id="monthOfYearTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="monthOfYearTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                     <td>
                                         <table id="monthOfYearTable_{$r.id}">
                                             <tr>
@@ -90,46 +92,47 @@
                             {/if}
                                                 <td style="white-space: nowrap;"><input data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_month_of_year[{$v.value}]" value="{$v.value}" class="recurrence-input"{if $v.default} checked{/if}> {$v.name}&nbsp;&nbsp;</td>
                         {/foreach}
-                                                <td>&nbsp;&nbsp;<div data-id="monthOfYearTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="monthOfYearTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                             </tr>
                                         </table>
                                     </td>
                                 </tr>
-                                <tr><td colspan="2">&nbsp;</td></tr>
+                                <tr><td colspan="3">&nbsp;</td></tr>
                                 <tr>
                                     <th>Days of month:</th>
+                                    <td>&nbsp;</td>
                                     <td>
                                         <input id="specificDaysOfMonth_{$r.id}" data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_by_day_of_month" class="days-of-month-checkbox recurrence-input" {if $r.by_day_of_month.value} checked{/if}> Check to select specific days of the month.
                                     </td>
                                 </tr>
                                 <tr class="not-by-day-of-month-{$r.id}{if $r.by_day_of_month.value} glm-hidden{/if}">
                                     <th>Week of the Month</th>
+                                    <td>&nbsp;&nbsp;<div data-id="weekOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="weekOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                     <td>
                                         <table id="weekOfMonthTable_{$r.id}">
                                             <tr>
                         {foreach $r.week_of_month.bitmap as $v}
                                                 <td style="white-space: nowrap;"><input data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_week_of_month[{$v.value}]" value="{$v.value}" class="recurrence-input"{if $v.default} checked{/if}> {$v.name}&nbsp;&nbsp;</td>
                         {/foreach}
-                                                <td>&nbsp;&nbsp;<div data-id="weekOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="weekOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                             </tr>
                                         </table>
                                     </td>
                                 </tr>
                                 <tr class="not-by-day-of-month-{$r.id}{if $r.by_day_of_month.value} glm-hidden{/if}">
                                     <th>Day of the Week</th>
+                                    <td>&nbsp;&nbsp;<div data-id="dayOfWeekTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfWeekTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                     <td>
                                         <table id="dayOfWeekTable_{$r.id}">
                                             <tr>
                         {foreach $r.day_of_week.bitmap as $v}
                                                 <td style="white-space: nowrap;"><input data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_day_of_week[{$v.value}]" value="{$v.value}" class="recurrence-input"{if $v.default} checked{/if}> {$v.name}</td>
                         {/foreach}
-                                                <td>&nbsp;&nbsp;<div data-id="dayOfWeekTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfWeekTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                             </tr>
                                         </table>
                                     </td>
                                 </tr>
                                 <tr class="by-day-of-month-{$r.id}{if !$r.by_day_of_month.value} glm-hidden{/if}">
                                     <th>Day of the Month</th>
+                                    <td><div data-id="dayOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                     <td>
                                         <table  id="dayOfMonthTable_{$r.id}" width="100%" class="glm-calendar">
                                             <tr>
@@ -144,21 +147,22 @@
                                                 <td colspan="3" style="text-align: center;">
                                                     <input data-id="{$r.id}" type="checkbox" name="Recur{$r.id}_last_day_of_month" class="recurrence-input"{if $r.last_day_of_month.value} checked{/if}> Last day of the month
                                                 </td>
-                                                <td><div data-id="dayOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfMonthTable_{$r.id}" data-recur-id="{$r.id}" class="button glm-button-small glm-set-none">None</div></td>
                                             </tr>
                                         </table>
                                     </td>
                                 </tr>
-                                <tr><td colspan="2">&nbsp;</td></tr>
-                                <tr><td colspan="2"><hr width="50%"></td></tr>
-                                <tr><td colspan="2"><h2 style="text-align: center;">Add Specific Dates that Don't Fit Schedule Above</h2></td></tr>
-                                <tr><td colspan="2">Use this section to enter specific additional dates that don't fit into a regular monthly, weekly or daily schedule above. 
+                                <tr><td colspan="3">&nbsp;</td></tr>
+                                <tr><td colspan="3"><hr width="50%"></td></tr>
+                                <tr><td colspan="3"><h2 style="text-align: center;">Add Specific Dates that Don't Fit Schedule Above</h2></td></tr>
+                                <tr><td colspan="3">Use this section to enter specific additional dates that don't fit into a regular monthly, weekly or daily schedule above. 
                                     If all your dates don't fit a recurring schedule above, you may click "None" for all of the options above and select all specific dates for your event here.</td></tr>
-                                <tr><td colspan="2">&nbsp;</td></tr>
+                                <tr><td colspan="3">&nbsp;</td></tr>
                                 <tr>
-                                    <th>Select with Calendar</th>
+                                    <th id="locateTarget_{$r.id}">Select with Calendar</th>
                                     <td>
                                         <div data-id="{$r.id}" class="button glm-button-small glm-set-none recur-calendar">Custom Dates</div>
+                                    </td>
+                                    <td>
                                         <div id="recurCalendarDialog_{$r.id}" class="glm-dialog-box" title="">
                                             <h4>Click on Dates to select/remove those dates for this schedule.</h4>
                                             <div id="recurCalendar_{$r.id}"></div>
@@ -168,7 +172,11 @@
                                             </p>
                                         </div>
                                         Use to add/delete specific dates to the schedule. Click dates below to delete.
-                                        <p>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>&nbsp;</td>
+                                    <td colspan="2">
                                             <span id="recurSpecDates_{$r.id}">
                         {if $r.specific_dates}
                           {$ncei = 1000}
@@ -220,6 +228,7 @@
                     <th class="glm-notice">New Schedule</th>
                     <th>&nbsp</th>
                 </tr>
+                <tr><td colspan="2"><h2>Time Of Day For Event</h2></td></tr>
                 <tr>
                     <th>All Day Event:</th>
                     <td>
@@ -239,42 +248,45 @@
                         <input data-id="{ newRecurID }" type="text" name="{ newRecurID }_end_time" value="{$newRecurrence.fieldData.end_time.time}" class="glm-form-text-input-veryshort glm-time-input recurrence-input">
                     </td>
                 </tr>
-                <tr><td colspan="2">&nbsp;</td></tr>
+                <tr><td colspan="2"><h2>Dates Over Which Event Occurs</h2></td></tr>
                 <tr>
-                    <th>Start Date:</th>
+                    <th>First Date:</th>
                     <td>
                         <input type="text" name="{ newRecurID }_from_date" value="{$newRecurrence.fieldData.from_date.date}" class="glm-form-text-input-small glm-date-input" placeholder="Click to Select Date/Time">
                     </td>
                 </tr>
                 <tr>
-                    <th>End Date:</th>
+                    <th>Last Date:</th>
                     <td>
                         <input type="text" name="{ newRecurID }_to_date" value="{$newRecurrence.fieldData.to_date.date}" class="glm-form-text-input-small glm-date-input" placeholder="Click to Select Date/Time">
                     </td>
                 </tr>
+                <tr><td colspan="2"><h2>Dates On Which Event Occurs</h2></td></tr>
                 <tr>
-                    <th>Recurring Event:</th>
+                    <th>Not every day?</th>
                     <td width="90%" style="white-space: nowrap;">
                         <input id="recurringEvent_{ newRecurID }" data-id="{ newRecurID }" type="checkbox" name="{ newRecurID }_recurring" class="recurring-checkbox recurrence-input">
-                        Setup a detailed schedule.<br>Leave this un-checked for events that occur<br>every day from Start Date to End Date.
+                        Setup a detailed schedule.
                     </td>
                 </tr>
+                <tr><td colspan="2">Leave this un-checked for events that occur every day from Start Date through End Date.</td></tr>
             </table>
           </td>
           <td style="width: 80%">
             <table width="100%" style="margin-left: 2em;">
                 <tr>
-                    <th></th>
+                    <th colspan="2"></th>
                     <th>
                         <a id="deleteRecurrence_{ newRecurID }" data-id="{ newRecurID }" class="button button-secondary glm-button glm-right delete-recurrence">Delete this Event Schedule</a>
                     </th>
                 </tr>
                 <tbody id="recurringExclude_{ newRecurID }" class="glm-hidden">
-                    <tr><td colspan="2"><h2 style="text-align: center;">Recurring Schedule for Event</h2></td></tr>
-                    <tr><td colspan="2">Use the fields below to establish a recurring monthly, weekly, or daily schedule for your event. If any event dates don't fit this recurring schedule, use the "Add Specific Dates..." section below.</td></tr>
-                    <tr><td colspan="2">&nbsp;</td></tr>
+                    <tr><td colspan="3"><h2 style="text-align: center;">Recurring Schedule for Event</h2></td></tr>
+                    <tr><td colspan="3">Use the fields below to establish a recurring monthly, weekly, or daily schedule on which your event occurs from "First Date" through "Last Date" on left. If any event dates don't fit this recurring schedule, use the "Add Specific Dates..." section below.</td></tr>
+                    <tr><td colspan="3">&nbsp;</td></tr>
                     <tr>
                         <th>Months</th>
+                        <td>&nbsp;&nbsp;<div data-id="monthOfYearTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="monthOfYearTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                         <td>
                             <table id="monthOfYearTable_{ newRecurID }">
                                 <tr>
@@ -283,47 +295,48 @@
                                 </tr><tr>
                 {/if}
                                     <td style="white-space: nowrap;"><input type="checkbox" name="{ newRecurID }_month_of_year[{$v.value}]" value="{$v.value}"{if $v.default} checked{/if}> {$v.name}&nbsp;&nbsp;</td>
-            {/foreach}
-                                    <td>&nbsp;&nbsp;<div data-id="monthOfYearTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="monthOfYearTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
+            {/foreach}              
                                 </tr>
                             </table>
                         </td>
                     </tr>
-                    <tr><td colspan="2">&nbsp;</td></tr>
+                    <tr><td colspan="3">&nbsp;</td></tr>
                     <tr>
                         <th>Days of month:</th>
+                        <td>&nbsp;</td>
                         <td>
                             <input id="specificDaysOfMonth_{ newRecurID }" data-id="{ newRecurID }" type="checkbox" name="{ newRecurID }_by_day_of_month" class="days-of-month-checkbox"> Check to select specific days of the month.
                         </td>
                     </tr>
                     <tr class="not-by-day-of-month-{ newRecurID }">
                         <th>Week of the Month</th>
+                        <td>&nbsp;&nbsp;<div data-id="weekOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="weekOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                         <td>
                             <table id="weekOfMonthTable_{ newRecurID }">
                                 <tr>
             {foreach $newRecurrence.fieldData.week_of_month.bitmap as $v}
                                     <td style="white-space: nowrap;"><input type="checkbox" name="{ newRecurID }_week_of_month[{$v.value}]" value="{$v.value}"{if $v.default} checked{/if}> {$v.name}&nbsp;&nbsp;</td>
-            {/foreach}
-                                    <td>&nbsp;&nbsp;<div data-id="weekOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="weekOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
+            {/foreach}              
                                 </tr>
                             </table>
                         </td>
                     </tr>
                     <tr class="not-by-day-of-month-{ newRecurID }">
                         <th>Day of the Week</th>
+                        <td>&nbsp;&nbsp;<div data-id="dayOfWeekTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfWeekTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                         <td>
                             <table id="dayOfWeekTable_{ newRecurID }">
                                 <tr>
             {foreach $newRecurrence.fieldData.day_of_week.bitmap as $v}
                                     <td style="white-space: nowrap;"><input type="checkbox" name="{ newRecurID }_day_of_week[{$v.value}]" value="{$v.value}"{if $v.default} checked{/if}> {$v.name}</td>
             {/foreach}
-                                    <td>&nbsp;&nbsp;<div data-id="dayOfWeekTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfWeekTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                                 </tr>
                             </table>
                         </td>
                     </tr>
                     <tr class="by-day-of-month-{ newRecurID } glm-hidden">
                         <th>Day of the Month</th>
+                        <td><div data-id="dayOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                         <td>
                             <table  id="dayOfMonthTable_{ newRecurID }" width="100%" class="glm-calendar">
                                 <tr>
@@ -338,21 +351,24 @@
                                     <td colspan="3" style="text-align: center;">
                                         <input type="checkbox" name="{ newRecurID }_last_day_of_month"> Last day of the month
                                     </td>
-                                    <td><div data-id="dayOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-all">All</div><div data-id="dayOfMonthTable_{ newRecurID }" data-recur-id="{ newRecurID }" class="button glm-button-small glm-set-none">None</div></td>
                                 </tr>
                             </table>
                         </td>
                     </tr>
-                    <tr><td colspan="2">&nbsp;</td></tr>
-                    <tr><td colspan="2"><hr width="50%"></td></tr>
-                    <tr><td colspan="2"><h2 style="text-align: center;">Add Specific Dates that Don't Fit Schedule Above</h2></td></tr>
-                    <tr><td colspan="2">Use this section to enter specific additional dates that don't fit into a regular monthly, weekly or daily schedule above. 
-                        If all your dates don't fit a recurring schedule above, you may click "None" for all of the options above and select all specific dates for your event here.</td></tr>
+                    <tr><td colspan="3">&nbsp;</td></tr>
+                    <tr><td colspan="3"><hr width="50%"></td></tr>
+                    <tr><td colspan="3"><h2 style="text-align: center;">Add Specific Dates that Don't Fit Schedule Above</h2></td></tr>
+                    <tr><td colspan="3">Use this section to enter specific additional dates that don't fit into a regular monthly, weekly or daily schedule above. 
+                        If all your dates don't fit a recurring schedule above, you may click "None" for all of the options above and select all specific dates for your event here.
+                        You may set dates here that are not from "First date" to "Last Date".</td></tr>
                     <tr><td colspan="2">&nbsp;</td></tr>
                     <tr>
                         <th>Select with Calendar</th>
                         <td>
-                            <div data-id="{ newRecurID }" class="button glm-button-small glm-set-none recur-calendar">Show Calendar</div>
+                            <div data-id="{ newRecurID }" class="button glm-button-small glm-set-none recur-calendar">Custom Dates</div>
+                        </td>
+                        <td>
+                            
                             <div id="recurCalendarDialog_{ newRecurID }" class="glm-dialog-box" title="">
                                 <p>Click on Dates to select/remove those dates for this schedule.</p>
                                 <div id="recurCalendar_{ newRecurID }"></div>
@@ -362,6 +378,11 @@
                                 </p>
                             </div>
                             Use to add/delete specific dates to the schedule. Click dates below to delete.
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>&nbsp;</td>
+                        <td colspan="2">
                             <span id="recurSpecDates_{ newRecurID }">
                             </span>
                         </td>
-- 
2.17.1