Redo grid for foundation 6 inputs.
authorSteve Sutton <steve@gaslightmedia.com>
Tue, 18 Jun 2019 20:49:43 +0000 (16:49 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Tue, 18 Jun 2019 20:49:43 +0000 (16:49 -0400)
small-12 and place labels above inputs.

views/admin/ui/f6-checkbox.html
views/admin/ui/f6-editor.html
views/admin/ui/f6-image.html
views/admin/ui/f6-select.html
views/admin/ui/f6-text.html

index fa79fba..76ae596 100644 (file)
@@ -3,11 +3,9 @@
 {* setup $field *}
 {* setup $fieldLabel *}
 <div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-    </div>
-    <div class="cell small-12 medium-9">
-        <input type="checkbox" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if}> Yes
+    <div class="cell small-12">
+        <input type="checkbox" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if} />
+        <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
         {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
     </div>
 </div>
index f1a09b6..3d697ed 100644 (file)
@@ -3,10 +3,8 @@
 {* setup $field *}
 {* setup $fieldLabel *}
 <div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-    </div>
-    <div class="cell small-12 medium-9">
+    <div class="cell small-12">
+        <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
         {if isset($data) && $data.fieldData.$field}
             {assign var="textAreaContent" value=$data.fieldData.$field}
         {else}
index b7b28fa..d76976b 100644 (file)
@@ -3,29 +3,27 @@
 {* setup $field *}
 {* setup $fieldLabel *}
 <div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}:</label>
+    <div class="cell small-12">
+        <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
     </div>
-    <div class="cell small-12 medium-9">
-        <div {if $data.fieldFail.$field}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
-            {if $data.fieldData.$field}
-                <div class="glm-row">
-                    <div class="glm-small-12 glm-medium-6">
-                        <div class="glm-galleryImage" data-id="{$field}">
-                            <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}">
-                        </div>
-                    </div>
-                    <div class="glm-small-11 glm-medium-6 glm-right">
-                        <br>
-                        <input type="checkbox" name="{$field}_delete"> Delete {$fieldLabel}<br>
-                        <span>{$data.fieldData.$field}</span>
-                        <br>
+    <div class="cell small-12 medium-6">
+        <label for="exampleFileUpload" class="button">Upload New {$fieldLabel}</label>
+        <input type="file" id="exampleFileUpload" class="show-for-sr" name="{$field}_new" />
+    </div>
+    {if $data.fieldData.$field}
+        <div class="cell small-12 medium-6">
+            <div class="{if $data.fieldFail.$field} glm-form-bad-input{/if}" {if $data.fieldFail.$field}data-tabid="glm-member-info-images"{/if}>
+                <div class="glm-galleryImage" data-id="{$field}">
+                    <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}" />
+                    <input type="checkbox" name="{$field}_delete" /> Delete {$fieldLabel}
+                    <span>{$data.fieldData.$field}</span>
+
+                    <div id="glm-galleryImageLarger_image" class="glm-imageDialog">
+                        <img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}" />
+                        {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
                     </div>
                 </div>
-            {/if}
-            <div class="glm-center"><b>New {$fieldLabel}</b> <input type="file" name="{$field}_new"></div>
-            <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}"></div>
-            {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
+            </div>
         </div>
-    </div>
+    {/if}
 </div>
index 288e233..f27e837 100644 (file)
@@ -3,10 +3,8 @@
 {* setup $field *}
 {* setup $fieldLabel *}
 <div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-    </div>
-    <div class="cell small-12 medium-9">
+    <div class="cell small-12">
+        <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
         <select id="{$field}" name="{$field}" required>
             <option value=""></option>
             {foreach from=$data.fieldData.$field.list item=v}
index 94fe5c9..4684a5f 100644 (file)
@@ -3,10 +3,8 @@
 {* setup $field *}
 {* setup $fieldLabel *}
 <div class="grid-x grid-margin-x">
-    <div class="cell small-12 medium-3">
-        <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-    </div>
-    <div class="cell small-12 medium-9">
+    <div class="cell small-12">
+        <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
         <input type="text" id="{$field}" name="{$field}" value="{$data.fieldData.$field|escape}" {if $data.fieldRequired.$field}required{/if} />
         {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
     </div>