From 740537cf7897da522a6e62b7a9b2c1c03ae9e3f1 Mon Sep 17 00:00:00 2001 From: Peter Goodhall Date: Sat, 9 Aug 2025 22:41:14 +0100 Subject: [PATCH] Redesign logbooks management UI and add custom styles Revamped the logbooks management page for improved usability and modern appearance, including enhanced table layout, action buttons, and empty state messaging. Added dedicated CSS styles for logbooks management components to ensure consistent spacing, card appearance, badge sizing, and DataTable integration. --- application/views/logbooks/index.php | 218 ++++++++++++++++++--------- assets/css/general.css | 66 ++++++++ 2 files changed, 210 insertions(+), 74 deletions(-) diff --git a/application/views/logbooks/index.php b/application/views/logbooks/index.php index d374b4f5..7ae84520 100644 --- a/application/views/logbooks/index.php +++ b/application/views/logbooks/index.php @@ -1,87 +1,157 @@ -
+

session->flashdata('message')) { ?> -
-

session->flashdata('message'); ?>

+ -

- -
-
- -
-
-

-
+ +
+
+
+
+

+

Organize your QSOs into separate logbooks

+
+ + +
+
-
-
- -
-
-
- num_rows() > 0) { ?> - -
- - - - - - - - - - - - - result() as $row) { ?> - - - - - - - - - - - -
- logbook_name;?>
- 		- session->userdata('active_station_logbook') != $row->logbook_id) { ?> - logbook_id; ?>" class="btn btn-outline-primary btn-sm"> - " . lang('station_logbooks_active_logbook') . ""; - }?> - - logbook_id; ?>" class="btn btn-outline-primary btn-sm"> - - session->userdata('active_station_logbook') != $row->logbook_id) { ?> - logbook_id; ?>" class="btn btn-danger btn-sm" onclick="return confirm('logbook_name; ?>');"> - - - public_slug != '') { ?> - public_slug; ?>" class="btn btn-outline-primary btn-sm" > - - - public_search == 1) { - echo "" . lang('general_word_enabled') . ""; - } else { - echo "" . lang('general_word_disabled') . ""; - } ?> -
-
- -
-
+ +
+
+
+
+
+
+
+

+
+
+
+ +num_rows() > 0) { ?> +
+
+
+
+
+
(num_rows(); ?>)
+ Click to set a logbook as active +
+
+
+
+ + + + + + + + + + + + result() as $row) { ?> + session->userdata('active_station_logbook') == $row->logbook_id) { echo 'class="table-success"'; } ?>> + + + + + + + + +
Actions
+
+
+ logbook_name;?> + session->userdata('active_station_logbook') == $row->logbook_id) { ?> + + + + +
+
+ 		+ session->userdata('active_station_logbook') != $row->logbook_id) { ?> + logbook_id; ?>" + class="btn btn-outline-success btn-sm" + title=""> + + + + + + + + + public_slug != '') { ?> + public_slug; ?>" + class="btn btn-info btn-sm" + title="logbook_name;?>"> + View Public + + + - + + + public_search == 1) { ?> + + + + + + + + + +
+ logbook_id; ?>" + class="btn btn-primary btn-sm" + title="logbook_name;?>"> + + + session->userdata('active_station_logbook') != $row->logbook_id) { ?> + logbook_id; ?>" + class="btn btn-danger btn-sm" + title="" + onclick="return confirm('logbook_name; ?>');"> + + + +
+
+
+
+
+
+
+ + +
+
+
+
+ +
No Logbooks
+

You haven't created any logbooks yet. Create your first logbook to organize your QSOs.

+ + + +
+
+
+
+
diff --git a/assets/css/general.css b/assets/css/general.css index 8f15342e..70cef25d 100644 --- a/assets/css/general.css +++ b/assets/css/general.css @@ -225,6 +225,72 @@ thead>tr>td { padding: 0.375rem 0.75rem; } +/* Logbooks Management Page Styling */ +.logbooks-management { + padding-top: 15px; +} + +.logbooks-management .table-success { + background-color: rgba(25, 135, 84, 0.1); +} + +.logbooks-management .card { + border: none; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); +} + +.logbooks-management .card-header { + background-color: #f8f9fa; + border-bottom: 1px solid #dee2e6; + padding: 1rem 1.25rem; +} + +.logbooks-management .badge { + font-size: 0.7rem; + padding: 0.25rem 0.5rem; +} + +.logbooks-management .btn-sm { + padding: 0.375rem 0.75rem; + font-size: 0.875rem; + border-radius: 0.375rem; +} + +/* DataTable styling within cards */ +.logbooks-management .dataTables_wrapper { + padding: 0; +} + +.logbooks-management .dataTables_length, +.logbooks-management .dataTables_filter { + margin-bottom: 1rem; +} + +.logbooks-management .dataTables_info, +.logbooks-management .dataTables_paginate { + margin-top: 1rem; +} + +.logbooks-management .dataTables_length label, +.logbooks-management .dataTables_filter label { + font-weight: 500; + margin-bottom: 0; +} + +.logbooks-management .dataTables_filter input { + margin-left: 0.5rem; + border-radius: 0.375rem; + border: 1px solid #ced4da; + padding: 0.375rem 0.75rem; +} + +.logbooks-management .dataTables_length select { + margin: 0 0.5rem; + border-radius: 0.375rem; + border: 1px solid #ced4da; + padding: 0.375rem 0.75rem; +} + .api .alert p { margin-bottom: 0rem; }