Added "form-display" and "form-edit" sections to display summary data and switch...

Made pseudo-picklist scroll when small
Other layout improvement

diff --git a/views/adminServerStats.html b/views/adminServerStats.html
index 36a9358..8785780 100755 (executable)
--- a/views/adminServerStats.html
+++ b/views/adminServerStats.html
@@ -4,7 +4,7 @@
     /* Some styles are set in the print area to make them available in the print window */
     .pickContainer {
         margin-top: 1rem;
-        width: 1100px;
+        width: 1050px;
     }
     .pseudoPick {
         height: 150px;
@@ -28,7 +28,6 @@
     }
     .usage-section {
         font-weight: bold;
-        text-align: center;
         font-size: 1.4rem;
         clear: both;
         padding: 1rem;
@@ -55,6 +54,13 @@
     }
     .graph {
     }
+    .button {
+        white-space: pre-wrap !important; /* css-3 */    
+        white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
+        white-space: -pre-wrapv; /* Opera 4-6 */    
+        white-space: -o-pre-wrap !important; /* Opera 7 */    
+        word-wrap: break-word !important; /* Internet Explorer 5.5+ */
+    }
 
 </style>
 {if !$connected}
@@ -113,7 +119,8 @@
                                 <span class="sortBy">Storage:</span>
                                 <input type="radio" name="site_sort" value="storage" {if $site_sort == 'storage'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=storage&selected_site={$selectedSite}';">Maximum for Month&nbsp;&nbsp;
                                 <input type="radio" name="site_sort" value="disk_target_percent" {if $site_sort == 'disk_target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=disk_target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
-                                <div class="pickContainer">
+                                <div style="overflow-x: auto;">
+                                  <div class="pickContainer">
                                     <pre class="">                                                   ----------------- Traffic -------------   --------------- Storage --------------</pre>
                                     <pre class="pseudoPickTitles">Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target</pre>
                                     <div class="pseudoPick">
@@ -121,22 +128,21 @@
                                             <pre class="pseudoPickOption"></span>{if $site.name == $selectedSite}<a name="selectedSite"></a>{/if}<a href="{$thisUrl}?page={$thisPage}&selected_site={$site.name}&site_id={$site.id}&site_sort={$site_sort}" class="pseudoPickOption" {if $site.name == $selectedSite}onClick="return false;"{/if}><span{if $site.name == $selectedSite} style="background-color: LightGray;"{/if}>{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB     <span {if $site.target_percent > $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%</span>      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB      <span {if $site.disk_target_percent > $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%</span></span></a></pre>
                                         {/foreach}
                                     </div>
-                                    <p>Click on a site above to display settings and charts.</p>
-                                    <hr>
+                                  </div>
                                 </div>
-    
+                                <p>Click on a site above to display settings and charts.</p>
                                 {if $selectedSite}
-    
-                                    <div>
-                                        Send: 
-                                        <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary button-small">Send usage E-mail for site selected above</a>
-                                        &nbsp;&nbsp;
-                                        Review:
-                                        <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary button-small">Display usage E-mail for site selected above</a>
-                                        &nbsp;&nbsp;
-                                        <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&display_only=true" target="usageEmail" class="button button-secondary button-small">Display usage E-mail for all sites above threashold percentage</a>
+                                    <div class="grid-x grid-margin-x">
+                                        <div class="cell small-12 large-3 glm-f6-ui-nowrap">
+                                            <b>Send E-Mail:</b>
+                                            <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary button-small">Send for selected site</a>
+                                        </div>
+                                        <div class="cell small-12 large-9 glm-f6-ui-nowrap">
+                                            <b>Preview E-Mail:</b>
+                                            <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary button-small">Display for site selected site</a>
+                                            <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&display_only=true" target="usageEmail" class="button button-secondary button-small">Display for all sites above threashold</a>
+                                        </div>
                                     </div>
-    
                                 {/if}
                                 
                             {include file="ui/f6/form-end.html"}
@@ -166,76 +172,106 @@
                         'nowrap'            => true
                     ]}
                     {include file="ui/f6/grid-start.html"}     
-                    
-                        {* Section Start *}
+                                                    
                         {$ui = [
-                            'title'     => 'Settings for Selected Site'
-                        ]}
-                        {include file="ui/f6/section-start.html"}
-    
-                            {* target *}
-                            {$ui = [
-                                'field'         => 'target',
-                                'value'         => {$settings.target|string_format:"%.1f"},
-                                'label'         => 'Monthly Traffic Target',
-                                'required'      => true,
-                                'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                'id'                => 'SettingsForSelectedSite',
+                                'title'             => 'Current Settings for Selected Site Summary'
                             ]}
-                            {include file="ui/f6/text.html"}
-    
-                            {* disk_target *}
+                            {include file="ui/f6/form-display-start.html"}
+
+                            <div class="cell small-12 callout glm-f6-ui-section-start">
+                                <div class="grid-x grid-margin-x">
+                                    <div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Selected Site:</b></div>
+                                    <div class="cell small-12 large-9">{$selectedSite}</div>
+                                    <div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Monthly Traffic Target:</b></div>
+                                    <div class="cell small-12 large-9">{$settings.target|string_format:"%.1f"}</div>
+                                    <div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Disk Space Usage Target:</b></div>
+                                    <div class="cell small-12 large-9">{$settings.disk_target|string_format:"%.1f"}</div>
+                                    <div class="cell small-12 large-3 glm-f6-ui-nowrap"><b>Customer Contact:</b></div>
+                                    <div class="cell small-12 large-9">{if !empty($settings.cust_contact)}{$settings.cust_contact}{else}(not supplied){/if}</div>
+                                </div>
+                            </div>
+
+                        {include file="ui/f6/form-display-end.html"}
+                        
+                        {$ui = [
+                                'id'                => 'SettingsForSelectedSite',
+                                'title'             => 'Edit Settings for Selected Site Summary'
+                            ]}
+                            {include file="ui/f6/form-edit-start.html"}
+
+                
+                            {* Section Start *}
                             {$ui = [
-                                'field'         => 'disk_target',
-                                'value'         => {$settings.disk_target|string_format:"%.1f"},
-                                'label'         => 'Disk Space Used Target',
-                                'required'      => true,
-                                'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                'title'     => 'Settings for Selected Site'
                             ]}
-                            {include file="ui/f6/text.html"}
-    
-                            {* cust_contact *}
+                            {include file="ui/f6/section-start.html"}
+        
+                                {* target *}
+                                {$ui = [
+                                    'field'         => 'target',
+                                    'value'         => {$settings.target|string_format:"%.1f"},
+                                    'label'         => 'Monthly Traffic Target',
+                                    'required'      => true,
+                                    'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                ]}
+                                {include file="ui/f6/text.html"}
+        
+                                {* disk_target *}
+                                {$ui = [
+                                    'field'         => 'disk_target',
+                                    'value'         => {$settings.disk_target|string_format:"%.1f"},
+                                    'label'         => 'Disk Space Used Target',
+                                    'required'      => true,
+                                    'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                ]}
+                                {include file="ui/f6/text.html"}
+        
+                                {* cust_contact *}
+                                {$ui = [
+                                    'field'         => 'cust_contact',
+                                    'value'         => {$settings.cust_contact},
+                                    'label'         => 'Customer Contact E-Mail',
+                                    'required'      => false,
+                                    'helpText'      => 'Leave empty to prevent any E-mail from being sent for this site.'
+                                ]}
+                                {include file="ui/f6/text.html"}
+        
+                            {include file="ui/f6/section-end.html"}
+        
+                            {* Section Start *}
                             {$ui = [
-                                'field'         => 'cust_contact',
-                                'value'         => {$settings.cust_contact},
-                                'label'         => 'Customer Contact E-Mail',
-                                'required'      => false,
-                                'helpText'      => 'Leave empty to prevent any E-mail from being sent for this site.'
+                                'title'     => 'Global Settings'
                             ]}
-                            {include file="ui/f6/text.html"}
-    
-                        {include file="ui/f6/section-end.html"}
-    
-                        {* Section Start *}
-                        {$ui = [
-                            'title'     => 'Global Settings'
-                        ]}
-                        {include file="ui/f6/section-start.html"}
-    
-                            {* Reporting Threshold *}
+                            {include file="ui/f6/section-start.html"}
+        
+                                {* Reporting Threshold *}
+                                {$ui = [
+                                    'field'         => 'threshold',
+                                    'value'         => {$threshold|string_format:"%.0f"},
+                                    'label'         => 'Monthly Reporting Threshold %',
+                                    'required'      => true,
+                                    'min'           => 0,
+                                    'max'           => 200,
+                                    'width'         => 5,
+                                    'helpText'      => '
+                                                        Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.
+                                                        Set Reporting Threshold to -1% to block all automatic monthly reporting.
+                                                       '
+                                ]}
+                                {include file="ui/f6/number.html"}
+        
+                            {include file="ui/f6/section-end.html"}
+        
+                            {* Submit Button *}
                             {$ui = [
-                                'field'         => 'threshold',
-                                'value'         => {$threshold|string_format:"%.0f"},
-                                'label'         => 'Monthly Reporting Threshold %',
-                                'required'      => true,
-                                'min'           => 0,
-                                'max'           => 200,
-                                'width'         => 5,
-                                'helpText'      => '
-                                                    Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.
-                                                    Set Reporting Threshold to -1% to block all automatic monthly reporting.
-                                                   '
+                                'class'     => 'primary',
+                                'label'     => 'Update Site Settings',
+                                'submit'    => true
                             ]}
-                            {include file="ui/f6/number.html"}
-    
-                        {include file="ui/f6/section-end.html"}
-    
-                        {* Submit Button *}
-                        {$ui = [
-                            'class'     => 'primary',
-                            'label'     => 'Update Site Settings',
-                            'submit'    => true
-                        ]}
-                        {include file="ui/f6/submit.html"}
+                            {include file="ui/f6/submit.html"}
+
+                        {include file="ui/f6/form-edit-end.html"}
 
                     {include file="ui/f6/grid-end.html"}
 
@@ -250,7 +286,7 @@
         {/if} {* /is provider *}
 
         <!-- Server Data Usage Stats -->
-        <div style="width: 95%;" class="callout">
+        <div style="max-width: 1200px;" class="callout">
             <center>
                 <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
                 &nbsp;&nbsp;<span class="button button-secondary graph-print" data-areaToPrint="StatsPrintArea">Print Page</span>

diff --git a/views/ui/f6/form-display-end.html b/views/ui/f6/form-display-end.html
new file mode 100644 (file)
index 0000000..5bec904
--- /dev/null
+++ b/views/ui/f6/form-display-end.html
@@ -0,0 +1,6 @@
+{*
+    Foundation 6 UI - Form Display End
+
+*}
+    </div>
+</div>

diff --git a/views/ui/f6/form-display-start.html b/views/ui/f6/form-display-start.html
new file mode 100644 (file)
index 0000000..c405099
--- /dev/null
+++ b/views/ui/f6/form-display-start.html
@@ -0,0 +1,28 @@
+{*
+    Foundation 6 UI - Form Display Start
+
+    Starts the display only version of the form. There's also a Form Edit Start which starts the actual edit and submit form.
+    These two are used together to let the user toggle between a summary display of the data and a form to edit the data. 
+    
+    The area between "Form Display Start" and "Form Display End" is intended to be a single UI element that contains any
+    desired Foundation 6 based HTML that will display a text only (no form fields) summry of the current form data. 
+            
+    {$ui = [
+        'id'        => string   required    Form id
+        'title'     => string               Optional title to display
+    ]}
+*}
+<div id="{$ui.id}_display" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+    <div class="grid-x">
+        <div class="cell small-12 glm-f6-ui-form-display-start">
+            <button id="{$ui.id}_edit_button" type="button" class="button">Edit</button>
+            {if !empty($ui.title)}<span class="glm-f6-ui-form-display-title">{$ui.title}</span]>{/if}
+        </div>
+        <script>
+            jQuery(document).ready(function($){
+                $('#{$ui.id}_edit_button').click(function(){
+                    $('#{$ui.id}_display').hide();
+                    $('#{$ui.id}_edit').show();
+                });
+            });
+        </script>        

diff --git a/views/ui/f6/form-edit-end.html b/views/ui/f6/form-edit-end.html
new file mode 100644 (file)
index 0000000..6a368c4
--- /dev/null
+++ b/views/ui/f6/form-edit-end.html
@@ -0,0 +1,6 @@
+{*
+    Foundation 6 UI - Form Edit End
+
+*}
+    </div>
+</div>

diff --git a/views/ui/f6/form-edit-start.html b/views/ui/f6/form-edit-start.html
new file mode 100644 (file)
index 0000000..38ae96e
--- /dev/null
+++ b/views/ui/f6/form-edit-start.html
@@ -0,0 +1,29 @@
+{*
+    Foundation 6 UI - Form Edit Start
+
+    Starts the edit version of the form. There's also a Form Display Start which starts a summary display of the data.
+    These two are used together to let the user toggle between a summary display of the data and a form to edit the data. 
+    
+    The area between "Form Edit Start" and "Form Edit End" is intended to be a collection of 
+    desired Foundation 6 based HTML that will display a text only (no form fields) summry of the current form data. 
+    
+    {$ui = [
+        'id'        => string   required    Form ID - Use the same ID for the form display and edit sections,
+        title'      => string               Optional title to display
+    ]}
+*}
+<div id="{$ui.id}_edit" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+    <div class="grid-x">
+        <div class="cell small-12 glm-f6-ui-form-edit-start">
+            <button id="{$ui.id}_display_button" type="button" class="button">Display Only</button>
+            {if !empty($ui.title)}<span class="glm-f6-ui-form-edit-title">{$ui.title}</span]>{/if}
+        </div>
+        <script>
+            jQuery(document).ready(function($) {
+                $('#{$ui.id}_edit').hide();
+                $('#{$ui.id}_display_button').click(function(){
+                    $('#{$ui.id}_display').show();
+                    $('#{$ui.id}_edit').hide();
+                });
+            });
+        </script>

diff --git a/views/ui/f6/grid-start.html b/views/ui/f6/grid-start.html
index adc9c51..7ff4ef8 100644 (file)
--- a/views/ui/f6/grid-start.html
+++ b/views/ui/f6/grid-start.html
@@ -34,6 +34,22 @@
     .glm-f6-ui-section-start {
         background-color: {$glm_f6_ui_section_color} !important;
     }
+    .glm-f6-ui-form-display-start {
+        margin-bottom: 1rem;
+    }
+    .glm-f6-ui-form-edit-start {
+        margin-bottom: 1rem;
+    }
+    .glm-f6-ui-form-display-title {
+        margin-left: 1rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
+    .glm-f6-ui-form-edit-title {
+        margin-left: 1rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
     .glm-f6-ui-field {
         margin-bottom: 1rem !important;
     }
@@ -78,6 +94,9 @@
     .glm-f6-ui-text-line {
         margin-bottom: 1rem !important;
     }
+    .glm-f6-ui-nowrap {
+        whitespace: nowrap;
+    }
 </style>
 <div class="grid-container callout grid-margin-x glm-foundation-6-ui">
     <div class="grid-x grid-margin-x">