New photo information tooltip

Co-authored-by: Alex Sparkes <turbomarshmello@gmail.com>

src/App.jsx

@@ -7,6 +7,7 @@ import Quote from './components/widgets/Quote';
 import Search from './components/widgets/Search';
 import Maximise from './components/widgets/Maximise';
 import Favourite from './components/widgets/Favourite';
+import PhotoInformation from './components/widgets/PhotoInformation';
 
 import Navbar from './components/Navbar';
 
@@ -14,7 +15,6 @@ import SettingsFunctions from './modules/settingsFunctions';
 import { ToastContainer } from 'react-toastify';
 import Modal from 'react-modal';
 import merge from 'lodash.merge';
-import RoomIcon from '@material-ui/icons/Room';
 
 // Modals are lazy loaded as the user won't use them every time they open a tab
 const MainModal = React.lazy(() => import('./components/modals/MainModal'));
@@ -36,10 +36,10 @@ export default class App extends React.PureComponent {
     if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings();
 
     let modalClassList = 'Modal'; // Modal features
-    let tooltipClassList = 'tooltiptext';
+  //  let tooltipClassList = 'tooltiptext';
     if ((localStorage.getItem('brightnessTime') && new Date().getHours() > 18) || localStorage.getItem('darkTheme') === 'true') {
       modalClassList = 'Modal dark';
-      tooltipClassList = 'tooltiptext dark';
+     // tooltipClassList = 'tooltiptext dark';
     }
     const overlayClassList = (localStorage.getItem('animations') === 'true') ? 'Overlay modal-animation' : 'Overlay';
 
@@ -64,14 +64,7 @@ export default class App extends React.PureComponent {
           <Greeting language={language.greeting} />
           <Clock/>
           <Quote language={language.toasts}/>
-          <div className='credits' id='credits'>
-            <h1 id='photographer'>{language.credit}</h1>
-            <span id='credit' style={{'display': 'none'}}></span>
-            <div id='backgroundCredits' className='tooltip'>
-              <RoomIcon className='locationicon'/>
-              <span className={tooltipClassList} id='location'/>
-            </div>
-          </div>
+          <PhotoInformation/>
           <Maximise/>
           <Favourite/>
           <React.Suspense fallback={renderLoader()}>

src/components/widgets/Background.jsx

@@ -42,6 +42,7 @@ export default class Background extends React.PureComponent {
     if (unsplash) credit = `<a href='${url}' class='creditlink'>${photographer}</a> on <a href='https://unsplash.com/?utm_source=mue&utm_medium=referral' class='creditlink'>Unsplash</a>`;
     document.querySelector('#photographer').insertAdjacentHTML("beforeend", ` ${credit}`); // Append credit
     document.getElementById('credit').textContent = credit;
+    document.getElementById('photographerCard').textContent = credit;
   }
 
   doOffline() { // Handles setting the background if the user is offline
@@ -105,6 +106,8 @@ export default class Background extends React.PureComponent {
           this.setBackground(data.file);
           if (localStorage.getItem('backgroundAPI') === 'unsplash') return this.setCredit(data.photographer, 'unsplash', data.photographer_page);
           this.setCredit(data.photographer);
+          document.getElementById('camera').textContent = data.camera;
+          document.getElementById('resolution').textContent = data.resolution || 'N/A';
         }
 
         if (data.location.replace(/[null]+/g, '') === ' ') return document.querySelector('#backgroundCredits').style.display = 'none';

src/components/widgets/PhotoInformation.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Info from '@material-ui/icons/Info';
+import Location from '@material-ui/icons/LocationOn';
+import Camera from '@material-ui/icons/PhotoCamera';
+import Resolution from '@material-ui/icons/Crop';
+import Photographer from '@material-ui/icons/Person';
+
+export default class PhotoInformation extends React.PureComponent {
+  render() {
+    return (
+      <div className='photoInformation'>
+        <h1 id='photographer'>Photo By</h1>
+        <Info className='photoInformationHover' />
+        <div className='infoCard'>
+          <Info className='infoIcon' /><h1>Information</h1>
+          <hr/>
+          <Location />
+          <span id='location'></span>
+          <Camera />
+          <span id='camera'>Gaming</span>
+          <Resolution />
+          <span id='resolution'>1280x720</span>
+          <Photographer />
+          <span id='photographerCard'></span>
+        </div>
+        <div id='backgroundCredits' className='tooltip'>
+          <span className='tooltiptext' id='location'/>
+        </div>
+        <span id='credit' style={{'display': 'none'}}></span>
+      </div>
+    );
+  }
+}

src/scss/modules/_credit.scss

@@ -1,12 +1,81 @@
-#location,
-#photographer {
-  font-size: calc(10px + 1.2vmin);
-  text-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
-  text-overflow: ellipsis;
+.photoInformation {
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
+  font-size: calc(10px + 0.1vmin) !important;
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+
+  svg {
+    float: left;
+    vertical-align: middle;
+    margin-right: 1rem;
+    font-size:  calc(10px + 2vmin);
+  }
+
+  span {
+    display: none;
+  }
+
+  h1 {
+    position: relative;
+  }
+
+  svg, h1 {
+    display: inline;
+  }
+
+  svg:hover + .infoCard {
+    display: block;
+  }
 }
 
-#location {
-  margin-bottom: -10px;
+.infoCard {
+  display: none;
+  background: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  color: #000;
+  position: fixed;
+  bottom: 3.25rem;
+  left: 0.7em;
+  padding: 1rem;
+  border-radius: 24px 24px 24px 0;
+  max-width: 500px;
+  text-align: left;
+  text-shadow: none;
+
+  span {
+    display: block;
+  }
+
+  svg {
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    display: inline-flex;
+    padding: 2px;
+  }
+
+  span, svg {
+    font-size: 2em;
+  }
+
+  h1, .infoIcon {
+    font-size: 3em;
+  }
+
+  .infoIcon {
+    padding: 4px;
+  }
+
+  hr {
+    height: 3px;
+    background: #2d3436;
+    outline: none;
+    border: none;
+  }
+}
+
+.photoInformationHover {
+  cursor: pointer;
 }
 
 .view {
@@ -29,73 +98,7 @@
   }
 }
 
-#photographer {
-  position: absolute;
-  bottom: 10px;
-  left: 50px;
-  width: 1000px;
-}
-
-.locationicon, #viewButton, #favouriteButton {
+#viewButton, #favouriteButton {
   width: auto;
   cursor: pointer;
 }
-
-.navbar-container > svg, #backgroundCredits > svg, #viewButton > svg, #favouriteButton > svg  {
-  font-size: calc(10px + 1.5vmin) !important;
-  position: absolute;
-  bottom: 2px;
-  left: 2px;
-  transition: all 0.5s ease 0s;
-}
-
-.credits {
-  bottom: 2px;
-  left: 0px;
-  position: absolute;
-  text-align: left;
-  width: auto;
-  height: auto;
-}
-
-.tooltip {
-  position: relative;
-  display: inline-block;
-  bottom: 15px;
-  left: 10px;
-  -webkit-filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
-  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
-
-  .tooltiptext {
-    width: 200px;
-    display: inline-block;
-    visibility: hidden;
-    border-radius: 12px;
-    background-color: map-get($theme-colours, "main");;
-    color: #000;
-    font-size: calc(10px + 1.2vmin);
-    position: absolute;
-    z-index: 1;
-    padding: 15px 32px;
-    bottom: 40px;
-    left: 60px;
-    margin-left: -60px;
-    opacity: 0;
-    transition: opacity 1s;
-    box-sizing: border-box;
-    &.dark {
-      background-color: #2f3542 !important;
-      color: white !important;
-    }
-  }
-
-  &:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-#photographer, .locationicon {
-  display: inline;
-  vertical-align: midddle;
-}