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

Fix the new design

Browse Source
This commit is contained in:
denis0001-dev
2025-08-20 19:27:11 +03:00
Unverified
parent db16e82fe3
commit e6e71adbf1
3 changed files with 83 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+26 -11
View File
@@ -76,24 +76,39 @@
<!-- Chat Interface --> <!-- Chat Interface -->
<div id="chat-interface" style="display: none;"> <div id="chat-interface" style="display: none;">
<div class="all-conteiner"> <div class="all-container">
<div class="chat-list" id="chat-list"> <div class="chat-list" id="chat-list">
<header class="chat-sitting"> <header class="chat-header-left">
<div id="productname">Loading...</div> <div id="productname">Loading...</div>
<div class="profile"> <div class="profile">
<a href="#"><img src="./src/images/default-avatar.png" alt=""></a> <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
</div> </div>
</header> </header>
<div class="chat-sortirovka"><nav><ul> <div class="chat-tabs">
<li>чаты</li> <nav>
<li>каналы</li> <ul>
<li>контакты</li> <li>Чаты</li>
</ul></nav></div> <li>Каналы</li>
<div class="chats-chanel-kontarti"> <li>Контакты</li>
<a href="#" id="chat1but"><img src="./src/images/default-avatar.png" alt=""> Общий чат</a> </ul>
<a href="#" id="chat1but2"><img src="./src/images/default-avatar.png" alt="">Общий чат 2</a> </nav>
</div>
<div class="chats">
<a href="#" id="chat1but">
<img src="./src/images/default-avatar.png" alt="">
Общий чат
</a>
<a href="#" id="chat1but2">
<img src="./src/images/default-avatar.png" alt="">
Общий чат 2
</a>
</div>
<div class="ponel">
<a href="#">+чат</a>
<a href="#">+канал</a>
<a href="#">Выйти</a>
</div> </div>
<div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
<footer></footer> <footer></footer>
</div> </div>
<div class="chat-container"> <div class="chat-container">
frontend/src/css/_chat.scss
-1
View File
@@ -60,7 +60,6 @@
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
.chat-main { .chat-main {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
frontend/src/css/_panelchat.scss
+57 -45
View File
@@ -1,13 +1,16 @@
@use "common/colors" as *; @use "common/colors" as *;
@use "common/material" as *; @use "common/material" as *;
// контейнер чата и панели с чатами // контейнер чата и панели с чатами
.all-conteiner{ .all-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
} }
#chat-list{
#chat-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 0; flex-grow: 0;
@@ -15,47 +18,52 @@
background-color: $color-dark-surface-container; background-color: $color-dark-surface-container;
height: 100%; height: 100%;
z-index: 1000; z-index: 1000;
border-right: solid 2px black;
.chat-sitting{ .chat-header-left {
display: flex; display: flex;
color: white; color: white;
font-size: 42px; font-size: 25px;
font-weight: bolder;
background-color: $color-dark-surface-container; background-color: $color-dark-surface-container;
width: 100%; width: 100%;
justify-content: center; justify-content: center;
height: 85px;
border-block-end: solid 2px black;
gap: 110px; gap: 110px;
align-items: center; align-items: center;
padding: 16px;
.profile{ .profile {
font-size: 24px; font-size: 24px;
display: flex; display: flex;
justify-content: start; justify-content: start;
a{
a {
display: flex; display: flex;
color: $color-dark-surface; color: $color-dark-surface;
text-decoration: none; text-decoration: none;
width: 100%; width: 100%;
&:hover{
&:hover {
font-size: 26px; font-size: 26px;
} }
} }
img{
img {
$size: 45px;
display: flex; display: flex;
border-radius: 100px; border-radius: 50%;
width: 56px; width: $size;
height: 56px; height: $size;
} }
} }
} }
.chats-chanel-kontarti{
.chats {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
margin-top: 5px; margin-top: 5px;
a{
a {
display: flex; display: flex;
text-decoration: none; text-decoration: none;
padding: 10px; padding: 10px;
@@ -68,42 +76,46 @@
font-weight: 20px; font-weight: 20px;
border-radius: 20px; border-radius: 20px;
align-items: center; align-items: center;
img{
width: 45px; img {
height: 45px; width: 45px;
border-radius: 20%; height: 45px;
object-fit: cover; border-radius: 20%;
margin-right: 1rem; object-fit: cover;
} margin-right: 1rem;
}
} }
} }
.chat-sortirovka{
.chat-tabs {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 24px; font-size: 24px;
justify-content: center; justify-content: center;
color: white; color: white;
ul{
display: flex;
flex-direction: row;
gap: 5px;
}
li{
display: flex;
flex-direction: row;
}
}
}
.ponel{ ul {
display: flex; display: flex;
position: fixed; flex-direction: row;
top: 95%; gap: 5px;
left: 2%; }
gap: 10px;
a{ li {
text-decoration: none; display: flex;
color: $color-dark-surface; flex-direction: row;
} }
} }
}
.ponel {
display: flex;
position: fixed;
top: 95%;
left: 2%;
gap: 10px;
a {
text-decoration: none;
color: $color-dark-surface;
}
}