Improvements to responsiveness and more utility components.

DamonGreenhalgh · Mar 28, 2022 · 0d870e0 · 0d870e0
1 parent b51cf9e
commit 0d870e0
Show file tree

Hide file tree

Showing 36 changed files with 337 additions and 396 deletions.
diff --git a/changelog.md b/changelog.md
@@ -17,13 +17,17 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added splash image on homepage, random selection.
 - Added **News** slideshow on homepage.
 - Added recently viewed feature.
+- Support for mobile.
 
 ### Changed 
 
 - Replaced many (if not all) icon assets with icons from the *'react-icons'* library.
 - Updated navbar, no longer displays avatar of current character. More traditional.
 - Creation of custom dropdown elements, mainly used for the serverlist and theme selection.
+- Introduction of utility classes. Overhaul on many CSS classes.
+- Updated quests section.
 
 ### Removed
 
-- Many assets now rendered obsolete with the use of *'react-icons'* library.
+- Many assets now rendered obsolete with the use of *'react-icons'* library.
+- Obsolete CSS classes.
diff --git a/src/App.css b/src/App.css
@@ -64,20 +64,20 @@ button {
   background-color: transparent;
   padding: 0;
   color: var(--c-minor-text);
-  transition: color .5s, box-shadow .5s;
+  transition: color .25s, box-shadow .25s;
 }
 
 button:hover {
   cursor: pointer;
-  color: var(--c-accent);
+  color: var(--c-major-text);
 }
 
 input {
   border: none;
   background-color: transparent;
-  font-size: 1rem;
   font-family: 'Comfortaa';
   font-weight: bold;
+  font-size: 1rem;
   width: 100%;
   color: var(--c-mid-text);
 }
@@ -94,13 +94,9 @@ input:focus {
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem;
-  height: 3rem;
   background-color: var(--c-accent);
   color: white;
-}
-
-.select--searchbar {
-  border-radius: .25rem 0 0 .25rem;
+  border-radius: .25rem;
 }
 
 .select::selection {
@@ -161,22 +157,10 @@ input:focus {
   min-width: 4rem;
 }
 
-.icon--loading {
-  height: 46px;
-}
-
 .icon--quests {
   max-width: 2rem;
 }
 
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-}
-
 .splash {
   z-index: -1;
   position: fixed;
@@ -205,7 +189,7 @@ input:focus {
   }
 
   .splash {
-    right: auto;
+    display: none;
   }
 
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,55 +1,47 @@
-import './App.css';
-import './utility.css';
+
+import { useEffect, useState } from 'react';
+import { BrowserRouter, Routes, Route} from 'react-router-dom'; 
 import Home from './pages/Home';
 import Character from './pages/Character';
 import Settings from './pages/Settings';
-import { 
-  BrowserRouter,
-  Routes,
-  Route  
-} from 'react-router-dom'; 
-import { useEffect, useState } from 'react';
-import themesJSON from './data/themes.json';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
+import themesJSON from './data/themes.json';
+import './App.css';
+import './components/utility/utility.css';
 
 const App = () => {
   const [theme, setTheme] = useState('light');
+  const [showSearchbar, setShowSearchbar] = useState(false);
 
-  // Function to set the theme of the web app.
+  // This function applies a color theme to the application.
   const applyTheme = () => {
     const keys = Object.keys(themesJSON[theme].colors);
     const values = Object.values(themesJSON[theme].colors);
     for (let i = 0; i < keys.length; i++) {
       document.documentElement.style.setProperty(keys[i], values[i]);
     }
-    console.log(theme);
     localStorage.setItem("theme", theme);
   }
 
-  // Load settings from local storage
-  useEffect(() => {    
+  applyTheme()
 
-    // Theme
-    const localTheme = JSON.parse(localStorage.getItem('themes'))
+  useEffect(() => {   
+
+    // Load theme saved in local storage if it exists.
+    const localTheme = localStorage.getItem('theme')
     if (localTheme !== null) {
-      console.log(localTheme);
       setTheme(localTheme)
     }
 
   }, [])
 
-  // Apply new theme when theme state variable is updated.
-  useEffect(() => {
-    applyTheme();
-  }, [theme])
-
   return (
     <BrowserRouter basename="/xivtracker">
-      <Navbar noSearchbar={true} />
+      <Navbar showSearchbar={showSearchbar} />
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route exact path="/character/:id" element={<Character />} />
+        <Route path="/" element={<Home setShowSearchbar={setShowSearchbar} />} />
+        <Route exact path="/:id/character" element={<Character setShowSearchbar={setShowSearchbar} />} />
         <Route path="/settings" element={<Settings theme={theme} setTheme={setTheme} />} />
       </Routes>
       <Footer />

diff --git a/src/components/Attributes.css b/src/components/Attributes.css
@@ -4,29 +4,18 @@
         "type value"
         "bar  bar  "
     ;
-    margin-bottom: 2rem;
 }
 
 .attributes__main h4 {
     text-align: end;
 }
 
-.attributes__bar {
-    grid-area: bar;
-    height: .75rem;
-    border-radius: 5px;
-}
-
 .attributes__list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem 2rem;
 }
 
-.hp { background-color: var(--color-health); }
-.mp { background-color: var(--color-mana); }
-
-
 @media only screen and (max-width: 1050px) {
 
     .attributes__list {

diff --git a/src/components/Attributes.jsx b/src/components/Attributes.jsx
@@ -1,5 +1,6 @@
 import './Attributes.css';
 import Header from './Header';
+import Bar from './utility/Bar';
 
 const Attributes = (props) => {
     return (
@@ -9,12 +10,12 @@ const Attributes = (props) => {
                 <div className="attributes__main">
                     <p>{props.content.at(-2).Attribute.Name}</p>
                     <h4>{props.content.at(-2).Value}</h4>
-                    <div className="attributes__bar hp" />
+                    <Bar color="var(--color-health)" />
                 </div>
                 <div className="attributes__main">
                     <p>{props.content.at(-1).Attribute.Name}</p>
                     <h4>{props.content.at(-1).Value}</h4>
-                    <div className="attributes__bar mp" />
+                    <Bar color="var(--color-mana)" />
                 </div>
                 {Object.values(props.content).slice(0, -2).map(attribute =>
                     <li className="row justify-between gap-lg" key={attribute.Attribute.ID}>

diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
@@ -5,7 +5,7 @@ const Banner = (props) => {
     return (
         props.isDisabled ?
         null :
-        <Link className={"banner banner--" + props.type} to={"/character/" + props.id}>
+        <Link className={"banner banner--" + props.type} to={"/" + props.id + "/character"}>
             {
             props.isCrest ? 
             <div className="icon--mid relative">

diff --git a/src/components/Collection.css b/src/components/Collection.css
@@ -1,6 +1,6 @@
 .collection {
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
     gap: .5rem;
-    width: 27.5rem;
 }
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,20 +1,10 @@
+import Divider from './utility/Divider';
 const Header = (props) => {
     return (
-
-        props.isMinor
-        ?
-        <div style={{gridArea: props.name}} className="section-header--minor">
-            <div className="section-header--minor-row">
-                <img src={props.image} className="icon--job-header" />
-                <h4 className="section-header__minor-text">{props.name}</h4>
-            </div>
-            <div className="divider--horizontal" />
-        </div>
-        :
-        <div className={"section-header" + (props.isSpan ? " section-header--cover" : "")}>
-            <div className="divider--horizontal" />
+        <div className="row justify-center align-center gap-lg">
+            <Divider />
             <h2>{props.name}</h2>
-            <div className="divider--horizontal" />
+            <Divider />
         </div>
     );
 }

diff --git a/src/components/Job.jsx b/src/components/Job.jsx
diff --git a/src/components/JobHeader.jsx b/src/components/JobHeader.jsx
@@ -0,0 +1,14 @@
+import Divider from './utility/Divider';
+const JobHeader = (props) => {
+    return (
+        <div className="col" style={{gridArea: props.name}}>
+            <div className="row align-center gap-sm">
+                <img src={props.icon} />
+                <h4>Tank</h4>
+            </div>
+            <Divider />
+        </div>
+    );
+} 
+
+export default JobHeader;
diff --git a/src/components/JobItem.jsx b/src/components/JobItem.jsx
@@ -0,0 +1,27 @@
+import Bar from './utility/Bar';
+const JobItem = (props) => {
+    const link = "https://na.finalfantasyxiv.com/jobguide/";
+    let nameNoGap = (props.name).replace(/\s/g, '');
+    return (
+        <a 
+            className="row align-center gap-sm" 
+            style={{gridArea: (props.name).replace(/\s/g, '')}} 
+            href={props.hasLink ? link + nameNoGap : null}
+        >
+            <img src={"https://xivapi.com" + props.icon} className="icon--job" />
+            <h2 
+                className={"job__level-text" + (props.level == 90 ? " max" : "")}>
+                {props.level}
+            </h2>
+            <div className='col max-width'>
+                <p>{props.name}</p>
+                <Bar
+                    width={(props.exp[0] / props.exp[1] * 100).toString() + "%"}
+                    color="var(--color-experience)" 
+                />
+            </div>
+        </a>
+    );
+}
+
+export default JobItem