From fef78cfeedde8540e9968d1e451d4f81159d5eb5 Mon Sep 17 00:00:00 2001 From: David Ralph Date: Sat, 17 Oct 2020 10:47:01 +0100 Subject: [PATCH] New photo information tooltip Co-authored-by: Alex Sparkes --- src/App.jsx | 15 +- src/components/widgets/Background.jsx | 3 + src/components/widgets/PhotoInformation.jsx | 33 +++++ src/scss/modules/_credit.scss | 151 ++++++++++---------- 4 files changed, 117 insertions(+), 85 deletions(-) create mode 100644 src/components/widgets/PhotoInformation.jsx diff --git a/src/App.jsx b/src/App.jsx index d5340b93..f1e92937 100644 --- a/src/App.jsx +++ b/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 { -
-

{language.credit}

- -
- - -
-
+ diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/Background.jsx index 48841117..569aacb4 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/Background.jsx @@ -42,6 +42,7 @@ export default class Background extends React.PureComponent { if (unsplash) credit = `${photographer} on Unsplash`; 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'; diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/PhotoInformation.jsx new file mode 100644 index 00000000..72b2f1d0 --- /dev/null +++ b/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 ( +
+

Photo By

+ +
+

Information

+
+ + + + Gaming + + 1280x720 + + +
+
+ +
+ +
+ ); + } +} diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss index 0ec4076a..f7326953 100644 --- a/src/scss/modules/_credit.scss +++ b/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; -} \ No newline at end of file