forked from noxious/client
NQ-74 Styling updates and fixes GUI
This commit is contained in:
parent
9022c104da
commit
12445db7f1
@ -1 +1 @@
|
||||
<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: rgb(69, 69, 69); fill-opacity: 1;"/></g></g></g></svg>
|
||||
<svg width="48" xmlns="http://www.w3.org/2000/svg" height="48" id="screenshot-e9346f42-72c8-800c-8004-507b356b7f18" viewBox="0 0 48 48" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f18" width="1em" height="1em" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1b"><defs style="fill: rgb(0, 0, 0);"/></g><g id="shape-e9346f42-72c8-800c-8004-507b356b7f1c"><defs><mask width="1.2" height="1.2" x="-0.1" id="render-3-ipSEnterKey0" data-old-y="-0.1" data-old-width="1.2" data-old-x="-0.1" y="-0.1" data-old-height="1.2"><g class="svg-mask-wrapper" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path fill="#fff" stroke="#fff" d="M44 44V4H24v16H4v24z"/><path stroke="#000" d="m21 28l-4 4l4 4"/><path stroke="#000" d="M34 23v9H17"/></g></g></mask></defs><g class="fills" id="fills-e9346f42-72c8-800c-8004-507b356b7f1c"><path d="M0.000,0.000L48.000,0.000L48.000,48.000L0.000,48.000ZZ" mask="url(#render-3-ipSEnterKey0)" style="fill: #696969; fill-opacity: 1;"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -1 +0,0 @@
|
||||
<svg width="278.367" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="0.987 0 278.367 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M0.987,12.078C4.058,4.975,11.130,0.000,19.354,0.000L259.354,0.000C270.393,0.000,279.354,8.962,279.354,20.000L279.354,64.000C279.354,75.038,270.393,84.000,259.354,84.000L19.354,84.000C11.162,84.000,4.113,79.063,1.023,72.005C16.790,71.104,29.354,58.008,29.354,42.000C29.354,26.009,16.816,12.923,0.987,12.078Z" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 704 B |
1
public/assets/shapes/hud-image-shape-flipped.svg
Normal file
1
public/assets/shapes/hud-image-shape-flipped.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eb5ea5d2669" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eb5ea5d2669"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eb5ea5d2669"><path d="M286.515,78.278C282.911,83.543,276.856,87.000,270.000,87.000L20.000,87.000C8.962,87.000,0.000,78.038,0.000,67.000L0.000,20.000C0.000,8.962,8.962,0.000,20.000,0.000L270.000,0.000C276.834,0.000,282.872,3.435,286.480,8.671C268.843,10.411,255.000,25.352,255.000,43.500C255.000,61.610,268.784,76.525,286.515,78.278ZM290.000,20.000L290.000,67.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 726 B |
@ -1 +1 @@
|
||||
<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71b166124144" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71b166124144"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71b166124144"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></svg>
|
||||
<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e38d8c7f-bba0-801b-8004-7d6eeffceb00" viewBox="4058.354 6110 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d6eeffceb00"><path d="M4061.840,6118.722C4065.444,6113.457,4071.499,6110.000,4078.354,6110.000L4328.354,6110.000C4339.393,6110.000,4348.354,6118.962,4348.354,6130.000L4348.354,6177.000C4348.354,6188.038,4339.393,6197.000,4328.354,6197.000L4078.354,6197.000C4071.521,6197.000,4065.483,6193.565,4061.875,6188.329C4079.512,6186.589,4093.354,6171.648,4093.354,6153.500C4093.354,6135.390,4079.571,6120.475,4061.840,6118.722ZM4058.354,6177.000L4058.354,6130.000" style="fill: #fff; fill-opacity: 1;"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 716 B After Width: | Height: | Size: 829 B |
@ -1 +0,0 @@
|
||||
<svg width="278.355" xmlns="http://www.w3.org/2000/svg" height="84" id="screenshot-e38d8c7f-bba0-801b-8004-7d68f958e1ff" viewBox="4060.645 6208 278.355 84" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><g class="fills" id="fills-e38d8c7f-bba0-801b-8004-7d68f958e1ff"><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e38d8c7f-bba0-801b-8004-7d68f958e1ff" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0"/></clipPath><path d="M4060.645,6220.049C4063.723,6212.962,4070.786,6208.000,4079.000,6208.000L4319.000,6208.000C4330.038,6208.000,4339.000,6216.962,4339.000,6228.000L4339.000,6272.000C4339.000,6283.038,4330.038,6292.000,4319.000,6292.000L4079.000,6292.000C4070.807,6292.000,4063.759,6287.063,4060.669,6280.005C4076.870,6279.685,4090.000,6266.364,4090.000,6250.000C4090.000,6233.669,4076.923,6220.369,4060.645,6220.049Z" id="stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0" clip-path="url('#inner-stroke-render-1-e38d8c7f-bba0-801b-8004-7d68f958e1ff-0')"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.8 KiB |
@ -1 +1 @@
|
||||
<svg width="245" xmlns="http://www.w3.org/2000/svg" height="75" id="screenshot-2ec5776a-76a9-8039-8004-71aadb07368f" viewBox="0 0 245 75" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-2ec5776a-76a9-8039-8004-71aadb07368f"><g class="fills" id="fills-2ec5776a-76a9-8039-8004-71aadb07368f"><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" style="fill: rgb(127, 127, 127); fill-opacity: 0.5;"/></g><g id="strokes-2ec5776a-76a9-8039-8004-71aadb07368f" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0"/></clipPath><path d="M40.420,0.000L229.000,0.000C237.831,0.000,245.000,7.169,245.000,16.000L245.000,59.000C245.000,67.831,237.831,75.000,229.000,75.000L16.000,75.000C7.169,75.000,0.000,67.831,0.000,59.000L0.000,41.033C1.021,41.117,2.054,41.160,3.096,41.160C23.793,41.160,40.596,24.356,40.596,3.660C40.596,2.425,40.536,1.204,40.420,0.000Z" id="stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0" clip-path="url('#inner-stroke-render-1-2ec5776a-76a9-8039-8004-71aadb07368f-0')"/></g></g></g></svg>
|
||||
<svg width="290" xmlns="http://www.w3.org/2000/svg" height="87" id="screenshot-e9942e24-155b-8096-8004-7eaff9882cd6" viewBox="0 0 290 87" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-e9942e24-155b-8096-8004-7eaff9882cd6"><g class="fills" id="fills-e9942e24-155b-8096-8004-7eaff9882cd6"><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" style="fill: rgb(127, 127, 127); fill-opacity: 0.7;"/></g><g id="strokes-e9942e24-155b-8096-8004-7eaff9882cd6" class="strokes"><g class="inner-stroke-shape"><defs><clipPath id="inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0"/></clipPath><path d="M3.485,8.722C7.089,3.457,13.144,0.000,20.000,0.000L270.000,0.000C281.038,0.000,290.000,8.962,290.000,20.000L290.000,67.000C290.000,78.038,281.038,87.000,270.000,87.000L20.000,87.000C13.166,87.000,7.128,83.565,3.520,78.329C21.157,76.589,35.000,61.648,35.000,43.500C35.000,25.390,21.216,10.475,3.485,8.722ZM0.000,67.000L0.000,20.000" id="stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" style="fill: none; stroke-width: 6; stroke: rgb(255, 255, 255); stroke-opacity: 1;"/></defs><use href="#stroke-shape-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0" clip-path="url('#inner-stroke-render-1-e9942e24-155b-8096-8004-7eaff9882cd6-0')"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="chat-wrapper">
|
||||
<input placeholder="Type something..." />
|
||||
<img draggable="false" src="/assets/icons/submit-icon.svg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -18,22 +17,28 @@
|
||||
align-items: center;
|
||||
|
||||
input {
|
||||
width: 500px;
|
||||
height: 48px;
|
||||
border-radius: 48px;
|
||||
opacity: 0.8;
|
||||
max-width: 750px;
|
||||
width: 100%;
|
||||
height: 51px;
|
||||
border-radius: 8px;
|
||||
font-size: 1.2rem;
|
||||
padding: 0 24px;
|
||||
background-color: rgba($white, 0.85);
|
||||
border: 2px solid $white;
|
||||
color: black;
|
||||
}
|
||||
color: $gray-2;
|
||||
background-image: url("/assets/icons/submit-icon.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30px;
|
||||
background-position: calc(100% - 25px) center;
|
||||
|
||||
img {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 500px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -20,6 +20,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TODO: Replace socket.character with other (selected) player's -->
|
||||
<div class="hud-wrapper other-player">
|
||||
<div class="profile">
|
||||
<img draggable="false" src="/assets/avatar/default/head.png" />
|
||||
</div>
|
||||
<div class="hud">
|
||||
<div class="stats">
|
||||
<div class="player-details">
|
||||
<span class="player-name">{{ socket.character.name }}</span>
|
||||
<span class="player-lvl">lvl. {{ socket.character.level }}</span>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<label for="hp">HP</label>
|
||||
<progress id="hp" :value="socket.character.hitpoints" max="100">{{ socket.character.hitpoints }}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -41,17 +60,16 @@ const socket = useSocketStore()
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 27px;
|
||||
left: 30px;
|
||||
width: 280px;
|
||||
height: 84px;
|
||||
border-radius: 16px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
background-color: rgba($white, 0.8);
|
||||
border-radius: 100%;
|
||||
border: 3px solid $white;
|
||||
@ -60,7 +78,7 @@ const socket = useSocketStore()
|
||||
left: 0;
|
||||
z-index: 2; // Ensure profile is above hud and before
|
||||
img {
|
||||
width: 26px;
|
||||
width: 28px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
@ -69,14 +87,13 @@ const socket = useSocketStore()
|
||||
}
|
||||
|
||||
.hud {
|
||||
background: url('/assets/shapes/hud-shape-2.svg') center/cover no-repeat;
|
||||
background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
|
||||
.stats {
|
||||
height: 100%;
|
||||
height: calc(100% - 30px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
justify-content: center;
|
||||
padding: 0 20px 0 50px;
|
||||
padding: 15px 20px 15px 50px;
|
||||
|
||||
.player-details,
|
||||
.bar {
|
||||
@ -155,8 +172,37 @@ const socket = useSocketStore()
|
||||
&::before {
|
||||
content: '';
|
||||
background: url('/assets/clouds.png') center/cover no-repeat;
|
||||
mask: url('/assets/shapes/hud-image-shape-2.svg') center/cover no-repeat;
|
||||
mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
|
||||
mask-mode: luminance;
|
||||
}
|
||||
|
||||
&.other-player {
|
||||
left: unset;
|
||||
right: 0;
|
||||
|
||||
&::before {
|
||||
left: unset;
|
||||
right: 30px;
|
||||
mask: url('/assets/shapes/hud-image-shape-flipped.svg') center/cover no-repeat;
|
||||
}
|
||||
|
||||
.profile {
|
||||
left: unset;
|
||||
right: 0;
|
||||
img {
|
||||
transform: translate(-50%, -50%) scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.hud {
|
||||
left: unset;
|
||||
right: 30px;
|
||||
transform: scaleX(-1);
|
||||
.stats {
|
||||
transform: scaleX(-1);
|
||||
padding: 15px 50px 15px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -38,18 +38,18 @@
|
||||
.menu {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 10px;
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
width: 64px;
|
||||
bottom: 65px;
|
||||
width: 85px;
|
||||
text-align: center;
|
||||
background-color: #b1b2b5;
|
||||
border: 2px solid $white;
|
||||
background-color: $dark-gray;
|
||||
border: 2px solid $cyan;
|
||||
border-radius: 24px;
|
||||
height: 24px;
|
||||
font-size: 0.875rem;
|
||||
@ -61,7 +61,7 @@
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
top: calc(100% + 2px);
|
||||
background-color: $white;
|
||||
height: 8px;
|
||||
width: 14px;
|
||||
@ -73,16 +73,17 @@
|
||||
|
||||
a {
|
||||
padding: 8px;
|
||||
background-color: rgba(127, 127, 127, 0.7);
|
||||
border: 2px solid $white;
|
||||
border-radius: 50%;
|
||||
background-color: rgba($dark-gray, 0.7);
|
||||
border: 2px solid $cyan;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 45px;
|
||||
height: 35px;
|
||||
|
||||
img {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,9 +93,8 @@
|
||||
}
|
||||
|
||||
a {
|
||||
background-image: url('/assets/galaxy.png');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-color: rgba($gray, 0.7);
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
filter: drop-shadow(0px 3px 6px $black);
|
||||
|
||||
@ -200,7 +200,7 @@ function handleResize() {
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(5px);
|
||||
box-shadow: 0 0 10px rgba($black, 0.5);
|
||||
|
||||
|
||||
@ -168,7 +168,7 @@ onBeforeUnmount(() => {
|
||||
border-radius: 20px;
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/assets/shapes/character-select-shape-2.svg');
|
||||
background-image: url('/assets/shapes/character-select-shape.svg');
|
||||
box-shadow: 0 4px 30px rgba($black, 0.1);
|
||||
|
||||
&::after {
|
||||
|
||||
@ -102,6 +102,7 @@ const createScene = (scene: Phaser.Scene) => {
|
||||
.bottom-ui {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 48px;
|
||||
@ -112,7 +113,6 @@ const createScene = (scene: Phaser.Scene) => {
|
||||
}
|
||||
|
||||
.bottom-ui {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
bottom: 100px;
|
||||
height: 100px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user