Improve toolbox checklists, image browsing, and guide integration
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
This commit is contained in:
parent
00e73f0062
commit
386212041f
47 changed files with 744 additions and 112 deletions
|
|
@ -91,6 +91,16 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.game-heading-actions,
|
||||
.guide-checklist-page-controls {
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.guide-checklist-page-controls {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.home-onboarding-steps-action {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
@ -236,6 +246,34 @@
|
|||
height: min(280px, 32vh);
|
||||
}
|
||||
|
||||
.image-viewer-root {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
width: calc(100vw - 16px);
|
||||
max-height: calc(100vh - 16px);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.image-viewer.is-gallery {
|
||||
height: calc(100vh - 16px);
|
||||
}
|
||||
|
||||
.image-viewer-body.has-navigation {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.image-viewer-gallery {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.image-viewer-gallery-frame {
|
||||
min-height: 180px;
|
||||
height: min(42vh, 260px);
|
||||
}
|
||||
|
||||
.module-column {
|
||||
display: contents;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -407,13 +407,14 @@
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
.toolbox-icon-button {
|
||||
padding: 0;
|
||||
.toolbox-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.toolbox-icon-button img {
|
||||
.toolbox-button img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
flex: 0 0 auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -173,9 +173,9 @@
|
|||
}
|
||||
|
||||
.nds-filter-search {
|
||||
flex: 0 1 280px;
|
||||
width: min(100%, 280px);
|
||||
max-width: 280px;
|
||||
flex: 0 1 260px;
|
||||
width: min(100%, 260px);
|
||||
max-width: 260px;
|
||||
min-width: min(100%, 190px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,28 @@
|
|||
.guide-checklist-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); padding-top: var(--space-2); }
|
||||
}
|
||||
.module-guide-button[data-linked] .ui-icon { color: var(--color-accent-gold); }
|
||||
.game-heading-actions {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.guide-checklist-page-controls {
|
||||
display: flex;
|
||||
align-self: flex-end;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
width: fit-content;
|
||||
padding: 8px;
|
||||
}
|
||||
.guide-checklist-page-controls .nds-switch { max-width: 100%; }
|
||||
.game-heading-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.guide-checklist-checkbox {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Rôle : stylise le viewer d'image et son panneau d'annotation.
|
||||
// Rôle : stylise la visionneuse d'image, sa galerie et son panneau d'annotation.
|
||||
.image-viewer-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
|
|
@ -38,6 +38,13 @@
|
|||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.image-viewer-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.image-viewer-title {
|
||||
overflow: hidden;
|
||||
color: var(--color-text);
|
||||
|
|
@ -46,6 +53,17 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-viewer-position {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 9px;
|
||||
border: 1px solid rgba(246, 196, 83, 0.22);
|
||||
border-radius: var(--radius-pill);
|
||||
background: rgba(246, 196, 83, 0.08);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.image-viewer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -69,6 +87,24 @@
|
|||
justify-items: stretch;
|
||||
}
|
||||
|
||||
.image-viewer-body.has-navigation {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.image-viewer-nav {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.image-viewer-nav .ui-icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.image-viewer-nav-next .ui-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.image-viewer-media {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
|
@ -158,3 +194,73 @@
|
|||
overscroll-behavior: contain;
|
||||
padding: 4px 4px 4px 0;
|
||||
}
|
||||
|
||||
.image-viewer.is-gallery {
|
||||
height: min(860px, calc(100vh - 48px));
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.image-viewer-gallery {
|
||||
display: grid;
|
||||
min-height: 0;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
align-content: start;
|
||||
gap: var(--space-4);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 2px 6px 2px 2px;
|
||||
}
|
||||
|
||||
.image-viewer-gallery-item {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-viewer-gallery-item.is-active {
|
||||
border-color: rgba(246, 196, 83, 0.52);
|
||||
box-shadow: inset 0 0 0 1px rgba(246, 196, 83, 0.16);
|
||||
}
|
||||
|
||||
.image-viewer-gallery-frame {
|
||||
display: grid;
|
||||
min-height: 200px;
|
||||
height: clamp(200px, 24vh, 280px);
|
||||
place-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(5, 7, 17, 0.72);
|
||||
}
|
||||
|
||||
.image-viewer-gallery-frame img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.image-viewer-gallery-caption {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.image-viewer-gallery-caption strong {
|
||||
overflow: hidden;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image-viewer-gallery-caption small {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,16 @@
|
|||
|
||||
.checklist-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4) var(--space-4) 0;
|
||||
}
|
||||
|
||||
.checklist-hide-completed-toggle {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.checklist-complete-mode-group {
|
||||
@include controls.radio-button-group;
|
||||
width: fit-content;
|
||||
|
|
|
|||
|
|
@ -194,6 +194,21 @@
|
|||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.images-toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-4) var(--space-4) 0;
|
||||
}
|
||||
|
||||
.images-toolbar .ui-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.images-toolbar + .images {
|
||||
padding-top: var(--space-3);
|
||||
}
|
||||
|
||||
.images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
|
|
|
|||
|
|
@ -145,6 +145,15 @@
|
|||
-webkit-mask-size: contain;
|
||||
}
|
||||
|
||||
.toolbox-module-empty {
|
||||
margin: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
border: 1px dashed rgba(165, 180, 252, 0.18);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.module-icon-notepad {
|
||||
mask-image: url("/static/icons/notepad.svg");
|
||||
-webkit-mask-image: url("/static/icons/notepad.svg");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue