diff --git a/LMEMappeCatastaliApp.csproj b/LMEMappeCatastaliApp.csproj
index 11bbc75..abafcf5 100644
--- a/LMEMappeCatastaliApp.csproj
+++ b/LMEMappeCatastaliApp.csproj
@@ -28,8 +28,8 @@
com.companyname.lmemappecatastaliapp
- 0.2.25
- 29
+ 0.2.26
+ 30
None
diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css
index 0848879..58ef3ed 100644
--- a/wwwroot/css/app.css
+++ b/wwwroot/css/app.css
@@ -176,10 +176,11 @@ input[type="checkbox"] {
position: absolute;
top: 72px;
right: 12px;
+ bottom: calc(var(--nav-height) + 8px);
z-index: 940;
display: grid;
- width: min(760px, 62vw, calc(100% - 24px));
- max-height: calc(100% - 152px);
+ box-sizing: border-box;
+ width: min(480px, 50vw);
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 8px;
@@ -274,8 +275,12 @@ input[type="checkbox"] {
.layer-manager-block > summary,
.layer-manager-object > summary {
display: grid;
- grid-template-columns: 28px 20px minmax(0, 1fr) auto auto;
- align-items: center;
+ grid-template-columns: 28px minmax(0, 1fr) 24px;
+ grid-template-areas:
+ "handle title count"
+ ". visibility moves"
+ ". actions moves";
+ align-items: start;
gap: 6px;
min-height: 38px;
padding: 4px 6px;
@@ -283,10 +288,6 @@ input[type="checkbox"] {
list-style: none;
}
-.layer-manager-with-actions > summary {
- grid-template-columns: 28px 20px minmax(0, 1fr) auto auto auto;
-}
-
.layer-manager-group > summary::-webkit-details-marker,
.layer-manager-block > summary::-webkit-details-marker,
.layer-manager-object > summary::-webkit-details-marker {
@@ -294,6 +295,7 @@ input[type="checkbox"] {
}
.layer-drag-handle {
+ grid-area: handle;
width: 28px;
height: 28px;
border: 0;
@@ -307,22 +309,37 @@ input[type="checkbox"] {
}
.layer-row-actions {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-end;
+ grid-area: actions;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ width: min(130px, 100%);
gap: 4px;
}
+.layer-manager-group > summary > input,
+.layer-manager-block > summary > input,
+.layer-manager-object > summary > input {
+ grid-area: visibility;
+ justify-self: start;
+ width: 20px;
+ height: 20px;
+ margin: 1px 0;
+}
+
.layer-rename-button,
.layer-remove-button {
+ width: 100%;
min-height: 28px;
- padding: 0 8px;
+ min-width: 0;
+ padding: 4px;
border: 1px solid #bfd4cd;
border-radius: 4px;
background: #eef8f5;
color: var(--accent-strong);
font-size: 10px;
font-weight: 800;
+ line-height: 1.15;
+ overflow-wrap: anywhere;
}
.layer-rename-button:active {
@@ -340,8 +357,9 @@ input[type="checkbox"] {
}
.layer-move-buttons {
+ grid-area: moves;
display: inline-grid;
- grid-template-columns: 24px 24px;
+ grid-template-columns: 24px;
gap: 2px;
}
@@ -363,6 +381,7 @@ input[type="checkbox"] {
}
.layer-manager-title {
+ grid-area: title;
min-width: 0;
overflow-wrap: anywhere;
font-size: 12px;
@@ -370,18 +389,20 @@ input[type="checkbox"] {
}
.layer-manager-count {
+ grid-area: count;
+ justify-self: end;
color: var(--muted);
font-size: 10px;
}
.layer-manager-children {
- padding: 0 5px 5px 18px;
+ padding: 0 4px 5px 6px;
}
.layer-manager-details {
display: grid;
gap: 2px;
- padding: 0 8px 7px 40px;
+ padding: 0 6px 7px 12px;
color: var(--muted);
font-size: 10px;
}
@@ -932,29 +953,8 @@ footer {
.map-layer-panel {
top: 68px;
right: 8px;
- width: calc(100% - 16px);
- max-height: calc(100% - 144px);
- }
-
- .layer-manager-with-actions > summary {
- grid-template-columns: 28px 20px minmax(0, 1fr) auto;
- }
-
- .layer-manager-with-actions > summary > .layer-row-actions {
- grid-row: 2;
- grid-column: 3;
- justify-content: flex-start;
- }
-
- .layer-manager-with-actions > summary > .layer-move-buttons {
- grid-row: 1;
- grid-column: 4;
- }
-
- .layer-manager-with-actions > summary > .layer-manager-count {
- grid-row: 2;
- grid-column: 4;
- justify-self: end;
+ bottom: calc(var(--nav-height) + 8px);
+ width: 50vw;
}
.tool-sheet {
@@ -1015,12 +1015,6 @@ footer {
}
}
-@media (min-width: 701px) and (max-width: 1100px) {
- .map-layer-panel {
- width: min(680px, calc(100% - 24px));
- }
-}
-
@media (max-width: 380px) {
.app-identity span {
display: none;