user profile design pyro'ya aktarılması edited

addons/default/visiosoft/profile-module/resources/assets/css/profile.scss

@@ -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;
-		}
+
-	}
+			path {
-	.nav-link.active {
+				fill: rgba(#000, .4);
-		font-size: 17px;
+			}
-		font-weight: bold;
-		color: #505050;
-		img {
-			opacity: 1;
 		}
 	}
 }
+
 .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%;
-			@media (max-width: 992px) {
+					}
-				display: block;
-				& input {
-					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%;
-			}
-		}
 	}
 }

addons/default/visiosoft/profile-module/resources/views/profile/detail.twig

@@ -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="mt-4 d-flex profile--desc flex-column flex-lg-row text-lg-center">
-                                    <div class="ml-4">
+                                    <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">