Improve print styles

ajuvonen · Feb 9, 2024 · f09fce1 · f09fce1
1 parent cfaf3d0
commit f09fce1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 18 deletions.
diff --git a/src/components/PrintViewTable.vue b/src/components/PrintViewTable.vue
@@ -29,6 +29,10 @@ defineProps<{
 }
 
 @media print {
+  :deep(td:nth-child(even)) {
+    background-color: #FAFAFA;
+    print-color-adjust: exact !important;
+  }
   .print-view__table {
     min-height: 97vh;
     page-break-after: always;

diff --git a/src/components/SimpleTrainingCard.vue b/src/components/SimpleTrainingCard.vue
@@ -11,8 +11,8 @@ defineProps<{
 const {settings} = storeToRefs(useScheduleStore());
 </script>
 <template>
-  <div class="simple-training-card mt-4">
-    <div class="simple-training-card__title text-body-1 text-no-wrap">
+  <div class="simple-training-card my-4 text-body-1">
+    <div class="simple-training-card__title">
       <v-icon
         :icon="getIcon(training.activity)"
         :title="$t(`activities.${training.activity}`)"
@@ -21,23 +21,27 @@ const {settings} = storeToRefs(useScheduleStore());
       />
       {{ training.title || $t(`activities.${training.activity}`) }}
     </div>
-    <div class="simple-training-card__duration text-body-1">
+    <div class="simple-training-card__duration">
       <v-icon icon="mdi-timer" :aria-label="$t('trainingCard.duration')" />
       {{ training.duration || '-' }} {{ settings.unitOfTime }}
     </div>
-    <div class="simple-training-card__location text-body-1">
+    <div class="simple-training-card__location">
       <v-icon icon="mdi-map-marker" :aria-label="$t('trainingCard.location')" />
       {{ training.location || '-' }}
     </div>
-    <div class="simple-training-card__intensity text-body-1">
+    <div class="simple-training-card__intensity">
       <v-icon icon="mdi-speedometer" :aria-label="$t('trainingCard.intensity')" />
       {{ $t(`intensities.${training.intensity}`) }}
     </div>
   </div>
 </template>
 <style lang="scss" scoped>
 .simple-training-card {
-  position: relative;
+  max-width: 200px;
+  > div {
+    display: flex;
+    gap: 0.5rem;
+  }
 }
 
 .v-icon {

diff --git a/src/components/TrainingCard.vue b/src/components/TrainingCard.vue
@@ -37,7 +37,7 @@ const {settings} = storeToRefs(useScheduleStore());
         />
       </div>
       <v-card-title class="ml-11">
-        <div class="training-card__title">
+        <div class="training-card__title text-truncate">
           {{ training.title || $t(`activities.${training.activity}`) }}
         </div>
         <div class="training-card__duration text-subtitle-2">
@@ -82,11 +82,6 @@ const {settings} = storeToRefs(useScheduleStore());
   height: 7rem;
 }
 
-.training-card__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .training-card__text {
   margin-top: 7rem;
   padding: 0;

diff --git a/src/components/__tests__/__snapshots__/SimpleTrainingCard.spec.ts.snap b/src/components/__tests__/__snapshots__/SimpleTrainingCard.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SimpleTrainingCard > mounts 1`] = `
-"<div data-v-d91f3409="" class="simple-training-card mt-4">
-  <div data-v-d91f3409="" class="simple-training-card__title text-body-1 text-no-wrap"><i data-v-d91f3409="" class="mdi-boxing-glove mdi v-icon notranslate v-theme--light v-icon--size-default simple-training-card__activity-icon" aria-hidden="true" title="Boxing" aria-label="Boxing"></i> Boxing</div>
-  <div data-v-d91f3409="" class="simple-training-card__duration text-body-1"><i data-v-d91f3409="" class="mdi-timer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Duration"></i> 1 h</div>
-  <div data-v-d91f3409="" class="simple-training-card__location text-body-1"><i data-v-d91f3409="" class="mdi-map-marker mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Location"></i> Total wreck gym</div>
-  <div data-v-d91f3409="" class="simple-training-card__intensity text-body-1"><i data-v-d91f3409="" class="mdi-speedometer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Intensity"></i> Normal</div>
+"<div data-v-d91f3409="" class="simple-training-card my-4 text-body-1">
+  <div data-v-d91f3409="" class="simple-training-card__title"><i data-v-d91f3409="" class="mdi-boxing-glove mdi v-icon notranslate v-theme--light v-icon--size-default simple-training-card__activity-icon" aria-hidden="true" title="Boxing" aria-label="Boxing"></i> Boxing</div>
+  <div data-v-d91f3409="" class="simple-training-card__duration"><i data-v-d91f3409="" class="mdi-timer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Duration"></i> 1 h</div>
+  <div data-v-d91f3409="" class="simple-training-card__location"><i data-v-d91f3409="" class="mdi-map-marker mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Location"></i> Total wreck gym</div>
+  <div data-v-d91f3409="" class="simple-training-card__intensity"><i data-v-d91f3409="" class="mdi-speedometer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Intensity"></i> Normal</div>
 </div>"
 `;
diff --git a/src/components/__tests__/__snapshots__/TrainingCard.spec.ts.snap b/src/components/__tests__/__snapshots__/TrainingCard.spec.ts.snap
@@ -25,7 +25,7 @@ exports[`TrainingCard > mounts 1`] = `
       <!---->
       <div data-v-24c3dbf4="" class="training-card__icons d-flex align-center"><i data-v-24c3dbf4="" class="mdi-boxing-glove mdi v-icon notranslate v-theme--light v-icon--size-x-large training-card__activity-icon" aria-hidden="true" title="Boxing" aria-label="Boxing"></i></div>
       <div data-v-24c3dbf4="" class="v-card-title ml-11">
-        <div data-v-24c3dbf4="" class="training-card__title">Boxing</div>
+        <div data-v-24c3dbf4="" class="training-card__title text-truncate">Boxing</div>
         <div data-v-24c3dbf4="" class="training-card__duration text-subtitle-2"><i data-v-24c3dbf4="" class="mdi-timer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Duration"></i> 1 h</div>
         <div data-v-24c3dbf4="" class="training-card__intensity text-subtitle-2"><i data-v-24c3dbf4="" class="mdi-speedometer mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Intensity"></i> Normal</div>
         <div data-v-24c3dbf4="" class="training-card__location text-subtitle-2"><i data-v-24c3dbf4="" class="mdi-map-marker mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true" aria-label="Training Location"></i> Total wreck gym</div>