ui improvements

lalewis7 · Aug 10, 2023 · 8e5d212 · 8e5d212
1 parent 4bbcc3d
commit 8e5d212
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 30 deletions.
diff --git a/client/web/src/components/FeedPalette.js b/client/web/src/components/FeedPalette.js
@@ -1,4 +1,4 @@
-import { Button, Card } from "react-bootstrap"
+import { Button, Card, Ratio } from "react-bootstrap"
 import { Heart, HeartFill } from 'react-bootstrap-icons'
 import { ACTIONS } from "./PaletteList"
 import { useToken } from "../context/TokenProvider"
@@ -22,25 +22,29 @@ export function FeedPalette(props){
     }
 
     const likeBtn = 
-        <Button variant={colorMode} size="sm" onClick={onLikeBtn} className="m-1">
-            {props.liked ? <HeartFill color={"red"} /> : <Heart />}
+        <Button variant={colorMode} size="sm" onClick={onLikeBtn} className="h-100">
+            {props.liked ? <HeartFill color={"red"} size={18} /> : <Heart size={16} />}
         </Button>
 
     return <>
         <div className="feed-palette-wrapper">
             <Card className="feed-palette">
-                {props.colors.map((color, i) => <Link key={i} className="feed-palette-row feed-palette-color" 
-                        style={{backgroundColor: "#"+color}} to={"/palettes/"+props.id}>
-                    <span style={{color: pickTextColorWhiteBlack(color)}} className="feed-palette-code">{"#"+color}</span>
-                </Link>)}
+                <Ratio aspectRatio={90}>
+                    <div className="feed-palette-colors-grid">
+                        {props.colors.map((color, i) => <Link key={i} className="feed-palette-color" 
+                                style={{backgroundColor: "#"+color}} to={"/palettes/"+props.id}>
+                            <span style={{color: pickTextColorWhiteBlack(color)}} className="feed-palette-code">{"#"+color}</span>
+                        </Link>)}
+                    </div>
+                </Ratio>
                 <div className="feed-palette-row feed-palette-bottom">
                     <div className="feed-palette-likes">
                         {token ? likeBtn : 
                             <LikePopover>
                                 {likeBtn}
                             </LikePopover>
                         }
-                        <span>{props.likes}</span>
+                        <span className="ms-1">{props.likes}</span>
                     </div>
                     <small>{getTimeElapsed(props.timestamp)}</small>
                 </div>

diff --git a/client/web/src/components/FeedPalettePlaceholder.js b/client/web/src/components/FeedPalettePlaceholder.js
@@ -1,17 +1,25 @@
 import { Card, Placeholder } from "react-bootstrap";
 
 export default function FeedPalettePlaceholder(){
+    const phStyle = {
+        height: '2.25rem',
+        marginBottom: '0.25rem'
+    }
+    const phBottomStyle = {
+        height: '1.5rem', 
+        marginBottom: '0.25rem'
+    }
     return <div className="feed-palette-placeholder-wrapper">
         <div className="feed-palette-placeholder">
             <Placeholder animation="glow" className="d-flex flex-column">
-                <Placeholder xs={12} style={{height: '1.75rem', marginBottom: '0.25rem'}} />
-                <Placeholder xs={12} style={{height: '1.75rem', marginBottom: '0.25rem'}} />
-                <Placeholder xs={12} style={{height: '1.75rem', marginBottom: '0.25rem'}} />
-                <Placeholder xs={12} style={{height: '1.75rem', marginBottom: '0.25rem'}} />
-                <Placeholder xs={12} style={{height: '1.75rem', marginBottom: '0.25rem'}} />
+                <Placeholder xs={12} style={phStyle} />
+                <Placeholder xs={12} style={phStyle} />
+                <Placeholder xs={12} style={phStyle} />
+                <Placeholder xs={12} style={phStyle} />
+                <Placeholder xs={12} style={phStyle} />
                 <div className="d-flex flex-row justify-content-between">
-                    <Placeholder xs={2} style={{height: '1.25rem', marginBottom: '0.25rem'}} />
-                    <Placeholder xs={4} style={{height: '1.25rem', marginBottom: '0.25rem'}} />
+                    <Placeholder xs={2} style={phBottomStyle} />
+                    <Placeholder xs={4} style={phBottomStyle} />
                 </div>
             </Placeholder>
         </div>

diff --git a/client/web/src/components/MobileHeaderOffcanvas.js b/client/web/src/components/MobileHeaderOffcanvas.js
@@ -1,7 +1,7 @@
 import { GoogleLogin } from "@react-oauth/google";
 import { useToken, useTokenUpdate } from "context/TokenProvider";
 import { Nav, Offcanvas, Image, Row, Col } from "react-bootstrap";
-import { Box2Heart, BoxArrowDownRight, BoxArrowRight, EnvelopeAt, Fire, InfoCircle, PlusSquare, Stars } from "react-bootstrap-icons";
+import { Box2Heart, BoxArrowRight, EnvelopeAt, Fire, InfoCircle, PlusSquare, Stars } from "react-bootstrap-icons";
 import { Link, useLocation } from "react-router-dom";
 import ColorModeButton from "./ColorModeButton";
 
@@ -16,7 +16,7 @@ export default function MobileHeaderOffcanvas(props){
     }
 
     return <>
-        <Offcanvas.Header className="mobile-header bg-body-secondary" closeButton>
+        <Offcanvas.Header className="mobile-header bg-body-secondary" closeButton >
             {token ? <>
                 {props.self ? <>
                     <div>

diff --git a/client/web/src/components/PaletteList.js b/client/web/src/components/PaletteList.js
@@ -98,7 +98,7 @@ export default function PaletteList(props){
         </>
         : <EmptyPage msg={props.empty_msg} />
         : <div id="feed-content-placeholder">{[...Array(15)].map(() => <FeedPalettePlaceholder />)}</div>}
-        {props.loaded && props.count > 0 ? 
+        {props.loaded && props.count > props.page_len ? 
         <Pagination id="feed-pagination">
             {pages()}
         </Pagination>

diff --git a/client/web/src/components/styles/ColorCodeCopy.scss b/client/web/src/components/styles/ColorCodeCopy.scss
@@ -1,7 +1,7 @@
 .palette-code {
 	/* display: none; */
 	padding-right: 0.5rem;
-	padding-bottom: 0.5rem;
+	padding-bottom: 0.2rem;
 }
 
 .palette-code:hover {

diff --git a/client/web/src/components/styles/FeedPalette.scss b/client/web/src/components/styles/FeedPalette.scss
@@ -1,5 +1,5 @@
 .feed-palette {
-	max-width: 16rem;
+	max-width: 18rem;
 	min-width: 12rem;
 	overflow: hidden;
 	flex-grow: 1;
@@ -43,4 +43,11 @@
 	flex-direction: row;
 	align-items: center;
 	height: 100%;
+	padding: 0.2rem;
+}
+
+.feed-palette-colors-grid{
+	display:grid;
+	grid-template-rows: repeat(5, 1fr);
+	gap:0;
 }
diff --git a/client/web/src/components/styles/FeedPalettePlaceholder.scss b/client/web/src/components/styles/FeedPalettePlaceholder.scss
@@ -1,5 +1,5 @@
 .feed-palette-placeholder {
-	max-width: 16rem;
+	max-width: 18rem;
 	min-width: 12rem;
 	overflow: hidden;
 	padding: 0;

diff --git a/client/web/src/components/styles/MobileHeaderOffcanvas.scss b/client/web/src/components/styles/MobileHeaderOffcanvas.scss
@@ -5,11 +5,15 @@
 
 .mobile-header{
 	padding: 1.5rem;
+	// background-image: linear-gradient(45deg, #39a4f1, #7910b6);
 }
 
 .mobile-header-name{
 	margin: 0;
-	margin-top: 0.5rem;
+	margin-top: 1rem;
+    font-family: "Nunito";
+    font-weight: 600;
+    line-height: 1;
 }
 
 .mobile-header-navlink{

diff --git a/client/web/src/components/styles/PaletteList.scss b/client/web/src/components/styles/PaletteList.scss
@@ -2,6 +2,7 @@
 	display: grid;
 	gap: 0.8rem;
 	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+	margin-bottom: 3rem;
 }
 
 #feed-content-placeholder{

diff --git a/client/web/src/index.scss b/client/web/src/index.scss
@@ -87,6 +87,7 @@ code {
 @import 'pages/styles/LandingPage.scss';
 @import 'pages/styles/About.scss';
 @import 'pages/styles/Contact.scss';
+@import 'pages/styles/Profile.scss';
 
 // components
 @import 'components/styles/HeaderUserDropdown.scss';

diff --git a/client/web/src/pages/Profile.js b/client/web/src/pages/Profile.js
@@ -1,4 +1,4 @@
-import { Container } from "react-bootstrap";
+import { Card, Col, Container, Row, Tab, Tabs } from "react-bootstrap";
 import PaletteList, { ACTIONS, reducer } from "../components/PaletteList";
 import { useToken } from "../context/TokenProvider";
 import { Navigate, useSearchParams } from "react-router-dom";
@@ -62,10 +62,32 @@ export default function Profile(){
     }
 
     return <>
-        <Container id="feed-container" className="pt-3">
-            <PaletteList palettes={palettes} dispatch_palettes={dispatch} loaded={loaded} error={error} 
-                page={page} page_len={PAGE_LENGTH} count={count.current} gotoPage={gotoPage} 
-                empty_msg="Browse the &ldquo;New&rdquo; and &ldquo;Popular&rdquo; pages for palettes to add to your liked collection."/>
-        </Container>
+        <div className="d-flex flex-column w-100">
+            {/* <Container className="mt-3">
+                <Card className="profile-header bg-body-tertiary">
+                    <div className="profile-banner">
+                    <img className="profile-avatar-img" width="32" src="https://lh3.googleusercontent.com/a/AAcHTtcNGVsdckVs5BZssPcdI78Wz3KDDHpVtoSu8-VrZ3ZLNA=s96-c" referrerPolicy="no-referrer" />
+                    <ul className="profile-stats-list">
+                        <li className="profile-stats-item"><h6>25<br/>Palettes</h6></li>
+                        <li className="profile-stats-item"><h6>18<br/>Likes</h6></li>
+                        <li className="profile-stats-item"><h6>35<br/>Liked</h6></li>
+                    </ul>
+                    </div>
+                    <div className="px-4 pb-2">
+                        <h2 className="mt-5 me-5 flex-grow-1">Arthur</h2>
+                    </div>
+                    <Tabs defaultActiveKey="liked" className="mt-3">
+                        <Tab eventKey="palettes" title="Palettes" disabled></Tab>
+                        <Tab eventKey="liked" title="Likes"></Tab>
+                        <Tab eventKey="collections" title="Collections" disabled></Tab>
+                    </Tabs>
+                </Card>
+            </Container> */}
+            <Container id="feed-container" className="pt-3">
+                <PaletteList palettes={palettes} dispatch_palettes={dispatch} loaded={loaded} error={error} 
+                    page={page} page_len={PAGE_LENGTH} count={count.current} gotoPage={gotoPage} 
+                    empty_msg="Browse the &ldquo;New&rdquo; and &ldquo;Popular&rdquo; pages for palettes to add to your liked collection."/>
+            </Container>
+        </div>
     </>
 }
diff --git a/client/web/src/pages/styles/Profile.scss b/client/web/src/pages/styles/Profile.scss
@@ -0,0 +1,50 @@
+.profile-header{
+    overflow: hidden;
+}
+
+.profile-banner{
+    background-image: linear-gradient(45deg, #63beff, #7910b6);
+    height: 6rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.profile-avatar-img{
+    width: 4em;
+    height: 4em;
+    border-radius: 100%;
+    // position: relative;
+    // top: -2em;
+    position: absolute;
+    top: 4em;
+    left: 1.5em;
+}
+
+.profile-stats-list{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    margin: auto;
+    //padding: 1.25rem 0.5rem 0.8rem 0.75rem;
+    width: 224px;
+    padding: .75rem 0 0.3rem 0;
+    list-style-type: none;
+    position: absolute;
+    top: 4.5em;
+    right: 1em;
+    background-color: var(--bs-tertiary-bg);
+    border-radius: 0.25rem;
+    // border: var(--bs-card-border-width) solid var(--bs-card-border-color);
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.profile-stats-item{
+    text-align: center;
+    // padding-left: 0.5rem;
+    // padding-right: 0.5rem;
+    font-family: 'Nunito';
+    font-weight: 800;
+}
diff --git a/rest_api/src/main/java/net/palettehub/api/AppSecurity.java b/rest_api/src/main/java/net/palettehub/api/AppSecurity.java
@@ -65,9 +65,9 @@ public void handle(HttpServletRequest request, HttpServletResponse response,
             // -> /users/{userId}
             .requestMatchers("/users/{userId}").permitAll()
             .requestMatchers(HttpMethod.GET, "/users/{userId}").authenticated()
-            // -> /users/{userId}/like
+            // -> /users/{userId}/likes
             .requestMatchers("/users/{userId}/likes").permitAll()
-            .requestMatchers(HttpMethod.GET, "/palettes/{paletteId}/like").authenticated()
+            .requestMatchers(HttpMethod.GET, "/users/{userId}/likes").authenticated()
             // -> /palettes
             .requestMatchers("/palettes").permitAll()
             .requestMatchers(HttpMethod.POST, "/palettes").authenticated()