diff --git a/components/viewer/ViewAddon.vue b/components/viewer/ViewAddon.vue index 93320f6..e4849ef 100644 --- a/components/viewer/ViewAddon.vue +++ b/components/viewer/ViewAddon.vue @@ -1,9 +1,9 @@ @@ -33,15 +33,5 @@ watch(selectedIds, (newSelection) => { &.disabled { background: gray; } - - .obj-title { - font-size: 1em; - font-weight: bold; - text-align: center; - } - - .obj-text { - text-align: center; - } } diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue index 2c3b452..fa0897c 100644 --- a/components/viewer/ViewProjectObj.vue +++ b/components/viewer/ViewProjectObj.vue @@ -50,7 +50,11 @@ -
+
diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue index 2c759c7..5a05959 100644 --- a/components/viewer/ViewProjectRow.vue +++ b/components/viewer/ViewProjectRow.vue @@ -5,7 +5,7 @@ :styles="row.styling" row-id="row.id" /> -
+
condition(selectedIds.value)); display: flex; flex-direction: column; - &.hidden { - display: none; + .margin { + margin-top: 5px; + margin-bottom: 5px; } .row-meta { diff --git a/components/viewer/style/engine.ts b/components/viewer/style/engine.ts index 0114cf3..f49d78a 100644 --- a/components/viewer/style/engine.ts +++ b/components/viewer/style/engine.ts @@ -85,9 +85,6 @@ export class RowStylesGen extends StyleGenerator { background-color: {{rowBgColor}}; {{/if}} - font-family: {{rowText}}; - color: {{rowTextColor}}; - .row-title { font-family: {{rowTitle}}; font-size: {{rowTitleTextSize}}%; @@ -95,13 +92,24 @@ export class RowStylesGen extends StyleGenerator { color: {{rowTitleColor}}; } .row-text { - font-size: {{rowTextTextSize}}%; + font-family: {{rowText}}; text-align: {{rowTextAlign}}; + font-size: {{rowTextTextSize}}%; + color: {{rowTextColor}}; padding: {{rowTextPaddingX}}px {{rowTextPaddingY}}%; } .row-image { width: {{rowImageWidth}}%; - margin-top: {{rowImageMarginTop}}px; + margin-top: {{rowImageMarginTop}}%; + margin-bottom: {{rowImageMarginBottom}}%; + + {{#if rowImgOverflowIsOn}} + overflow: hidden; + {{/if}} + + {{#if rowImgBorderIsOn}} + border: {{rowImgBorderWidth}}px {{rowImgBorderStyle}} {{rowImgBorderColor}}; + {{/if}} } .row-body { margin-left: {{rowMargin}}%; @@ -112,6 +120,14 @@ export class RowStylesGen extends StyleGenerator { margin-bottom: {{rowBodyMarginBottom}}px; margin-left: {{rowBodyMarginSides}}%; margin-right: {{rowBodyMarginSides}}%; + + {{#if rowOverFlowIsOn}} + overflow: hidden; + {{/if}} + + {{#if rowBorderIsOn}} + border: {{rowBorderWidth}}px {{rowBorderStyle}} {{rowBorderColor}}; + {{/if}} } `; } @@ -160,8 +176,6 @@ export class ObjStylesGen extends StyleGenerator { background-color: {{objectBgColor}}; {{/if}} - font-family: {{objectText}}; - color: {{objectTextColor}}; .obj-title { font-family: {{objectTitle}}; font-size: {{objectTitleTextSize}}%; @@ -169,15 +183,49 @@ export class ObjStylesGen extends StyleGenerator { text-align: {{objectTitleAlign}}; } .obj-text { - font-size: {{objectTextTextSize}}%; + font-family: {{objectText}}; text-align: {{objectTextAlign}}; + color: {{objectTextColor}}; + padding: {{objectTextPadding}}px; + font-size: {{objectTextTextSize}}%; } .obj-image { width: {{objectImageWidth}}%; margin-top: {{objectImageMarginTop}}px; margin-bottom: {{objectImageMarginBottom}}px; - object-fit: cover; + + {{#if objectImgObjectFillIsOn}} + object-fit: {{objectImgObjectFillStyle}}; + height: {{objectImgObjectFillHeight}}px; + {{/if}} + + {{#if objectImgOverflowIsOn}} + overflow: hidden; + {{/if}} } + .addon { + .text { + font-family: {{addonText}}; + font-size: {{addonTextTextSize}}%; + color: {{addonTextColor}}; + text-align: {{addonTextAlign}}; + } + + .title { + font-family: {{addonTitle}}; + font-size: {{addonTitleTextSize}}%; + color: {{addonTitleColor}}; + text-align: {{addonTitleAlign}}; + } + } + + /* FIXME: Disabled as it messes up parent colunms, appears related to grid.css + margin: {{objectMargin}}px; + */ + + {{#if objectOverflowIsOn}} + overflow: hidden; + {{/if}} {{#if objectBorderIsOn}} border-color: {{objectBorderColor}}; diff --git a/composables/project.ts b/composables/project.ts index ad70ca6..519228f 100644 --- a/composables/project.ts +++ b/composables/project.ts @@ -27,14 +27,13 @@ export type ObjStyles = ScoreStyles & { objectText: string; objectTextTextSize: 100; objectTextAlign: TextAlignT; + objectTextColor: string; objectTextPadding: 10; objectImageWidth: number; objectImageMarginTop: number; objectImageMarginBottom: number; - objectTextColor: string; - objectBgColorIsOn: boolean; objectBgColor: string; objectBackgroundImage: string; @@ -51,9 +50,14 @@ export type ObjStyles = ScoreStyles & { objectImgBorderColor: string; objectImgBorderIsOn: boolean; + objectImgFillIsOn: boolean; + objectImgObjectFillStyle: string; + objectImgObjectFillHeight: string; + objectImgOverflowIsOn: boolean; objectMargin: number; objectHeight: boolean; + objectOverflowIsOn: boolean; selBgColorIsOn: boolean; selFilterBgColor: string; @@ -85,17 +89,19 @@ export type RowStyles = ObjStyles & rowBodyMarginTop: number | string; rowBorderColor: string; - rowBorderIsOn: false; + rowBorderIsOn: boolean; rowBorderStyle: string; rowBorderWidth: number; rowOverFlowIsOn: boolean; rowImageMarginTop: number; + rowImageMarginBottom: number; rowImageWidth: number; rowImgBorderColor: string; rowImgBorderIsOn: boolean; rowImgBorderStyle: string; rowImgBorderWidth: number; + rowImgOverflowIsOn: boolean; rowMargin: number; };