From: Chuck Scott Date: Tue, 6 Aug 2019 20:43:43 +0000 (-0400) Subject: Added "form-display" and "form-edit" sections to display summary data and switch... X-Git-Tag: v3.0.0^2~5 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=936d02fc743755ea60175878bf282a053235f63b;p=WP-Plugins%2Fglm-serverstats.git Added "form-display" and "form-edit" sections to display summary data and switch to a form. Made pseudo-picklist scroll when small Other layout improvement --- diff --git a/views/adminServerStats.html b/views/adminServerStats.html index 36a9358..8785780 100755 --- 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+ */ + } {if !$connected} @@ -113,7 +119,8 @@ Storage: Maximum for Month   Percent of target   -
+
+ 
                                                   ----------------- Traffic -------------   --------------- Storage --------------
Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target
@@ -121,22 +128,21 @@ 
{if $site.name == $selectedSite}{/if}{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB      $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB       $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%
{/foreach}
-

Click on a site above to display settings and charts.

-
+
- +

Click on a site above to display settings and charts.

{if $selectedSite} - -
- Send: - Send usage E-mail for site selected above -    - Review: - Display usage E-mail for site selected above -    - Display usage E-mail for all sites above threashold percentage +
+
+ Send E-Mail: + Send for selected site +
+
+ Preview E-Mail: + Display for site selected site + Display for all sites above threashold +
- {/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"} + +
+
+
Selected Site:
+
{$selectedSite}
+
Monthly Traffic Target:
+
{$settings.target|string_format:"%.1f"}
+
Disk Space Usage Target:
+
{$settings.disk_target|string_format:"%.1f"}
+
Customer Contact:
+
{if !empty($settings.cust_contact)}{$settings.cust_contact}{else}(not supplied){/if}
+
+
+ + {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 *} -
+
Explanation of Usage and Graphs   Print Page diff --git a/views/ui/f6/form-display-end.html b/views/ui/f6/form-display-end.html new file mode 100644 index 0000000..5bec904 --- /dev/null +++ b/views/ui/f6/form-display-end.html @@ -0,0 +1,6 @@ +{* + Foundation 6 UI - Form Display End + +*} +
+
diff --git a/views/ui/f6/form-display-start.html b/views/ui/f6/form-display-start.html new file mode 100644 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 + ]} +*} +
+
+
+ + {if !empty($ui.title)}{$ui.title}{/if} +
+ diff --git a/views/ui/f6/form-edit-end.html b/views/ui/f6/form-edit-end.html new file mode 100644 index 0000000..6a368c4 --- /dev/null +++ b/views/ui/f6/form-edit-end.html @@ -0,0 +1,6 @@ +{* + Foundation 6 UI - Form Edit End + +*} +
+
diff --git a/views/ui/f6/form-edit-start.html b/views/ui/f6/form-edit-start.html new file mode 100644 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 + ]} +*} +
+
+
+ + {if !empty($ui.title)}{$ui.title}{/if} +
+ diff --git a/views/ui/f6/grid-start.html b/views/ui/f6/grid-start.html index adc9c51..7ff4ef8 100644 --- 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; + }