diff --git a/src/App.jsx b/src/App.jsx index e47a5451..c4fdca4d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,16 +1,16 @@ import React from 'react'; -import Background from './components/widgets/Background'; -import Clock from './components/widgets/Clock'; -import Greeting from './components/widgets/Greeting'; -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 Date from './components/widgets/Date'; +import Background from './components/widgets/background/Background'; +import Clock from './components/widgets/time/Clock'; +import Greeting from './components/widgets/greeting/Greeting'; +import Quote from './components/widgets/quote/Quote'; +import Search from './components/widgets/search/Search'; +import Maximise from './components/widgets/background/Maximise'; +import Favourite from './components/widgets/background/Favourite'; +import PhotoInformation from './components/widgets/background/PhotoInformation'; +import Date from './components/widgets/time/Date'; -import Navbar from './components/Navbar'; +import Navbar from './components/widgets/navbar/Navbar'; import SettingsFunctions from './modules/helpers/settings'; import { ToastContainer } from 'react-toastify'; @@ -38,6 +38,8 @@ export default class App extends React.PureComponent { componentDidMount() { if (!localStorage.getItem('firstRun')) SettingsFunctions.setDefaultSettings(); if (localStorage.getItem('showWelcome') === 'true') this.setState({ welcomeModal: true }); + const css = localStorage.getItem('customcss'); + if (css) document.head.insertAdjacentHTML('beforeend', ''); } closeWelcome() { diff --git a/src/components/modals/settings/Checkbox.jsx b/src/components/modals/settings/Checkbox.jsx index 25a1d11c..5b799c6d 100644 --- a/src/components/modals/settings/Checkbox.jsx +++ b/src/components/modals/settings/Checkbox.jsx @@ -19,6 +19,7 @@ export default class Checkbox extends React.PureComponent { render() { let text = this.props.text; if (this.props.newFeature) text = {this.props.text} NEW; + else if (this.props.betaFeature) text = {this.props.text} BETA; return ( diff --git a/src/components/modals/settings/Section.jsx b/src/components/modals/settings/Section.jsx index 9634fd36..130b34f0 100644 --- a/src/components/modals/settings/Section.jsx +++ b/src/components/modals/settings/Section.jsx @@ -12,7 +12,7 @@ export default class Section extends React.PureComponent { } toggleSection() { - const display = (this.state.display === 'none') ? 'block': 'none'; + const display = (this.state.display === 'none') ? 'block' : 'none'; this.setState({ display: display, @@ -26,7 +26,11 @@ export default class Section extends React.PureComponent { let extraHTML, expandMore, slider, noDropdown; if (this.props.children) { - extraHTML =
  • {this.props.children}
  • + extraHTML = ( +
    +
  • {this.props.children}
  • +
    + ); expandMore = ( ; - if (this.props.noDropdown) noDropdown = 'nodropdown'; + if (this.props.dropdown === false) noDropdown = 'nodropdown'; return (

    this.toggleSection()}>{this.props.title}

    {expandMore} {slider} -
    - {extraHTML} -
    + {extraHTML}
    ); } diff --git a/src/components/modals/settings/sections/BackgroundSettings.jsx b/src/components/modals/settings/sections/BackgroundSettings.jsx index 97ca0921..aa6d6b6e 100644 --- a/src/components/modals/settings/sections/BackgroundSettings.jsx +++ b/src/components/modals/settings/sections/BackgroundSettings.jsx @@ -194,6 +194,7 @@ export default class BackgroundSettings extends React.PureComponent { +
      +
        + +
        -

        {this.props.language.searchbar.custom} this.resetSearch()}>{this.props.language.reset}

        +

        {this.props.language.searchbar.custom} this.resetSearch()}>{this.props.language.reset}

      diff --git a/src/components/modals/tabs/Settings.jsx b/src/components/modals/tabs/Settings.jsx index 79c084bb..57b6cecd 100644 --- a/src/components/modals/tabs/Settings.jsx +++ b/src/components/modals/tabs/Settings.jsx @@ -9,8 +9,12 @@ import SearchSettings from '../settings/sections/SearchSettings'; import LanguageSettings from '../settings/sections/LanguageSettings'; export default class Settings extends React.PureComponent { - resetGreeting() { - document.getElementById('greetingName').value = ''; + resetItem(type) { + switch (type) { + case 'greeting': document.getElementById('greetingName').value = ''; break; + case 'css': document.getElementById('customcss').value = ''; break; + default: break; + } toast(this.props.toastLanguage.reset); } @@ -18,6 +22,7 @@ export default class Settings extends React.PureComponent { // Settings document.getElementById('greetingName').value = localStorage.getItem('greetingName'); document.getElementById('language').value = localStorage.getItem('language'); + document.getElementById('customcss').value = localStorage.getItem('customcss'); if (document.getElementById('modal').classList.contains('dark')) { // Dark theme support for dropdowns const choices = document.getElementsByClassName('choices'); @@ -45,13 +50,14 @@ export default class Settings extends React.PureComponent { +
        -

        {this.props.language.greeting.name} this.resetGreeting()}>{this.props.language.reset}

        +

        {this.props.language.greeting.name} this.resetItem('greeting')}>{this.props.language.reset}

      @@ -63,17 +69,17 @@ export default class Settings extends React.PureComponent { - +
      -
      -
      - -
      - - - - +
      + + + +
        +

        Custom CSS this.resetItem('css')}>{this.props.language.reset} NEW

        + +
      diff --git a/src/components/widgets/Background.jsx b/src/components/widgets/background/Background.jsx similarity index 89% rename from src/components/widgets/Background.jsx rename to src/components/widgets/background/Background.jsx index dce35c26..e89c88af 100644 --- a/src/components/widgets/Background.jsx +++ b/src/components/widgets/background/Background.jsx @@ -1,5 +1,7 @@ import React from 'react'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../../modules/constants'; + +import './scss/index.scss'; export default class Background extends React.PureComponent { gradientStyleBuilder(gradientSettings) { @@ -46,7 +48,7 @@ export default class Background extends React.PureComponent { } doOffline() { // Handles setting the background if the user is offline - const offlineImages = require('../../modules/json/offline_images.json'); + const offlineImages = require('./offline_images.json'); const photographers = Object.keys(offlineImages); // Get all photographers from the keys in offlineImages.json const photographer = photographers[Math.floor(Math.random() * photographers.length)]; // Select a random photographer from the keys const randomImage = offlineImages[photographer].photo[ @@ -67,7 +69,6 @@ export default class Background extends React.PureComponent { const customBackgroundColour = localStorage.getItem('customBackgroundColour'); const customBackground = localStorage.getItem('customBackground'); const favourited = JSON.parse(localStorage.getItem('favourite')); - const customBackgroundVideo = localStorage.getItem('customBackgroundVideo'); if (favourited) { if (offlineMode === 'true') return this.doOffline(); @@ -82,13 +83,13 @@ export default class Background extends React.PureComponent { document.getElementById('location').textContent = randomPhoto.location; } else if (customBackgroundColour) this.setBackground(null, customBackgroundColour, 'false'); - else if (customBackground !== '') this.setBackground(customBackground, null, 'false'); // Local - else if (customBackgroundVideo) { - document.getElementById('backgroundImage').innerHTML = ` - `; - document.querySelector('.photoInformation').style.display = 'none'; // Hide the credit + else if (customBackground !== '') { + if (customBackground.includes('.mp4') || customBackground.includes('.webm') || customBackground.includes('.ogg')) { + document.getElementById('backgroundImage').innerHTML = ` + `; + } else this.setBackground(customBackground, null, 'false'); // Local } else { // Online if (offlineMode === 'true') return this.doOffline(); try { // First we try and get an image from the API... @@ -96,9 +97,7 @@ export default class Background extends React.PureComponent { let requestURL; switch (localStorage.getItem('backgroundAPI')) { - case 'unsplash': - requestURL = `${Constants.UNSPLASH_URL}/getImage`; - break; + case 'unsplash': requestURL = `${Constants.UNSPLASH_URL}/getImage`; break; default: // Defaults to Mue if (localStorage.getItem('supportswebp') === 'true' && enabled === 'true') requestURL = `${Constants.API_URL}/getImage?webp=true`; else requestURL = `${Constants.API_URL}/getImage?category=Outdoors`; diff --git a/src/components/widgets/Favourite.jsx b/src/components/widgets/background/Favourite.jsx similarity index 100% rename from src/components/widgets/Favourite.jsx rename to src/components/widgets/background/Favourite.jsx diff --git a/src/components/widgets/Maximise.jsx b/src/components/widgets/background/Maximise.jsx similarity index 100% rename from src/components/widgets/Maximise.jsx rename to src/components/widgets/background/Maximise.jsx diff --git a/src/components/widgets/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx similarity index 100% rename from src/components/widgets/PhotoInformation.jsx rename to src/components/widgets/background/PhotoInformation.jsx diff --git a/src/modules/json/offline_images.json b/src/components/widgets/background/offline_images.json similarity index 100% rename from src/modules/json/offline_images.json rename to src/components/widgets/background/offline_images.json diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss new file mode 100644 index 00000000..d443c155 --- /dev/null +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -0,0 +1,86 @@ +.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; + } +} + +.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; + } +} + +.infoCard:hover { + display: block !important; +} + +.photoInformationHover { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/widgets/background/scss/index.scss b/src/components/widgets/background/scss/index.scss new file mode 100644 index 00000000..9e7a62f6 --- /dev/null +++ b/src/components/widgets/background/scss/index.scss @@ -0,0 +1,69 @@ +@import 'photoinformation'; +@import '../../../../scss/mixins'; + +#backgroundImage { + height: 100vh; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; +} + +#backgroundVideo { + position: fixed; + right: 0; + bottom: 0; + min-width: 100%; + min-height: 100%; +} + +.fade-in { + @include animation('fadein 2s'); +} + +@include keyframes(fadein) { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +.backgroundEffects { + opacity: 0.7; + transition: ease 0.6s; +} + +.creditlink { + text-decoration: none; + color: white; +} + +.view { + bottom: 10px; + right: 25px; +} + +.favourite { + bottom: 10px; + right: 50px; + padding-right: 5px; +} + +.view, +.favourite { + position: absolute; + transition: all 0.5s ease 0s; + + &:hover { + transform: scale(1.1); + } +} + +#viewButton, +#favouriteButton { + width: auto; + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/widgets/Greeting.jsx b/src/components/widgets/greeting/Greeting.jsx similarity index 98% rename from src/components/widgets/Greeting.jsx rename to src/components/widgets/greeting/Greeting.jsx index 3f986632..40fb121c 100644 --- a/src/components/widgets/Greeting.jsx +++ b/src/components/widgets/greeting/Greeting.jsx @@ -1,5 +1,7 @@ import React from 'react'; +import './greeting.scss'; + export default class Greeting extends React.PureComponent { constructor(...args) { super(...args); diff --git a/src/scss/modules/_greeting.scss b/src/components/widgets/greeting/greeting.scss similarity index 92% rename from src/scss/modules/_greeting.scss rename to src/components/widgets/greeting/greeting.scss index db18fba5..fe984650 100644 --- a/src/scss/modules/_greeting.scss +++ b/src/components/widgets/greeting/greeting.scss @@ -1,4 +1,4 @@ -.greeting { - margin: 0; - font-size: 1.6em; +.greeting { + margin: 0; + font-size: 1.6em; } \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/widgets/navbar/Navbar.jsx similarity index 89% rename from src/components/Navbar.jsx rename to src/components/widgets/navbar/Navbar.jsx index f7aff52c..c4f06188 100644 --- a/src/components/Navbar.jsx +++ b/src/components/widgets/navbar/Navbar.jsx @@ -5,9 +5,11 @@ import NewReleases from '@material-ui/icons/NewReleasesRounded'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; import Tooltip from '@material-ui/core/Tooltip'; import Report from '@material-ui/icons/SmsFailed'; -import * as Constants from '../modules/constants'; +import * as Constants from '../../../modules/constants'; -const Notes = React.lazy(() => import('./widgets/Notes')); // the user probably won't use the notes feature every time so we lazy load +import './scss/index.scss'; + +const Notes = React.lazy(() => import('./Notes')); // the user probably won't use the notes feature every time so we lazy load const renderLoader = () =>
      ; export default class Navbar extends React.PureComponent { diff --git a/src/components/widgets/Notes.jsx b/src/components/widgets/navbar/Notes.jsx similarity index 98% rename from src/components/widgets/Notes.jsx rename to src/components/widgets/navbar/Notes.jsx index 5395b665..81e9e470 100644 --- a/src/components/widgets/Notes.jsx +++ b/src/components/widgets/navbar/Notes.jsx @@ -1,7 +1,7 @@ import React from 'react'; import TextareaAutosize from '@material-ui/core/TextareaAutosize'; import CopyIcon from '@material-ui/icons/FileCopyRounded'; -import Pin from './icons/Pin'; +import Pin from './Pin'; import NotesIcon from '@material-ui/icons/AssignmentRounded'; export default class Notes extends React.PureComponent { diff --git a/src/components/widgets/icons/Pin.jsx b/src/components/widgets/navbar/Pin.jsx similarity index 100% rename from src/components/widgets/icons/Pin.jsx rename to src/components/widgets/navbar/Pin.jsx diff --git a/src/components/widgets/navbar/scss/_notes.scss b/src/components/widgets/navbar/scss/_notes.scss new file mode 100644 index 00000000..8d5c879e --- /dev/null +++ b/src/components/widgets/navbar/scss/_notes.scss @@ -0,0 +1,80 @@ +.notes { + position: relative; + display: inline-block; + + h3 { + text-shadow: none; + margin: 0; + } +} + +.notes .notescontainer { + text-align: center; + padding: 15px; + visibility: hidden; + background-color: #fff; + color: #000; + text-align: center; + border-radius: 12px; + position: absolute; + z-index: 1; + top: 80%; + left: 50%; + margin-left: -125px; + + input[type=text] { + border: none; + color: #2d3436; + } + + svg, + input[type=text] { + display: inline-flex; + } + + svg { + float: left; + } + + ::placeholder { + color: #636e72; + opacity: 1; + } +} + + +.notes:hover .notescontainer { + visibility: visible; +} + +textarea { + overflow: none; + border: none; + outline: none; + width: 200px; + resize: none; + height: 100px; + margin: 10px; +} + +.noteIcon { + display: inline; + font-size: 1em; + float: none; +} + +.topbarnotes { + text-align: center; + + svg { + font-size: 48px; + float: left !important; + padding: 9px; + } + + h3 { + font-size: 48px; + float: right; + margin-right: 20px; + } +} \ No newline at end of file diff --git a/src/scss/modules/_navbar.scss b/src/components/widgets/navbar/scss/index.scss similarity index 54% rename from src/scss/modules/_navbar.scss rename to src/components/widgets/navbar/scss/index.scss index 73a140dc..2a48bb44 100644 --- a/src/scss/modules/_navbar.scss +++ b/src/components/widgets/navbar/scss/index.scss @@ -1,3 +1,6 @@ +@import 'notes'; +@import '../../../../scss/variables'; + .navbar-container { position: absolute; top: 1rem; @@ -63,87 +66,6 @@ } } -.notes { - position: relative; - display: inline-block; - - h3 { - text-shadow: none; - margin: 0; - } -} - -.notes .notescontainer { - text-align: center; - padding: 15px; - visibility: hidden; - background-color: #fff; - color: #000; - text-align: center; - border-radius: 12px; - position: absolute; - z-index: 1; - top: 80%; - left: 50%; - margin-left: -125px; - - input[type=text] { - border: none; - color: #2d3436; - } - - svg, - input[type=text] { - display: inline-flex; - } - - svg { - float: left; - } - - ::placeholder { - color: #636e72; - opacity: 1; - } -} - - -.notes:hover .notescontainer { - visibility: visible; -} - -textarea { - overflow: none; - border: none; - outline: none; - width: 200px; - resize: none; - height: 100px; - margin: 10px; -} - -.noteIcon { - display: inline; - font-size: 1em; - float: none; -} - -.topbarnotes { - text-align: center; - - svg { - font-size: 48px; - float: left !important; - padding: 9px; - } - - h3 { - font-size: 48px; - float: right; - margin-right: 20px; - } -} - .visibilityshow { visibility: visible !important; } \ No newline at end of file diff --git a/src/components/widgets/Quote.jsx b/src/components/widgets/quote/Quote.jsx similarity index 98% rename from src/components/widgets/Quote.jsx rename to src/components/widgets/quote/Quote.jsx index 1cbfedc4..44c250b3 100644 --- a/src/components/widgets/Quote.jsx +++ b/src/components/widgets/quote/Quote.jsx @@ -2,11 +2,13 @@ import React from 'react'; import Quotes from '@muetab/quotes'; import FileCopy from '@material-ui/icons/FilterNone'; import { toast } from 'react-toastify'; -import * as Constants from '../../modules/constants'; +import * as Constants from '../../../modules/constants'; import TwitterIcon from '@material-ui/icons/Twitter'; import StarIcon from '@material-ui/icons/Star'; import StarIcon2 from '@material-ui/icons/StarBorder'; +import './quote.scss'; + export default class Quote extends React.PureComponent { constructor(...args) { super(...args); diff --git a/src/components/widgets/quote/quote.scss b/src/components/widgets/quote/quote.scss new file mode 100644 index 00000000..23a57d7e --- /dev/null +++ b/src/components/widgets/quote/quote.scss @@ -0,0 +1,59 @@ +@import '../../../scss/variables'; + +.quote { + font-size: 0.8em; + text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +} + +@media screen and (min-width: 600px) { + .quote { + margin-left: 30%; + margin-right: 30%; + } +} + +.quoteauthor { + font-size: 0.9em; + letter-spacing: 0.5px; + margin: 0; +} + +.quoteAuthor, +.copyButton { + display: inline; + font-size: 0.8em; + position: relative !important; + display: block; + margin: 0 auto; +} + +.copyButton { + cursor: pointer; + vertical-align: middle; + float: middle; + margin: 0 auto; + text-align: right; + transition: ease 0.2s !important; + + &:hover { + transform: scale(1.1); + } +} + +i.material-icons, +h1.quoteauthor { + display: inline; +} + +button.copyButton { + background: transparent; + border: none; + color: map-get($theme-colours, 'main'); + padding: 20px 20px; + text-align: center; + text-decoration: none; + font-size: 20px; + cursor: pointer; + border-radius: 5px; + display: table-cell +} \ No newline at end of file diff --git a/src/components/widgets/Search.jsx b/src/components/widgets/search/Search.jsx similarity index 96% rename from src/components/widgets/Search.jsx rename to src/components/widgets/search/Search.jsx index a9a81c8c..9873f497 100644 --- a/src/components/widgets/Search.jsx +++ b/src/components/widgets/search/Search.jsx @@ -2,7 +2,9 @@ import React from 'react'; import SearchIcon from '@material-ui/icons/Search'; import MicIcon from '@material-ui/icons/Mic'; -const searchEngines = require('../../modules/json/search_engines.json'); +import './search.scss'; + +const searchEngines = require('./search_engines.json'); export default class Search extends React.PureComponent { constructor(...args) { diff --git a/src/components/widgets/search/search.scss b/src/components/widgets/search/search.scss new file mode 100644 index 00000000..aab31294 --- /dev/null +++ b/src/components/widgets/search/search.scss @@ -0,0 +1,48 @@ +@import '../../../scss/variables'; + +.searchbar { + position: absolute; + left: 20px; + top: 20px; + display: flex; + flex-direction: row; + display: block; + color: map-get($theme-colours, 'main-text-color'); + + input[type=text] { + width: 140px; + margin-left: 12px; + border-radius: 24px; + font-size: calc(5px + 1.2vmin); + background: transparent; + border: none; + position: absolute; + background-color: rgba(0, 0, 0, 0.1); + -webkit-transition: width 0.5s ease-in-out; + transition: width 0.5s ease-in-out; + + &:focus { + width: 400px; + background-color: rgba(0, 0, 0, .3); + } + } + + .MuiSvgIcon-root { + margin-top: 4px; + font-size: 30px; + filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); + cursor: pointer; + } +} + +.input.searchtext { + border: none; +} + +.micIcon { + margin-right: 10px; +} + +#searchEngine { + width: 130px; +} \ No newline at end of file diff --git a/src/modules/json/search_engines.json b/src/components/widgets/search/search_engines.json similarity index 100% rename from src/modules/json/search_engines.json rename to src/components/widgets/search/search_engines.json diff --git a/src/components/widgets/Clock.jsx b/src/components/widgets/time/Clock.jsx similarity index 93% rename from src/components/widgets/Clock.jsx rename to src/components/widgets/time/Clock.jsx index e56e2c37..f7c0adb0 100644 --- a/src/components/widgets/Clock.jsx +++ b/src/components/widgets/time/Clock.jsx @@ -1,6 +1,8 @@ import React from 'react'; import Analog from 'react-clock'; +import './clock.scss'; + export default class Clock extends React.PureComponent { constructor(...args) { super(...args); @@ -17,14 +19,12 @@ export default class Clock extends React.PureComponent { const now = new Date(); // Percentage - if (localStorage.getItem('percentageComplete') === 'true') { - return this.setState({ time: (now.getHours() / 24).toFixed(2) + '%'}) - } + if (localStorage.getItem('percentageComplete') === 'true') return this.setState({ time: (now.getHours() / 24).toFixed(2).replace('0.', '') + '%'}); // Analog clock if (localStorage.getItem('analog') === 'true') this.setState({ time: now }); else { - let sec = ''; + let time, sec = ''; // Extra 0 const zero = localStorage.getItem('zero'); @@ -35,7 +35,6 @@ export default class Clock extends React.PureComponent { } if (localStorage.getItem('24hour') === 'true') { - let time = ''; if (zero === 'false') time = `${now.getHours()}:${now.getMinutes()}${sec}`; else time = `${('00' + now.getHours()).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`; @@ -49,7 +48,6 @@ export default class Clock extends React.PureComponent { let ampm = now.getHours() > 11 ? 'PM' : 'AM'; if (localStorage.getItem('ampm') === 'false') ampm = ''; - let time = ''; if (zero === 'false') time = `${hours}:${now.getMinutes()}${sec}`; else time = `${('00' + hours).slice(-2)}:${('00' + now.getMinutes()).slice(-2)}${sec}`; diff --git a/src/components/widgets/Date.jsx b/src/components/widgets/time/Date.jsx similarity index 88% rename from src/components/widgets/Date.jsx rename to src/components/widgets/time/Date.jsx index f1ce72a7..190c13ad 100644 --- a/src/components/widgets/Date.jsx +++ b/src/components/widgets/time/Date.jsx @@ -11,15 +11,16 @@ export default class DateWidget extends React.PureComponent { getDate() { const date = new Date(); + const dateFormat = localStorage.getItem('dateFormat'); - if (localStorage.getItem('dateFormat') === 'short') { + if (dateFormat === 'short') { const dateDay = date.getDate(); const dateMonth = date.getMonth() + 1; const dateYear = date.getFullYear(); let day = dateDay, month = dateMonth, year = dateYear; - switch (localStorage.getItem('dateFormat')) { + switch (dateFormat) { case 'MDY': day = dateMonth; month = dateDay; @@ -28,8 +29,7 @@ export default class DateWidget extends React.PureComponent { day = dateYear; year = dateDay; break; - default: // DMY - break; + default: break; // DMY } let format; @@ -58,6 +58,6 @@ export default class DateWidget extends React.PureComponent { } render() { - return {this.state.date} + return {this.state.date} } } \ No newline at end of file diff --git a/src/components/widgets/time/clock.scss b/src/components/widgets/time/clock.scss new file mode 100644 index 00000000..777a123e --- /dev/null +++ b/src/components/widgets/time/clock.scss @@ -0,0 +1,24 @@ +@import '../../../scss/variables'; + +.clock { + font-size: 4em; + margin: 0; +} + +.ampm { + font-size: 0.5em; +} + +.analogclock, +.react-clock__face { + margin: 0 auto; + border-radius: 100%; + box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); + border: 1px solid map-get($theme-colours, "main"); +} + +.react-clock__hand__body { + background: map-get($theme-colours, "main"); + ; + box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); +} \ No newline at end of file diff --git a/src/modules/json/default_settings.json b/src/modules/default_settings.json similarity index 100% rename from src/modules/json/default_settings.json rename to src/modules/default_settings.json diff --git a/src/modules/helpers/settings.js b/src/modules/helpers/settings.js index 7752ad49..e88a9466 100644 --- a/src/modules/helpers/settings.js +++ b/src/modules/helpers/settings.js @@ -1,7 +1,6 @@ -const defaultSettings = require('../json/default_settings.json'); +const defaultSettings = require('../default_settings.json'); const saveFile = (data, filename = 'file') => { - if (!data) return console.error('No data'); if (typeof data === 'object') data = JSON.stringify(data, undefined, 4); const blob = new Blob([data], { type: 'text/json' }); @@ -52,6 +51,7 @@ export default class SettingsFunctions { localStorage.setItem('brightness', document.getElementById('brightnessRange').value); localStorage.setItem('greetingName', document.getElementById('greetingName').value); localStorage.setItem('customBackground', document.getElementById('customBackground').value); + localStorage.setItem('customcss', document.getElementById('customcss').value); if (document.getElementById('customBackgroundHex').value !== hexDisabled) { localStorage.setItem('customBackgroundColour', document.getElementById('customBackgroundHex').value); } diff --git a/src/scss/index.scss b/src/scss/index.scss index 8470cb88..4890ca30 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,12 +1,6 @@ @import 'variables'; @import 'mixins'; -@import 'modules/clock'; -@import 'modules/greeting'; -@import 'modules/quote'; -@import 'modules/search'; -@import 'modules/credit'; -@import 'modules/navbar'; @import 'modules/modal'; @import 'modules/settings'; @import 'modules/toast'; @@ -59,44 +53,4 @@ body { min-height: 100vh; display: grid; color: map-get($theme-colours, 'main-text-color'); -} - -#backgroundImage { - height: 100vh; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; -} - -#backgroundVideo { - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; -} - -.fade-in { - @include animation('fadein 2s'); -} - -@include keyframes(fadein) { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -.backgroundEffects { - opacity: 0.7; - transition: ease 0.6s; -} - -.creditlink { - text-decoration: none; - color: white; } \ No newline at end of file diff --git a/src/scss/modules/_clock.scss b/src/scss/modules/_clock.scss deleted file mode 100644 index 1a972b5b..00000000 --- a/src/scss/modules/_clock.scss +++ /dev/null @@ -1,20 +0,0 @@ -.clock { - font-size: 4em; - margin: 0; -} - -.ampm { - font-size: 0.5em; -} - -.analogclock, .react-clock__face { - margin: 0 auto; - border-radius: 100%; - box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3); - border: 1px solid map-get($theme-colours, "main"); -} - -.react-clock__hand__body { - background: map-get($theme-colours, "main");; - box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); -} \ No newline at end of file diff --git a/src/scss/modules/_credit.scss b/src/scss/modules/_credit.scss deleted file mode 100644 index 5da3afe5..00000000 --- a/src/scss/modules/_credit.scss +++ /dev/null @@ -1,107 +0,0 @@ -.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; - } -} - -.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; - } -} - -.infoCard:hover { - display: block !important; -} - -.photoInformationHover { - cursor: pointer; -} - -.view { - bottom: 10px; - right: 25px; -} - -.favourite { - bottom: 10px; - right: 50px; - padding-right: 5px; -} - -.view, .favourite { - position: absolute; - transition: all 0.5s ease 0s; - &:hover { - transform: scale(1.1); - } -} - -#viewButton, #favouriteButton { - width: auto; - cursor: pointer; -} diff --git a/src/scss/modules/_quote.scss b/src/scss/modules/_quote.scss deleted file mode 100644 index 3cbb3cbb..00000000 --- a/src/scss/modules/_quote.scss +++ /dev/null @@ -1,56 +0,0 @@ -.quote { - font-size: 0.8em; - text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -} - -@media screen and (min-width: 600px) { - .quote { - margin-left: 30%; - margin-right: 30%; - } -} - -.quoteauthor { - font-size: 0.9em; - letter-spacing: 0.5px; - margin: 0; -} - -.quoteAuthor, .copyButton { - display: inline; - font-size: 0.8em; - position: relative !important; - display: block; - margin: 0 auto; -} - -.copyButton { - cursor: pointer; - vertical-align: middle; - float: middle; - margin: 0 auto; - text-align: right; - transition: ease 0.2s !important; - - &:hover { - transform: scale(1.1); - } -} - -i.material-icons, -h1.quoteauthor { - display: inline; -} - -button.copyButton { - background: transparent; - border: none; - color: map-get($theme-colours, 'main'); - padding: 20px 20px; - text-align: center; - text-decoration: none; - font-size: 20px; - cursor: pointer; - border-radius: 5px; - display: table-cell -} \ No newline at end of file diff --git a/src/scss/modules/_search.scss b/src/scss/modules/_search.scss deleted file mode 100644 index 3925640c..00000000 --- a/src/scss/modules/_search.scss +++ /dev/null @@ -1,46 +0,0 @@ -.searchbar { - position: absolute; - left: 20px; - top: 20px; - display: flex; - flex-direction: row; - display: block; - color: map-get($theme-colours, 'main-text-color'); - - input[type=text] { - width: 140px; - margin-left: 12px; - border-radius: 24px; - font-size: calc(5px + 1.2vmin); - background: transparent; - border: none; - position: absolute; - background-color: rgba(0, 0, 0, 0.1); - -webkit-transition: width 0.5s ease-in-out; - transition: width 0.5s ease-in-out; - - &:focus { - width: 400px; - background-color: rgba(0, 0, 0, .3); - } - } - - .MuiSvgIcon-root { - margin-top: 4px; - font-size: 30px; - filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3)); - cursor: pointer; - } -} - -.input.searchtext { - border: none; -} - -.micIcon { - margin-right: 10px; -} - -#searchEngine { - width: 130px; -} \ No newline at end of file diff --git a/src/scss/modules/_settings.scss b/src/scss/modules/_settings.scss index b6e3a0c2..4cc27925 100644 --- a/src/scss/modules/_settings.scss +++ b/src/scss/modules/_settings.scss @@ -255,4 +255,10 @@ button.remove + input[type=color].colour { .newFeature { color: #ff4757; font-size: 12px; +} + +#customcss { + font-family: Consolas !important; + border: solid 1px black !important; + margin-left: 0px; } \ No newline at end of file diff --git a/src/translations/en.json b/src/translations/en.json index 1a95a599..79e1dacb 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -23,7 +23,8 @@ "twentyfourhour": "24 Hour", "ampm": "AM/PM (12 hour)", "zero": "Zero-padded", - "analog": "Analog" + "analog": "Analog", + "percentageComplete": "Percentage of the Day Complete" }, "greeting": { "title": "Greeting",