diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue index fa0897c..7cc1908 100644 --- a/components/viewer/ViewProjectObj.vue +++ b/components/viewer/ViewProjectObj.vue @@ -14,14 +14,16 @@ }" @click="toggle" > -
- +
+
+ +
{{ obj.title }} @@ -49,15 +51,20 @@ - +
+
+
-
@@ -79,12 +86,14 @@ const { preview = false, width = null, alwaysEnable = false, + template = null, } = defineProps<{ row: ProjectRow; obj: ProjectObj; preview?: boolean; width?: string; alwaysEnable?: boolean; + template?: string; }>(); const objClass = computed(() => { @@ -99,6 +108,21 @@ const objClass = computed(() => { return ['col', { [className]: true }]; }); +const objTemplateClass = computed(() => { + // Allow to override the template + // Used in the search results since the object view is always single-column + switch (template ?? obj.template) { + case '1': + return 'obj-template-top'; + case '2': + return 'obj-template-left'; + case '3': + return 'obj-template-right'; + } + + return 'obj-template-top'; +}); + const store = useProjectStore(); const { selectedIds, selected } = useProjectRefs(); @@ -158,6 +182,25 @@ const decrement = () => { .project-obj-content { overflow: auto; + + &.obj-template-top { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto; + grid-template-areas: 'image' 'text'; + } + &.obj-template-left { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr; + grid-template-areas: 'image text'; + } + &.obj-template-right { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; + grid-template-areas: 'text image'; + } } &.notSelectable { @@ -165,12 +208,21 @@ const decrement = () => { border-radius: 0; } + .obj-image-wrapper { + display: flex; + flex-direction: row; + justify-content: center; + + grid-area: image; + } .obj-image { width: 100%; + object-fit: contain; } .obj-content { overflow-x: auto; + grid-area: text; .obj-title { margin-bottom: 5px; diff --git a/components/viewer/modal/SearchModal.vue b/components/viewer/modal/SearchModal.vue index ac262c1..e78fdc5 100644 --- a/components/viewer/modal/SearchModal.vue +++ b/components/viewer/modal/SearchModal.vue @@ -38,6 +38,7 @@ :obj="searchView.obj" :row="searchView.row" preview + template="1" /> @@ -171,6 +172,8 @@ const preview = (obj: ProjectObj, row: ProjectRow) => { display: grid; gap: 0.5em; + height: 100%; + grid-template: 'header header' auto 'list list' 1fr @@ -179,7 +182,7 @@ const preview = (obj: ProjectObj, row: ProjectRow) => { &.show-view { grid-template: 'header header' auto - 'list view' 1fr + 'list view' auto / 2fr 1fr; } diff --git a/components/viewer/style/engine.ts b/components/viewer/style/engine.ts index f49d78a..98214e4 100644 --- a/components/viewer/style/engine.ts +++ b/components/viewer/style/engine.ts @@ -198,10 +198,6 @@ export class ObjStylesGen extends StyleGenerator { object-fit: {{objectImgObjectFillStyle}}; height: {{objectImgObjectFillHeight}}px; {{/if}} - - {{#if objectImgOverflowIsOn}} - overflow: hidden; - {{/if}} } .addon { .text { @@ -223,10 +219,6 @@ export class ObjStylesGen extends StyleGenerator { margin: {{objectMargin}}px; */ - {{#if objectOverflowIsOn}} - overflow: hidden; - {{/if}} - {{#if objectBorderIsOn}} border-color: {{objectBorderColor}}; border-style: {{objectBorderStyle}}; diff --git a/composables/project.ts b/composables/project.ts index 519228f..6b24897 100644 --- a/composables/project.ts +++ b/composables/project.ts @@ -178,6 +178,7 @@ export type ProjectObj = HasId & isPrivateStyling: boolean; styling: ObjStyles; + template: string; }; export type ProjectRow = HasId &