feat(layout): adjust margin handling + daily images

gerdesque · Feb 14, 2021 · 07fd127 · 07fd127
1 parent 3390ccc
commit 07fd127
Show file tree

Hide file tree

Showing 14 changed files with 12 additions and 5 deletions.
diff --git a/apps/demol/src/assets/daily.webp b/apps/demol/src/assets/daily.webp
diff --git a/apps/demol/src/assets/daily_result.webp b/apps/demol/src/assets/daily_result.webp
diff --git a/apps/demol/src/assets/daily_result_DE.webp b/apps/demol/src/assets/daily_result_DE.webp
diff --git a/apps/demol/src/assets/daily_result_EN.webp b/apps/demol/src/assets/daily_result_EN.webp
diff --git a/apps/demol/src/assets/fallback/daily.png b/apps/demol/src/assets/fallback/daily.png
diff --git a/apps/demol/src/assets/fallback/daily_result.png b/apps/demol/src/assets/fallback/daily_result.png
diff --git a/apps/demol/src/assets/fallback/daily_result_DE.png b/apps/demol/src/assets/fallback/daily_result_DE.png
diff --git a/apps/demol/src/assets/fallback/daily_result_EN.png b/apps/demol/src/assets/fallback/daily_result_EN.png
diff --git a/libs/ui/src/lib/chapter/chapter.scss b/libs/ui/src/lib/chapter/chapter.scss
@@ -25,18 +25,19 @@
     align-items: center;
     justify-content: center;
     flex-flow: row wrap;
-    padding: 0 16px;
 
     &--fore {
       transform: translateZ(90px) scale(.7);
       z-index: 1;
       align-content: baseline;
+      padding: 0 16px;
     }
 
     &--base {
       transform: translateZ(0);
       z-index: 4;
       background: 50% 50% / cover;
+      padding: 0 16px;
     }
 
     &--back {
@@ -96,6 +97,7 @@
 
 .fourth {
   flex: 0 25%;
+  padding: 5px;
 }
 
 .fifth {

diff --git a/libs/ui/src/lib/daily/daily.scss b/libs/ui/src/lib/daily/daily.scss
@@ -29,13 +29,13 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: 1.7rem;
+    font-size: 0.9rem;
   }
 
   img {
     height: auto;
     text-align: center;
-    width: 60%;
+    width: 100%;
     margin: 0 auto 0;
     justify-content: center;
     display: flex;
@@ -50,5 +50,6 @@
 @media (min-width: 600px) {
   .daily .component_box {
     height: 45vh;
+    font-size: 1.4rem;
   }
 }
diff --git a/libs/ui/src/lib/daily/daily.tsx b/libs/ui/src/lib/daily/daily.tsx
@@ -42,7 +42,8 @@ export const Daily = (props: DailyProps) => {
 
   const showStatus = () => {
     if (result) {
-      return <Image value='daily_result' />
+      const imgValue = language === 'de' ? 'daily_result_DE' : 'daily_result_EN';
+      return <Image value={imgValue} />
     }
     return (
       <>

diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
@@ -1,6 +1,7 @@
 .chapter_picture {
   max-width: 100%;
   display: block;
+  margin: auto;
   filter: saturate(.8);
   opacity: .9;
   transition: all 0.50s;

diff --git a/libs/ui/src/lib/info/info.scss b/libs/ui/src/lib/info/info.scss
@@ -18,7 +18,8 @@
     overflow: hidden;
     background-color: rgba(0,0,0,.7);
     color: var(--color-link);
-    font-size: 1.1rem;
+    font-size: 1.3rem;
+    width: 300px;
 
     p {
       text-shadow: none;

diff --git a/libs/ui/src/lib/text/text.scss b/libs/ui/src/lib/text/text.scss
@@ -1,5 +1,6 @@
 .box {
   width: 80%;
+  margin: auto;
 }
 
 p {