separation of css

This commit is contained in:
2025-05-25 20:53:58 +02:00
parent d36ef9d051
commit 45a0b198f0
3 changed files with 113 additions and 79 deletions

View File

@@ -0,0 +1,85 @@
.badge.bg-primary.rounded-pill {
display: inline-flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
font-size: 1em;
height: 32px;
border-radius: 5px;
padding: 0 18px;
}
.btn-sm.member-action {
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.form-check-inline {
margin-right: 8px;
}
.member-row {
align-items: center;
gap: 8px;
}
.badge.creator-badge {
display: inline-flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.02em;
font-size: 1em;
height: 32px;
border-radius: 5px;
padding: 0 18px;
background-color: rgba(22,118,123,0.08);
color: #16767b;
border: 1px solid #16767b22;
}
.btn-save-member {
background-color: #16767b;
color: #fff;
border: 1px solid #16767b;
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
transition: background 0.2s, border 0.2s;
}
.btn-save-member:hover {
background-color: #1a8a90;
border-color: #1a8a90;
}
.btn-remove-member {
background-color: rgba(239,68,68,0.1);
color: #b91c1c;
border: 1px solid #b91c1c22;
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
transition: background 0.2s, color 0.2s;
}
.btn-remove-member:hover {
background-color: #b91c1c;
color: #fff;
}

26
static/js/rooms.js Normal file
View File

@@ -0,0 +1,26 @@
// Debounce function
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('roomSearchInput');
const form = document.getElementById('roomFilterForm');
if (searchInput && form) {
searchInput.addEventListener('input', debounce(function() {
form.submit();
}, 300));
}
// Clear button logic
const clearBtn = document.getElementById('clearRoomsFilter');
if (clearBtn && searchInput) {
clearBtn.addEventListener('click', function() {
searchInput.value = '';
form.submit();
});
}
});

View File

@@ -6,85 +6,7 @@
{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
.badge.bg-primary.rounded-pill {
display: inline-flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.02em;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
font-size: 1em;
height: 32px;
border-radius: 5px;
padding: 0 18px;
}
.btn-sm.member-action {
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
}
.form-check-inline {
margin-right: 8px;
}
.member-row {
align-items: center;
gap: 8px;
}
.badge.creator-badge {
display: inline-flex;
align-items: center;
font-weight: 500;
letter-spacing: 0.02em;
font-size: 1em;
height: 32px;
border-radius: 5px;
padding: 0 18px;
background-color: rgba(22,118,123,0.08);
color: #16767b;
border: 1px solid #16767b22;
}
.btn-save-member {
background-color: #16767b;
color: #fff;
border: 1px solid #16767b;
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
transition: background 0.2s, border 0.2s;
}
.btn-save-member:hover {
background-color: #1a8a90;
border-color: #1a8a90;
}
.btn-remove-member {
background-color: rgba(239,68,68,0.1);
color: #b91c1c;
border: 1px solid #b91c1c22;
min-width: 70px;
height: 32px;
font-size: 1em;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
transition: background 0.2s, color 0.2s;
}
.btn-remove-member:hover {
background-color: #b91c1c;
color: #fff;
}
</style>
<link href="{{ url_for('static', filename='css/room_members.css') }}" rel="stylesheet" />
{% endblock %}
{% block content %}
@@ -216,6 +138,7 @@ $(document).ready(function() {
placeholder: 'Search for a user...',
allowClear: true
});
// Auto-submit permission form on checkbox change
document.querySelectorAll('.auto-save-perms-form input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {