user profile design pyro'ya aktarılması edited

This commit is contained in:
Muammer Top 2020-10-01 10:51:26 +03:00
parent 34a74eca8f
commit b12d988206
2 changed files with 59 additions and 46 deletions

View File

@ -3,6 +3,7 @@
border-bottom: 1px solid #dee2e6;
padding-bottom: 10px;
}
.nav-link {
border: none;
border-radius: 0;
@ -10,61 +11,90 @@
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;
}
img {
opacity: .5;
svg {
margin-right: 5px;
width: 15px;
}
}
.nav-link.active {
font-size: 17px;
font-weight: bold;
color: #505050;
img {
opacity: 1;
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) {
display: block;
& input {
width: 100%;
@media (max-width: 992px) {
width: 100%;
}
}
}
}
.account--disable--content {
width: 80%;
height: 58px;
@ -77,28 +107,11 @@
width: 100%;
height: auto;
}
button {
button {
font-size: 14px;
height: 34px;
}
}
@media (max-width: 992px) {
.profile--desc {
flex-direction: column;
text-align: center;
& > div {
margin-left: 0 !important;
}
}
img {
height: auto;
margin: auto;
}
button {
width: 100%;
}
}
}
}

View File

@ -22,22 +22,22 @@
<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 src="{{ img('visiosoft.module.profile::images/profile2.svg').url }}" alt="">
{{ 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 src="{{ img('visiosoft.module.profile::images/detail2.svg').url }}" alt="">
{{ 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 src="{{ img('visiosoft.module.profile::images/password2.svg').url }}" alt="">
{{ img('visiosoft.module.profile::images/password2.svg').data|raw }}
{{ trans('visiosoft.module.profile::field.password.name') }}
</a>
{{ addBlock('profile/detail/content-tab')|raw }}
@ -50,13 +50,13 @@
<div>
{% set userForm = form('userProfile').entry(user.id).get() %}
{{ userForm.open()|raw }}
<div class="mt-4 d-flex profile--desc">
<div class="ml-4">
<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="ml-3 pt-2">
<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">{{ auth_user().last_login_at|date("d.m.Y - H:i") }}</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="mt-4">