or and you want to create automatic textbreaks in the text.
- */
-.text-break {
- /*noinspection W3CssValidation,CssUnknownProperty*/
- -ms-word-break: break-all;
- /*noinspection CssOverwrittenProperties*/
- word-break: break-all;
-
- /* Non standard for webkit */
- /*noinspection W3CssValidation,CssInvalidPropertyValue,CssOverwrittenProperties*/
- word-break: break-word;
-
- /*noinspection W3CssValidation*/
- -webkit-hyphens: auto;
- /*noinspection W3CssValidation*/
- -moz-hyphens: auto;
- hyphens: auto;
-}
-
-.auto-size-select {
- height: inherit;
-}
-
-/****************************************
-* Bootstrap extensions
-*****************************************/
-a.badge {
- text-decoration: none;
-}
-
-.w-fit {
- width: -moz-fit-content;
- width: fit-content;
-}
-
-.bg-primary-striped {
- background: repeating-linear-gradient(
- -45deg,
- var(--bs-primary),
- var(--bs-primary) 10px,
- var(--bs-info) 10px,
- var(--bs-info) 20px
- )
-}
-
-.form-group-sm {
- margin-bottom: 5px;
-}
-
-/* Use this if you want to use a link inside a form-group */
-.form-control-link {
- display: block;
- padding-top: 7px;
- padding-bottom: 7px;
-}
-
-
-/* A text-only button without border */
-.btn-text {
- color: inherit;
- padding: 0;
- border: hidden;
- background-color: transparent;
-}
-
-
-/* Size sensitive pull-* helpers */
-
-@media (max-width: 767px) {
- .pull-right-not-xs, .pull-left-not-xs{
- float: none;
- }
- .pull-right-xs {
- float: right;
- }
- .pull-left-xs {
- float: left;
- }
-}
-@media (min-width: 768px) and (max-width: 991px) {
- .pull-right-not-sm, .pull-left-not-sm{
- float: none;
- }
- .pull-right-sm {
- float: right;
- }
- .pull-left-sm {
- float: left;
- }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
- .pull-right-not-md, .pull-left-not-md{
- float: none;
- }
- .pull-right-md {
- float: right;
- }
- .pull-left-md {
- float: left;
- }
-}
-@media (min-width: 1200px) {
- .pull-right-not-lg, .pull-left-not-lg{
- float: none;
- }
- .pull-right-lg {
- float: right;
- }
- .pull-left-lg {
- float: left;
- }
-}
-
-.not-allowed {
- cursor: not-allowed !important;
-}
-
-/**************************************
-btn-xs
-btn-xs
- */
-
-.btn-xs {
- /*padding: .1rem .3rem; */
- padding: 1px 5px;
- font-size: 12px;
- line-height: 1.5
-}
-
-.not-enough-instock {
- background-color: rgba(220, 53, 69, 0.4);
-}
-
-/****************************************
-* Picture classes
-*****************************************/
-
-.companypic {
- width: 17px;
- display: inline;
-}
-
-.companypic:hover {
- filter: opacity(60%);
-}
-
-.companypic-bg {
- width: 20px;
- display: inline;
-}
-
-.companypic-bg:hover {
- filter: opacity(60%);
-}
-
-.hoverpic {
- min-width: 10px;
- max-width: 30px;
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-
-.darkmode--activated .hoverpic:hover {
- background: black;
-}
-
-
-.thumbnail-sm {
- max-height: 100px;
-}
-
-img.img-attachement {
- max-width: 25%;
- margin: 10px;
-}
-
-/****************************************
-* Tables
-****************************************/
-.table-compact>tbody>tr>td,
-.table-compact>tbody>tr>th,
-.table-compact>tfoot>tr>td,
-.table-compact>tfoot>tr>th,
-.table-compact>thead>tr>td,
-.table-compact>thead>tr>th,
-table.dataTable>tbody>tr>th,
-table.dataTable>tbody>tr>td
-{
- padding: 3px;
-}
-
-/* We need to override the z index, or the elements will overlap the fixed header from datatables. */
-table .input-group .form-control {
- z-index: 0;
-}
-
-table .input-group-btn:last-child>.btn, table .input-group-btn:last-child>.btn-group {
- z-index: 0;
-}
-
-/* Hide datatables fixedHeaders on small devices */
-@media only screen and (max-width: 1000px){
- .fixedHeader-floating {
- display: none;
- }
-}
-
-/**
- * Enforce white links on selected rows in datatables
- */
-table.dataTable > tbody > tr.selected > td > a {
- color: white !important;
-}
-/***************************************
-* Dropdown with radio buttons
-***************************************/
-
-.container-progress {
- padding-top: 25%;
-}
-
-.dropdown-menu-radio {
- padding-left: 10px;
-}
-
-.drop-radio {
- margin-left: 10px;
-}
-
-/*************************************
-* Smaller radio buttons
-**************************************/
-
-.radio-small {
- margin-bottom: 0;
- margin-top: 0;
-}
-
-/************************************
- X3DOM
-*************************************/
-
-.x3d-fullscreen {
- /*height: auto;*/
- width: 100%;
-}
-
-/*******************************
-* Collapsable panel definitions.
-********************************/
-
-.fancy-collapse-panel .panel-default > .panel-heading {
- padding: 0;
-}
-
-.card-header a[data-toggle=collapse] {
- display: inline-block;
- width: 100%;
- position: relative;
-}
-
-/*
-@font-face {
- font-family: 'FA5';
- font-style: normal;
- font-weight: 900;
- src: url("../../webfonts/fa-solid-900.eot");
- src: url("../../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../webfonts/fa-solid-900.woff2") format("woff2"), url("../../webfonts/fa-solid-900.woff") format("woff"), url("../../webfonts/fa-solid-900.ttf") format("truetype"), url("../../webfonts/fa-solid-900.svg#fontawesome") format("svg");
-} */
-
-.card-header a[data-toggle=collapse]:after {
- /*noinspection CssNoGenericFontName*/
- font-family: "Font Awesome 5 Free";
- content: "\f106";
- position: absolute;
- right: 20px;
- font-size: 20px;
- font-weight: 900;
- top: 50%;
- line-height: 1;
- margin-top: -10px;
-}
-
-.card-header a[data-toggle=collapse].collapsed:after
-{
- content: "\f107";
-}
-
-.card-header {
- overflow: hidden;
-}
-
-a.link-collapse {
- color: #333;
-}
-
-/******************************************************
-Classes for Datatables export
-*******************************************************/
-
-#export-title,
-#export-messageTop,
-.export-helper{
- display: none;
-}
-
-/**************************************************
-* Link styles
-***************************************************/
-
-/* Show symbol after exteral links */
-/*noinspection CssNoGenericFontName*/
-a[target="_blank"].link-external:after {
- content: "\f35d ";
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
- margin-left: 3px;
- font-size: smaller;
- font-style: normal;
- display: inline-block;
- text-decoration: inherit;
-}
-
-a.text-white {
- color: #fff;
-}
-
-/****************************************************
-* Search highlighting
-*****************************************************/
-
-span.highlight {
- background-color: yellow;
-}
-
-/******************************
-* Bootstrap treeview overrides
-*******************************/
-/* Set display style to flexbox, so wraped text is aligned to */
-
-.list-group-item {
- padding: 5px 10px;
- display: flex;
-}
-
-.treeview {
- font-size: 12px;
-}
-
-@media (max-width: 768px) {
- .treeview span.icon {
- width: 20px !important;
- height: 20px !important;
- }
-}
-
-.fa-treeview {
- line-height: 1.428;
-}
-
-.treeview-sm .list-group-item {
- padding-top: 3px;
- padding-bottom: 3px;
-}
-
-.treeview .badge {
- margin-left: auto;
- line-height: 1.42857143;
-}
-
-/*****************************
-* Pagination bar
-*****************************/
-
-/** Select in pagination */
-.pagination>li>select
-{
- position: relative;
- float: left;
- padding: 7px 5px;
- margin-left: -1px;
- line-height: 1.42857143;
- color: #337ab7;
- text-decoration: none;
- background-color: #fff;
- border: 1px solid #ddd;
-}
-
-.pagination>li>button
-{
- position: relative;
- float: left;
- padding: 6px 5px;
- margin-left: -1px;
- line-height: 1.42857143;
- color: #337ab7;
- text-decoration: none;
- background-color: #fff;
- border: 1px solid #ddd;
-}
-
-/******************************
-* Breadcrumb like structural links
-********************************/
-
-/* Style the list */
-ul.structural_link {
- padding-top: 7px;
- padding-bottom: 7px;
- padding-left: 0;
- list-style: none;
- background-color: inherit;
-}
-
-/* Display list items side by side */
-ul.structural_link li {
- display: inline;
- font-size: inherit;
-}
-
-/* Add a slash symbol (/) before/behind each list item */
-ul.structural_link li+li:before {
- padding: 2px;
- color: grey;
- /*content: "/\00a0";*/
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
- font-style: normal;
- content: "\f30b"; /* long-arrow-alt-right */
-}
-
-/* Add a color to all links inside the list */
-ul.structural_link li a {
- color: #0275d8;
- text-decoration: none;
-}
-
-/* Add a color on mouse-over */
-ul.structural_link li a:hover {
- color: #01447e;
- text-decoration: underline;
-}
-
-/*****************************
-* Print styles
-*****************************/
-@media print {
- body {
- padding-top: 0;
- }
-
- a.hidden-print-href[href]:after {
- content: none !important;
- }
-}
-
-/*****************************
-BS 4 overrides
- ****************************/
-@media (min-width: 768px) {
- .col-form-label {
- font-weight: bold;
- text-align: right;
- }
-}
-
-.form-group > label,
-.form-group > .col-form-label {
- font-weight: bold;
-}
-
-label:not(.form-check-label, custom-control-label) {
- font-weight: bold;
-}
-
-.form-group {
- margin-bottom: 0.4rem;
-}
-
-.dropdown-item,
-.dropdown-header,
-.dropdown-divider {
- padding: .1rem 1.5rem;
-}
-
-.btn-group-append {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0
-}
-
-.tooltip {
- pointer-events: none;
-}
-
-/* Style datatables */
-.card-footer-table {
- padding-top: 0;
-}
-
-table.dataTable {
- margin-top: 0 !important;
-}
-
-div.dataTables_wrapper div.dataTables_info {
- white-space: normal;
-}
-
-th.select-checkbox {
- min-width: 10px;
-}
-
-
-/*******************************
- Parts datatable styling
- ******************************/
-.attach-table-icon {
- margin-right: 0.7em;
- color: var(--bs-gray);
-}
-.attach-table-icon:hover {
- color: var(--bs-gray-dark);
-}
-.badge-table {
- margin-right: 0.2em;
-}
-
-.markdown-inline p {
- margin-block-end: 0;
-}
-
-/*********************************
- Workarounds
- *********************************/
-
-/* Hide tab content even, if tab contents are wrapped inside a form. */
-.tab-content>form>.tab-pane {
- display: none;
-}
-
-.tab-content>form>.active {
- display: block;
-}
-
-.dataTables_length {
- display: inline-flex;
-}
-
-/** Fix datatables select-checkbox position */
-
-table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
- margin-top: -28px !important;
-}
-
-/******************************************
-* Typeahead menu
-*******************************************/
-
-.tt-query {
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.tt-hint {
- color: #999
-}
-
-.tt-menu { /* used to be tt-dropdown-menu in older versions */
- width: 422px;
- margin-top: 4px;
- padding: 4px 0;
- background-color: #fff;
- border: 1px solid rgba(0, 0, 0, 0.2);
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
- -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
- box-shadow: 0 5px 10px rgba(0,0,0,.2);
-
- max-height: 200px;
- overflow-y: auto;
-}
-
-.tt-suggestion {
- padding: 3px 20px;
- line-height: 24px;
-}
-
-.tt-suggestion.tt-cursor,.tt-suggestion:hover {
- color: #fff;
- background-color: #0097cf;
-
-}
-
-.tt-suggestion p {
- margin: 0;
-}
-
-.darkmode-layer {
- z-index: 2020;
-}
-
-/** If darkmode is enabled revert the blening for images and videos, as these should be shown not inverted */
-.darkmode--activated img,
-.darkmode--activated video {
- mix-blend-mode: difference;
-}
-
-.scanner-video {
- max-width: 500px;
- max-height: 250px;
-}
-
-/*******************************************
- * Hovering carousel gallery
- *******************************************/
-.carousel-caption-hover {
- display: none;
-}
-
-.carousel .mask {
- display: none;
-}
-
-.carousel:hover .mask {
- display: block;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- transition: .5s ease;
- background-color: #0a0909;
- opacity: 0.7;
- border: 1px solid #dee2e6;
- border-radius: .25rem;
-}
-
-.carousel-control {
- display: none;
-}
-
-.carousel:hover .carousel-caption-hover {
- display: block;
-}
-
-.carousel:hover .carousel-control {
- display: flex;
-}
-
-/***********************************************
- * Typeahead image
- ***********************************************/
-.typeahead-image {
- width: 100%;
-}
-
-/***********************************************
- * Permission checkboxes
- ***********************************************/
-.permission-checkbox:checked {
- background-color: var(--bs-success);
- border-color: var(--bs-success);
-}
-
-/***********************************************
- * Form required dots
- ***********************************************/
-
-form .col-form-label.required:after, form label.required:after {
- bottom: 4px;
- color: var(--bs-dark);
- content: "\2022";
- filter: opacity(75%);
- position: relative;
- right: -2px;
- z-index: 700;
-}
\ No newline at end of file
diff --git a/assets/css/app/bs-overrides.css b/assets/css/app/bs-overrides.css
new file mode 100644
index 00000000..6043aafe
--- /dev/null
+++ b/assets/css/app/bs-overrides.css
@@ -0,0 +1,108 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+a.badge {
+ text-decoration: none;
+}
+
+@media (min-width: 768px) {
+ .col-form-label {
+ font-weight: bold;
+ text-align: right;
+ }
+}
+
+.form-group > label,
+.form-group > .col-form-label {
+ font-weight: bold;
+}
+
+label:not(.form-check-label, .custom-control-label) {
+ font-weight: bold;
+}
+
+.form-group {
+ margin-bottom: 0.4rem;
+}
+
+.dropdown-item,
+.dropdown-header,
+.dropdown-divider {
+ padding: .1rem 1.5rem;
+}
+
+/* Hide tab content even, if tab contents are wrapped inside a form. */
+.tab-content>form>.tab-pane {
+ display: none;
+}
+
+.tab-content>form>.active {
+ display: block;
+}
+
+/*******************************************
+ * Hovering carousel gallery
+ *******************************************/
+.carousel-caption-hover {
+ display: none;
+}
+
+.carousel .mask {
+ display: none;
+}
+
+.carousel:hover .mask {
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ transition: .5s ease;
+ background-color: #0a0909;
+ opacity: 0.7;
+ border: 1px solid #dee2e6;
+ border-radius: .25rem;
+}
+
+.carousel-control {
+ display: none;
+}
+
+.carousel:hover .carousel-caption-hover {
+ display: block;
+}
+
+.carousel:hover .carousel-control {
+ display: flex;
+}
+
+/***********************************************
+ * Form required dots
+ ***********************************************/
+
+form .col-form-label.required:after, form label.required:after {
+ bottom: 4px;
+ color: var(--bs-dark);
+ content: "\2022";
+ filter: opacity(75%);
+ position: relative;
+ right: -2px;
+ z-index: 700;
+}
\ No newline at end of file
diff --git a/assets/css/app/darkmode.css b/assets/css/app/darkmode.css
new file mode 100644
index 00000000..4368ed64
--- /dev/null
+++ b/assets/css/app/darkmode.css
@@ -0,0 +1,32 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+.darkmode-layer {
+ z-index: 2020;
+}
+
+/** If darkmode is enabled revert the blening for images and videos, as these should be shown not inverted */
+.darkmode--activated img,
+.darkmode--activated video {
+ mix-blend-mode: difference;
+}
+
+.darkmode--activated .hoverpic:hover {
+ background: black;
+}
diff --git a/assets/css/app/helpers.css b/assets/css/app/helpers.css
new file mode 100644
index 00000000..23476d38
--- /dev/null
+++ b/assets/css/app/helpers.css
@@ -0,0 +1,127 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+.w-fit {
+ width: -moz-fit-content;
+ width: fit-content;
+}
+
+.bg-primary-striped {
+ background: repeating-linear-gradient(
+ -45deg,
+ var(--bs-primary),
+ var(--bs-primary) 10px,
+ var(--bs-info) 10px,
+ var(--bs-info) 20px
+ )
+}
+
+.emoji {
+ height: 1.5em;
+}
+
+.hoverpic {
+ min-width: 10px;
+ max-width: 30px;
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.thumbnail-sm {
+ max-height: 100px;
+}
+
+/* Show symbol after exteral links */
+/*noinspection CssNoGenericFontName*/
+a[target="_blank"].link-external:after {
+ content: "\f35d ";
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ margin-left: 3px;
+ font-size: smaller;
+ font-style: normal;
+ display: inline-block;
+ text-decoration: inherit;
+}
+
+/****************************************************
+* Search highlighting
+*****************************************************/
+
+span.highlight {
+ background-color: yellow;
+}
+
+/******************************
+* Breadcrumb like structural links
+********************************/
+
+/* Style the list */
+ul.structural_link {
+ padding-top: 7px;
+ padding-bottom: 7px;
+ padding-left: 0;
+ list-style: none;
+ background-color: inherit;
+}
+
+/* Display list items side by side */
+ul.structural_link li {
+ display: inline;
+ font-size: inherit;
+}
+
+/* Add a slash symbol (/) before/behind each list item */
+ul.structural_link li+li:before {
+ padding: 2px;
+ color: grey;
+ /*content: "/\00a0";*/
+ font-family: "Font Awesome 5 Free";
+ font-weight: 900;
+ font-style: normal;
+ content: "\f30b"; /* long-arrow-alt-right */
+}
+
+/* Add a color to all links inside the list */
+ul.structural_link li a {
+ color: #0275d8;
+ text-decoration: none;
+}
+
+/* Add a color on mouse-over */
+ul.structural_link li a:hover {
+ color: #01447e;
+ text-decoration: underline;
+}
+
+/***********************************************
+ * Typeahead image
+ ***********************************************/
+.typeahead-image {
+ width: 100%;
+}
+
+/***********************************************
+ * Permission checkboxes
+ ***********************************************/
+.permission-checkbox:checked {
+ background-color: var(--bs-success);
+ border-color: var(--bs-success);
+}
\ No newline at end of file
diff --git a/assets/css/app/layout.css b/assets/css/app/layout.css
new file mode 100644
index 00000000..059fc131
--- /dev/null
+++ b/assets/css/app/layout.css
@@ -0,0 +1,156 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+/************************************
+* Basic layout (Navbar, sidebar, etc.)
+*************************************/
+
+/* Add padding for fixed header bar */
+body {
+ overflow-x: hidden;
+ padding-top: 70px;
+}
+
+@media (min-width: 768px) {
+ .fixed-sidebar {
+
+ position: fixed;
+ top: 60px;
+ bottom: 0;
+ left: 0;
+ padding-left: 15px;
+ padding-right: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+
+ /*noinspection W3CssValidation*/
+ -webkit-overflow-scrolling: touch;
+
+ /** Hide scrollbar in old Firefox and Edge **/
+ -ms-overflow-style: none;
+ /*noinspection CssInvalidPropertyValue*/
+ overflow: -moz-scrollbars-none;
+ /*noinspection CssUnknownProperty*/
+ scrollbar-width: none;
+ }
+}
+
+/*noinspection W3CssValidation*/
+@media (max-width: 768px) {
+ .fixed-sidebar {
+ position: fixed;
+ top: 56px;
+ right: 0;
+ left: 0;
+ z-index: 1000;
+ width: inherit;
+ overflow-x: hidden;
+ overflow-y: auto;
+ /*noinspection W3CssValidation*/
+ -webkit-overflow-scrolling: touch;
+ max-height: 100%;
+ opacity: 0.97;
+ padding: 7px 15px 50px;
+ margin-top: -10px;
+
+ /* Fill window */
+ height: 100%;
+
+ /** Hide scrollbar in Firefox and Edge **/
+ -ms-overflow-style: none;
+ /*noinspection CssInvalidPropertyValue*/
+ overflow: -moz-scrollbars-none;
+ /* Use standard version for hiding the scrollbar */
+ scrollbar-width: none;
+
+ background-color: var(--light);
+ }
+
+ #sidebar-container {
+ margin-top: 0;
+ padding-top: 5px;
+ background-color: #F8F8F8;
+ }
+
+ /* Hide devices menu */
+ #treeBox-devices {
+ display: none;
+ }
+}
+
+/* Hide scrollbar */
+.fixed-sidebar::-webkit-scrollbar {display:none;}
+
+@media (min-width: 768px) {
+ .sidebar-collapse.collapse {
+ display: block !important;
+ height: auto !important;
+ padding-bottom: 0;
+ overflow: visible !important;
+ }
+}
+
+/* Back to top button */
+.back-to-top {
+ cursor: pointer;
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ display:none;
+ z-index: 1030;
+}
+
+
+.sidebar-title {
+ margin-top: 0;
+ font-size: 18px;
+ margin-bottom: 10px;
+ line-height: 1.1;
+}
+
+/* Blur content during loading*/
+.loading-content {
+ filter: blur(2px);
+}
+
+/*
+The sidebar toggle button floats on the left side and is hidden when the viewport is to small for
+showing the sidebar (on devices with md or higher)
+ */
+#sidebar-toggle-button {
+ position: fixed;
+ left: 3px;
+ bottom: 50%;
+}
+
+@media (max-width: 576px) {
+ #sidebar-toggle-button {
+ display: none;
+ }
+}
+
+/********************************
+* Toasts
+ ********************************/
+.toast-container {
+ position: fixed;
+ top: auto;
+ z-index: 3000; /* Over darkmode layer for correct colors! */
+ right: 25px;
+}
diff --git a/assets/css/app/tables.css b/assets/css/app/tables.css
new file mode 100644
index 00000000..13708772
--- /dev/null
+++ b/assets/css/app/tables.css
@@ -0,0 +1,105 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+/****************************************
+* Tables
+****************************************/
+
+/* We need to override the z index, or the elements will overlap the fixed header from datatables. */
+table .input-group .form-control {
+ z-index: 0;
+}
+
+table .input-group-btn:last-child>.btn, table .input-group-btn:last-child>.btn-group {
+ z-index: 0;
+}
+
+/* Hide datatables fixedHeaders on small devices */
+@media only screen and (max-width: 1000px){
+ .fixedHeader-floating {
+ display: none;
+ }
+}
+
+/**
+ * Enforce white links on selected rows in datatables
+ */
+table.dataTable > tbody > tr.selected > td > a {
+ color: white !important;
+}
+
+/*******************************
+ Parts datatable styling
+ ******************************/
+.attach-table-icon {
+ margin-right: 0.7em;
+ color: var(--bs-gray);
+}
+.attach-table-icon:hover {
+ color: var(--bs-gray-dark);
+}
+.badge-table {
+ margin-right: 0.2em;
+}
+
+/** Do not add margin below description in part table */
+.markdown-inline p {
+ margin-block-end: 0;
+}
+
+.card-footer-table {
+ padding-top: 0;
+}
+
+table.dataTable {
+ margin-top: 0 !important;
+}
+
+div.dataTables_wrapper div.dataTables_info {
+ white-space: normal;
+}
+
+/** Ensure proper rendering/spacing of the select checkbox in tables */
+th.select-checkbox {
+ min-width: 10px;
+}
+
+/********************************************************************
+ * Datatables definitions/overrides
+ ********************************************************************/
+
+.dataTables_length {
+ display: inline-flex;
+}
+
+/** Fix datatables select-checkbox position */
+table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
+ margin-top: -28px !important;
+}
+
+
+/******************************************************
+Classes for Datatables export
+*******************************************************/
+
+#export-title,
+#export-messageTop,
+.export-helper{
+ display: none;
+}
\ No newline at end of file
diff --git a/assets/css/app/treeview.css b/assets/css/app/treeview.css
new file mode 100644
index 00000000..dc85cb1b
--- /dev/null
+++ b/assets/css/app/treeview.css
@@ -0,0 +1,53 @@
+/*
+ * This file is part of Part-DB (https://github.com/Part-DB/Part-DB-symfony).
+ *
+ * Copyright (C) 2019 - 2022 Jan Böhmer (https://github.com/jbtronics)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see .
+ */
+
+/******************************
+* Bootstrap treeview overrides
+*******************************/
+/* Set display style to flexbox, so wraped text is aligned to */
+
+.list-group-item {
+ padding: 5px 10px;
+ display: flex;
+}
+
+.treeview {
+ font-size: 12px;
+}
+
+@media (max-width: 768px) {
+ .treeview span.icon {
+ width: 20px !important;
+ height: 20px !important;
+ }
+}
+
+.fa-treeview {
+ line-height: 1.428;
+}
+
+.treeview-sm .list-group-item {
+ padding-top: 3px;
+ padding-bottom: 3px;
+}
+
+.treeview .badge {
+ margin-left: auto;
+ line-height: 1.42857143;
+}
\ No newline at end of file
diff --git a/assets/js/app.js b/assets/js/app.js
index df469a78..34debb89 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -18,7 +18,14 @@
*/
// Main CSS files
-import '../css/app.css';
+//import '../css/app.css';
+
+import '../css/app/layout.css';
+import '../css/app/helpers.css';
+import '../css/app/darkmode.css';
+import '../css/app/tables.css';
+import '../css/app/bs-overrides.css';
+import '../css/app/treeview.css';
// start the Stimulus application
import '../bootstrap';
diff --git a/config/packages/datatables.yaml b/config/packages/datatables.yaml
index 7f85df10..0ccd6434 100644
--- a/config/packages/datatables.yaml
+++ b/config/packages/datatables.yaml
@@ -11,7 +11,7 @@ datatables:
lengthMenu : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
pageLength: 50
#dom: "<'row' <'col-sm-12' tr>><'row' <'col-sm-6'l><'col-sm-6 text-right'pif>>"
- dom: " <'row'<'col mb-2 input-group' B l> <'col mb-2' <'pull-right' p>>>
+ dom: " <'row'<'col mb-2 input-group' B l> <'col mb-2' <'pull-end' p>>>
<'card'
rt
<'card-footer card-footer-table text-muted' i >
diff --git a/package.json b/package.json
index fbd30fa8..d5fbd103 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
"clipboard": "^2.0.4",
"compression-webpack-plugin": "^10.0.0",
"copy-webpack-plugin": "^11.0.0",
- "corejs-typeahead": "^1.2.1",
"darkmode-js": "^1.5.0",
"datatables.net-bs5": "^1.10.20",
"datatables.net-buttons-bs5": "^2.2.2",
diff --git a/templates/Users/user_info.html.twig b/templates/Users/user_info.html.twig
index 5afe3581..ab9790a0 100644
--- a/templates/Users/user_info.html.twig
+++ b/templates/Users/user_info.html.twig
@@ -30,7 +30,7 @@
diff --git a/yarn.lock b/yarn.lock
index d4831832..c6cfc04a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2655,13 +2655,6 @@ core-util-is@~1.0.0:
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
-corejs-typeahead@^1.2.1:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/corejs-typeahead/-/corejs-typeahead-1.3.1.tgz#26b9b158cba7f123556c74068bffce9356505bd3"
- integrity sha512-fyNlBNWJNL6EQUnJyAunEzBzRcwR2cEHtZXBi2pndHPOJ/wpOf3wbS+/Oh+kYYS5sKowQcs0LFwMSl6Y2Xeqkw==
- dependencies:
- jquery ">=1.11"
-
cosmiconfig@^7.0.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
@@ -4188,7 +4181,7 @@ jest-worker@^29.1.2:
merge-stream "^2.0.0"
supports-color "^8.0.0"
-jquery@>=1.11, jquery@>=1.7, jquery@^3.5.1:
+jquery@>=1.7, jquery@^3.5.1:
version "3.6.1"
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.1.tgz#fab0408f8b45fc19f956205773b62b292c147a16"
integrity sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==