Merge pull request #31 from Arzte/styling

Finish a lot of the styling.
ltouroumov · Sep 5, 2024 · f9c4161 · f9c4161
2 parents 7dcbfdd + 0cbf230
commit f9c4161
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 29 deletions.
diff --git a/components/viewer/ViewAddon.vue b/components/viewer/ViewAddon.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="obj-addon" :class="{ disabled: !isEnabled }">
-    <div class="obj-title">{{ addon.title }}</div>
+  <div class="addon" :class="{ disabled: !isEnabled }">
+    <div class="title">{{ addon.title }}</div>
     <ViewRequirements :requireds="addon.requireds" :show-always="true" />
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div class="obj-text" v-html="formatText(addon.text)"></div>
+    <div class="text" v-html="formatText(addon.text)"></div>
   </div>
 </template>
 
@@ -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;
-  }
 }
 </style>
diff --git a/components/viewer/ViewProjectObj.vue b/components/viewer/ViewProjectObj.vue
@@ -50,7 +50,11 @@
           <ViewScores :scores="obj.scores" />
           <ViewRequirements :requireds="obj.requireds" />
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <div class="obj-text" v-html="formatText(obj.text)"></div>
+          <div
+            v-if="obj.text"
+            class="obj-text"
+            v-html="formatText(obj.text)"
+          ></div>
         </div>
       </div>
       <ViewAddon v-for="(addon, idx) in obj.addons" :key="idx" :addon="addon" />

diff --git a/components/viewer/ViewProjectRow.vue b/components/viewer/ViewProjectRow.vue
@@ -5,7 +5,7 @@
       :styles="row.styling"
       row-id="row.id"
     />
-    <div class="project-row" :class="{ hidden: !isVisible }">
+    <div v-show="isVisible" class="project-row">
       <div class="row-body">
         <img
           v-if="row.image"
@@ -61,8 +61,9 @@ const isVisible = computed(() => 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
@@ -85,23 +85,31 @@ export class RowStylesGen extends StyleGenerator<RowStyles> {
       background-color: {{rowBgColor}};
       {{/if}}
       
-      font-family: {{rowText}};
-      color: {{rowTextColor}};
-      
       .row-title {
         font-family: {{rowTitle}};
         font-size: {{rowTitleTextSize}}%;
         text-align: {{rowTitleAlign}};
         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<RowStyles> {
       margin-bottom: {{rowBodyMarginBottom}}px;
       margin-left: {{rowBodyMarginSides}}%;
       margin-right: {{rowBodyMarginSides}}%;
+
+      {{#if rowOverFlowIsOn}}
+      overflow: hidden;
+      {{/if}}
+
+      {{#if rowBorderIsOn}}
+      border: {{rowBorderWidth}}px {{rowBorderStyle}} {{rowBorderColor}};
+      {{/if}}
     }
   `;
 }
@@ -160,24 +176,56 @@ export class ObjStylesGen extends StyleGenerator<ObjStyles> {
       background-color: {{objectBgColor}};
       {{/if}}
       
-      font-family: {{objectText}};
-      color: {{objectTextColor}};
       .obj-title {
         font-family: {{objectTitle}};
         font-size: {{objectTitleTextSize}}%;
         color: {{objectTitleColor}};
         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
@@ -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;
   };