Fixing the broken select2 (add server modal)

This commit is contained in:
Corban-Lee Jones 2024-04-26 23:26:36 +01:00
parent da5e76278b
commit c4145721cf
4 changed files with 54 additions and 63 deletions

View File

@ -1,60 +0,0 @@
/* modal tabs */
/* .modal-tabs {
background-color: var(--bs-tertiary-bg);
}
.modal-tabs .nav-link {
border-top: none;
border-radius: 0;
}
.modal-tabs .nav-link:first-child {
margin-left: 1rem;
}
.modal-tabs .nav-link:last-child {
margin-right: 1rem;
} */
.modal-tabs {
}
.modal-tabs .nav-link {
border-radius: 0.5rem;
}
.modal-tabs .nav-link.active {
color: var(--bs-body-color);
background-color: var(--bs-tertiary-bg);
border: 1px solid var(--border-colour);
}
@keyframes bump {
0% {
transform: translateY(0);
}
50% {
transform: translateY(3px); /* Adjust the height of the bump */
}
100% {
transform: translateY(0);
}
}
.bump {
animation: bump .2s ease-out;
}
#serverList .server-item.active button img {
border-radius: .75rem !important;
}
#serverList .server-item:hover button img {
border-radius: .75rem !important;
}
#serverList .server-item:active button img {
animation: bump .2s ease-out;
}

View File

@ -0,0 +1,48 @@
/* Select 2 */
.select2-selection {
/* border: 1px solid var(--border-colour) !important; */
/* box-shadow: none !important; */
/* -webkit-box-shadow: none !important; */
/* border-radius: var(--bs-border-radius); */
/* transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; */
background-color: var(--bs-body-bg) !important;
font-size: 1rem !important;
padding: 0.375rem 0.75rem !important;
}
.select2-container--bootstrap .select2-selection,
.select2-container--bootstrap.select2-container--disabled .select2-selection {
border: var(--bs-border-width) solid var(--bs-border-color);
}
.select2-container--bootstrap .select2-selection--single {
line-height: 1.5 !important;
height: fit-content !important;
}
.select2-selection__rendered {
color: var(--bs-body-color) !important;
}
/* .select2-selection:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
-webkit-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
} */
/* .select2-dropdown {
border: 1px solid var(--border-colour) !important;
} */
/*
.select2-selection__choice {
display: flex;
align-items: center;
padding-left: 3px !important;
} */
/*
.select2-selection__choice > button {
border: none;
background-color: var(--bs-white-rgb);
} */
/* .select2-results__option--selected { display: none; } */

View File

@ -5,7 +5,8 @@
{% block title %}{% endblock title %}
{% block stylesheets %}
<link rel="stylesheet" href="{% static '/css/home/index.css' %}">
<link type="text/css" rel="stylesheet" href="{% static '/css/home/index.css' %}">
<link type="text/css" rel="stylesheet" href="{% static '/css/home/select2.css' %}">
{% endblock stylesheets %}
{% block content %}
@ -63,7 +64,7 @@
{% block javascript %}
<script id="serverItemTemplate" type="text/template">
<li class="nav-item server-item" data-id="">
<li class="nav-item server-item" data-id="" data-bs-toggle="tooltip" data-bs-placement="right">
<button type="button" class="btn border-0 server-item-selector">
<img src="" alt="Guild Icon" class="rounded-circle" width="46" height="46">
</button>

View File

@ -15,7 +15,8 @@
<link type="text/css" rel="stylesheet" href="{% static '/css/toasts.css' %}" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/2.0.5/css/dataTables.dataTables.css">
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/select/2.0.1/css/select.dataTables.min.css">
<link type="text/css" rel="stylesheet" href="{% static '/css/select2.min.css' %}">
<link type="text/css" rel="stylesheet" href="{% static '/css/select2-bootstrap.min.css' %}">
{% block stylesheets %}{% endblock stylesheets %}
@ -43,6 +44,7 @@
<script src="https://cdn.datatables.net/2.0.5/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.min.js"></script>
<script src="{% static '/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static '/js/select2.min.js' %}"></script>
<script src="{% static '/js/toasts.js' %}"></script>
<script src="{% static '/js/base.js' %%}"></script>