FromChat/web
1
0
Fork 0
mirror of https://github.com/fromchat-messenger/web.git synced 2026-09-22 19:15:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Start the profile improvement

Browse Source
This commit is contained in:
denis0001-dev
2025-08-22 13:19:14 +03:00
Unverified
parent f89e159272
commit a47d48318f
4 changed files with 40 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+5 -24
View File
@@ -193,31 +193,12 @@
</div>
<mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
<div class="name-and-img">
<div id="icon-profile">
<img id="preview" src="./src/images/default-avatar.png" alt="Ваше фото" />
<button id="uploadButton">Выбрать фото</button>
<input type="file" id="fileInput" accept="image/*" />
</div>
<div class="name-and-discription">
<div class="name">
<div id="name-title">
<p id="text-nik">Ваш ник</p>
<input type="text" id="nik" style="display: none;" />
</div>
<div id="change-name">
<img src="./src/images/pesel.svg" alt="" />
</div>
</div>
<div class="discription">
<div id="discription-title">
<p id="text-discr">Ваше описание</p>
<input type="text" id="discr" style="display: none;" />
</div>
<div id="change-discription">
<img src="./src/images/pesel.svg" alt="">
</div>
<div class="header-top">
<div class="left">
<img id="profile-picture" src="./src/images/default-avatar.png" alt="Ваше фото" />
</div>
<div class="right">
<div id="profile-username">Loading...</div>
</div>
</div>
frontend/src/css/_prifole.scss
-104
View File
@@ -1,104 +0,0 @@
@use "common/colors" as *;
@use "common/material" as *;
.name-and-img{
display: flex;
flex-direction: row;
gap: 20px;
#icon-profile{
display: flex;
flex-direction: column;
justify-content: center;
#preview {
width: 200px;
height: auto;
display: flex;
img{
width: 96px;
height: 95px;
}
}
#uploadButton {
background-color: rgba(0,0,0,0.5);
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
opacity: 0.8;
}
#uploadButton:hover {
opacity: 1;
}
/* скрываем чекбокс, чтобы он был только триггером */
#fileInput {
display: none;
}
}
.name-and-discription{
display: flex;
flex-direction: column;
gap: 0;
.name{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
#name-title{
display: flex;
margin: 0;
#text-nik{
display: flex;
}
p{
display: flex;
color: $color-dark-surface;
align-items: center;
font-size: 24px;
}
}
#change-name{
display: flex;
align-items: center;
cursor: pointer;
img{
align-items: center;
width: 30px;
height: 30px;
}
}
}
.discription{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
#discription-title{
display: flex;
margin: 0;
p{
display: flex;
color: $color-dark-surface;
align-items: center;
font-size: 18px;
}
}
#change-discription{
display: flex;
align-items: center;
cursor: pointer;
img{
align-items: center;
width: 30px;
height: 30px;
}
}
}
}
}
frontend/src/css/_profile.scss
+34
View File
@@ -0,0 +1,34 @@
@use "common/colors" as *;
@use "common/material" as *;
#profile-dialog {
.header-top {
display: flex;
flex-direction: row;
gap: 16px;
position: relative;
.left {
$size: 70px;
width: $size;
height: $size;
#profile-picture {
width: $size;
height: $size;
border-radius: 50%;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
#profile-username {
font-size: larger;
}
}
}
}
frontend/src/css/style.scss
+1 -1
View File
@@ -1,6 +1,6 @@
@use "auth";
@use "chat";
@use "prifole";
@use "profile";
@use "panelchat";
@use "common/animations";
@use "common/components";