From 8e5d21220def813cfdcd780b83eda12aec50358d Mon Sep 17 00:00:00 2001 From: lalewis7 Date: Thu, 10 Aug 2023 12:39:46 -0400 Subject: [PATCH] ui improvements --- client/web/src/components/FeedPalette.js | 20 +++++--- .../src/components/FeedPalettePlaceholder.js | 22 +++++--- .../src/components/MobileHeaderOffcanvas.js | 4 +- client/web/src/components/PaletteList.js | 2 +- .../src/components/styles/ColorCodeCopy.scss | 2 +- .../src/components/styles/FeedPalette.scss | 9 +++- .../styles/FeedPalettePlaceholder.scss | 2 +- .../styles/MobileHeaderOffcanvas.scss | 6 ++- .../src/components/styles/PaletteList.scss | 1 + client/web/src/index.scss | 1 + client/web/src/pages/Profile.js | 34 ++++++++++--- client/web/src/pages/styles/Profile.scss | 50 +++++++++++++++++++ .../java/net/palettehub/api/AppSecurity.java | 4 +- 13 files changed, 127 insertions(+), 30 deletions(-) create mode 100644 client/web/src/pages/styles/Profile.scss diff --git a/client/web/src/components/FeedPalette.js b/client/web/src/components/FeedPalette.js index 523f35a..e9ff722 100644 --- 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,17 +22,21 @@ export function FeedPalette(props){ } const likeBtn = - return <>
- {props.colors.map((color, i) => - {"#"+color} - )} + +
+ {props.colors.map((color, i) => + {"#"+color} + )} +
+
{token ? likeBtn : @@ -40,7 +44,7 @@ export function FeedPalette(props){ {likeBtn} } - {props.likes} + {props.likes}
{getTimeElapsed(props.timestamp)}
diff --git a/client/web/src/components/FeedPalettePlaceholder.js b/client/web/src/components/FeedPalettePlaceholder.js index 91f1824..f39cbbd 100644 --- 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
- - - - - + + + + +
- - + +
diff --git a/client/web/src/components/MobileHeaderOffcanvas.js b/client/web/src/components/MobileHeaderOffcanvas.js index a2a0548..845cb59 100644 --- 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 <> - + {token ? <> {props.self ? <>
diff --git a/client/web/src/components/PaletteList.js b/client/web/src/components/PaletteList.js index a23cd42..81207f8 100644 --- a/client/web/src/components/PaletteList.js +++ b/client/web/src/components/PaletteList.js @@ -98,7 +98,7 @@ export default function PaletteList(props){ : :
{[...Array(15)].map(() => )}
} - {props.loaded && props.count > 0 ? + {props.loaded && props.count > props.page_len ? {pages()} diff --git a/client/web/src/components/styles/ColorCodeCopy.scss b/client/web/src/components/styles/ColorCodeCopy.scss index 957e52b..e4e36cc 100644 --- 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 index 571371e..58828c2 100644 --- 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; } \ No newline at end of file diff --git a/client/web/src/components/styles/FeedPalettePlaceholder.scss b/client/web/src/components/styles/FeedPalettePlaceholder.scss index 4179e3d..9871e32 100644 --- 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 index a302022..c2c093b 100644 --- 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 index 58d6cbe..bf1c15f 100644 --- 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 index d3d585a..a088b01 100644 --- 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 index 6351709..9c4c9b1 100644 --- 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 <> - - - +
+ {/* + +
+ +
    +
  • 25
    Palettes
    • +
  • 18
    Likes
    • +
  • 35
    Liked
    • +
+
+
+

Arthur

+
+ + + + + + + */} + + + +
} \ No newline at end of file diff --git a/client/web/src/pages/styles/Profile.scss b/client/web/src/pages/styles/Profile.scss new file mode 100644 index 0000000..a920faa --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/rest_api/src/main/java/net/palettehub/api/AppSecurity.java b/rest_api/src/main/java/net/palettehub/api/AppSecurity.java index 6fa27cc..fad6ff8 100644 --- 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()