feat(image): add avatar images

gerdesque · Jun 26, 2020 · 240ab16 · 240ab16
1 parent 72ef306
commit 240ab16
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 15 deletions.
diff --git a/apps/demol/src/assets/daheim_anna.webp b/apps/demol/src/assets/daheim_anna.webp
diff --git a/apps/demol/src/assets/daheim_gerda.webp b/apps/demol/src/assets/daheim_gerda.webp
diff --git a/apps/demol/src/assets/daheim_karl.webp b/apps/demol/src/assets/daheim_karl.webp
diff --git a/apps/demol/src/assets/fallback/daheim_anna.png b/apps/demol/src/assets/fallback/daheim_anna.png
diff --git a/apps/demol/src/assets/fallback/daheim_gerda.png b/apps/demol/src/assets/fallback/daheim_gerda.png
diff --git a/apps/demol/src/assets/fallback/daheim_karl.png b/apps/demol/src/assets/fallback/daheim_karl.png
diff --git a/libs/ui/src/lib/image/image.scss b/libs/ui/src/lib/image/image.scss
@@ -4,6 +4,33 @@
   filter: saturate(.8);
   opacity: .9;
   transition: all 0.50s;
+
+  &:hover {
+    transition: all 0.50s;
+    filter: brightness(110%);
+    transform: scale(1.1);
+
+    .overlay {
+      opacity: 1;
+    }
+  }
+}
+
+img {
+  height: auto;
+  width: 100%;
+}
+
+.overlay {
+  position: absolute; 
+  bottom: 0; 
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  transition: .5s ease;
+  opacity:0;
+  color: white;
+  padding: 20px;
+  text-align: center;
 }
 
 .primary {
@@ -16,19 +43,13 @@
 
 .third {
   width: 33%;
+  padding: 5px;
 }
 
-img {
-  height:auto;
-  width: 100%;
+.avatar img {
+  border-radius: 50%;
 }
 
 .bg {
   opacity: 0.3;
-}
-
-.highlighted {
-  transition: all 0.50s;
-  filter: brightness(110%);
-  transform: scale(1.1);
 }
diff --git a/libs/ui/src/lib/image/image.tsx b/libs/ui/src/lib/image/image.tsx
@@ -1,9 +1,8 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext} from 'react';
 import { IMAGE_SUFFIX, IMAGE_SUFFIX_ALTERNATE } from '@gerdesque/data';
 import {AppContext } from '../chapter/context';
 import './image.scss';
 
-/* eslint-disable-next-line */
 export interface ImageProps {
   value: string
   layer?: string
@@ -12,18 +11,17 @@ export interface ImageProps {
 
 export const Image = (props: ImageProps) => {
   const [character, setCharacter] = useContext(AppContext);
-  const [hover, setHover] = useState(false);
-  //const [source, setSource] = useState(props.value);
 
   const chooseCharacter = () => {
     props.title && setCharacter(props.title);
   }
 
   return (
-    <picture className={`chapter_picture ${props.layer} ${props.title && hover ? 'highlighted' : ''}`} onMouseOut={() => setHover(false)} onMouseOver={() => setHover(true)} onClick={() => chooseCharacter()}>
+    <picture className={`chapter_picture ${props.layer}`} onClick={() => chooseCharacter()}>
       <source srcSet={"./assets/"+props.value+IMAGE_SUFFIX} type='image/webp' />
       <source srcSet={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} type='image/png' />
-      <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.value} />
+      <img draggable="false" src={"./assets/fallback/"+props.value+IMAGE_SUFFIX_ALTERNATE} alt={props.title || props.value} />
+      {props.title && <div className="overlay">{props.title}</div>}
     </picture>
   )