710 lines
21 KiB
HTML
710 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BIBB Thesaurus-Verwaltung</title>
|
|
|
|
<!-- ============================================
|
|
LOKALE LIBRARIES MIT CDN-FALLBACK
|
|
|
|
Pfade verweisen auf /libs/[library]/current/
|
|
Falls lokal nicht verfügbar, wird CDN geladen.
|
|
|
|
Setup: ./setup-libs.sh ausführen
|
|
============================================ -->
|
|
|
|
<!-- Bootstrap 5 CSS (lokal mit Fallback) -->
|
|
<link href="/libs/bootstrap/current/css/bootstrap.min.css" rel="stylesheet"
|
|
onerror="this.onerror=null; this.href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css';">
|
|
|
|
<!-- Font Awesome 6 (lokal mit Fallback) -->
|
|
<link rel="stylesheet" href="/libs/fontawesome/current/css/all.min.css"
|
|
onerror="this.onerror=null; this.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';">
|
|
|
|
<!-- Bootstrap Table CSS (lokal mit Fallback) -->
|
|
<link rel="stylesheet" href="/libs/bootstrap-table/current/css/bootstrap-table.min.css"
|
|
onerror="this.onerror=null; this.href='https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.css';">
|
|
|
|
<!-- jsTree CSS (lokal mit Fallback) -->
|
|
<link rel="stylesheet" href="/libs/jstree/current/themes/default/style.min.css"
|
|
onerror="this.onerror=null; this.href='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.16/themes/default/style.min.css';">
|
|
|
|
<!-- BIBB Custom Styles -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
|
|
<!-- Kritische Styles als Fallback direkt eingebettet -->
|
|
<style>
|
|
:root {
|
|
--primary-color: #1a3a5c;
|
|
--primary-light: #2a5a8c;
|
|
--primary-dark: #0f2840;
|
|
--secondary-color: #006699;
|
|
--text-primary: #333;
|
|
--text-secondary: #666;
|
|
--text-muted: #999;
|
|
--bg-gradient: linear-gradient(135deg, #e8eef5 0%, #f0f4f8 100%);
|
|
--bg-light: #f8f9fa;
|
|
--border-color: #e0e0e0;
|
|
--border-light: #f0f0f0;
|
|
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
--transition: all 0.3s ease;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-primary);
|
|
background: var(--bg-gradient);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.page-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 40px 0;
|
|
}
|
|
|
|
/* Header */
|
|
.site-header {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 0;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.site-header .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 20px;
|
|
}
|
|
|
|
.site-logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.site-title {
|
|
font-size: 1.4em;
|
|
font-weight: 700;
|
|
color: white;
|
|
}
|
|
|
|
.site-subtitle {
|
|
font-size: 0.85em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.main-nav ul {
|
|
list-style: none;
|
|
display: flex;
|
|
gap: 5px;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.main-nav a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: 10px 18px;
|
|
border-radius: 4px;
|
|
display: block;
|
|
font-size: 0.95em;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.main-nav a:hover {
|
|
background: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
/* Dropdown Menu Styles */
|
|
.main-nav .nav-item {
|
|
position: relative;
|
|
}
|
|
|
|
.main-nav .dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
min-width: 200px;
|
|
padding: 8px 0;
|
|
z-index: 1000;
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.main-nav .nav-item:hover .dropdown-menu,
|
|
.main-nav .nav-item.show .dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.main-nav .dropdown-menu li {
|
|
margin: 0;
|
|
}
|
|
|
|
.main-nav .dropdown-menu .dropdown-item {
|
|
color: var(--text-primary) !important;
|
|
padding: 10px 20px;
|
|
font-weight: 400;
|
|
border-radius: 0;
|
|
background: white;
|
|
}
|
|
|
|
.main-nav .dropdown-menu .dropdown-item:hover {
|
|
background: var(--bg-light) !important;
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
padding: 35px 40px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.6em;
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.card-description {
|
|
color: var(--text-secondary);
|
|
font-size: 1em;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
/* Nav Cards Grid */
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 25px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.nav-card {
|
|
background: white;
|
|
border-radius: var(--radius-md);
|
|
padding: 25px 30px;
|
|
border: 1px solid var(--border-color);
|
|
border-left: 4px solid var(--border-color);
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
.nav-card:hover {
|
|
border-left-color: var(--primary-color);
|
|
box-shadow: var(--shadow-md);
|
|
transform: translateY(-2px);
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.nav-card-icon {
|
|
font-size: 2.5em;
|
|
margin-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.nav-card h3 {
|
|
font-size: 1.15em;
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.nav-card p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9em;
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Section Title */
|
|
.section-title {
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 30px 0 20px 0;
|
|
}
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-item {
|
|
background: var(--bg-light);
|
|
padding: 20px;
|
|
border-radius: var(--radius-md);
|
|
text-align: center;
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 2.2em;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
line-height: 1;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
color: var(--text-secondary);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 20px 0;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.site-footer .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-footer a {
|
|
color: rgba(255,255,255,0.8);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-footer a:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-light);
|
|
border-color: var(--primary-light);
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #218838;
|
|
border-color: #1e7e34;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #dc3545;
|
|
border-color: #dc3545;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c82333;
|
|
border-color: #bd2130;
|
|
}
|
|
|
|
/* Relations Table */
|
|
#relation_table,
|
|
.new_modal_content {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
#relation_table table,
|
|
.new_modal_content table {
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#relation_table table thead th,
|
|
.new_modal_content table thead th {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
font-weight: 600;
|
|
border: none;
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
#relation_table table thead tr:first-child th:first-child,
|
|
.new_modal_content table thead tr:first-child th:first-child {
|
|
border-top-left-radius: var(--radius-md);
|
|
}
|
|
|
|
#relation_table table thead tr:first-child th:last-child,
|
|
.new_modal_content table thead tr:first-child th:last-child {
|
|
border-top-right-radius: var(--radius-md);
|
|
}
|
|
|
|
#relation_table table tbody tr:last-child td:first-child,
|
|
.new_modal_content table tbody tr:last-child td:first-child {
|
|
border-bottom-left-radius: var(--radius-md);
|
|
}
|
|
|
|
#relation_table table tbody tr:last-child td:last-child,
|
|
.new_modal_content table tbody tr:last-child td:last-child {
|
|
border-bottom-right-radius: var(--radius-md);
|
|
}
|
|
|
|
#relation_table .table,
|
|
.new_modal_content .table {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Autocomplete Dropdown Styles */
|
|
.autocomplete-dropdown {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.autocomplete-dropdown .dropdown-item {
|
|
display: block;
|
|
padding: 10px 15px;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
border-bottom: 1px solid var(--border-light);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.autocomplete-dropdown .dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.autocomplete-dropdown .dropdown-item:hover {
|
|
background: var(--bg-light);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Bootstrap Table Pagination in BIBB-Blau */
|
|
.pagination .page-link {
|
|
color: var(--primary-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
color: white;
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.pagination .page-item.disabled .page-link {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Kopier-Icons und Links in Tabelle */
|
|
.fixed-table-container a,
|
|
.bootstrap-table a,
|
|
.fixed-table-body a {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.fixed-table-container a:hover,
|
|
.bootstrap-table a:hover,
|
|
.fixed-table-body a:hover {
|
|
color: var(--primary-light);
|
|
}
|
|
|
|
/* Toolbar Icons */
|
|
.fixed-table-toolbar .btn-secondary,
|
|
.fixed-table-toolbar .btn-default {
|
|
color: var(--primary-color);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.fixed-table-toolbar .btn-secondary:hover,
|
|
.fixed-table-toolbar .btn-default:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* Dropdown und Page-Size Selector */
|
|
.fixed-table-pagination .page-list .btn,
|
|
.fixed-table-pagination select,
|
|
.fixed-table-pagination .page-list .dropdown-toggle,
|
|
.fixed-table-pagination .page-list button {
|
|
color: var(--primary-color);
|
|
border-color: var(--border-color);
|
|
background-color: var(--bg-light);
|
|
}
|
|
|
|
.fixed-table-pagination .page-list .dropdown-menu {
|
|
background-color: var(--bg-light);
|
|
}
|
|
|
|
.fixed-table-pagination .page-list .dropdown-item {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.fixed-table-pagination .page-list .dropdown-item:hover,
|
|
.fixed-table-pagination .page-list .dropdown-item.active {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
/* Detail-View Toggle Icons */
|
|
.detail-icon {
|
|
color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Bearbeiten/Löschen Icons in Tabelle weiß */
|
|
.table-actions .btn i,
|
|
.table-actions .btn-primary i,
|
|
.table-actions .btn-danger i {
|
|
color: white !important;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 6px 14px;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Tables */
|
|
.bootstrap-table .table thead th {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
font-weight: 600;
|
|
border: none;
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
.fixed-table-container {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fixed-table-toolbar {
|
|
background: var(--bg-light);
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Modals */
|
|
.modal-header {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-radius: 12px 12px 0 0;
|
|
padding: 18px 25px;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-header .btn-close {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.modal-content {
|
|
border: none;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(26,58,92,0.1);
|
|
}
|
|
|
|
/* Utilities */
|
|
.d-flex { display: flex; }
|
|
.justify-between { justify-content: space-between; }
|
|
.align-center { align-items: center; }
|
|
.mb-20 { margin-bottom: 20px; }
|
|
.mt-20 { margin-top: 20px; }
|
|
.mt-30 { margin-top: 30px; }
|
|
.w-100 { width: 100%; }
|
|
|
|
/* Table Actions */
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table-actions .btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 992px) {
|
|
.site-header .container {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.nav-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.site-footer .container {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
text-align: center;
|
|
}
|
|
.card {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- jQuery (lokal mit CDN-Fallback) -->
|
|
<script src="/libs/jquery/current/jquery.min.js"></script>
|
|
<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.6.0.min.js"><\/script>')</script>
|
|
|
|
<!-- Bootstrap 5 JS (lokal mit CDN-Fallback) -->
|
|
<script src="/libs/bootstrap/current/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
if (typeof bootstrap === 'undefined') {
|
|
document.write('<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"><\/script>');
|
|
}
|
|
</script>
|
|
|
|
|
|
<script>
|
|
$(function () {
|
|
if ($.fn.bootstrapTable && $.fn.bootstrapTable.locales) {
|
|
|
|
// Deutsch
|
|
if ($.fn.bootstrapTable.locales['de-DE']) {
|
|
$.fn.bootstrapTable.locales['de-DE'].formatColumnsToggle = function () {
|
|
return 'Spalten';
|
|
};
|
|
}
|
|
|
|
// Fallback: globaler Default (greift wenn Locale nicht explizit gesetzt)
|
|
$.extend($.fn.bootstrapTable.defaults, {
|
|
formatColumnsToggle: function () { return 'Spalten'; }
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// Läuft nach jedem Table-Init und prüft ob der Columns-Button Einträge hat.
|
|
// Ist das Dropdown leer (z. B. in Modulen ohne data-show-columns-Konfiguration),
|
|
// wird der gesamte Button-Container versteckt.
|
|
$(document).on('init.bs.table', 'table', function () {
|
|
var $table = $(this);
|
|
|
|
// Kurze Verzögerung damit Bootstrap Table seinen DOM vollständig gerendert hat
|
|
setTimeout(function () {
|
|
var $btnGroup = $table.closest('.bootstrap-table')
|
|
.find('.columns-btn-group, .btn-group.columns');
|
|
|
|
if ($btnGroup.length > 0) {
|
|
// Prüfe ob der Dropdown-Inhalt tatsächlich Einträge hat
|
|
var itemCount = $btnGroup.find('li').length;
|
|
if (itemCount === 0) {
|
|
$btnGroup.hide();
|
|
}
|
|
}
|
|
}, 100);
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap Typeahead (lokal mit CDN-Fallback) -->
|
|
<script src="/libs/bootstrap3-typeahead/current/bootstrap3-typeahead.min.js"></script>
|
|
<script>
|
|
if (typeof $.fn.typeahead === 'undefined') {
|
|
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"><\/script>');
|
|
}
|
|
</script>
|
|
|
|
<!-- Bootstrap Table JS (lokal mit CDN-Fallback) -->
|
|
<script src="/libs/bootstrap-table/current/js/bootstrap-table.min.js"></script>
|
|
<script>
|
|
if (typeof $.fn.bootstrapTable === 'undefined') {
|
|
document.write('<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/bootstrap-table.min.js"><\/script>');
|
|
document.write('<script src="https://unpkg.com/bootstrap-table@1.21.4/dist/locale/bootstrap-table-de-DE.min.js"><\/script>');
|
|
}
|
|
</script>
|
|
<script src="/libs/bootstrap-table/current/locale/bootstrap-table-de-DE.min.js"></script>
|
|
</head>
|
|
|
|
<body class="page-wrapper">
|
|
|
|
<!-- Site Header -->
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<a href="index.php" class="site-logo">
|
|
<span class="site-title">BIBB Normdateienverwaltung</span>
|
|
</a>
|
|
|
|
<nav class="main-nav">
|
|
<ul>
|
|
<li><a href="index.php">Startseite</a></li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Normdateien</a>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="Subjects.php">Schlagworte</a></li>
|
|
<li><a class="dropdown-item" href="Persons.php">Personen</a></li>
|
|
<li><a class="dropdown-item" href="Corporates.php">Körperschaften</a></li>
|
|
<li><a class="dropdown-item" href="Publishers.php">Verlage</a></li>
|
|
<li><a class="dropdown-item" href="Classifications.php">Klassifikation</a></li>
|
|
<li><a class="dropdown-item" href="Treeview.php">Klassifikationsbaum</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="Statistics.php">Statistik</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|