forked from noxious/client
Changed delete, added global styling
This commit is contained in:
parent
a478a02530
commit
bc7d83345f
4
public/assets/icons/trashcan.svg
Normal file
4
public/assets/icons/trashcan.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17" stroke="#FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 889 B |
@ -4,7 +4,7 @@ $black: #000;
|
||||
$purple: #4741e6;
|
||||
$lilac: #7b76ff;
|
||||
$light-blue: #00c2ff;
|
||||
$red: #ff0000;
|
||||
$red: #d50000;
|
||||
$gray: #7f7f7f;
|
||||
$gray-2: #696969;
|
||||
$dark-gray: #454545;
|
||||
|
||||
@ -84,7 +84,6 @@
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($lilac, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -107,7 +106,6 @@ p,
|
||||
a,
|
||||
li,
|
||||
label {
|
||||
font-family: Arial, sans-serif;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
@ -27,6 +27,19 @@ h6 {
|
||||
font-family: GentiumPlus, serif;
|
||||
}
|
||||
|
||||
p,
|
||||
span,
|
||||
li,
|
||||
a,
|
||||
button,
|
||||
label {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -5,6 +5,11 @@
|
||||
<div v-for="character in characters" :key="character.id" class="character" :class="{ active: selected_character == character.id }">
|
||||
<input type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
||||
<label :for="character.id">{{ character.name }}</label>
|
||||
<!-- @TODO : Add a confirmation dialog -->
|
||||
<button class="delete" @click="delete_character(character.id)">
|
||||
<img src="/assets/icons/trashcan.svg">
|
||||
</button>
|
||||
|
||||
<div class="sprite-container">
|
||||
<img src="/assets/avatar/default/base_right_down.png" />
|
||||
</div>
|
||||
@ -21,8 +26,6 @@
|
||||
|
||||
<div class="buttons-wrapper">
|
||||
<button v-if="selected_character" @click="select_character()">Play</button>
|
||||
<!-- @TODO : Add a confirmation dialog -->
|
||||
<button v-if="selected_character" @click="delete_character()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,9 +76,9 @@ function select_character() {
|
||||
}
|
||||
|
||||
// Delete character logics
|
||||
function delete_character() {
|
||||
if (!selected_character.value) return
|
||||
socket.getConnection.emit('character:delete', { character_id: selected_character.value })
|
||||
function delete_character(character_id) {
|
||||
if (!character_id) return
|
||||
socket.getConnection.emit('character:delete', { character_id: character_id })
|
||||
}
|
||||
|
||||
// Create character logics
|
||||
@ -131,6 +134,7 @@ function create() {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 40px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -149,9 +153,6 @@ function create() {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
@ -188,14 +189,27 @@ function create() {
|
||||
}
|
||||
|
||||
label {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
font-family: Arial, sans-serif;
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button.delete {
|
||||
background-color: $red;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
border-radius: 100%;
|
||||
z-index: 1;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -204,7 +218,6 @@ function create() {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(50%);
|
||||
font-family: Arial, sans-serif;
|
||||
color: $white;
|
||||
z-index: 1;
|
||||
}
|
||||
@ -239,7 +252,6 @@ function create() {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($lilac, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,8 +126,6 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -164,7 +162,6 @@ onUnmounted(() => {
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($lilac, 0.75);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.modal-form {
|
||||
@ -174,7 +171,6 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
margin-bottom: 20px;
|
||||
label {
|
||||
font-family: Arial, sans-serif;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
input {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user