yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 04:09:29 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactoring profile-mobile page

Browse Source
This commit is contained in:
Kostya
2023-12-26 21:43:45 +03:00
parent aa72ee65d1
commit 8df8b22265
2 changed files with 10 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
luckydiamond/src/assets/css/PagesStyles/adaptive-pages/profilemobile.css
View File

@@ -6,37 +6,18 @@ body {
height: 70%;
}
.content-grid__mobile-profile {
display: grid;
grid-auto-columns: 1fr;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-template-areas:
"header-mobile header-mobile header-mobile header-mobile"
"profile-mobile profile-mobile profile-mobile profile-mobile"
"profile-mobile profile-mobile profile-mobile profile-mobile"
"footer-mobile footer-mobile footer-mobile footer-mobile";
height: 100%;
width: 100%;
}
.profile-mobile {
grid-area: profile-mobile;
width: 100%;
height: 100%;
}
.profile-mobile__content {
display: flex;
}
.profile-mobile__btns-payments {
display: flex;
flex-direction: column;
}
.profile-mobile__btns-payments a {
display: flex;
color: #17181C;
border-radius: 10px;
font-family: Montserrat Alternates;
@@ -44,12 +25,12 @@ body {
font-weight: 700;
text-decoration: none;
padding: 20px 20px;
margin: 0 0 5px 0
margin: 0 0 2% 0
}
.profile-mobile__btns-payments .deposit-button {
background: #62D4B2;
margin-top: 10px;
margin-top: 4%;
}
.withdraw-button {
@@ -62,12 +43,13 @@ body {
}
.macroinfo-profile {
margin: 15px 0 0 20px;
margin: 5% 10% 0 10%;
text-align: center;
}
.macroinfo-profile img {
width: 197px;
height: 197px;
width: 45%;
height: 100%;
}
.img-margin img {
@@ -78,12 +60,11 @@ body {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
font-family: Montserrat Alternates;
font-size: 33px;
line-height: 31px;
}
.info-profile {
/*margin-left: 10%;*/
margin: 12% 0 0 10%;
margin: 6% 10% 0 10%;
text-align: center;
}
.info-profile .text-nickname-user {
@@ -99,6 +80,7 @@ body {
.info-profile .balance-display {
display: flex;
justify-content: center;
align-items: center;
}
@@ -106,83 +88,3 @@ body {
font-family: Montserrat Alternates;
font-size: 28px;
}
.payments-types__mobile {
display: flex;
justify-content: space-between;
align-items: center;
}
.types-text__mobile h3 {
color: #ABABB4;
font-weight: 600;
font-family: Montserrat;
font-size: 14px;
}
.types-start__margin-mobile {
margin-left: 42px;
}
.types-margin__mobile h3 {
margin-right: 80px;
}
.types-line__mobile {
margin: 20px 0 0 20px;
background: #38383E;
width: 93%;
height: 3px;
}
.user-info {
margin: 0 20px;
}
.user-name {
margin-right: 40px;
}
.user-name__text h3 {
font-size: 16px !important;
}
.data-info {
margin-right: 50px;
}
.data-info__text h3 {
font-size: 14px !important;
}
.transaction-info__text h3 {
font-size: 15px !important;
}
.payments-card__mobile {
display: flex;
}
.payments-card__mobile {
display: flex;
}
/* Media */
@media screen and (max-device-width: 415px) {
.header-mobile {
height: 45%;
}
.profile-mobile__content {
margin-top: -25%;
flex-direction: column;
text-align: center;
align-items: center;
}
.macroinfo-profile {
margin: 0;
}
.info-profile {
margin: 0;
}
}

33
luckydiamond/src/pages/adaptive-pages/ProfilemobilePage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="content-grid__mobile-profile">
<div class="content-mobile__profile">
<header-mobile-component></header-mobile-component>
<main class="profile-mobile">
@@ -18,37 +18,6 @@
</div>
</div>
</main>
<section class="payments-mobile">
<div class="payments-mobile__content_">
<div class="payments-types__mobile types-margin__mobile types-text__mobile">
<h3 class="types-start__margin-mobile">Вид транзакции</h3>
<h3>Дата</h3>
<h3>Сумма</h3>
</div>
<div class="types-line__mobile"></div>
<div class="payments-history__mobile">
<div class="payments-card__mobile">
<div class="user-info">
<img src="@/assets/icons-test/person-icon-profile-userinfo.png">
<div class="user-name user-name__text">
<h3>Artemka</h3>
<h3>test</h3>
</div>
</div>
<div class="payments-data">
<div class="data-info data-info__text">
<h3>5ч назад</h3>
</div>
<div class="transaction-info transaction-info__text">
<h3>99 АР</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<menu-mobile-component></menu-mobile-component>
</div>