idsci/application/index/view/user/profile.html

<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
</style>
<div class="common-bg">
    <div class="common-font">
        Personal Data
    </div>
</div>
<div id="content-container" class="container">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h2 class="page-header">Personal Data</h2>
                    <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}">
                        {:token()}
                        <input type="hidden" name="avatar" id="c-avatar" value="{:$user->getData('avatar')}" />
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-5"></label>
                            <div class="col-xs-12 col-sm-7">
                                <div class="profile-avatar-container">
                                    <img class="profile-user-img img-responsive img-circle" src="{$user.avatar|htmlentities|cdnurl}" alt="">
                                    <div class="profile-avatar-text img-circle">{:__('Click to edit')}</div>
                                    <button type="button" id="faupload-avatar" class="faupload" data-mimetype="png,jpg,jpeg,gif" data-input-id="c-avatar"><i class="fa fa-upload"></i> {:__('Upload')}</button>
                                </div>
                            </div>
                        </div>
<!--                        <div class="form-group">-->
<!--                            <label class="control-label col-xs-12 col-sm-2">{:__('Username')}:</label>-->
<!--                            <div class="col-xs-12 col-sm-4">-->
<!--                                <input type="text" class="form-control" id="username" name="username" value="{$user.username|htmlentities}" data-rule="required;username;remote({:url('api/validate/check_username_available')}, id={$user.id})" placeholder="">-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Workplace
                            </label>
                            <div class="col-xs-12 col-sm-8">
<!--                                {$user.username|htmlentities}-->
                                <select id="c-workplace" data-rule="required" class="form-control" name="workplace">
                                    <option value="">Please select</option>
                                    {foreach name="site.workplace" item="vo"}
                                    <option value="{$key}" {in name="key" value="$user.workplace" }selected{/in}>{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Job Type
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <select id="c-job_type" data-rule="required" class="form-control" name="job_type">
                                    <option value="">Please select</option>
                                    {foreach name="site.job_type" item="vo"}
                                    <option value="{$key}" {in name="key" value="$user.job_type" }selected{/in}>{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Title
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <select id="c-title" data-rule="required" class="form-control" name="title">
                                    <option value="">Please select</option>
                                    {foreach name="site.user_title" item="vo"}
                                    <option value="{$key}" {in name="key" value="$user.title" }selected{/in}>{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>First name
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input data-rule="required" type="text" class="form-control" id="first_name" name="first_name" value="{$user.first_name}" placeholder="First name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Middle name
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="middle_name" name="middle_name" value="{$user.middle_name}" placeholder="Middle name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Last name
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input data-rule="required" type="text" class="form-control" id="last_name" name="last_name" value="{$user.last_name}" placeholder="Last name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Facebook
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="facebook" name="facebook" value="{$user.facebook}" placeholder="Facebook">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Twitter
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="twitter" name="twitter" value="{$user.twitter}" placeholder="Twitter">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                E-mail
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="email" name="email" value="{$user.email}" data-rule="required;email" placeholder="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Affiliation
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input data-rule="required" type="text" class="form-control" id="affiliation" name="affiliation" value="{$user.affiliation}" placeholder="Affiliation">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Address
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input data-rule="required" type="text" class="form-control" id="address" name="address" value="{$user.address}" placeholder="Address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                <span style="color:#ed534b;margin-right: 10px;">*</span>Zip Code
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input data-rule="required" type="text" class="form-control" id="zip_code" name="zip_code" value="{$user.zip_code}" placeholder="Zip Code">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                City
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="city" name="city" value="{$user.city}" placeholder="City">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Country/Territory
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <select id="c-country" class="form-control" name="country">
                                    <option value="">Please select</option>
                                    {foreach name="site.country" item="vo"}
                                    <option value="{$key}" {in name="key" value="$user.country" }selected{/in}>{$vo}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Mail Smtp Host
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="mail_smtp_host" name="mail_smtp_host" value="{$user.mail_smtp_host}" placeholder="mail_smtp_host">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Mail Smtp Port
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="mail_smtp_port" name="mail_smtp_port" value="{$user.mail_smtp_port}" placeholder="mail_smtp_port">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Mail Smtp User
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="mail_smtp_user" name="mail_smtp_user" value="{$user.mail_smtp_user}" placeholder="mail_smtp_user">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-3">
                                Mail Smtp Pass
                            </label>
                            <div class="col-xs-12 col-sm-8">
                                <input type="text" class="form-control" id="mail_smtp_pass" name="mail_smtp_pass" value="{$user.mail_smtp_pass}" placeholder="mail_smtp_pass">
                            </div>
                        </div>
                        <div class="form-group normal-footer">
                            <label class="control-label col-xs-12 col-sm-3"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" class="btn btn-primary btn-embossed disabled">Submit</button>
                                <button type="reset" class="btn btn-default btn-embossed">Reset</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-layer {height:100%;min-height:150px;min-width:300px;}
    .form-body {
        width:100%;
        overflow:auto;
        top:0;
        position:absolute;
        z-index:10;
        bottom:50px;
        padding:15px;
    }
    .form-layer .form-footer {
        height:50px;
        line-height:50px;
        background-color: #ecf0f1;
        width:100%;
        position:absolute;
        z-index:200;
        bottom:0;
        margin:0;
    }
    .form-footer .form-group{
        margin-left:0;
        margin-right:0;
    }
</style>