Adding some of the ui elements that were setup for serverstats.
Adding Date.
--- /dev/null
+Layout Notes for how ui components and Foundation classes all fit together.
+Also includes standard classes for various divs.
+
+
+grid-start.html <div class="grid-container callout glm-foundation-6-ui">
+ . <div class="grid-x grid-margin-x">
+
+something.html <div class="cell small-12">
+ . (some content)
+ . </div>
+
+section-start.html <div class="cell small-12 large-6">
+ . <div class="grid-x grid-margin-x glm-f6-ui-section">
+ . <div class="cell small-12 glm-f6-ui-section-title">
+ . <h3>title</h3>
+ . </div>
+ . <div class="cell small-12 glm-f6-ui-section-start">
+ . <div class="grid-x grid-margin-x">
+
+field-something.html <div class="cell small-12 glm-f6-ui-field">
+ . (some field label, input, ...)
+ . </div>
+
+section-end.html </div>
+ </div>
+ . </div>
+ . </div>
+
+grid-end.html </div>
+ . </div>
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 UI - Text Input Field
+
+ Do not list parameters if they're false. (We're not checking for false).
+
+ {$ui = [
+ 'field' => string Required Name of field that holds the data or formData array,
+ 'value' => string Required Value of this text element
+ 'label' => string Required Label text for this field,
+ 'pattern' => string Pattern attribute ( number, etc. )
+ 'placeholder' => string Placeholder string,
+ 'required' => boolean True if required,
+ 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
+ 'maxLength' => integer Maximum number of characters that may be entered,
+ 'helpText' => string Help text for this input,
+ 'errorText' => string Error text that appears when the field doesn't validate,
+ 'dataError' => string Error from data Abstract Class
+ 'tip' => string String to display when hover over question mark on right
+ 'class' => string Additional Classes for the main cell div
+ 'inputClass' => string Additional Classes for the input
+ ]}
+*}
+<div class="cell small-12 glm-f6-ui-field {$ui.class|default:''}">
+ {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ {else}
+ <div class="grid-x grid-margin-x">
+ <div class="cell small-12">
+ {if isset($ui.tip)}
+ <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" title="{$ui.tip}">?</span>
+ {/if}
+ <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
+ </div>
+ <div class="cell small-12">
+ <input
+ class="glm-f6-ui-field-input {$ui.inputClass|default:''}"
+ type="date"
+ id="{$ui.field}"
+ name="{$ui.field}"
+ value="{$ui.value|escape}"
+ {if !empty($ui.pattern)}pattern="{$ui.pattern}"{/if}
+ {if !empty($ui.required)}required{/if}
+ {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
+ {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if !empty($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+ {if !empty($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+ />
+ </div>
+ <div class="cell small-12 glm-f6-ui-field-messages">
+ {if !empty($ui.dataError)}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+ {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
+ {if !empty($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}<br></span>{/if}
+ </div>
+ </div>
+ {/if}
+</div>
{*
- Foundation 6 Editor
- All parameters are required.
- Do not list parameters if they're false. (We're not checking for false)
- If supplying field data (formData) from the data abstract, supply a
- name of that in the "field" parameter. Also then certain parameters like
- "required" will be supplied by the abstract rather than in a parameter in
- this array.
+ Foundation 6 UI - Text Editor
{$ui = [
- 'value' => string Value of the element
- 'field' => string Name of field that holds the data if not using data abstract,
- 'label' => string Label text for this field,
- 'height' => integer Height in px,
- 'media' => boolean Enable Media Button,
+ 'field' => string Required Name of field that holds the data if not using data abstract,
+ 'value' => string Required Value of the element
+ 'label' => string Required Label text for this field,
+ 'height' => integer Required Height in px (overrides rows - don't use with rows),
+ 'rows' => integer Height in rows (don't ues height with this option),
+ 'media' => boolean Enable "Add Media" Button,
+ 'quicktags' => boolean Enable desired tag buttons that are available in "Text" edit mode,
+ For full list use: ['buttons' => 'link,strong,code,del,fullscreen,em,li,img,ol,block,ins,more,ul,spell,close']
+ Default (false) dissables HTML/TEXT tabs, true enables all.
+ 'teeny' => boolean Use limited version of editor if true.
'required' => boolean True if required,
'helpText' => string Help text for this input,
- 'errortext' => string Error text that appears when the field doesn't validate,
+ 'errorText' => string Error text that appears when the field doesn't validate,
'dataError' => string Error from data Abstract Class
+ 'tip' => string Tool Tip text
]}
*}
-<div class="cell small-12">
- <label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
- {if isset($ui.value) && $ui.value}
- {$textAreaContent = $ui.value}
+<div class="cell small-12 glm-f6-ui-field">
+ {if isset($ui.tip)}
+ <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip .left" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+ {/if}
+ <label for="{$ui.field}" class="{if !empty($ui.required)} glm-required{/if}">{$ui.label}</label>
+ {if !empty($ui.value)}
+ {$glm_ui_param_textAreaContent = $ui.value}
{else}
- {$textAreaContent = ''}
+ {$glm_ui_param_textAreaContent = ''}
{/if}
- {$textAreaName = $ui.field}
- {if isset($ui.height)} {$height = $ui.height} {else} {$height = 250} {/if}
- {if isset($ui.media)} {$media_buttons = $ui.media} {else} {$media_buttons = false} {/if}
- {if isset($ui.quicktags)} {$quicktags = $ui.quicktags} {else} {$quicktags = false} {/if}
- {$settings = [
- 'textarea_name' => $textAreaName,
- 'editor_height' => $height,
- 'media_buttons' => $media_buttons
+ {$glm_ui_param_textAreaName = $ui.field}
+ {$glm_ui_param_height = false}
+ {$glm_ui_param_rows = false}
+ {if !empty($ui.height)}
+ {$glm_ui_param_height = $ui.height}
+ {else}
+ {if !empty($ui.rows)}
+ {$glm_ui_param_rows = $ui.rows}
+ {/if}
+ {/if}
+ {if !empty($ui.media)} {$glm_ui_param_media_buttons = $ui.media} {else} {$glm_ui_param_media_buttons = false} {/if}
+ {if !empty($ui.quicktags)} {$glm_ui_param_quicktags = $ui.quicktags} {else} {$glm_ui_param_quicktags = false} {/if}
+ {if !empty($ui.teeny)} {$glm_ui_param_teeny = $ui.teeny} {else} {$glm_ui_param_teeny = false} {/if}
+ {$glm_ui_param_settings = [
+ 'textarea_name' => $glm_ui_param_textAreaName,
+ 'editor_height' => $glm_ui_param_height,
+ 'textarea_rows' => $glm_ui_param_rows,
+ 'media_buttons' => $glm_ui_param_media_buttons,
+ 'quicktags' => $glm_ui_param_quicktags,
+ 'teeny' => $glm_ui_param_teeny
]}
+ <div class="cell small-12 glm-f6-ui-field-messages">
+ {if !empty($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+ {if !empty($ui.helpText)}<span class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
+ {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+ </div>
{wp_editor(
- $textAreaContent,
- $textAreaName,
- $settings
+ $glm_ui_param_textAreaContent,
+ $glm_ui_param_textAreaName,
+ $glm_ui_param_settings
)}
- <br>
- {if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
- {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
- {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
</div>
{*
Foundation 6 UI - Form Start
+ WARNING: There may be a problem with using Form Start after Grid Start. Was seeing improper spacing.
+
+ Found that using ".position().top -10" was better since it places the top of the window 10px above the
+ box containing the validate message while using ".offset()" caused it to position in the middle of the
+ validate message.
+
{$ui = [
'action' => string Required URL
'method' => string Required Method "post" or "get"
'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form."
]}
*}
-
<form
action="{$ui.action}"
method="{$ui.method}"
{*
- Foundation 6 - Grid Start
+ Foundation 6 UI - Grid Start
{$ui = [
'nowrap' => string True if no sections should wrap to the right,
]}
*}
+
{$glm_f6_ui_wrapsize = 6 scope="global"}
{if isset($ui.nowrap) && $ui.nowrap}
{$glm_f6_ui_wrapsize = 12 scope="global"}
margin-left: 0 !important;
}
.glm-f6-ui-field-label {
+ margin-top: 0 !important;
}
.glm-f6-ui-field-input {
margin-bottom: 0 !important;
.glm-f6-ui-field-input-number {
margin-bottom: 0 !important;
}
+ .glm-f6-ui-field-messages {
+ margin-top: 0rem !important;
+ margin-bottom: 0rem !important;
+ }
.glm-f6-ui-field-data-error {
+ font-weight: normal !important;
+ font-size: .8rem !important;
+ margin-top: 0 !important;
}
.glm-f6-ui-field-help-text {
- margin-bottom: 0 !important;
+ font-weight: normal !important;
+ font-size: .8rem !important;
+ margin-top: 0 !important;
}
.glm-f6-ui-field-error-text {
+ top: 0 !important;
+ font-weight: normal !importantl
+ font-size: .8rem !important;
margin-top: 0 !important;
+ margin-bottom: 0 !important;
}
.glm-f6-ui-text-line {
margin-bottom: 1rem !important;
--- /dev/null
+{*
+ Foundation 6 - Misc Container End
+
+ Used to end teh contain for other content in an form using UI F6.
+*}
+
+</div>
+
--- /dev/null
+{*
+ Foundation 6 - Misc Container Start
+
+ Used to contain other content in an form using UI F6.
+*}
+
+<div class="cell small-12 glm-f6-ui-field">
--- /dev/null
+{*
+ Foundation 6 UI - Form Section End
+ No parameters are needed for Section-End
+*}
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 UI - Form Section Start
+
+ {$ui = [
+ 'title' => string Section title text,
+ 'helpText' => string Additional text to describe this section,
+ 'tip' => String to display when hover over question mark on right
+ ]}
+*}
+<div class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+ <div class="grid-x grid-margin-x glm-f6-ui-section">
+ {if !isset($ui.title)}
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ {else}
+ <div class="cell small-12 glm-f6-ui-section-title">
+ {if isset($ui.tip)}
+ <span style="float:right;" data-tooltip title="{$ui.tip}">?</span>
+ {/if}
+ <h3>{$ui.title}</h3>
+ {if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
+ </div>
+ {/if}
+ <div class="cell small-12 callout glm-f6-ui-section-start">
+ <div class="grid-x grid-margin-x">
--- /dev/null
+{*
+ Foundation 6 UI - Text Line (display only)
+
+ {$ui = [
+ 'text' => string Required Text to display,
+ 'underline' => boolean True to show line below text
+ ]}
+*}
+
+<div class="cell small-12 glm-f6-ui-text-line">
+ <span{if isset($ui.underline) && $ui.underline} style="text-decoration: underline;"{/if}>
+ {$ui.text}
+ </span>
+</div>
+
projects / WP-Plugins / glm-member-db.git / commitdiff