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