|
@@ -385,13 +385,10 @@ const gridStyle = computed(() => {
|
|
|
const compactSize = Math.min(baseCellWidth, baseCellHeight)
|
|
const compactSize = Math.min(baseCellWidth, baseCellHeight)
|
|
|
|
|
|
|
|
const showGroup = compactSize > 58 ? 'block' : 'none'
|
|
const showGroup = compactSize > 58 ? 'block' : 'none'
|
|
|
- const textFontSize = Math.max(compactSize <= 56 ? 8 : 9, 8)
|
|
|
|
|
- const idFontSize = Math.max(
|
|
|
|
|
- compactSize <= 34 ? 8 : compactSize <= 42 ? 9 : compactSize <= 56 ? 9 : 10,
|
|
|
|
|
- 9
|
|
|
|
|
- )
|
|
|
|
|
- const contentGap = compactSize <= 42 ? 1 : 3
|
|
|
|
|
- const contentPadding = Math.max(compactSize <= 42 ? 1 : 3, 1)
|
|
|
|
|
|
|
+ const textFontSize = Math.max(Math.floor(compactSize / 6), 6)
|
|
|
|
|
+ const idFontSize = Math.max(Math.floor(compactSize / 4.2), 6)
|
|
|
|
|
+ const contentGap = compactSize <= 36 ? 0 : compactSize <= 48 ? 1 : 3
|
|
|
|
|
+ const contentPadding = Math.max(compactSize <= 36 ? 1 : compactSize <= 48 ? 2 : 3, 1)
|
|
|
const groupBorderWidth = compactSize <= 34 ? 1 : 2
|
|
const groupBorderWidth = compactSize <= 34 ? 1 : 2
|
|
|
|
|
|
|
|
return {
|
|
return {
|
|
@@ -1220,11 +1217,9 @@ onBeforeUnmount(() => {
|
|
|
font-size: var(--cell-group-font-size, 10px);
|
|
font-size: var(--cell-group-font-size, 10px);
|
|
|
color: var(--cell-group);
|
|
color: var(--cell-group);
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 1.2;
|
|
|
|
|
|
|
+ line-height: 1.15;
|
|
|
word-break: break-all;
|
|
word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ white-space: normal;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.location-id {
|
|
.location-id {
|
|
@@ -1233,10 +1228,10 @@ onBeforeUnmount(() => {
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
color: var(--cell-id);
|
|
color: var(--cell-id);
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 1.1;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
|
+ line-height: 1.05;
|
|
|
|
|
+ white-space: normal;
|
|
|
|
|
+ word-break: break-all;
|
|
|
|
|
+ padding: 0 1px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.location-id.location-id-mismatch {
|
|
.location-id.location-id-mismatch {
|
|
@@ -1252,10 +1247,9 @@ onBeforeUnmount(() => {
|
|
|
font-size: calc(var(--cell-id-font-size, 11px) - 2px);
|
|
font-size: calc(var(--cell-id-font-size, 11px) - 2px);
|
|
|
color: var(--cell-alert);
|
|
color: var(--cell-alert);
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 1.1;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
|
+ line-height: 1.05;
|
|
|
|
|
+ white-space: normal;
|
|
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.container-code {
|
|
.container-code {
|
|
@@ -1263,10 +1257,9 @@ onBeforeUnmount(() => {
|
|
|
font-size: calc(var(--cell-id-font-size, 11px) - 2px);
|
|
font-size: calc(var(--cell-id-font-size, 11px) - 2px);
|
|
|
color: var(--cell-container);
|
|
color: var(--cell-container);
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- line-height: 1.1;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
|
|
|
+ line-height: 1.05;
|
|
|
|
|
+ white-space: normal;
|
|
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.special-cell-label {
|
|
.special-cell-label {
|