Merge pull request #12 from jedmund/profile

Redesign/fix styling for Profile

components/GridRep/index.scss

@@ -1,54 +1,82 @@
 .GridRep {
-    border: 2px solid transparent;
     border-radius: 6px;
     display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    margin: 0 8px 8px 0;
-    padding: 4px;
-    height: 148px;
-    width: 311px;
-}
+    flex-direction: column;
+    gap: $unit;
+    padding: $unit * 2;
 
-.GridRep:hover {
-    border: 2px solid #2360C5;
-    cursor: pointer;
-}
+    &:hover {
+        background: white;
+        cursor: pointer;
 
-.GridRep .weapon {
-    background: white;
-    border-radius: 4px;
-}
+        .Grid .grid_weapons .grid_weapon {
+            box-shadow: inset 0 0 1px $grey-70;
+        }
+    }
 
-.GridRep .grid_mainhand {
-    flex-shrink: 0;
-    height: 136px;
-    width: 65px;
-    margin-right: 8px;
-}
+    .Grid {
+        display: flex;
+        flex-direction: row;
+        flex-shrink: 0;
 
-.GridRep .grid_weapons {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
+        .grid_mainhand {
+            margin-right: $unit;
+            height: 139px;
+            width: auto;
+        }
 
-.GridRep .grid_weapon {
-    background: white;
-    border-radius: 4px;
-    float: left;
-    margin: 0 8px 8px 0;
-    height: 40px;
-    width: 70px;
-}
+        .grid_weapons {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-template-rows: 1fr 1fr 1fr;
+            gap: $unit;
+            margin: 0;
+            padding: 0;
+            width: fit-content;
+        }
 
-.GridRep .grid_weapon:nth-child(3n+3) {
-    margin-right: 0;
-}
+        .grid_weapon {
+            background: white;
+            border-radius: 4px;
+            float: left;
+            height: 40px;
+            width: 70px;
+        }
+        
+        .grid_mainhand img[src*="jpg"],
+        .grid_weapon img[src*="jpg"] {
+            border-radius: 4px;
+            width: 100%;
+            height: 100%;
+        }
+    }
 
-.GridRep .grid_mainhand img[src*="jpg"],
-.GridRep .grid_weapon img[src*="jpg"] {
-    border-radius: 4px;
-    width: 100%;
-    height: 100%;
-}
+    .Details {
+        display: flex;
+        flex-direction: column;
+        gap: $unit / 2;
+
+        h2 {
+            color: $grey-00;
+            font-size: $font-regular;
+
+            &.empty {
+                color: $grey-50;
+            }
+        }
+
+        .bottom {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .raid, time {
+            color: $grey-50;
+            font-size: $font-small;
+        }
+
+        .raid {
+            flex-grow: 1;
+        }
+    }
+}

components/GridRep/index.tsx

@@ -1,19 +1,37 @@
+
 import React, { useEffect, useState } from 'react'
+import classNames from 'classnames'
+
+import { formatTimeAgo } from '~utils/timeAgo'
 
 import './index.scss'
 
 interface Props {
     shortcode: string
+    name: string
+    raid: Raid
     grid: GridWeapon[]
+    updatedAt: Date
     onClick: (shortcode: string) => void
 }
 
 const GridRep = (props: Props) => {
+
+    console.log(props)
     const numWeapons: number = 9
 
     const [mainhand, setMainhand] = useState<Weapon>()
     const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
 
+    const titleClass = classNames({
+        'empty': !props.name
+    })
+
+    const raidClass = classNames({
+        'raid': true,
+        'empty': !props.raid
+    })
+
     useEffect(() => {
         const newWeapons = Array(numWeapons)
 
@@ -43,21 +61,31 @@ const GridRep = (props: Props) => {
 
     return (
         <div className="GridRep" onClick={navigate}>
-            <div className="weapon grid_mainhand">
-                {generateMainhandImage()}
+            <div className="Details">
+                <h2 className={titleClass}>{ (props.name) ? props.name : 'Untitled' }</h2>
+                <div className="bottom">
+                    <div className={raidClass}>{ (props.raid) ? props.raid.name.en : 'No raid set' }</div>
+                    <time className="last-updated" dateTime={props.updatedAt.toISOString()}>{formatTimeAgo(props.updatedAt, 'en-us')}</time>
+                </div>
             </div>
 
-            <ul className="grid_weapons">
-                {
-                    Array.from(Array(numWeapons)).map((x, i) => {
-                        return (
-                            <li key={`${props.shortcode}-${i}`} className="grid_weapon">
-                                {generateGridImage(i)}
-                            </li>
-                        )
-                    })
-                }
-            </ul>
+            <div className="Grid">
+                <div className="weapon grid_mainhand">
+                    {generateMainhandImage()}
+                </div>
+
+                <ul className="grid_weapons">
+                    {
+                        Array.from(Array(numWeapons)).map((x, i) => {
+                            return (
+                                <li key={`${props.shortcode}-${i}`} className="grid_weapon">
+                                    {generateGridImage(i)}
+                                </li>
+                            )
+                        })
+                    }
+                </ul>
+            </div>
         </div>
     )
 }

components/GridRepCollection/index.scss

@@ -1,6 +1,7 @@
 .GridRepCollection {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    margin: 0 auto;
     padding: 0;
+    width: fit-content;
 }

components/PartyDetails/index.scss

@@ -1,4 +1,4 @@
-.Details {
+.PartyDetails {
     display: none; // This breaks transition, find a workaround
     opacity: 0;
     margin: 0 auto;

components/PartyDetails/index.tsx

@@ -24,13 +24,13 @@ const PartyDetails = (props: Props) => {
     const raidSelect = React.createRef<HTMLSelectElement>()
 
     const readOnlyClasses = classNames({
-        'Details': true,
+        'PartyDetails': true,
         'ReadOnly': true,
         'Visible': !appSnapshot.party.detailsVisible
     })
 
     const editableClasses = classNames({
-        'Details': true,
+        'PartyDetails': true,
         'Editable': true,
         'Visible': appSnapshot.party.detailsVisible
     })

components/ProfileHeader/index.scss

@@ -0,0 +1,32 @@
+#ProfileHeader {
+    align-items: center;
+    background: white;
+    border-radius: $unit;
+    display: flex;
+    margin: 0 auto;
+    margin-bottom: $unit * 5;
+    max-width: $unit * 52;
+    padding: ($unit * 3) ($unit * 5);
+
+    h1 {
+        font-size: $font-xxlarge;
+        font-weight: $normal;
+        flex-grow: 1;
+        text-align: left;
+    }
+
+    img {
+        $diameter: 120px;
+        border-radius: $diameter / 2;
+        height: $diameter;
+        width: $diameter;
+
+        &.gran {
+            background-color: #CEE7FE;
+        }
+
+        &.djeeta {
+            background-color: #FFE1FE;
+        }
+    }
+}

components/ProfileHeader/index.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { useSnapshot } from 'valtio'
+
+import { appState } from '~utils/appState'
+
+import './index.scss'
+
+// Props
+interface Props {
+    username: string
+    gender: boolean
+}
+
+const ProfileHeader = (props: Props) => {
+    return (
+        <section id="ProfileHeader">
+            <h1>{props.username}</h1>
+            <img 
+                alt="Gran"
+                className="gran"
+                srcSet="/profile/gran.png,
+                        /profile/gran@2x.png 2x"
+                src="/profile/gran.png" />
+        </section>
+    )
+}
+
+export default ProfileHeader

pages/[username].tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 
 import api from '~utils/api'
 
+import ProfileHeader from '~components/ProfileHeader'
 import GridRep from '~components/GridRep'
 import GridRepCollection from '~components/GridRepCollection'
 
@@ -14,8 +15,11 @@ interface User {
 
 interface Party {
     id: string
+    name: string
+    raid: Raid
     shortcode: string
     weapons: GridWeapon[]
+    updated_at: string
 }
 
 const ProfileRoute: React.FC = () => {
@@ -44,7 +48,9 @@ const ProfileRoute: React.FC = () => {
                     username: response.data.user.username,
                     granblueId: response.data.user.granblue_id
                 })
-                setParties(response.data.user.parties)
+
+                const parties: Party[] = response.data.user.parties
+                setParties(parties.sort((a, b) => (a.updated_at > b.updated_at) ? -1 : 1))
             })
             .then(() => {
                 setFound(true)
@@ -65,7 +71,7 @@ const ProfileRoute: React.FC = () => {
         const content = (parties && parties.length > 0) ? renderGrids() : renderNoGrids()
         return (
             <div>
-                <h1>{user.username}</h1>
+                <ProfileHeader username={user.username} gender={true} />
                 {content}
             </div>
         )
@@ -82,6 +88,9 @@ const ProfileRoute: React.FC = () => {
                     parties.map((party, i) => {
                         return <GridRep 
                             shortcode={party.shortcode} 
+                            name={party.name}
+                            updatedAt={new Date(party.updated_at)}
+                            raid={party.raid}
                             grid={party.weapons}
                             key={`party-${i}`}
                             onClick={goTo}

styles/variables.scss

@@ -63,6 +63,7 @@ $font-button:   15px;
 $font-regular:  16px;
 $font-large:    21px;
 $font-xlarge:   24px;
+$font-xxlarge:  28px;
 
 // Scale factors
 $scale-wide: scale(1.05, 1.05);

utils/timeAgo.tsx

@@ -0,0 +1,26 @@
+
+const DIVISIONS = [
+    { amount: 60, name: 'seconds' },
+    { amount: 60, name: 'minutes' },
+    { amount: 24, name: 'hours' },
+    { amount: 7, name: 'days' },
+    { amount: 4.34524, name: 'weeks' },
+    { amount: 12, name: 'months' },
+    { amount: Number.POSITIVE_INFINITY, name: 'years' }
+]
+
+export function formatTimeAgo(date: Date, locale: string = 'en-us') {
+    const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+
+    let duration = (date.getTime() - new Date().getTime()) / 1000
+
+    for (let i = 0; i <= DIVISIONS.length; i++) {
+        const division = DIVISIONS[i]
+
+        if (Math.abs(duration) < division.amount) {
+            return formatter.format(Math.round(duration), division.name)
+        }
+
+        duration /= division.amount
+    }
+  }