Revamp changes to the contact profile table

- Layout changed to single column, widths/responsiveness edited
- Cities display more appealing
- New tabs added; account settings separated from account profile
- Collapse/To Top links fixed
- Publish checkboxes in their own subsection at the top
- Repositioning of several form fields
- Normalize like field widths
- Custom field styles
- other changes

diff --git a/assets/info.png b/assets/info.png
new file mode 100644 (file)
index 0000000..9d5b97e
Binary files /dev/null and b/assets/info.png differ

diff --git a/classes/data/dataContacts.php b/classes/data/dataContacts.php
index 77ed806..9e04991 100644 (file)
--- a/classes/data/dataContacts.php
+++ b/classes/data/dataContacts.php
@@ -192,7 +192,8 @@ class GlmDataContacts extends GlmDataAbstract
                 'as' => 'contact_role_short',
                 'type' => 'list',
                 'list' => $this->config['contact_role_short'],
-                'use' => 'lged'
+                'default' => $this->config['contact_role_numb']['EntityManager'],
+                'use' => 'a'
             ),
 
             // Organization name

diff --git a/css/admin.css b/css/admin.css
index 91eed44..33c8949 100644 (file)
--- a/css/admin.css
+++ b/css/admin.css
@@ -36,6 +36,11 @@
     text-transform: uppercase;
     margin-bottom: 5px;
 }
+@media only screen and (max-width: 639px) {
+    .glm-contact-content-toggle {
+        margin-top: 50px;
+    }
+}
 #glm-admin-content-container .glm-contact-content-toggle h3 {
     color: #32373c;
     font-size: 13px;
@@ -73,11 +78,8 @@
     border-bottom-right-radius: 0;
     box-shadow: 1px 1px 4px lightgrey inset;
 }
-.glm-contact-sub-data-links > * {
-    width: 50%;
-}
-
 .glm-contact-content-data:not(#glm-contact-account-profile-container) {
+/*.glm-contact-content-data:not(#glm-contact-account-contact-container) {*/
     display: none;
 }
 #glm-contact-fullprofile-toggle {
@@ -89,20 +91,30 @@
     float: right;
     width: 85px;
 }
-.glm-contact-sub-data-links .glm-contact-content-toggle {
-    border: 0;
-}
-.glm-contact-sub-data-links .glm-contact-link-to-top {
-    text-align: right;
-}
 #glm-table-profile .glm-contact-sub-data-links {
     border-width: 0 1px 1px 1px;
     border-color: lightgrey;
     border-style: solid;
     margin-top: -5px;
     margin-bottom: 10px;
+    padding: 8px;
+}
+#glm-table-profile .glm-contact-sub-data-links > a {
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: bold;
+    margin: 0;
+}
+#glm-table-profile .glm-contact-sub-data-links > .glm-contact-content-toggle {
+    
 }
-.glm-contact-sub-data-links .glm-contact-link-to-top {
+#glm-table-profile .glm-contact-sub-data-links .glm-contact-content-toggle {
+    border: 0;
+}
+#glm-table-profile .glm-contact-sub-data-links .glm-contact-link-to-top {
+    text-align: right;
+}
+#glm-table-profile .glm-contact-sub-data-links .glm-contact-link-to-top {
     float: right;
 }
 
@@ -122,6 +134,11 @@ input::placeholder {
     transition: 50ms border-color ease-in-out;
     border-width: 0 0 1px 0;
 }
+#glm-table-profile.glm-admin-table [name="notes"] {
+    width: 100%;
+    max-width: 640px;
+    height: 120px;
+}
 #glm-table-profile.glm-admin-table {
     width: 100%;
     clear: both;
@@ -135,7 +152,25 @@ input::placeholder {
     padding-top: 14px;
     line-height: 1.6px;
 }
-
+#glm-table-profile.glm-admin-table td.glm-contact-citybox {
+    max-width: 320px;
+}
+#glm-table-profile.glm-admin-table td > .glm-admin-noinput {
+    background: #f3f3f9;
+    border: 1px solid #e1e1e1;
+    color: #575757;
+    display: inline-block;
+    margin: 1px;
+    padding: 4px 6px;
+    min-width: 200px;
+}
+#glm-table-profile #glm-members-custom-fields-glm-member-db-contacts {
+    border: 1px solid lightgrey;
+    border-radius: 3px;
+    width: 100%;
+    padding: 10px;
+    background-color: #f8ffff;
+}
 #glm-table-profile .glm-admin-table.glm-admin-table-inner {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -147,13 +182,25 @@ input::placeholder {
     display: block;
     max-width: 400px;
 }
-@media only screen and (max-width: 640px) {
+#glm-table-profile fieldset {
+    background: white;
+    border: 1px solid lightgrey;
+    
+}
+#glm-table-profile fieldset legend {
+    text-decoration: underline;
+    font-size: 15px;
+    margin-left: 5px;
+    margin-bottom: 10px;
+}
+@media only screen and (max-width: 9999px) {
     #glm-table-profile input[type=text] {
         font-size: 14px;
     }
     #glm-table-profile.glm-admin-table {
         table-layout: fixed;
     }
+    #glm-table-profile.glm-admin-table .glm-custom-field-label,
     #glm-table-profile.glm-admin-table th {
         clear: both;
         display: block;
@@ -161,15 +208,16 @@ input::placeholder {
         width: 100%;
         max-width: 100%;
     }
+    #glm-table-profile.glm-admin-table tr {
+        display: block;
+        margin-bottom: 10px;
+    }
+    #glm-table-profile.glm-admin-table .glm-custom-field,
     #glm-table-profile.glm-admin-table td {
         clear: both;
         display: block;
         width: 100%;
-        max-width: 100%;
-    }
-    #glm-table-profile.glm-admin-table tr {
-        display: block;
-        margin-bottom: 15px;
+        max-width: 640px;
     }
 }
 
@@ -243,7 +291,15 @@ a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
     color: grey;
     zoom: 1;
     position: relative;
-    
+}
+@media only screen and (max-width: 639px) {
+    a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
+        left: 5%;
+        width: 80%;
+    }
+}
+.tooltip > p {
+    white-space: normal;
 }
 .fa {
     font: normal normal normal 14px/1 FontAwesome;
@@ -257,5 +313,6 @@ a.tooltip, a.tooltip_bottomleft, a.tooltip_left {
 display: inline-block;
 }
 .fa-question-circle:before {
-content: "\f059";
+    content: url("../assets/info.png");
+    margin-left: 3px;
 }
\ No newline at end of file

diff --git a/views/admin/contacts/edit.html b/views/admin/contacts/edit.html
index 9b2778c..5783ecb 100644 (file)
--- a/views/admin/contacts/edit.html
+++ b/views/admin/contacts/edit.html
@@ -139,24 +139,82 @@
     </h2>
 
 
-    <div id="glm-contact-fullprofile-toggle" class="">Expand All</div>
-    <div id="glm-table-profile" class="glm-admin-table-outer glm-contact-info-table glm-admin-table">
+        <div id="glm-contact-fullprofile-toggle" class="">Expand All</div>
+        <div id="glm-table-profile" class="glm-admin-table-outer glm-contact-info-table glm-admin-table">
+            <div id="glm-contact-account-settings-toggle" class="glm-contact-content-toggle">Account Settings</div>
+            <div id="glm-contact-account-settings-container" class="glm-admin-form-section glm-contact-content-data">
+                <div id="glm-contact-account-settings">
 
-        <div id="glm-contact-account-profile-toggle" class="glm-contact-content-toggle selected">Account Profile</div>
-        <div id="glm-contact-account-profile-container" class="glm-admin-form-section glm-contact-content-data">
-            <div id="glm-contact-account-profile"></div>
+                    <table class="glm-admin-table glm-admin-table-inner">
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.contact_role}class="glm-required"{/if}>
+                                Permissions
+                                <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
+                                    <p>
+                        {foreach from=$contactInfo.fieldData.contact_role.list item=v}
+                                        <span>{$v.name}</span></br>
+                        {/foreach}
+                                    </p>
+                                    <i class="fa fa-question-circle">
+
+                                    </i>
+                                </a>
+                            </th>
+                            <td {if $contactInfo.fieldFail.contact_role_short}class="glm-form-bad-input"{/if}>
+                                <select id="contactRoleSelect" name="contact_role">
+                    {foreach from=$contactInfo.fieldData.contact_role_short.list item=v}
+                                    <option value="{$v.value}"{if $v.default} selected="selected"{/if}>
+                                        {$v.name}
+                                    </option>
+                    {/foreach}
+                                </select>
+                                {if $contactInfo.fieldFail.contact_role_short}<p>{$contactInfo.fieldFail.contact_role_short}</p>{/if}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.access}class="glm-required"{/if}>Display/Moderate/Archive</th>
+                            <td {if $contactInfo.fieldFail.access}class="glm-form-bad-input"{/if}>
+                                <select name="access">
+                    {foreach from=$contactInfo.fieldData.access.list item=v}
+                                    <option value="{$v.value}"{if $v.default} selected="selected"{/if}>{$v.name}</option>
+                    {/foreach}
+                                </select>
+                                {if $contactInfo.fieldFail.access}<p>{$contactInfo.fieldFail.access}</p>{/if}
+                            </td>
+                        </tr>
+                        {if $option != 'create'}
+                            <tr>
+                                <th>Created</th>
+                                <td><span class="glm-admin-noinput">{$contactInfo.fieldData.create_time.datetime}</span></td>
+                            </tr>
+                            <tr>
+                                <th>Last Updated</th>
+                                <td><span class="glm-admin-noinput">{$contactInfo.fieldData.modify_time.datetime}</span></td>
+                            </tr>
+                        {/if}
+                    </table>
+                    <div class="glm-contact-sub-data-links glmgrid-row">
+                        <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
+                        <a class="glm-contact-link-to-top glmgrid-columns glmgrid-small-6">Back to top</a>
+                    </div>
+                </div>
+            </div>
 
-                <table class="glm-admin-table glm-admin-table-inner">
-        <!--            <table class="glm-admin-table glm-shrink">-->
-                    <tr>
-                {if $haveMember}
+            <div id="glm-contact-account-profile-toggle" class="glm-contact-content-toggle selected">Account Profile</div>
+            <div id="glm-contact-account-profile-container" class="glm-admin-form-section glm-contact-content-data">
+                <div id="glm-contact-account-profile">
+
+                    <table class="glm-admin-table glm-admin-table-inner">
+            <!--            <table class="glm-admin-table glm-shrink">-->
+                        <tr>
+                    {if $haveMember}
                             <th>
                                 Contact For
                             </th>
 
                             <td>
-                                {$memberData.name}
-                {else}
+                                <span class="glm-admin-noinput">{$memberData.name}</span>
+                    {else}
                             <th class="glm-required">Contact For</th>
                             <td {if $contactInfo.fieldFail.ref_dest}class="glm-form-bad-input"{/if}>
                                 <select name="ref_dest">
@@ -170,263 +228,236 @@
                             </td>
                         </tr>
 
-                    <tr>
-                        <th>Active</th>
-                        <td>
-                            <input type="checkbox" name="active" {if $contactInfo.fieldData.active.value} checked{/if}>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.contact_role}class="glm-required"{/if}>
-                            Permissions
-                            <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
-                                <p>
-                    {foreach from=$contactInfo.fieldData.contact_role.list item=v}
-                                    <span>{$v.name}</span></br>
-                    {/foreach}
-                                </p>
-                                <i class="fa fa-question-circle">
-
-                                </i>
-                            </a>
-                        </th>
-                        <td {if $contactInfo.fieldFail.contact_role}class="glm-form-bad-input"{/if}>
-                            <select id="contactRoleSelect" name="contact_role">
-                {foreach from=$contactInfo.fieldData.contact_role_short.list item=v}
-                                <option value="{$v.value}"{if $v.default} selected="selected"{/if}>
-                                    {$v.name}
-                                </option>
-                {/foreach}
-                            </select>
-                            {if $contactInfo.fieldFail.contact_role}<p>{$contactInfo.fieldFail.contact_role}</p>{/if}
-                        </td>
-                    </tr>
-
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.access}class="glm-required"{/if}>Display/Moderate/Archive</th>
-                        <td {if $contactInfo.fieldFail.access}class="glm-form-bad-input"{/if}>
-                            <select name="access">
-                {foreach from=$contactInfo.fieldData.access.list item=v}
-                                <option value="{$v.value}"{if $v.default} selected="selected"{/if}>{$v.name}</option>
-                {/foreach}
-                            </select>
-                            {if $contactInfo.fieldFail.access}<p>{$contactInfo.fieldFail.access}</p>{/if}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>
-                            Primary Contact
-                            <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
-                                <p>(Only one contact at a time may be the primary contact. If there is another primary contact, it will be deselected.)</p>
-                                <i class="fa fa-question-circle">
-
-                                </i>
-                            </a>
-                        </th>
-                        <td>
-                {if apply_filters('glm_members_permit_admin_member_contacts_set_as_primary', true)}
-                            <input type="checkbox" name="primary_contact" {if $contactInfo.fieldData.primary_contact.value} checked{/if}>
-                {else}
-                            {$contactInfo.fieldData.primary_contact.name}
-                {/if}
-                        </td>
-                    </tr>
-                {if $option != 'create'}
-                    <tr>
-                        <th>Created</th>
-                        <td>{$contactInfo.fieldData.create_time.datetime}</td>
-                    </tr>
-                    <tr>
-                        <th>Last Updated</th>
-                        <td>{$contactInfo.fieldData.modify_time.datetime}</td>
-                    </tr>
-                {/if}
-                    <tr>
-                        <td colspan="2">
-                            <div class="glm-table-spacer"><hr></div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.fname}class="glm-required"{/if}>First Name</th>
-                        <td {if $contactInfo.fieldFail.fname}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="fname" value="{$contactInfo.fieldData.fname}" class="glm-form-text-input-short">
-                            {if $contactInfo.fieldFail.fname}<p>{$contactInfo.fieldFail.fname}</p>{/if}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.lname}class="glm-required"{/if}>Last Name</th>
-                        <td {if $contactInfo.fieldFail.lname}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="lname" value="{$contactInfo.fieldData.lname}" class="glm-form-text-input-short">
-                            {if $contactInfo.fieldFail.lname}<p>{$contactInfo.fieldFail.lname}</p>{/if}
-                        </td>
-                    </tr>
-                    {if $option == 'create'}
-                    <th {if $contactInfo.fieldRequired.username}class="glm-required"{/if}>Login Username</th>
-                        <td {if $contactInfo.fieldFail.username}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="username" value="{$contactInfo.fieldData.username}" class="glm-form-text-input-medium" placeholder="(no spaces permitted)">
-                            <br><span class="glm-notice">NOTE:</span> The username cannot be changed once the contact is created.
-                            {if $contactInfo.fieldFail.username}<p>{$contactInfo.fieldFail.username}</p>{/if}
-                        </td>
-                {else}
-                        <th>Login Username</th>
-                        <td>{$contactInfo.fieldData.username}</td>
-                {/if}
-                    </tr>
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.password}class="glm-required"{/if}>
-                            Login password
-                            <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
-                                <p>The password must be at least 8 characters and include at least one number, one letter, and at least one special character. (# . - _ , $ % & !)</p>
-                                <i class="fa fa-question-circle">
-
-                                </i>
-                            </a>
-                        </th>
-                        <td {if $contactInfo.fieldFail.password}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="password" value="{$contactInfo.fieldData.password}" class="glm-form-text-input-medium" placeholder="{if $option=='create'}(no spaces permitted){else}(Password does not show, only enter to change password.){/if}">
-                            {if $option == 'create'}
-                                <span class="glm-notice">Save this password.</span>
-                                <br>A randomly generated password has been supplied. You may change this as desired.
-                                There is no way to view a password once it's set. However, a user may recover a password using their
-                                Email address at the login page.
-                            {else}
-                                <br><span class="sub-field-note">Enter a password here <b><i>only</i></b> if you need to change it.</span>
-                            {/if}
-                            {if $contactInfo.fieldFail.password}<p>{$contactInfo.fieldFail.password}</p>{/if}
-                        </td>
-                    </tr>
+                        <tr>
+                            <th>Active</th>
+                            <td>
+                                <input type="checkbox" name="active" {if $contactInfo.fieldData.active.value} checked{/if}>
+                            </td>
+                        </tr>
 
-                    {if $option == 'create'}
-                    <tr>
-                        <th id="emailRequiredForLoginContacts" class="glm-required">Email Address</th>
-                        <td {if $contactInfo.fieldFail.email}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="email" value="{$contactInfo.fieldData.email}" class="glm-form-text-input-medium" placeholder="(ex: name@domain.com)">
-                            <br><span class="glm-notice">NOTE:</span> This field is only required for users who will have login privileges.
-                            {if $contactInfo.fieldFail.email}<p>{$contactInfo.fieldFail.email}</p>{/if}
-                        </td>
-                    </tr>
-                {else}
 
-                    <tr><th>Email Address</th><td>{$contactInfo.fieldData.email}</td></tr>
-                    <tr>
-                        <th>
-                            New Email Address
-                            <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
-                                <p>To change your E-Mail address, enter your new address here. This address must not be used by any other contact or user in this site.</p>
-                                <i class="fa fa-question-circle">
-
-                                </i>
-                            </a>
-                        </th>
-                        <td {if $newEmailError != ''}class="glm-form-bad-input"{/if}>
-                            <input type="text" name="new_email" value="{$new_email}" class="glm-form-text-input-short" placeholder="(ex: name@domain.com)">
-            {if $newEmailError == 'BAD_CHARACTERS'}
-                            <br><span style="color: white;">
-                                The E-Mail address you submitted contained invalid characters. {$new_email}
-                                Please check the address and submit again.
-                            </span>
-            {/if}
-            {if $newEmailError == 'BAD_FORMAT'}
-                            <br><span style="color: white;">
-                                The E-Mail address you submitted is formatted incorrectly. An example of a correctly formatted E-Mail address is "name@domain.com".
-                                Please check the address and submit again.
-                            </span>
-            {/if}
-            {if $newEmailError == 'IN_USE'}
-                            <br><span style="color: white;">
-                                The E-Mail address you submitted is already in use for this site.
-                                You may only change your address to one that is not currently in use.
-                            </span>
-            {/if}
-                        </td>
-                    </tr>
+                        <tr>
+                            <th>
+                                Primary Contact
+                                <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
+                                    <p>(Only one contact at a time may be the primary contact. If there is another primary contact, it will be deselected.)</p>
+                                    <i class="fa fa-question-circle">
 
-                {/if}
+                                    </i>
+                                </a>
+                            </th>
+                            <td>
+                    {if apply_filters('glm_members_permit_admin_member_contacts_set_as_primary', true)}
+                                <input type="checkbox" name="primary_contact" {if $contactInfo.fieldData.primary_contact.value} checked{/if}>
+                    {else}
+                                {$contactInfo.fieldData.primary_contact.name}
+                    {/if}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <div class="glm-table-spacer"><hr></div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.fname}class="glm-required"{/if}>First Name</th>
+                            <td {if $contactInfo.fieldFail.fname}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="fname" value="{$contactInfo.fieldData.fname}" class="glm-form-text-input-short">
+                                {if $contactInfo.fieldFail.fname}<p>{$contactInfo.fieldFail.fname}</p>{/if}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.lname}class="glm-required"{/if}>Last Name</th>
+                            <td {if $contactInfo.fieldFail.lname}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="lname" value="{$contactInfo.fieldData.lname}" class="glm-form-text-input-short">
+                                {if $contactInfo.fieldFail.lname}<p>{$contactInfo.fieldFail.lname}</p>{/if}
+                            </td>
+                        </tr>
+                        {if $option == 'create'}
+                        <th {if $contactInfo.fieldRequired.username}class="glm-required"{/if}>Login Username</th>
+                            <td {if $contactInfo.fieldFail.username}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="username" value="{$contactInfo.fieldData.username}" class="glm-form-text-input-medium" placeholder="(no spaces permitted)">
+                                <br><span class="glm-notice">NOTE:</span> The username cannot be changed once the contact is created.
+                                {if $contactInfo.fieldFail.username}<p>{$contactInfo.fieldFail.username}</p>{/if}
+                            </td>
+                    {else}
+                            <th>Login Username</th>
+                            <td><span class="glm-admin-noinput">{$contactInfo.fieldData.username}</span></td>
+                    {/if}
+                        </tr>
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.password}class="glm-required"{/if}>
+                                Login password
+                                <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
+                                    <p>The password must be at least 8 characters and include at least one number, one letter, and at least one special character. (# . - _ , $ % & !)</p>
+                                    <i class="fa fa-question-circle">
+
+                                    </i>
+                                </a>
+                            </th>
+                            <td {if $contactInfo.fieldFail.password}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="password" value="{$contactInfo.fieldData.password}" class="glm-form-text-input-medium" placeholder="{if $option=='create'}(no spaces permitted){else}(Password does not show, only enter to change password.){/if}">
+                                {if $option == 'create'}
+                                    <span class="glm-notice">Save this password.</span>
+                                    <br>A randomly generated password has been supplied. You may change this as desired.
+                                    There is no way to view a password once it's set. However, a user may recover a password using their
+                                    Email address at the login page.
+                                {else}
+                                    <br><span class="sub-field-note">Enter a password here <b><i>only</i></b> if you need to change it.</span>
+                                {/if}
+                                {if $contactInfo.fieldFail.password}<p>{$contactInfo.fieldFail.password}</p>{/if}
+                            </td>
+                        </tr>
+
+                        {if $option == 'create'}
+                        <tr>
+                            <th id="emailRequiredForLoginContacts" class="glm-required">Email Address</th>
+                            <td {if $contactInfo.fieldFail.email}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="email" value="{$contactInfo.fieldData.email}" class="glm-form-text-input-medium" placeholder="(ex: name@domain.com)">
+                                <br><span class="glm-notice">NOTE:</span> This field is only required for users who will have login privileges.
+                                {if $contactInfo.fieldFail.email}<p>{$contactInfo.fieldFail.email}</p>{/if}
+                            </td>
+                        </tr>
+                    {else}
 
-                    <tr>
-                        <th {if $contactInfo.fieldRequired.image}class="glm-required"{/if}>Profile Image</th>
-                        <td {if $contactInfo.fieldFail.image}class="glm-form-bad-input"{/if}>
-                {if $contactInfo.fieldData.image}
-                            <div id="largeImageDialog" class="glm-dialog-box" title="Large sized image">
-                                <img src="{$glmPluginMediaUrl}/images/large/{$contactInfo.fieldData.image}">
-                                <a id="largeImageCancel" class="button button-primary glm-right">Close</a><br>
-                            </div>
-                            <table class="glm-admin-image-edit-table">
-                                <tr>
-                                    <td><img src="{$glmPluginMediaUrl}/images/thumb/{$contactInfo.fieldData.image}"></td>
-                                    <td>
-                                        <input type="checkbox" name="image_delete"> Delete Image<br>
-                                        {$contactInfo.fieldData.image}<br>
-                                        <p><div id="largeImageButton" class="button button-primary">Show Large Image</div></p>
-                                    </td>
-
-                                </tr>
-                            </table>
+                        <tr><th>Email Address</th><td><span class="glm-admin-noinput">{$contactInfo.fieldData.email}</span></td></tr>
+                        <tr>
+                            <th>
+                                New Email Address
+                                <a href="#" onclick="return false;" onkeypress="return false;" class="gf_tooltip tooltip">
+                                    <p>To change your E-Mail address, enter your new address here. This address must not be used by any other contact or user in this site.</p>
+                                    <i class="fa fa-question-circle">
+
+                                    </i>
+                                </a>
+                            </th>
+                            <td {if $newEmailError != ''}class="glm-form-bad-input"{/if}>
+                                <input type="text" name="new_email" value="{$new_email}" class="glm-form-text-input-short" placeholder="(ex: name@domain.com)">
+                {if $newEmailError == 'BAD_CHARACTERS'}
+                                <br><span style="color: white;">
+                                    The E-Mail address you submitted contained invalid characters. {$new_email}
+                                    Please check the address and submit again.
+                                </span>
                 {/if}
-                            <input type="file" name="image_new">
-                            {if $contactInfo.fieldFail.image}<p>{$contactInfo.fieldFail.image}</p>{/if}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>Management/Access to</th>
-                        <td id="accessToMemberSelection" class="glm-item-container">
-                    {if $membersList && apply_filters('glm_members_menu_members',true)}
-                            <!-- Other Member Selection -->
-                            <select name="memberSelect" id="memberSelect">
-                                <option id="memberName" value=""></option>
-                        {foreach $membersList as $m}
-                        {if $m.id != $memberID}
-                                    <option value="{$m.id}">
-                                        {$m.name}
-                                    </option>
-                        {/if}
-                        {/foreach}
-                            </select>&nbsp;&nbsp; Select a member to add.<br>
-                            <div id="selectedMembers" class="glm-dynSelect-box">
-                        {if $contactMembers}
-                        {foreach $contactMembers as $m}
-                                <div data-id="{$m.id}" class="glm-dynSelect-item glm-members-members">
-                                    {$m.name}
+                {if $newEmailError == 'BAD_FORMAT'}
+                                <br><span style="color: white;">
+                                    The E-Mail address you submitted is formatted incorrectly. An example of a correctly formatted E-Mail address is "name@domain.com".
+                                    Please check the address and submit again.
+                                </span>
+                {/if}
+                {if $newEmailError == 'IN_USE'}
+                                <br><span style="color: white;">
+                                    The E-Mail address you submitted is already in use for this site.
+                                    You may only change your address to one that is not currently in use.
+                                </span>
+                {/if}
+                            </td>
+                        </tr>
+
+                    {/if}
+
+                        <tr>
+                            <th {if $contactInfo.fieldRequired.image}class="glm-required"{/if}>Profile Image</th>
+                            <td {if $contactInfo.fieldFail.image}class="glm-form-bad-input"{/if}>
+                    {if $contactInfo.fieldData.image}
+                                <div id="largeImageDialog" class="glm-dialog-box" title="Large sized image">
+                                    <img src="{$glmPluginMediaUrl}/images/large/{$contactInfo.fieldData.image}">
+                                    <a id="largeImageCancel" class="button button-primary glm-right">Close</a><br>
+                                </div>
+                                <table class="glm-admin-image-edit-table">
+                                    <tr>
+                                        <td><img src="{$glmPluginMediaUrl}/images/thumb/{$contactInfo.fieldData.image}"></td>
+                                        <td>
+                                            <input type="checkbox" name="image_delete"> Delete Image<br>
+                                            {$contactInfo.fieldData.image}<br>
+                                            <p><div id="largeImageButton" class="button button-primary">Show Large Image</div></p>
+                                        </td>
+
+                                    </tr>
+                                </table>
+                    {/if}
+                                <input type="file" name="image_new">
+                                {if $contactInfo.fieldFail.image}<p>{$contactInfo.fieldFail.image}</p>{/if}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>Management/Access to</th>
+                            <td id="accessToMemberSelection" class="glm-item-container">
+                        {if $membersList && apply_filters('glm_members_menu_members',true)}
+                                <!-- Other Member Selection -->
+                                <select name="memberSelect" id="memberSelect">
+                                    <option id="memberName" value=""></option>
+                            {foreach $membersList as $m}
                             {if $m.id != $memberID}
-                                    <span data-id="{$m.id}" class="glm-dynSelect-delete membDelete">X</span>
-                                    <input type="hidden" name="contactMembers[{$m.id}]" value="{$m.id}">
-                            {else}
-                                    (Primary {$terms.term_member_cap})
+                                        <option value="{$m.id}">
+                                            {$m.name}
+                                        </option>
+                            {/if}
+                            {/foreach}
+                                </select>&nbsp;&nbsp; Select a member to add.<br>
+                                <div id="selectedMembers" class="glm-dynSelect-box">
+                            {if $contactMembers}
+                            {foreach $contactMembers as $m}
+                                    <div data-id="{$m.id}" class="glm-dynSelect-item glm-members-members">
+                                        {$m.name}
+                                {if $m.id != $memberID}
+                                        <span data-id="{$m.id}" class="glm-dynSelect-delete membDelete">X</span>
+                                        <input type="hidden" name="contactMembers[{$m.id}]" value="{$m.id}">
+                                {else}
+                                        (Primary {$terms.term_member_cap})
+                                {/if}
+                                    </div>
+                            {/foreach}
                             {/if}
                                 </div>
-                        {/foreach}
-                        {/if}
-                            </div>
-                    {else}
-                        {if $contactMembers}
-                                <input type="hidden" name="contactMembers[0]" value="0"> <!-- flag to not update contact members list -->
-                        {foreach $contactMembers as $m}
-                                <div data-id="{$m.id}" class="glm-dynSelect-item">
-                                    {$m.name}
-                                </div>
-                        {/foreach}
+                        {else}
+                            {if $contactMembers}
+                                    <input type="hidden" name="contactMembers[0]" value="0"> <!-- flag to not update contact members list -->
+                            {foreach $contactMembers as $m}
+                                    <div data-id="{$m.id}" class="glm-dynSelect-item">
+                                        {$m.name}
+                                    </div>
+                            {/foreach}
+                            {/if}
                         {/if}
-                    {/if}
-                        </td>
-                        <td id="accessToAllMembers" class="glm-hidden">
-                            This contact has no access or can manage all members, so no selection is needed here.
-                        </td>
-                    </tr>
-
-                </table>
-                <div class="glm-contact-sub-data-links glmgrid-row">
-                    <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
-                    <a class="glm-contact-link-to-top glmgrid-columns glmgrid-small-6">Back to top</a>
+                            </td>
+                            <td id="accessToAllMembers" class="glm-hidden">
+                                This contact has no access or can manage all members, so no selection is needed here.
+                            </td>
+                        </tr>
+
+                    </table>
+                    <div class="glm-contact-sub-data-links glmgrid-row">
+                        <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
+                        <a class="glm-contact-link-to-top glmgrid-columns glmgrid-small-6">Back to top</a>
+                    </div>
                 </div>
             </div>
             <div id="glm-contact-account-contact-toggle" class="glm-contact-content-toggle">
-                <h3>Account Contact Info (section title)</h3>
+                <h3>Account Contact Info</h3>
             </div>
             <div id="glm-contact-account-contact-container" class="glm-admin-form-section glm-contact-content-data">
                 <div id="glm-contact-account-contact">
 
                     <table class="glm-admin-table glm-admin-table-inner">
 
+                        <tr>
+                            <th>Publish on Front End</th>
+                            <td>
+                                <input type="checkbox" name="contact_publish" {if $contactInfo.fieldData.contact_publish.value} checked{/if}>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>Use for Billing Information</th>
+                            <td>
+                                <input type="checkbox" name="contact_use_billing" {if $contactInfo.fieldData.contact_use_billing.value} checked{/if}>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <div class="glm-table-spacer"><hr></div>
+                            </td>
+                        </tr>
                         <tr>
                             <th {if $contactInfo.fieldRequired.mailing_address_type}class="glm-required"{/if}>Mailing Address Type</th>
                             <td {if $contactInfo.fieldFail.mailing_address_type}class="glm-form-bad-input"{/if}>
@@ -444,22 +475,21 @@
                         <tr>
                             <th {if $contactInfo.fieldRequired.addr1}class="glm-required"{/if}>Address Line 1</th>
                             <td {if $contactInfo.fieldFail.addr1}class="glm-form-bad-input"{/if}>
-                                <input type="text" id="addr1" name="addr1" value="{$contactInfo.fieldData.addr1}" class="glm-form-text-input glm-geocodeAction">
+                                <input type="text" id="addr1" name="addr1" value="{$contactInfo.fieldData.addr1}" class="glm-form-text-input-medium glm-geocodeAction">
                                 {if $contactInfo.fieldFail.addr1}<p>{$contactInfo.fieldFail.addr1}</p>{/if}
                             </td>
                         </tr>
                         <tr>
                             <th {if $contactInfo.fieldRequired.addr2}class="glm-required"{/if}>Address Line 2</th>
                             <td {if $contactInfo.fieldFail.addr2}class="glm-form-bad-input"{/if}>
-                                <input id="addr2" type="text" name="addr2" value="{$contactInfo.fieldData.addr2}" class="glm-form-text-input glm-geocodeAction">
+                                <input id="addr2" type="text" name="addr2" value="{$contactInfo.fieldData.addr2}" class="glm-form-text-input-medium glm-geocodeAction">
                                 {if $contactInfo.fieldFail.addr2}<p>{$contactInfo.fieldFail.addr2}</p>{/if}
                             </td>
                         </tr>
                         <tr>
                             <th>City</th>
-                            <td class="glm-item-container glm-contact-citybox">
+                            <td class="glm-contact-citybox">
                                 <!--  Add new city dialog -->
-                                <div id="newCityButton" class="newCityButton button button-secondary glm-right">Add a new City</div>
                                 <div id="newCityDialog" class="newCityDialog glm-dialog-box" title="Enter a New City">
                                     <table class="glm-admin-table">
                                         <tr>
@@ -484,6 +514,7 @@
                                     </option>
                     {/foreach}
                                 </select>
+                                <div id="newCityButton" class="newCityButton button button-secondary">Add a new City</div>
                             </td>
                         </tr>
                         <tr>
@@ -540,18 +571,6 @@
                                 {if $contactInfo.fieldFail.alt_email}<p>{$contactInfo.fieldFail.alt_email}</p>{/if}
                             </td>
                         </tr>
-                        <tr>
-                            <th>Publish on Front End</th>
-                            <td>
-                                <input type="checkbox" name="contact_publish" {if $contactInfo.fieldData.contact_publish.value} checked{/if}>
-                            </td>
-                        </tr>
-                        <tr>
-                            <th>Use for Billing Information</th>
-                            <td>
-                                <input type="checkbox" name="contact_use_billing" {if $contactInfo.fieldData.contact_use_billing.value} checked{/if}>
-                            </td>
-                        </tr>
                     </table>
                     <div class="glm-contact-sub-data-links glmgrid-row">
                         <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
@@ -579,7 +598,7 @@
                         </tr>
                         <tr>
                             <td colspan="2">
-                                <h4 class="glm-table-section-title">Organization/Company Mailing Address</h4>
+                                <hr>
                             </td>
                         </tr>
                         <tr>
@@ -615,22 +634,22 @@
                         <tr>
                             <th {if $contactInfo.fieldRequired.business_addr1}class="glm-required"{/if}>Address Line 1</th>
                             <td {if $contactInfo.fieldFail.business_addr1}class="glm-form-bad-input"{/if}>
-                                <input type="text" id="business_addr1" name="business_addr1" value="{$contactInfo.fieldData.business_addr1}" class="glm-form-text-input glm-geocodeAction">
+                                <input type="text" id="business_addr1" name="business_addr1" value="{$contactInfo.fieldData.business_addr1}" class="glm-form-text-input-medium glm-geocodeAction">
                                 {if $contactInfo.fieldFail.business_addr1}<p>{$contactInfo.fieldFail.business_addr1}</p>{/if}
                             </td>
                         </tr>
                         <tr>
                             <th {if $contactInfo.fieldRequired.business_addr2}class="glm-required"{/if}>Address Line 2</th>
                             <td {if $contactInfo.fieldFail.business_addr2}class="glm-form-bad-input"{/if}>
-                                <input id="business_addr2" type="text" name="business_addr2" value="{$contactInfo.fieldData.business_addr2}" class="glm-form-text-input glm-geocodeAction">
+                                <input id="business_addr2" type="text" name="business_addr2" value="{$contactInfo.fieldData.business_addr2}" class="glm-form-text-input-medium glm-geocodeAction">
                                 {if $contactInfo.fieldFail.business_addr2}<p>{$contactInfo.fieldFail.business_addr2}</p>{/if}
                             </td>
                         </tr>
                         <tr>
                             <th>City</th>
-                            <td class="glm-item-container glm-contact-citybox">
+                            <td class="glm-contact-citybox">
                                 <!--  Add new city dialog -->
-                                <div id="newBusinessCityButton" class="newCityButton button button-secondary glm-right">Add a new City</div>
+                                <div id="newBusinessCityButton" class="newCityButton button button-secondary">Add a new City</div>
                                 <div id="newBusinessCityDialog" class="glm-dialog-box" title="Enter a New City">
                                     <table class="glm-admin-table">
                                         <tr>
@@ -739,18 +758,29 @@
                     </div>
                 </div>
             </div>
-
-            {if apply_filters( 'glm-members-billing-enabled', false )}
-                <div id="glm-contact-billing-fields-toggle" class="glm-contact-content-toggle">
-                    <h3>Billing Info</h3>
-                </div>
-                <div id="glm-contact-billing-fields-container" class="glm-admin-form-section glm-contact-content-data">
+        {if apply_filters( 'glm-members-billing-enabled', false )}
+            <div id="glm-contact-billing-fields-toggle" class="glm-contact-content-toggle">
+                <h3>Billing Info</h3>
+            </div>
+            <div id="glm-contact-billing-fields-container" class="glm-admin-form-section glm-contact-content-data">
+                <div id="glm-contact-billing-fields">
                     {apply_filters( 'glm-members-billing-contact-form', '', $contactInfo.fieldData.ref_dest )}
+                    <div class="glm-contact-sub-data-links glmgrid-row">
+                        <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
+                        <a class="glm-contact-link-to-top glmgrid-columns glmgrid-small-6">Back to top</a>
+                    </div>
                 </div>
-            {/if}
+            </div>
+        {/if}
 
             <div id="glm-contact-custom-fields-toggle" class="glm-contact-content-toggle">
-                <h3>{apply_filters( 'glm-members-billing-contact-tab-name', '' )}</h3>
+                <h3>
+                {if apply_filters( 'glm-members-billing-contact-tab-name', '' )}
+                    {apply_filters( 'glm-members-billing-contact-tab-name', '' )}
+                {else}
+                    Custom Fields
+                {/if}
+                </h3>
             </div>
             <div id="glm-contact-custom-fields-container" class="glm-admin-form-section glm-contact-content-data">
                 <div id="glm-table-custom-fields" class="glm-admin-table glm-table glm-contact-info-table">
@@ -778,6 +808,10 @@
                             </td>
                         </tr>
                     </table>
+                    <div class="glm-contact-sub-data-links glmgrid-row">
+                        <a class="glm-contact-content-toggle glmgrid-columns glmgrid-small-6">Collapse</a>
+                        <a class="glm-contact-link-to-top glmgrid-columns glmgrid-small-6">Back to top</a>
+                    </div>
                 </div>
             </div>
 
@@ -960,11 +994,16 @@
             }, 500);
         });
 
+        $('.glm-contact-link-to-top').click(function () {
+            $('body,html').animate({
+                scrollTop: $("#glm-contact-fullprofile-toggle").offset().top-10
+            }, 75);
+        });
 
         // Open or close the appropriate section if a toggle is clicked
         $(".glm-contact-content-toggle").not("#glm-contact-fullprofile-toggle").click(function() {
             if($(this).parents('.glm-contact-sub-data-links').length) {
-                var target = $(this).parent().parent().attr("id").slice(0, -10);
+                var target = $(this).parent().parent().parent().attr("id").slice(0, -10);
             } else {
                 var target = $(this).attr("id").slice(0, -7);
             }