попытка фикса чата, изменения стиля хедера и изменение цвета фона
This commit is contained in:
parent
e5e1383999
commit
5754c4fc68
2 changed files with 143 additions and 133 deletions
|
|
@ -1,142 +1,140 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import {UserCheck} from '$lib/userFunction';
|
import { UserCheck } from '$lib/userFunction';
|
||||||
|
|
||||||
let Nickname
|
let Nickname;
|
||||||
let userImage
|
let userImage;
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const UserData = await UserCheck();
|
const UserData = await UserCheck();
|
||||||
Nickname = UserData.username;
|
Nickname = UserData.username;
|
||||||
userImage = UserData.avatar_image;
|
userImage = UserData.avatar_image;
|
||||||
console.log(userImage)
|
|
||||||
})
|
});
|
||||||
|
|
||||||
let isOpen = false;
|
let isOpen = false;
|
||||||
let items1 = ['Профиль', 'Настройки'];
|
let items1 = ['Профиль', 'Настройки'];
|
||||||
let items2 = ['Выйти'];
|
let items2 = ['Выйти'];
|
||||||
</script>
|
</script>
|
||||||
<header class="headerClass">
|
|
||||||
|
|
||||||
<div class="divsiteAvatar">
|
<header class="headerClass">
|
||||||
<img class="siteAvatar" src="./BP-NEON.png" alt="лого">
|
<div class="divsiteAvatar">
|
||||||
<p class="siteAvatarBP">Black Phoenix</p>
|
<img class="siteAvatar" src="./BP-NEON.png" alt="лого" />
|
||||||
</div>
|
<p class="siteAvatarBP">Black Phoenix</p>
|
||||||
<div class="divUser">
|
</div>
|
||||||
<button class="buttonUser" on:click={() => isOpen = !isOpen}>
|
<div class="divUser">
|
||||||
<h3 class="name">{Nickname}</h3>
|
<button class="buttonUser" on:click={() => (isOpen = !isOpen)}>
|
||||||
<img class="userAvatar" src="{userImage}" alt="аватарка">
|
<h3 class="name">{Nickname}</h3>
|
||||||
</button>
|
<img class="userAvatar" src={userImage} alt="аватарка" />
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
{#if isOpen}
|
|
||||||
<div class="dropdown">
|
{#if isOpen}
|
||||||
{#each items1 as item (item)}
|
<div class="dropdown">
|
||||||
<div class="listItem">{item}</div>
|
{#each items1 as item (item)}
|
||||||
{/each}
|
<div class="listItem">{item}</div>
|
||||||
<div class="ListLine"></div>
|
{/each}
|
||||||
{#each items2 as item (item)}
|
<div class="ListLine"></div>
|
||||||
<div class="listItem">{item}</div>
|
{#each items2 as item (item)}
|
||||||
{/each}
|
<div class="listItem">{item}</div>
|
||||||
</div>
|
{/each}
|
||||||
{/if}
|
</div>
|
||||||
|
{/if}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.buttonUser {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.buttonUser{
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
width: 100%;
|
border: 0;
|
||||||
height: 100%;
|
|
||||||
border-radius: 0px;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
justify-content:space-around;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ListLine{
|
|
||||||
border: 1px solid lightgray;
|
|
||||||
margin-top: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 5vw;
|
|
||||||
top: 10vh;
|
|
||||||
width: 200px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.listItem {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
div,h3{
|
|
||||||
font-weight: 600;
|
|
||||||
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
|
||||||
}
|
|
||||||
.headerClass > * {
|
|
||||||
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.headerClass{
|
|
||||||
list-style: none;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 5vw 200px repeat(5, auto) 200px 5vw;
|
|
||||||
grid-template-rows: 9vh;
|
|
||||||
gap: 0;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.siteAvatar{
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.siteAvatarBP{
|
}
|
||||||
|
|
||||||
display: flex;
|
.ListLine {
|
||||||
align-items: center;
|
border: 1px solid lightgray;
|
||||||
font-size: 20px;
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.dropdown {
|
||||||
.name{
|
z-index: 3;
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
right: 5vw;
|
||||||
|
top: 10vh;
|
||||||
|
width: 200px;
|
||||||
|
|
||||||
}
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
.divsiteAvatar{
|
border: 0;
|
||||||
grid-column: 2;
|
border-radius: 10px;
|
||||||
display: flex;
|
|
||||||
justify-content:space-evenly;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
.divUser{
|
|
||||||
grid-column: 8;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content:space-around;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
}
|
|
||||||
.userAvatar{
|
|
||||||
justify-content: right;
|
|
||||||
width: 70px;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div,
|
||||||
|
h3 {
|
||||||
|
font-weight: 600;
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
||||||
|
}
|
||||||
|
.headerClass > * {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.headerClass {
|
||||||
|
list-style: none;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 5vw 200px repeat(5, auto) 200px 5vw;
|
||||||
|
grid-template-rows: 9vh;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
.siteAvatar {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
</style>
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.siteAvatarBP {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divsiteAvatar {
|
||||||
|
grid-column: 2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
.divUser {
|
||||||
|
grid-column: 8;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.userAvatar {
|
||||||
|
justify-content: right;
|
||||||
|
width: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -96,7 +96,7 @@
|
||||||
<form class="chatSend" on:submit={sendMessage}>
|
<form class="chatSend" on:submit={sendMessage}>
|
||||||
<textarea
|
<textarea
|
||||||
class="chatInput"
|
class="chatInput"
|
||||||
placeholder="Введите сообщение"
|
placeholder="Введите сообщение"
|
||||||
maxlength="2000"
|
maxlength="2000"
|
||||||
rows="3"
|
rows="3"
|
||||||
bind:this={textarea}
|
bind:this={textarea}
|
||||||
|
|
@ -143,8 +143,13 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.MsgMsg{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.MsgName {
|
.MsgName {
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.MsgPic {
|
.MsgPic {
|
||||||
|
|
@ -166,8 +171,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.MsgAll {
|
.MsgAll {
|
||||||
display: flex;
|
display:flex;
|
||||||
flex: 90;
|
flex-direction: row;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.divMessage {
|
.divMessage {
|
||||||
|
|
@ -175,9 +181,11 @@
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
|
||||||
|
|
||||||
|
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
transform: translate(90deg);
|
overflow-wrap: break-word;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatBox {
|
.chatBox {
|
||||||
|
|
@ -186,14 +194,15 @@
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-x:hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
|
||||||
/* From https://css.glass */
|
/* From https://css.glass */
|
||||||
background-color: rgba(255, 255, 255, 0.2);
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5);
|
box-shadow: 0 -4px 30px rgb(0, 0, 0, 0.5);
|
||||||
|
|
||||||
backdrop-filter: blur(7px);
|
backdrop-filter: blur(7px);
|
||||||
|
|
@ -205,6 +214,7 @@
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatSend {
|
.chatSend {
|
||||||
|
|
@ -219,6 +229,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatInput {
|
.chatInput {
|
||||||
|
|
||||||
outline: none;
|
outline: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
resize: none;
|
resize: none;
|
||||||
|
|
@ -233,6 +244,7 @@
|
||||||
.divChat {
|
.divChat {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
@ -253,7 +265,7 @@
|
||||||
grid-column: span 3;
|
grid-column: span 3;
|
||||||
grid-row: span 3;
|
grid-row: span 3;
|
||||||
|
|
||||||
background-color: #563e89;
|
background-color: #7a5abd;
|
||||||
background-image: url(./BPytka.png);
|
background-image: url(./BPytka.png);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 50vh;
|
background-size: 50vh;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue