@visns-studio/visns-components 5.5.9 → 5.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +4 -2
- package/src/components/cms/DataGrid.jsx +5 -5
- package/src/components/crm/DataGrid.jsx +19 -13
- package/src/components/crm/Form.jsx +2 -2
- package/src/components/crm/MultiSelect.jsx +48 -1
- package/src/components/crm/Navigation.jsx +6 -1
- package/src/components/crm/auth/styles/Profile.module.scss +2 -2
- package/src/components/crm/generic/GenericReport.jsx +1 -1
- package/src/components/crm/generic/GenericSort.jsx +7 -6
- package/src/components/crm/generic/styles/AuditLog.module.scss +1 -1
- package/src/components/crm/generic/styles/AuditLogs.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericDashboard.module.scss +3 -3
- package/src/components/crm/generic/styles/GenericDetail.module.scss +5 -5
- package/src/components/crm/generic/styles/GenericDynamic.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericFormBuilder.module.scss +1 -1
- package/src/components/crm/generic/styles/GenericIndex.module.scss +6 -6
- package/src/components/crm/generic/styles/GenericQuote.module.scss +5 -5
- package/src/components/crm/generic/styles/GenericSort.module.scss +96 -16
- package/src/components/crm/generic/styles/NotificationList.module.scss +1 -1
- package/src/components/crm/sorting/Item.jsx +4 -4
- package/src/components/crm/sorting/styles/Item.module.scss +6 -6
- package/src/components/crm/sorting/styles/List.module.scss +19 -11
- package/src/components/crm/styles/Navigation.module.scss +146 -7
package/package.json
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
"@nivo/line": "^0.88.0",
|
|
10
10
|
"@nivo/pie": "^0.88.0",
|
|
11
11
|
"@tinymce/tinymce-react": "^6.1.0",
|
|
12
|
+
"@visns-studio/visns-datagrid-community": "^1.0.14",
|
|
13
|
+
"@visns-studio/visns-datagrid-enterprise": "^1.0.14",
|
|
12
14
|
"@vitejs/plugin-react": "^4.4.1",
|
|
13
15
|
"add": "^2.0.6",
|
|
14
16
|
"akar-icons": "^1.9.31",
|
|
@@ -74,7 +76,7 @@
|
|
|
74
76
|
"mini-css-extract-plugin": "^2.9.2",
|
|
75
77
|
"react": "^18.3.1",
|
|
76
78
|
"react-dom": "^18.3.1",
|
|
77
|
-
"sass": "^1.
|
|
79
|
+
"sass": "^1.87.0",
|
|
78
80
|
"sass-loader": "^16.0.5"
|
|
79
81
|
},
|
|
80
82
|
"peerDependencies": {
|
|
@@ -82,7 +84,7 @@
|
|
|
82
84
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
83
85
|
},
|
|
84
86
|
"name": "@visns-studio/visns-components",
|
|
85
|
-
"version": "5.
|
|
87
|
+
"version": "5.6.1",
|
|
86
88
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
87
89
|
"main": "src/index.js",
|
|
88
90
|
"files": [
|
|
@@ -6,10 +6,10 @@ import moment from 'moment';
|
|
|
6
6
|
import numeral from 'numeral';
|
|
7
7
|
import Popup from 'reactjs-popup';
|
|
8
8
|
import parse from 'html-react-parser';
|
|
9
|
-
import NumberFilter from '@
|
|
10
|
-
import SelectFilter from '@
|
|
11
|
-
import DateFilter from '@
|
|
12
|
-
import ReactDataGrid from '@
|
|
9
|
+
import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
10
|
+
import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
11
|
+
import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
12
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
13
13
|
import { confirmAlert } from 'react-confirm-alert';
|
|
14
14
|
import { toast } from 'react-toastify';
|
|
15
15
|
import Toggle from 'react-toggle';
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
TriangleAlert,
|
|
32
32
|
} from 'akar-icons';
|
|
33
33
|
|
|
34
|
-
import '@
|
|
34
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
35
35
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
36
36
|
import 'react-toggle/style.css';
|
|
37
37
|
|
|
@@ -19,15 +19,10 @@ import 'reactjs-popup/dist/index.css';
|
|
|
19
19
|
import parse from 'html-react-parser';
|
|
20
20
|
import 'react-toggle/style.css';
|
|
21
21
|
import { saveAs } from 'file-saver';
|
|
22
|
-
import NumberFilter from '@
|
|
23
|
-
import SelectFilter from '@
|
|
24
|
-
import DateFilter from '@
|
|
25
|
-
import ReactDataGrid from '@
|
|
26
|
-
// import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
27
|
-
// import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
28
|
-
// import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
29
|
-
// import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
30
|
-
// import { Gallery } from 'react-grid-gallery';
|
|
22
|
+
import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
|
|
23
|
+
import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
|
|
24
|
+
import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
|
|
25
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
31
26
|
import { confirmAlert } from 'react-confirm-alert';
|
|
32
27
|
import { toast } from 'react-toastify';
|
|
33
28
|
import imageCompression from 'browser-image-compression';
|
|
@@ -58,12 +53,13 @@ import {
|
|
|
58
53
|
Ribbon,
|
|
59
54
|
Search,
|
|
60
55
|
ShippingBoxV1,
|
|
56
|
+
Sort,
|
|
61
57
|
SoundOn,
|
|
62
58
|
TriangleAlert,
|
|
63
59
|
} from 'akar-icons';
|
|
64
60
|
import styles from './styles/DataGrid.module.scss';
|
|
65
61
|
|
|
66
|
-
import '@
|
|
62
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
67
63
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
68
64
|
import 'yet-another-react-lightbox/styles.css';
|
|
69
65
|
|
|
@@ -1100,6 +1096,11 @@ const DataGrid = forwardRef(
|
|
|
1100
1096
|
}}
|
|
1101
1097
|
onClick={exportTrigger}
|
|
1102
1098
|
>
|
|
1099
|
+
<LinkOut
|
|
1100
|
+
strokeWidth={2}
|
|
1101
|
+
size={16}
|
|
1102
|
+
style={{ marginRight: '10px' }}
|
|
1103
|
+
/>{' '}
|
|
1103
1104
|
Export
|
|
1104
1105
|
</button>
|
|
1105
1106
|
)}
|
|
@@ -1113,7 +1114,12 @@ const DataGrid = forwardRef(
|
|
|
1113
1114
|
}}
|
|
1114
1115
|
onClick={sortTrigger}
|
|
1115
1116
|
>
|
|
1116
|
-
<
|
|
1117
|
+
<Sort
|
|
1118
|
+
strokeWidth={2}
|
|
1119
|
+
size={16}
|
|
1120
|
+
style={{ marginRight: '10px' }}
|
|
1121
|
+
/>{' '}
|
|
1122
|
+
Sort Order
|
|
1117
1123
|
</button>
|
|
1118
1124
|
)}
|
|
1119
1125
|
|
|
@@ -1224,9 +1230,9 @@ const DataGrid = forwardRef(
|
|
|
1224
1230
|
<div className={styles.searchInputWrapper}>
|
|
1225
1231
|
<div
|
|
1226
1232
|
className={styles['icon-search']}
|
|
1227
|
-
style={{ left: 25,
|
|
1233
|
+
style={{ left: 25, color: '#000' }}
|
|
1228
1234
|
>
|
|
1229
|
-
<Search strokeWidth={
|
|
1235
|
+
<Search strokeWidth={2} size={14} />
|
|
1230
1236
|
</div>
|
|
1231
1237
|
<input
|
|
1232
1238
|
type="text"
|
|
@@ -8,12 +8,12 @@ import { saveAs } from 'file-saver';
|
|
|
8
8
|
import moment from 'moment';
|
|
9
9
|
import parse from 'html-react-parser';
|
|
10
10
|
import _ from 'lodash';
|
|
11
|
-
import ReactDataGrid from '@
|
|
11
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
12
12
|
import { CircleX } from 'akar-icons';
|
|
13
13
|
import { confirmAlert } from 'react-confirm-alert';
|
|
14
14
|
import imageCompression from 'browser-image-compression';
|
|
15
15
|
|
|
16
|
-
import '@
|
|
16
|
+
import '@visns-studio/visns-datagrid-enterprise/index.css';
|
|
17
17
|
import 'react-confirm-alert/src/react-confirm-alert.css';
|
|
18
18
|
|
|
19
19
|
import CustomFetch from './Fetch';
|
|
@@ -5,6 +5,18 @@ import Select, { createFilter } from 'react-select';
|
|
|
5
5
|
import CreatableSelect from 'react-select/creatable';
|
|
6
6
|
import styles from './styles/MultiSelect.module.scss';
|
|
7
7
|
|
|
8
|
+
// Helper function to detect if the device is a mobile/touch device
|
|
9
|
+
const isTouchDevice = () => {
|
|
10
|
+
// Check if window is defined (to avoid SSR issues)
|
|
11
|
+
if (typeof window === 'undefined') return false;
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
'ontouchstart' in window ||
|
|
15
|
+
(navigator && navigator.maxTouchPoints > 0) ||
|
|
16
|
+
(navigator && navigator.msMaxTouchPoints > 0)
|
|
17
|
+
);
|
|
18
|
+
};
|
|
19
|
+
|
|
8
20
|
function MultiSelect({
|
|
9
21
|
className,
|
|
10
22
|
inputValue = [], // Default to an empty array
|
|
@@ -20,6 +32,15 @@ function MultiSelect({
|
|
|
20
32
|
const [selectOptions, setSelectOptions] = useState([]);
|
|
21
33
|
const [selectValue, setSelectValue] = useState([]);
|
|
22
34
|
const prevInputValueRef = useRef();
|
|
35
|
+
const [menuPlacement, setMenuPlacement] = useState('bottom');
|
|
36
|
+
|
|
37
|
+
// Detect if it's a touch device and set menu placement accordingly
|
|
38
|
+
// This helps prevent the dropdown from being hidden by the onscreen keyboard on mobile devices
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (isTouchDevice()) {
|
|
41
|
+
setMenuPlacement('top'); // Open dropdown above the input on touch devices
|
|
42
|
+
}
|
|
43
|
+
}, []);
|
|
23
44
|
|
|
24
45
|
useEffect(() => {
|
|
25
46
|
const _options =
|
|
@@ -99,6 +120,24 @@ function MultiSelect({
|
|
|
99
120
|
|
|
100
121
|
const SelectComponent = isCreatable ? CreatableSelect : Select;
|
|
101
122
|
|
|
123
|
+
// Handle menu opening to ensure it's visible on mobile
|
|
124
|
+
const handleMenuOpen = () => {
|
|
125
|
+
if (isTouchDevice()) {
|
|
126
|
+
// Give a small delay for the menu to render
|
|
127
|
+
setTimeout(() => {
|
|
128
|
+
const menuElement = document.querySelector(
|
|
129
|
+
'.visns-select__menu'
|
|
130
|
+
);
|
|
131
|
+
if (menuElement) {
|
|
132
|
+
menuElement.scrollIntoView({
|
|
133
|
+
behavior: 'smooth',
|
|
134
|
+
block: 'nearest',
|
|
135
|
+
});
|
|
136
|
+
}
|
|
137
|
+
}, 50);
|
|
138
|
+
}
|
|
139
|
+
};
|
|
140
|
+
|
|
102
141
|
return (
|
|
103
142
|
<SelectComponent
|
|
104
143
|
closeMenuOnSelect={!multi || settings.limit === 1}
|
|
@@ -109,6 +148,8 @@ function MultiSelect({
|
|
|
109
148
|
components={{ SelectList }}
|
|
110
149
|
options={selectOptions}
|
|
111
150
|
menuPortalTarget={document.body}
|
|
151
|
+
menuPlacement={menuPlacement}
|
|
152
|
+
onMenuOpen={handleMenuOpen}
|
|
112
153
|
onChange={(inputValue, action) => {
|
|
113
154
|
// Special handling for limit=1: keep only the most recent selection
|
|
114
155
|
if (
|
|
@@ -135,6 +176,10 @@ function MultiSelect({
|
|
|
135
176
|
...provided,
|
|
136
177
|
zIndex: 99999,
|
|
137
178
|
}),
|
|
179
|
+
option: (base) => ({
|
|
180
|
+
...base,
|
|
181
|
+
padding: isTouchDevice() ? '12px 15px' : base.padding, // Larger padding for touch devices
|
|
182
|
+
}),
|
|
138
183
|
menuPortal: (base) => ({
|
|
139
184
|
...base,
|
|
140
185
|
zIndex: 99999,
|
|
@@ -144,7 +189,9 @@ function MultiSelect({
|
|
|
144
189
|
minHeight:
|
|
145
190
|
style && style.multi_select_height
|
|
146
191
|
? style.multi_select_height
|
|
147
|
-
:
|
|
192
|
+
: isTouchDevice()
|
|
193
|
+
? '44px'
|
|
194
|
+
: '50px', // Apple's recommended minimum touch target size
|
|
148
195
|
height: 'auto', // Allow height to grow with content
|
|
149
196
|
}),
|
|
150
197
|
valueContainer: (base) => ({
|
|
@@ -305,7 +305,7 @@ function Navigation({
|
|
|
305
305
|
const renderChildren = () => {
|
|
306
306
|
if (n.children && n.children.length > 0) {
|
|
307
307
|
return (
|
|
308
|
-
<ul>
|
|
308
|
+
<ul className={styles.navDropdown}>
|
|
309
309
|
{n.children.map(
|
|
310
310
|
(child, childKey) =>
|
|
311
311
|
child.permission === true && (
|
|
@@ -313,6 +313,11 @@ function Navigation({
|
|
|
313
313
|
<Link
|
|
314
314
|
to={child.url}
|
|
315
315
|
title={child.label}
|
|
316
|
+
className={
|
|
317
|
+
location.pathname === child.url
|
|
318
|
+
? styles.active
|
|
319
|
+
: ''
|
|
320
|
+
}
|
|
316
321
|
>
|
|
317
322
|
{child.label}
|
|
318
323
|
</Link>
|
|
@@ -42,7 +42,7 @@ select:focus + .fi__span {
|
|
|
42
42
|
position: relative;
|
|
43
43
|
padding: 2px;
|
|
44
44
|
margin: 8px 0;
|
|
45
|
-
box-shadow: 0
|
|
45
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
.grid__subrow {
|
|
@@ -62,7 +62,7 @@ select:focus + .fi__span {
|
|
|
62
62
|
padding: 5px;
|
|
63
63
|
margin: 8px 0;
|
|
64
64
|
height: auto;
|
|
65
|
-
box-shadow: 0
|
|
65
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.grid__subnav > ul {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { toast } from 'react-toastify';
|
|
3
3
|
import moment from 'moment';
|
|
4
|
-
import ReactDataGrid from '@
|
|
4
|
+
import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
|
|
5
5
|
import { CircleX, Question } from 'akar-icons';
|
|
6
6
|
import CustomFetch from '../Fetch';
|
|
7
7
|
import Download from '../Download';
|
|
@@ -144,13 +144,14 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
|
|
|
144
144
|
}`}
|
|
145
145
|
>
|
|
146
146
|
<Breadcrumb
|
|
147
|
-
data={
|
|
148
|
-
label: camelCaseToUcFirst(routeParams.dataId),
|
|
149
|
-
}} // Use utility function here
|
|
147
|
+
data={page.data}
|
|
150
148
|
page={{
|
|
151
|
-
parentTitle:
|
|
152
|
-
parentUrl:
|
|
153
|
-
|
|
149
|
+
parentTitle: page.setting.title,
|
|
150
|
+
parentUrl: page.setting.previousUrl,
|
|
151
|
+
parentTitleKey: page.setting.titleKey,
|
|
152
|
+
parentUrlKey: 'id',
|
|
153
|
+
titleKey: [],
|
|
154
|
+
titleText: 'Sort Order',
|
|
154
155
|
}}
|
|
155
156
|
/>
|
|
156
157
|
</div>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
position: relative;
|
|
16
16
|
padding: 20px;
|
|
17
17
|
margin: 8px 0;
|
|
18
|
-
box-shadow: 0
|
|
18
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
.grid__half {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
position: relative;
|
|
42
42
|
padding: 20px;
|
|
43
43
|
margin: 8px 0;
|
|
44
|
-
box-shadow: 0
|
|
44
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.grid__twothird {
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
position: relative;
|
|
55
55
|
padding: 20px;
|
|
56
56
|
margin: 8px 0;
|
|
57
|
-
box-shadow: 0
|
|
57
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
/* The remaining CSS remains largely unchanged */
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 20px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.grid__half {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
position: relative;
|
|
40
40
|
padding: 20px;
|
|
41
41
|
margin: 8px 0;
|
|
42
|
-
box-shadow: 0
|
|
42
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.grid__full {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
position: relative;
|
|
53
53
|
padding: 2px;
|
|
54
54
|
margin: 8px 0;
|
|
55
|
-
box-shadow: 0
|
|
55
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.grid__dashfull {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
position: relative;
|
|
66
66
|
padding: 20px;
|
|
67
67
|
margin: 8px 0;
|
|
68
|
-
box-shadow: 0
|
|
68
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.grid__subrow {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
padding: 5px;
|
|
85
85
|
margin: 8px 0;
|
|
86
86
|
height: auto;
|
|
87
|
-
box-shadow: 0
|
|
87
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.grid__subnav > ul {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
position: relative;
|
|
18
18
|
padding: 20px;
|
|
19
19
|
margin: 8px 0;
|
|
20
|
-
box-shadow: 0
|
|
20
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.grid__half {
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
position: relative;
|
|
44
44
|
padding: 2px;
|
|
45
45
|
margin: 8px 0;
|
|
46
|
-
box-shadow: 0
|
|
46
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.grid__dashfull {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
position: relative;
|
|
57
57
|
padding: 20px;
|
|
58
58
|
margin: 8px 0;
|
|
59
|
-
box-shadow: 0
|
|
59
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
.grid__subrow {
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
padding: 5px;
|
|
76
76
|
margin: 8px 0;
|
|
77
77
|
height: auto;
|
|
78
|
-
box-shadow: 0
|
|
78
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.grid__subnav > ul {
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
padding: 5px;
|
|
127
127
|
margin: 8px 0;
|
|
128
128
|
height: auto;
|
|
129
|
-
box-shadow: 0
|
|
129
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.grid__subnav__alternate > ul {
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
margin: 8px 0;
|
|
187
187
|
height: auto;
|
|
188
188
|
position: relative;
|
|
189
|
-
box-shadow: 0
|
|
189
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
190
190
|
}
|
|
191
191
|
|
|
192
192
|
.grid__subcontent h2 {
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 20px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.grid__half {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
position: relative;
|
|
40
40
|
padding: 20px;
|
|
41
41
|
margin: 8px 0;
|
|
42
|
-
box-shadow: 0
|
|
42
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.grid__full {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
position: relative;
|
|
53
53
|
padding: 2px;
|
|
54
54
|
margin: 8px 0;
|
|
55
|
-
box-shadow: 0
|
|
55
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.grid__dashfull {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
position: relative;
|
|
66
66
|
padding: 20px;
|
|
67
67
|
margin: 8px 0;
|
|
68
|
-
box-shadow: 0
|
|
68
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.grid__subrow {
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
padding: 5px;
|
|
85
85
|
margin: 8px 0;
|
|
86
86
|
height: auto;
|
|
87
|
-
box-shadow: 0
|
|
87
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
.grid__subnav > ul {
|
|
@@ -26,7 +26,86 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
padding: 2px;
|
|
28
28
|
margin: 8px 0;
|
|
29
|
-
box-shadow: 0
|
|
29
|
+
box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.crmtitle {
|
|
33
|
+
min-height: auto;
|
|
34
|
+
padding: 1rem;
|
|
35
|
+
margin: 0;
|
|
36
|
+
background: white;
|
|
37
|
+
border-radius: var(--br);
|
|
38
|
+
border: 1px solid rgba(var(--primary-rgb), 0.15);
|
|
39
|
+
position: relative;
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: center;
|
|
42
|
+
justify-content: space-between;
|
|
43
|
+
|
|
44
|
+
h1 {
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
font-size: 1.25rem;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
line-height: 1;
|
|
50
|
+
|
|
51
|
+
a {
|
|
52
|
+
text-decoration: none;
|
|
53
|
+
color: var(--secondary-color);
|
|
54
|
+
font-weight: 400;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
svg {
|
|
58
|
+
color: rgba(var(--primary-rgb), 0.5);
|
|
59
|
+
position: relative;
|
|
60
|
+
top: 2px;
|
|
61
|
+
margin: 0 0.5rem;
|
|
62
|
+
max-width: 15px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.titleInfo {
|
|
67
|
+
width: max-content;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.titleInfo span {
|
|
71
|
+
font-size: 0.875em;
|
|
72
|
+
color: rgba(var(--primary-rgb), 0.65);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.crmtitleSimple {
|
|
77
|
+
min-height: auto;
|
|
78
|
+
padding: 1rem;
|
|
79
|
+
margin: 0;
|
|
80
|
+
background: white;
|
|
81
|
+
border-radius: var(--br);
|
|
82
|
+
border: 1px solid rgba(var(--primary-rgb), 0.15);
|
|
83
|
+
position: relative;
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
justify-content: space-between;
|
|
87
|
+
|
|
88
|
+
h1 {
|
|
89
|
+
font-weight: 700;
|
|
90
|
+
font-size: 1.25rem;
|
|
91
|
+
margin: 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
line-height: 1;
|
|
94
|
+
|
|
95
|
+
a {
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
color: var(--secondary-color);
|
|
98
|
+
font-weight: 400;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
svg {
|
|
102
|
+
color: rgba(var(--primary-rgb), 0.5);
|
|
103
|
+
position: relative;
|
|
104
|
+
top: 2px;
|
|
105
|
+
margin: 0 0.5rem;
|
|
106
|
+
max-width: 15px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
30
109
|
}
|
|
31
110
|
|
|
32
111
|
.dragitem {
|
|
@@ -35,45 +114,46 @@
|
|
|
35
114
|
justify-content: center;
|
|
36
115
|
align-items: center;
|
|
37
116
|
flex-wrap: wrap;
|
|
38
|
-
border-radius:
|
|
117
|
+
border-radius: 4px;
|
|
39
118
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
40
|
-
box-shadow: 0px 0px
|
|
41
|
-
padding:
|
|
119
|
+
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.25);
|
|
120
|
+
padding: 0.6rem;
|
|
42
121
|
box-sizing: border-box;
|
|
43
122
|
cursor: grab;
|
|
44
123
|
list-style: none;
|
|
45
124
|
color: var(--paragraph-color);
|
|
125
|
+
font-size: 0.8rem;
|
|
46
126
|
|
|
47
127
|
svg {
|
|
48
128
|
width: 100%;
|
|
49
|
-
max-width:
|
|
129
|
+
max-width: 16px;
|
|
50
130
|
position: absolute;
|
|
51
|
-
left:
|
|
52
|
-
top:
|
|
131
|
+
left: 4px;
|
|
132
|
+
top: 4px;
|
|
53
133
|
}
|
|
54
134
|
|
|
55
135
|
.pencil-edit {
|
|
56
136
|
width: 100%;
|
|
57
|
-
max-width:
|
|
137
|
+
max-width: 16px;
|
|
58
138
|
position: absolute;
|
|
59
|
-
left:
|
|
60
|
-
top:
|
|
139
|
+
left: 4px;
|
|
140
|
+
top: 24px;
|
|
61
141
|
}
|
|
62
142
|
|
|
63
143
|
.trash-delete {
|
|
64
144
|
width: 100%;
|
|
65
|
-
max-width:
|
|
145
|
+
max-width: 16px;
|
|
66
146
|
position: absolute;
|
|
67
|
-
left:
|
|
68
|
-
top:
|
|
147
|
+
left: 4px;
|
|
148
|
+
top: 44px;
|
|
69
149
|
}
|
|
70
150
|
|
|
71
151
|
.sortimg {
|
|
72
|
-
width:
|
|
152
|
+
width: 40px;
|
|
73
153
|
position: relative;
|
|
74
|
-
height:
|
|
154
|
+
height: 40px;
|
|
75
155
|
margin-left: auto;
|
|
76
|
-
border-radius:
|
|
156
|
+
border-radius: 4px;
|
|
77
157
|
overflow: hidden;
|
|
78
158
|
|
|
79
159
|
img {
|
|
@@ -5,7 +5,7 @@ import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
|
|
|
5
5
|
import styles from './styles/Item.module.scss';
|
|
6
6
|
|
|
7
7
|
const DragHandle = sortableHandle(() => (
|
|
8
|
-
<ChevronVertical className="drag-handle" strokeWidth={1} size={
|
|
8
|
+
<ChevronVertical className="drag-handle" strokeWidth={1} size={22} />
|
|
9
9
|
));
|
|
10
10
|
|
|
11
11
|
// Utility function to truncate text
|
|
@@ -67,7 +67,7 @@ const SortableItem = ({
|
|
|
67
67
|
<Pencil
|
|
68
68
|
className={styles['edit']}
|
|
69
69
|
strokeWidth={1}
|
|
70
|
-
size={
|
|
70
|
+
size={22}
|
|
71
71
|
onClick={(e) => {
|
|
72
72
|
e.preventDefault();
|
|
73
73
|
e.stopPropagation();
|
|
@@ -88,7 +88,7 @@ const SortableItem = ({
|
|
|
88
88
|
<DragHandle />
|
|
89
89
|
{truncateText(
|
|
90
90
|
value.label || value.file_title || value.file_name,
|
|
91
|
-
|
|
91
|
+
25
|
|
92
92
|
)}
|
|
93
93
|
|
|
94
94
|
{renderImage(value)}
|
|
@@ -99,7 +99,7 @@ const SortableItem = ({
|
|
|
99
99
|
<TrashCan
|
|
100
100
|
className={styles.delete}
|
|
101
101
|
strokeWidth={1}
|
|
102
|
-
size={
|
|
102
|
+
size={22}
|
|
103
103
|
onClick={(e) => {
|
|
104
104
|
e.preventDefault();
|
|
105
105
|
e.stopPropagation();
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
.edit {
|
|
2
2
|
width: 100%;
|
|
3
|
-
max-width:
|
|
3
|
+
max-width: 16px;
|
|
4
4
|
position: absolute;
|
|
5
|
-
left:
|
|
6
|
-
top:
|
|
5
|
+
left: 4px !important;
|
|
6
|
+
top: 24px !important;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.delete {
|
|
10
10
|
width: 100%;
|
|
11
|
-
max-width:
|
|
11
|
+
max-width: 16px;
|
|
12
12
|
position: absolute;
|
|
13
|
-
left:
|
|
14
|
-
top:
|
|
13
|
+
left: 4px !important;
|
|
14
|
+
top: 24px !important;
|
|
15
15
|
}
|
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
.sortlist {
|
|
2
2
|
width: 100%;
|
|
3
3
|
display: grid;
|
|
4
|
-
grid-gap: 0.
|
|
4
|
+
grid-gap: 0.4rem;
|
|
5
5
|
grid-template-columns: repeat(1, 1fr);
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
padding: 0;
|
|
8
8
|
margin: 0;
|
|
9
|
-
font-size: 0.
|
|
9
|
+
font-size: 0.8rem;
|
|
10
10
|
list-style: none;
|
|
11
11
|
|
|
12
|
+
@media (min-width: 576px) {
|
|
13
|
+
grid-template-columns: repeat(2, 1fr);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@media (min-width: 992px) {
|
|
17
|
+
grid-template-columns: repeat(3, 1fr);
|
|
18
|
+
}
|
|
19
|
+
|
|
12
20
|
li {
|
|
13
21
|
display: flex;
|
|
14
22
|
justify-content: center;
|
|
15
23
|
align-items: center;
|
|
16
24
|
flex-wrap: wrap;
|
|
17
|
-
border-radius:
|
|
25
|
+
border-radius: 4px;
|
|
18
26
|
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
|
19
|
-
box-shadow: 0px 0px
|
|
20
|
-
padding:
|
|
27
|
+
box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
|
|
28
|
+
padding: 0.6rem 0.6rem 0.6rem 1.5rem;
|
|
21
29
|
|
|
22
30
|
box-sizing: border-box;
|
|
23
31
|
cursor: pointer;
|
|
@@ -28,19 +36,19 @@
|
|
|
28
36
|
|
|
29
37
|
svg {
|
|
30
38
|
width: 100%;
|
|
31
|
-
max-width:
|
|
39
|
+
max-width: 16px;
|
|
32
40
|
position: absolute;
|
|
33
|
-
left:
|
|
34
|
-
top:
|
|
41
|
+
left: 4px;
|
|
42
|
+
top: 4px;
|
|
35
43
|
}
|
|
36
44
|
}
|
|
37
45
|
|
|
38
46
|
.sortimg {
|
|
39
|
-
width:
|
|
47
|
+
width: 40px;
|
|
40
48
|
position: relative;
|
|
41
|
-
height:
|
|
49
|
+
height: 40px;
|
|
42
50
|
margin-left: auto;
|
|
43
|
-
border-radius:
|
|
51
|
+
border-radius: 4px;
|
|
44
52
|
overflow: hidden;
|
|
45
53
|
|
|
46
54
|
img {
|
|
@@ -40,6 +40,17 @@
|
|
|
40
40
|
|
|
41
41
|
.navwrap {
|
|
42
42
|
flex: 1;
|
|
43
|
+
overflow-x: auto;
|
|
44
|
+
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
|
|
45
|
+
|
|
46
|
+
/* Hide scrollbar for most browsers but keep functionality */
|
|
47
|
+
scrollbar-width: none; /* Firefox */
|
|
48
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
49
|
+
|
|
50
|
+
/* Hide scrollbar for Chrome/Safari/Opera */
|
|
51
|
+
&::-webkit-scrollbar {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
43
54
|
}
|
|
44
55
|
|
|
45
56
|
.app-nav {
|
|
@@ -51,6 +62,14 @@
|
|
|
51
62
|
list-style: none;
|
|
52
63
|
align-items: center;
|
|
53
64
|
padding: 0;
|
|
65
|
+
width: max-content; /* Ensure it takes the width of all items */
|
|
66
|
+
min-width: 100%; /* Start at 100% width */
|
|
67
|
+
|
|
68
|
+
.navDropdown {
|
|
69
|
+
border-radius: var(--br);
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
72
|
+
}
|
|
54
73
|
|
|
55
74
|
.nav-item,
|
|
56
75
|
.nav-item-alternate {
|
|
@@ -58,6 +77,7 @@
|
|
|
58
77
|
transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
59
78
|
box-sizing: border-box;
|
|
60
79
|
position: relative;
|
|
80
|
+
flex-shrink: 0; /* Prevent items from shrinking too much */
|
|
61
81
|
|
|
62
82
|
a,
|
|
63
83
|
span {
|
|
@@ -111,22 +131,37 @@
|
|
|
111
131
|
display: none;
|
|
112
132
|
opacity: 0;
|
|
113
133
|
background: rgba(var(--primary-rgb), 0.75);
|
|
134
|
+
border-radius: var(--br);
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
margin-top: 1px;
|
|
137
|
+
clip-path: inset(0 0 0 0 round var(--br));
|
|
114
138
|
|
|
115
139
|
li {
|
|
116
140
|
display: block;
|
|
117
141
|
position: relative;
|
|
118
142
|
margin: 1px 0;
|
|
119
|
-
|
|
143
|
+
border-radius: 0;
|
|
120
144
|
|
|
121
|
-
&:first-of-type {
|
|
122
|
-
border-top-right-radius: var(--br)
|
|
123
|
-
border-top-left-radius: var(--br)
|
|
145
|
+
&:first-of-type > a {
|
|
146
|
+
border-top-right-radius: var(--br);
|
|
147
|
+
border-top-left-radius: var(--br);
|
|
148
|
+
border-bottom-right-radius: 0;
|
|
149
|
+
border-bottom-left-radius: 0;
|
|
124
150
|
}
|
|
125
151
|
|
|
126
152
|
&:last-of-type {
|
|
127
|
-
border-bottom-right-radius: var(--br) !important;
|
|
128
|
-
border-bottom-left-radius: var(--br) !important;
|
|
129
153
|
margin-bottom: 0;
|
|
154
|
+
|
|
155
|
+
> a {
|
|
156
|
+
border-bottom-right-radius: var(--br);
|
|
157
|
+
border-bottom-left-radius: var(--br);
|
|
158
|
+
border-top-right-radius: 0;
|
|
159
|
+
border-top-left-radius: 0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
&:not(:first-of-type):not(:last-of-type) > a {
|
|
164
|
+
border-radius: 0;
|
|
130
165
|
}
|
|
131
166
|
|
|
132
167
|
> a {
|
|
@@ -135,12 +170,12 @@
|
|
|
135
170
|
box-sizing: border-box;
|
|
136
171
|
display: block;
|
|
137
172
|
text-decoration: none;
|
|
138
|
-
border-radius: 0;
|
|
139
173
|
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
140
174
|
outline: none;
|
|
141
175
|
margin: 0;
|
|
142
176
|
background: rgba(var(--primary-rgb), 1);
|
|
143
177
|
color: var(--tertiary-color) !important;
|
|
178
|
+
position: relative;
|
|
144
179
|
}
|
|
145
180
|
|
|
146
181
|
&:hover a {
|
|
@@ -195,14 +230,36 @@
|
|
|
195
230
|
opacity: 0;
|
|
196
231
|
background: rgba(var(--primary-rgb), 0.9);
|
|
197
232
|
border-radius: var(--br);
|
|
233
|
+
overflow: hidden;
|
|
234
|
+
margin-top: 1px;
|
|
235
|
+
clip-path: inset(0 0 0 0 round var(--br));
|
|
198
236
|
|
|
199
237
|
li {
|
|
200
238
|
display: block;
|
|
201
239
|
position: relative;
|
|
202
240
|
margin-bottom: 2px;
|
|
241
|
+
border-radius: 0;
|
|
242
|
+
|
|
243
|
+
&:first-of-type a {
|
|
244
|
+
border-top-right-radius: var(--br);
|
|
245
|
+
border-top-left-radius: var(--br);
|
|
246
|
+
border-bottom-right-radius: 0;
|
|
247
|
+
border-bottom-left-radius: 0;
|
|
248
|
+
}
|
|
203
249
|
|
|
204
250
|
&:last-of-type {
|
|
205
251
|
margin-bottom: 0;
|
|
252
|
+
|
|
253
|
+
a {
|
|
254
|
+
border-bottom-right-radius: var(--br);
|
|
255
|
+
border-bottom-left-radius: var(--br);
|
|
256
|
+
border-top-right-radius: 0;
|
|
257
|
+
border-top-left-radius: 0;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
&:not(:first-of-type):not(:last-of-type) a {
|
|
262
|
+
border-radius: 0;
|
|
206
263
|
}
|
|
207
264
|
|
|
208
265
|
a {
|
|
@@ -213,6 +270,7 @@
|
|
|
213
270
|
text-decoration: none;
|
|
214
271
|
background: rgba(var(--primary-rgb), 0.9);
|
|
215
272
|
color: var(--paragraph-color);
|
|
273
|
+
transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
216
274
|
}
|
|
217
275
|
|
|
218
276
|
&:hover a {
|
|
@@ -397,6 +455,15 @@
|
|
|
397
455
|
.navwrap {
|
|
398
456
|
width: 100%;
|
|
399
457
|
position: relative;
|
|
458
|
+
overflow-y: auto; /* Enable vertical scrolling */
|
|
459
|
+
max-height: calc(100vh - 50px); /* Subtract the logo height */
|
|
460
|
+
scrollbar-width: none; /* Firefox */
|
|
461
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
462
|
+
|
|
463
|
+
/* Hide scrollbar for Chrome/Safari/Opera */
|
|
464
|
+
&::-webkit-scrollbar {
|
|
465
|
+
display: none;
|
|
466
|
+
}
|
|
400
467
|
|
|
401
468
|
.app-nav {
|
|
402
469
|
width: 100%;
|
|
@@ -476,14 +543,35 @@
|
|
|
476
543
|
opacity: 0;
|
|
477
544
|
background: var(--primary-color);
|
|
478
545
|
border-radius: 5px;
|
|
546
|
+
clip-path: inset(0 0 0 0 round 5px);
|
|
547
|
+
overflow: hidden;
|
|
479
548
|
|
|
480
549
|
li {
|
|
481
550
|
display: block;
|
|
482
551
|
position: relative;
|
|
483
552
|
margin-bottom: 2px;
|
|
553
|
+
border-radius: 0;
|
|
554
|
+
|
|
555
|
+
&:first-of-type a {
|
|
556
|
+
border-top-right-radius: 3px;
|
|
557
|
+
border-top-left-radius: 3px;
|
|
558
|
+
border-bottom-right-radius: 0;
|
|
559
|
+
border-bottom-left-radius: 0;
|
|
560
|
+
}
|
|
484
561
|
|
|
485
562
|
&:last-of-type {
|
|
486
563
|
margin-bottom: 0;
|
|
564
|
+
|
|
565
|
+
a {
|
|
566
|
+
border-bottom-right-radius: 3px;
|
|
567
|
+
border-bottom-left-radius: 3px;
|
|
568
|
+
border-top-right-radius: 0;
|
|
569
|
+
border-top-left-radius: 0;
|
|
570
|
+
}
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
&:not(:first-of-type):not(:last-of-type) a {
|
|
574
|
+
border-radius: 0;
|
|
487
575
|
}
|
|
488
576
|
|
|
489
577
|
a {
|
|
@@ -526,6 +614,15 @@
|
|
|
526
614
|
flex-wrap: nowrap;
|
|
527
615
|
justify-content: space-between;
|
|
528
616
|
align-items: center;
|
|
617
|
+
overflow-x: auto; /* Allow horizontal scrolling if needed */
|
|
618
|
+
-webkit-overflow-scrolling: touch;
|
|
619
|
+
scrollbar-width: none; /* Firefox */
|
|
620
|
+
-ms-overflow-style: none; /* IE and Edge */
|
|
621
|
+
|
|
622
|
+
/* Hide scrollbar for Chrome/Safari/Opera */
|
|
623
|
+
&::-webkit-scrollbar {
|
|
624
|
+
display: none;
|
|
625
|
+
}
|
|
529
626
|
}
|
|
530
627
|
|
|
531
628
|
.content-title {
|
|
@@ -579,6 +676,17 @@
|
|
|
579
676
|
}
|
|
580
677
|
|
|
581
678
|
@media (max-width: 1024px) {
|
|
679
|
+
.hwrap {
|
|
680
|
+
grid-template-columns: auto 1fr auto;
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.navwrap {
|
|
684
|
+
position: relative;
|
|
685
|
+
overflow-x: auto;
|
|
686
|
+
-webkit-overflow-scrolling: touch;
|
|
687
|
+
padding: 0;
|
|
688
|
+
/* No fade indicators - they don't work well with scrolling */
|
|
689
|
+
}
|
|
582
690
|
.app-container {
|
|
583
691
|
width: 100%;
|
|
584
692
|
min-height: 100vh;
|
|
@@ -849,6 +957,19 @@
|
|
|
849
957
|
}
|
|
850
958
|
|
|
851
959
|
@media (max-width: 960px) {
|
|
960
|
+
.hwrap {
|
|
961
|
+
grid-template-columns: auto 1fr auto;
|
|
962
|
+
gap: 0.5rem;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
.navwrap {
|
|
966
|
+
margin: 0;
|
|
967
|
+
padding: 0;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.app-nav {
|
|
971
|
+
gap: 0.25rem; /* Reduce gap between items on smaller screens */
|
|
972
|
+
}
|
|
852
973
|
.userdetails {
|
|
853
974
|
display: none;
|
|
854
975
|
visibility: hidden;
|
|
@@ -888,6 +1009,13 @@
|
|
|
888
1009
|
flex-wrap: nowrap;
|
|
889
1010
|
align-content: center;
|
|
890
1011
|
width: 50%;
|
|
1012
|
+
min-width: 150px; /* Ensure minimum width on small screens */
|
|
1013
|
+
position: relative;
|
|
1014
|
+
|
|
1015
|
+
input {
|
|
1016
|
+
min-width: 0; /* Allow input to shrink below its content size */
|
|
1017
|
+
flex: 1; /* Take available space */
|
|
1018
|
+
}
|
|
891
1019
|
|
|
892
1020
|
button {
|
|
893
1021
|
width: max-content;
|
|
@@ -897,6 +1025,7 @@
|
|
|
897
1025
|
background: var(--primary-color);
|
|
898
1026
|
appearance: none;
|
|
899
1027
|
border-radius: var(--br);
|
|
1028
|
+
flex-shrink: 0; /* Prevent button from shrinking */
|
|
900
1029
|
|
|
901
1030
|
svg {
|
|
902
1031
|
display: block;
|
|
@@ -905,4 +1034,14 @@
|
|
|
905
1034
|
max-width: 20px;
|
|
906
1035
|
}
|
|
907
1036
|
}
|
|
1037
|
+
|
|
1038
|
+
@media (max-width: 768px) {
|
|
1039
|
+
width: auto; /* Allow to take natural width */
|
|
1040
|
+
flex: 1; /* Take available space */
|
|
1041
|
+
|
|
1042
|
+
button {
|
|
1043
|
+
margin: 0 0.25rem;
|
|
1044
|
+
padding: 0.15rem 0.35rem;
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
908
1047
|
}
|