Merge pull request #686 from openclassify/muammer

user profile design pyro'ya aktarılması
This commit is contained in:
Dia Shalabi 2020-10-01 11:06:30 +03:00 committed by GitHub
commit e19a19bec6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 262 additions and 111 deletions

View File

@ -1,5 +1,117 @@
.profile-section .nav-link.active {
background-color: #343a40 !important;
border-color: #343a40 #343a40 #343a40;
color: white!important;
.profile-section {
.nav-tabs {
border-bottom: 1px solid #dee2e6;
padding-bottom: 10px;
}
.nav-link {
border: none;
border-radius: 0;
font-size: 16px;
color: #BCBDC3;
padding: 0;
margin-bottom: 5px;
margin-top: 15px;
outline: none;
&.active {
font-size: 17px;
font-weight: bold;
color: #505050;
background-color: transparent;
svg path {
fill: rgba(#000, 1);
}
}
&:not(:last-child) {
border-right: 1px solid #dee2e6;
}
svg {
margin-right: 5px;
width: 15px;
path {
fill: rgba(#000, .4);
}
}
}
}
.tab-content {
color: #707070;
#nav-profile {
.username {
font-size: 19px;
font-weight: 600;
@media (max-width: 992px) {
justify-content: center;
}
}
.last-login {
font-weight: 400;
@media (max-width: 992px) {
justify-content: center;
}
}
img {
width: 165px;
height: 130px;
object-fit: cover;
border-radius: 20px;
@media (max-width: 992px) {
display: flex;
justify-content: center;
}
}
.profile--form--area {
display: flex;
justify-content: space-between;
@media (max-width: 992px) {
display: block;
}
.form-group {
width: 100%;
&:not(:last-child) {
margin-right: 10px;
}
input {
border-radius: 4px;
font-size: 13px;
border: 1px solid #E5E5E5;
@media (max-width: 992px) {
width: 100%;
}
}
}
}
.account--disable--content {
width: 80%;
height: 58px;
background-color: #f3f5f6;
border-radius: 20px;
margin-top: 50px;
padding: 10px;
font-size: .7em;
@media (max-width: 992px) {
width: 100%;
height: auto;
}
button {
font-size: 14px;
height: 34px;
}
}
}
}

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.372" height="19.384" viewBox="0 0 17.372 19.384">
<path id="Path_6076" data-name="Path 6076" d="M6892.426,1441.155a.756.756,0,0,1-.183-.749l.905-2.98a.76.76,0,0,1,.189-.316l4.157-4.148a2.272,2.272,0,0,1,3.212,3.213l-4.148,4.14a.752.752,0,0,1-.333.194l-3.056.847a.756.756,0,0,1-.744-.2Zm2.116-3.107-.449,1.481,1.537-.426,2.789-2.783-1.071-1.071Zm4.023-4.014-.146.146,1.071,1.071.146-.146a.757.757,0,0,0-1.071-1.071Zm-11.537,7.35a3.033,3.033,0,0,1-3.029-3.028v-13.326a3.033,3.033,0,0,1,3.029-3.029h9.31a3.032,3.032,0,0,1,3.028,3.029v4.657a.757.757,0,0,1-1.515,0v-4.657a1.516,1.516,0,0,0-1.514-1.515h-9.31a1.517,1.517,0,0,0-1.515,1.515v13.326a1.516,1.516,0,0,0,1.515,1.514h2.532a.757.757,0,0,1,0,1.514Zm.753-7.269a.757.757,0,0,1,0-1.514h4.736a.757.757,0,0,1,0,1.514Zm0-3.029a.757.757,0,0,1,0-1.515h7.8a.757.757,0,1,1,0,1.515Zm0-3.029a.757.757,0,0,1,0-1.514h7.8a.757.757,0,1,1,0,1.514Z" transform="translate(-6883.999 -1422)" fill="#505050"/>
</svg>

After

Width:  |  Height:  |  Size: 998 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.372" height="19.384" viewBox="0 0 17.372 19.384">
<path id="Path_6076" data-name="Path 6076" d="M6892.426,1441.155a.756.756,0,0,1-.183-.749l.905-2.98a.76.76,0,0,1,.189-.316l4.157-4.148a2.272,2.272,0,0,1,3.212,3.213l-4.148,4.14a.752.752,0,0,1-.333.194l-3.056.847a.756.756,0,0,1-.744-.2Zm2.116-3.107-.449,1.481,1.537-.426,2.789-2.783-1.071-1.071Zm4.023-4.014-.146.146,1.071,1.071.146-.146a.757.757,0,0,0-1.071-1.071Zm-11.537,7.35a3.033,3.033,0,0,1-3.029-3.028v-13.326a3.033,3.033,0,0,1,3.029-3.029h9.31a3.032,3.032,0,0,1,3.028,3.029v4.657a.757.757,0,0,1-1.515,0v-4.657a1.516,1.516,0,0,0-1.514-1.515h-9.31a1.517,1.517,0,0,0-1.515,1.515v13.326a1.516,1.516,0,0,0,1.515,1.514h2.532a.757.757,0,0,1,0,1.514Zm.753-7.269a.757.757,0,0,1,0-1.514h4.736a.757.757,0,0,1,0,1.514Zm0-3.029a.757.757,0,0,1,0-1.515h7.8a.757.757,0,1,1,0,1.515Zm0-3.029a.757.757,0,0,1,0-1.514h7.8a.757.757,0,1,1,0,1.514Z" transform="translate(-6883.999 -1422)" fill="#505050"/>
</svg>

After

Width:  |  Height:  |  Size: 998 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.974" height="19.397" viewBox="0 0 16.974 19.397">
<path id="Path_6075" data-name="Path 6075" d="M6887.03,1441.4a3.035,3.035,0,0,1-3.031-3.031v-6.213a3.035,3.035,0,0,1,3.031-3.031h.908v-2.672a4.547,4.547,0,0,1,9.092,0v2.672h.911a3.035,3.035,0,0,1,3.031,3.031v2.8a.758.758,0,0,1-1.516,0v-2.8a1.517,1.517,0,0,0-1.516-1.516H6887.03a1.517,1.517,0,0,0-1.516,1.516v6.213a1.517,1.517,0,0,0,1.516,1.515h10.911a1.517,1.517,0,0,0,1.516-1.515.758.758,0,0,1,1.516,0,3.035,3.035,0,0,1-3.031,3.031Zm2.424-14.947v2.672h6.062v-2.672a3.032,3.032,0,0,0-6.062,0Zm6.538,8.671a.784.784,0,1,1,.784.785A.784.784,0,0,1,6895.992,1435.121Zm-2.915,0a.785.785,0,1,1,.785.785A.785.785,0,0,1,6893.077,1435.121Zm-2.689,0a.731.731,0,1,1,.729.785A.758.758,0,0,1,6890.388,1435.121Zm-2.914,0a.785.785,0,1,1,.785.785A.785.785,0,0,1,6887.474,1435.121Z" transform="translate(-6883.999 -1422)" fill="#505050"/>
</svg>

After

Width:  |  Height:  |  Size: 930 B

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.974" height="19.397" viewBox="0 0 16.974 19.397">
<path id="Path_6075" data-name="Path 6075" d="M6887.03,1441.4a3.035,3.035,0,0,1-3.031-3.031v-6.213a3.035,3.035,0,0,1,3.031-3.031h.908v-2.672a4.547,4.547,0,0,1,9.092,0v2.672h.911a3.035,3.035,0,0,1,3.031,3.031v2.8a.758.758,0,0,1-1.516,0v-2.8a1.517,1.517,0,0,0-1.516-1.516H6887.03a1.517,1.517,0,0,0-1.516,1.516v6.213a1.517,1.517,0,0,0,1.516,1.515h10.911a1.517,1.517,0,0,0,1.516-1.515.758.758,0,0,1,1.516,0,3.035,3.035,0,0,1-3.031,3.031Zm2.424-14.947v2.672h6.062v-2.672a3.032,3.032,0,0,0-6.062,0Zm6.538,8.671a.784.784,0,1,1,.784.785A.784.784,0,0,1,6895.992,1435.121Zm-2.915,0a.785.785,0,1,1,.785.785A.785.785,0,0,1,6893.077,1435.121Zm-2.689,0a.731.731,0,1,1,.729.785A.758.758,0,0,1,6890.388,1435.121Zm-2.914,0a.785.785,0,1,1,.785.785A.785.785,0,0,1,6887.474,1435.121Z" transform="translate(-6883.999 -1422)" fill="#505050"/>
</svg>

After

Width:  |  Height:  |  Size: 930 B

View File

@ -0,0 +1,5 @@
<svg id="social" xmlns="http://www.w3.org/2000/svg" width="19.395" height="19.395" viewBox="0 0 19.395 19.395">
<g id="Group_2839" data-name="Group 2839" transform="translate(0)">
<path id="Path_4053" data-name="Path 4053" d="M19.346,16.619a.758.758,0,0,0-1.483.309.792.792,0,0,1-.16.664.77.77,0,0,1-.606.288H2.3a.77.77,0,0,1-.606-.288.791.791,0,0,1-.16-.664A8.371,8.371,0,0,1,9.5,10.3q.1,0,.2,0t.2,0A8.334,8.334,0,0,1,16.63,14a.758.758,0,1,0,1.259-.844,9.855,9.855,0,0,0-5.106-3.88,5.152,5.152,0,1,0-6.167,0A9.854,9.854,0,0,0,.05,16.619,2.3,2.3,0,0,0,2.3,19.395H17.1a2.3,2.3,0,0,0,2.25-2.776ZM6.061,5.152A3.637,3.637,0,1,1,9.882,8.784l-.184,0-.183,0A3.641,3.641,0,0,1,6.061,5.152Z" transform="translate(0)" fill="#505050"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 745 B

View File

@ -0,0 +1,5 @@
<svg id="social" xmlns="http://www.w3.org/2000/svg" width="19.395" height="19.395" viewBox="0 0 19.395 19.395">
<g id="Group_2839" data-name="Group 2839" transform="translate(0)">
<path id="Path_4053" data-name="Path 4053" d="M19.346,16.619a.758.758,0,0,0-1.483.309.792.792,0,0,1-.16.664.77.77,0,0,1-.606.288H2.3a.77.77,0,0,1-.606-.288.791.791,0,0,1-.16-.664A8.371,8.371,0,0,1,9.5,10.3q.1,0,.2,0t.2,0A8.334,8.334,0,0,1,16.63,14a.758.758,0,1,0,1.259-.844,9.855,9.855,0,0,0-5.106-3.88,5.152,5.152,0,1,0-6.167,0A9.854,9.854,0,0,0,.05,16.619,2.3,2.3,0,0,0,2.3,19.395H17.1a2.3,2.3,0,0,0,2.25-2.776ZM6.061,5.152A3.637,3.637,0,1,1,9.882,8.784l-.184,0-.183,0A3.641,3.641,0,0,1,6.061,5.152Z" transform="translate(0)" fill="#505050"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 745 B

View File

@ -1,5 +1,11 @@
{% extends "theme::layouts/default" %}
{% block styles %}
<style>
{{ asset_inline("visiosoft.module.profile::assets/css/profile.scss") }}
</style>
{% endblock %}
{% block content %}
{% embed 'visiosoft.module.profile::profile/index' %}
{% block detail %}
@ -12,45 +18,26 @@
<div class="row px-3">
<!-- User Profile Detail Section-->
<div class="col-md-12 bg-dark">
<div class="row">
<div class="col-md-4 p-5">
<div class="row">
{% if setting_value('visiosoft.module.profile::upload_avatar') %}
<div class="col-md-12 text-center align-middle">
<img src="{{ profile_photo }}" class="img-responsive w-100"
style="max-width: 150px">
</div>
{% endif %}
<div class="col-md-12 text-center align-middle text-white p-2 text-truncate">
<h3>{{ user.name }}</h3>
<small>{{ auth_user().last_login_at|date("d/m/Y H:i:s") }}</small>
</div>
</div>
</div>
</div>
</div>
<!-- User Profile Detail Section-->
<!-- User Profile Form Section-->
<div class="col-md-12 mt-5 bg-light profile-section pb-4">
<div class="col-md-12 bg-light profile-section pb-4">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active text-dark" id="nav-profile-tab" data-toggle="tab"
<a class="nav-item nav-link active text-dark d-flex justify-content-center align-items-center" id="nav-profile-tab" data-toggle="tab"
href="#nav-profile"
role="tab" aria-controls="nav-profile" aria-selected="true">
{{ img('visiosoft.module.profile::images/profile2.svg').data|raw }}
{{ trans('visiosoft.module.profile::field.profile.name') }}
</a>
<a class="nav-item nav-link text-dark" id="nav-details-tab" data-toggle="tab"
<a class="nav-item nav-link text-dark d-flex justify-content-center align-items-center" id="nav-details-tab" data-toggle="tab"
href="#nav-details"
role="tab" aria-controls="nav-details" aria-selected="false">
{{ img('visiosoft.module.profile::images/detail2.svg').data|raw }}
{{ trans('visiosoft.module.profile::field.details.name') }}
</a>
<a class="nav-item nav-link text-dark" id="nav-password-tab" data-toggle="tab"
<a class="nav-item nav-link text-dark d-flex justify-content-center align-items-center" id="nav-password-tab" data-toggle="tab"
href="#nav-password"
role="tab" aria-controls="nav-password" aria-selected="false">
{{ img('visiosoft.module.profile::images/password2.svg').data|raw }}
{{ trans('visiosoft.module.profile::field.password.name') }}
</a>
{{ addBlock('profile/detail/content-tab')|raw }}
@ -63,103 +50,130 @@
<div>
{% set userForm = form('userProfile').entry(user.id).get() %}
{{ userForm.open()|raw }}
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.first_name.name") }}
</label>
{{ userForm.fields.first_name.input|raw }}
<div class="mt-4 d-flex profile--desc flex-column flex-lg-row text-lg-center">
<div class="d-flex d-sm-block m-auto m-sm-0 mr-sm-3">
<img src="{{ profile_photo }}">
</div>
<div class="pt-2 d-flex flex-column flex-sm-row d-sm-block m-auto m-sm-0">
<p class="mb-1 username">{{ user.name }}</p>
<p class="mb-1 last-login d-flex d-sm-block m-auto m-sm-0">{{ auth_user().last_login_at|date("d.m.Y - H:i") }}</p>
</div>
</div>
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.last_name.name") }}
</label>
{{ userForm.fields.last_name.input|raw }}
</div>
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.email.name") }}
</label>
{{ userForm.fields.email.input|raw }}
</div>
<div class="form-group">
{{ userForm.actions|raw }}
</div>
{{ userForm.close()|raw }}
<div class="d-flex align-items-center justify-content-between flex-wrap">
<label class="text-muted">
{{ trans('visiosoft.module.profile::message.disable_account') }}
</label>
<button type="button" class="btn btn-danger"
onclick="window.location.href='/profile/closeAccount'">
{{ trans("visiosoft.module.profile::field.disable_account.name") }}
</button>
<div class="mt-4">
<div class="profile--form--area">
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.first_name.name") }}
</label>
{{ userForm.fields.first_name.input|raw }}
</div>
</div>
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.last_name.name") }}
</label>
{{ userForm.fields.last_name.input|raw }}
</div>
<div class="form-group">
<label class="control-label font-weight-bold">
{{ trans("visiosoft.module.profile::field.email.name") }}
</label>
{{ userForm.fields.email.input|raw }}
</div>
</div>
<div class="form-group text-right">
{{ userForm.actions|raw }}
</div>
<div class="account--disable--content d-flex align-item-center justify-content-center mx-auto">
<div class="d-flex justify-content-center align-items-center">
<p class="mb-0 mr-4">
{{ trans('visiosoft.module.profile::message.disable_account') }}
</p>
<a href="{{ url_route("visiosoft.module.profile::profile_close_account") }}" class="btn btn-danger text-white">
{{ trans("visiosoft.module.profile::field.disable_account.name") }}
</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-details" role="tabpanel"
aria-labelledby="nav-details-tab">
<div class="col-12">
{% set profileForm = form('profile').entry(user.id).get() %}
{{ profileForm.open()|raw }}
{% if setting_value('visiosoft.module.profile::upload_avatar') %}
<div class="form-group">
{{ profileForm.fields.file|raw }}
{% set profileForm = form('profile').entry(user.id).get() %}
{{ profileForm.open()|raw }}
<div class="row">
<div class="col-md-12">
{% if setting_value('visiosoft.module.profile::upload_avatar') %}
<div class="form-group">
{{ profileForm.fields.file|raw }}
</div>
{% endif %}
</div>
<div class="col-md-6">
<div class=" form-group">
<label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.identification_number.name") }}</label>
{{ profileForm.fields.identification_number.input|raw }}
</div>
</div>
<div class="col-md-6">
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.gsm_phone.label }}
</label>
{{ profileForm.fields.gsm_phone.input|raw }}
</div>
</div>
<div class="col-md-6">
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.office_phone.label }}
</label>
{{ profileForm.fields.office_phone.input|raw }}
</div>
</div>
<div class="col-md-6">
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.land_phone.label }}
</label>
{{ profileForm.fields.land_phone.input|raw }}
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.register_type.name") }}</label>
{{ profileForm.fields.register_type.input|raw }}
</div>
</div>
<div class="col-md-12 text-right">
<div class="form-group">
{{ profileForm.actions|raw }}
</div>
{% endif %}
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.gsm_phone.label }}
</label>
{{ profileForm.fields.gsm_phone.input|raw }}
</div>
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.office_phone.label }}
</label>
{{ profileForm.fields.office_phone.input|raw }}
</div>
<div class="form-group required-profile-phone-field">
<label class="control-label font-weight-bold">
{{ profileForm.fields.land_phone.label }}
</label>
{{ profileForm.fields.land_phone.input|raw }}
</div>
<div class=" form-group">
<label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.identification_number.name") }}</label>
{{ profileForm.fields.identification_number.input|raw }}
</div>
<div class="form-group">
<label class="control-label font-weight-bold">{{ trans("visiosoft.module.profile::field.register_type.name") }}</label>
{{ profileForm.fields.register_type.input|raw }}
</div>
<div class="form-group">
{{ profileForm.actions|raw }}
</div>
{{ profileForm.close()|raw }}
</div>
{{ profileForm.close()|raw }}
</div>
<div class="tab-pane fade" id="nav-password" role="tabpanel" aria-labelledby="nav-password-tab">
{% set passwordForm = form('updatePassword').get() %}
{{ passwordForm.open()|raw }}
<div class="form-group">
<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.new_password.name") }}</label>
{{ passwordForm.fields.new_password.input|raw }}
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.new_password.name") }}</label>
{{ passwordForm.fields.new_password.input|raw }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.re_new_password.name") }}</label>
{{ passwordForm.fields.re_new_password.input|raw }}
</div>
</div>
</div>
<div class="form-group">
<label class="font-weight-bold">{{ trans("visiosoft.module.profile::field.re_new_password.name") }}</label>
{{ passwordForm.fields.re_new_password.input|raw }}
</div>
<div class="form-group">
<div class="form-group text-right">
{{ passwordForm.actions|raw }}
</div>
</div>

View File

@ -94,7 +94,10 @@ class ProfileModuleServiceProvider extends AddonServiceProvider
'profile/class/status/{id},{type}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@statusAds',
'profile/class/extendTime/{id},{type}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@extendAds',
'profile/message/show/{id}' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@showMessage',
'profile/closeAccount' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@disableAccount',
'profile/close-account' => [
'as' => 'visiosoft.module.profile::profile_close_account',
'uses' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@disableAccount'
],
'profile/notification' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@notification',
'ajax/update-user-info' => 'Visiosoft\ProfileModule\Http\Controller\MyProfileController@updateAjaxProfile',