From 259e4dca20f33917a20c5d5c375f1897a71cb109 Mon Sep 17 00:00:00 2001 From: Kobe Date: Sun, 25 May 2025 12:23:53 +0200 Subject: [PATCH] room restructure part 1 --- static/css/room_members.css | 85 +++++++++ static/css/rooms.css | 33 ++++ static/js/room_members.js | 15 ++ static/js/rooms.js | 26 +++ templates/components/add_member_form.html | 24 +++ templates/components/delete_room_modal.html | 34 ++++ templates/components/member_list.html | 76 ++++++++ templates/components/room_card.html | 60 ++++++ templates/components/room_search.html | 13 ++ templates/rooms/room_members.html | 197 +------------------- templates/rooms/rooms.html | 185 ++---------------- 11 files changed, 387 insertions(+), 361 deletions(-) create mode 100644 static/css/room_members.css create mode 100644 static/css/rooms.css create mode 100644 static/js/room_members.js create mode 100644 static/js/rooms.js create mode 100644 templates/components/add_member_form.html create mode 100644 templates/components/delete_room_modal.html create mode 100644 templates/components/member_list.html create mode 100644 templates/components/room_card.html create mode 100644 templates/components/room_search.html diff --git a/static/css/room_members.css b/static/css/room_members.css new file mode 100644 index 0000000..83add9d --- /dev/null +++ b/static/css/room_members.css @@ -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; +} \ No newline at end of file diff --git a/static/css/rooms.css b/static/css/rooms.css new file mode 100644 index 0000000..c9325b9 --- /dev/null +++ b/static/css/rooms.css @@ -0,0 +1,33 @@ +.hover-shadow { + transition: all 0.3s ease; +} + +.hover-shadow:hover { + transform: translateY(-5px); + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; +} + +.card { + border: none; + border-radius: 10px; +} + +.card-footer { + padding: 1rem; +} + +.btn { + border-radius: 5px; + font-weight: 500; + padding: 0.5rem 1rem; + transition: all 0.2s ease; +} + +.btn:hover { + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.btn i { + font-size: 0.9em; +} \ No newline at end of file diff --git a/static/js/room_members.js b/static/js/room_members.js new file mode 100644 index 0000000..a6741cc --- /dev/null +++ b/static/js/room_members.js @@ -0,0 +1,15 @@ +$(document).ready(function() { + $('.select2').select2({ + theme: 'bootstrap-5', + width: '100%', + 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() { + this.closest('form').submit(); + }); + }); +}); \ No newline at end of file diff --git a/static/js/rooms.js b/static/js/rooms.js new file mode 100644 index 0000000..f78b858 --- /dev/null +++ b/static/js/rooms.js @@ -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(); + }); + } +}); \ No newline at end of file diff --git a/templates/components/add_member_form.html b/templates/components/add_member_form.html new file mode 100644 index 0000000..672dc1b --- /dev/null +++ b/templates/components/add_member_form.html @@ -0,0 +1,24 @@ +{% macro add_member_form(room, available_users) %} +
+
+
Add New Member
+
+
+
+ +
+ + +
+ +
+
+
+{% endmacro %} \ No newline at end of file diff --git a/templates/components/delete_room_modal.html b/templates/components/delete_room_modal.html new file mode 100644 index 0000000..f881885 --- /dev/null +++ b/templates/components/delete_room_modal.html @@ -0,0 +1,34 @@ +{% macro delete_room_modal(room) %} + +{% endmacro %} \ No newline at end of file diff --git a/templates/components/member_list.html b/templates/components/member_list.html new file mode 100644 index 0000000..07aaebf --- /dev/null +++ b/templates/components/member_list.html @@ -0,0 +1,76 @@ +{% macro member_list(room) %} +
+
+
Current Members
+
+
+ {% if room.member_permissions %} +
+ {% for perm in room.member_permissions %} + {% set member = perm.user %} +
+
+ {{ member.username }} +
+
{{ member.username }} {{ member.last_name }}
+ {{ member.email }} +
+
+
+ {% if member.id != room.created_by %} +
+ +
+ + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+ {% else %} + + Creator + + {% endif %} +
+
+ {% endfor %} +
+ {% else %} +

No members in this room yet.

+ {% endif %} +
+
+{% endmacro %} \ No newline at end of file diff --git a/templates/components/room_card.html b/templates/components/room_card.html new file mode 100644 index 0000000..f1657e1 --- /dev/null +++ b/templates/components/room_card.html @@ -0,0 +1,60 @@ +{% macro room_card(room, current_user) %} +
+
+
+
+
+
{{ room.name }}
+
Created on {{ room.created_at.strftime('%b %d, %Y') }}
+
+ + {{ room.member_permissions|length }} + +
+

{{ room.description or 'No description' }}

+
+ Creator +
+ Created by +
{{ room.creator.username }} {{ room.creator.last_name }}
+
+
+
+
+
+ + Open Room + + {% if current_user.is_admin %} +
+ + +
+ {% endif %} +
+
+
+
+{% endmacro %} \ No newline at end of file diff --git a/templates/components/room_search.html b/templates/components/room_search.html new file mode 100644 index 0000000..b9b0e35 --- /dev/null +++ b/templates/components/room_search.html @@ -0,0 +1,13 @@ +{% macro room_search(search) %} +
+
+ + +
+
+{% endmacro %} \ No newline at end of file diff --git a/templates/rooms/room_members.html b/templates/rooms/room_members.html index 550691c..60106de 100644 --- a/templates/rooms/room_members.html +++ b/templates/rooms/room_members.html @@ -5,85 +5,7 @@ {% block extra_css %} - + {% endblock %} {% block content %} @@ -97,105 +19,13 @@
-
-
-
Current Members
-
-
- {% if room.member_permissions %} -
- {% for perm in room.member_permissions %} - {% set member = perm.user %} -
-
- {{ member.username }} -
-
{{ member.username }} {{ member.last_name }}
- {{ member.email }} -
-
-
- {% if member.id != room.created_by %} -
- -
- - - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
- - -
- {% else %} - - Creator - - {% endif %} -
-
- {% endfor %} -
- {% else %} -

No members in this room yet.

- {% endif %} -
-
+ {% from "components/member_list.html" import member_list %} + {{ member_list(room) }}
-
-
-
Add New Member
-
-
-
- -
- - -
- -
-
-
+ {% from "components/add_member_form.html" import add_member_form %} + {{ add_member_form(room, available_users) }}
@@ -204,20 +34,5 @@ {% block extra_js %} - + {% endblock %} \ No newline at end of file diff --git a/templates/rooms/rooms.html b/templates/rooms/rooms.html index b7abe35..acf7759 100644 --- a/templates/rooms/rooms.html +++ b/templates/rooms/rooms.html @@ -2,6 +2,10 @@ {% block title %}Rooms - DocuPulse{% endblock %} +{% block extra_css %} + +{% endblock %} + {% block content %}
@@ -15,182 +19,23 @@
- -
-
- - -
-
+ {% from "components/room_search.html" import room_search %} + {{ room_search(search) }}
+ {% from "components/room_card.html" import room_card %} + {% from "components/delete_room_modal.html" import delete_room_modal %} + {% for room in rooms %} -
-
-
-
-
-
{{ room.name }}
-
Created on {{ room.created_at.strftime('%b %d, %Y') }}
-
- - {{ room.member_permissions|length }} - -
-

{{ room.description or 'No description' }}

-
- Creator -
- Created by -
{{ room.creator.username }} {{ room.creator.last_name }}
-
-
-
-
-
- - Open Room - - {% if current_user.is_admin %} -
- - -
- {% endif %} -
-
-
-
- {% if current_user.is_admin %} - - - {% endif %} + {{ room_card(room, current_user) }} + {% if current_user.is_admin %} + {{ delete_room_modal(room) }} + {% endif %} {% endfor %}
- - +{% endblock %} {% block extra_js %} - -{% endblock %} + {% endblock %} \ No newline at end of file