innocuous-symmetry/cat-reddit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12 from innocuous-symmetry/improved-styling

Browse Source 
Improved styling
This commit is contained in:
Mikayla Dobson
2022-02-06 12:49:26 -06:00
committed by GitHub
parent f471064f8d 88594840b6
commit 4369cf55ed
6 changed files with 81 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.css
View File

@@ -19,15 +19,17 @@
.App { .App {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #d1aabc; background-color: #6b4477;
align-items: center; align-items: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-y: hidden;
} }
.loading-message { .loading-message {
color:rgb(111, 30, 151); color:white;
font-family: 'Indie Flower', sans-serif; font-family: 'Indie Flower', sans-serif;
font-size: 2.5rem;
height: 100vh; height: 100vh;
} }
@@ -45,14 +47,14 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 5rem; height: 5rem;
background-color: rgb(111, 30, 151); background-color: rgb(0, 0, 0);
border-bottom: 1px solid black; border-bottom: 1px solid black;
z-index: 9; z-index: 9;
} }
.nav-title-desktop { .nav-title-desktop {
display: inline-flex; display: inline-flex;
color: orchid; color: rgb(190, 113, 188);
padding-left: 1.5rem; padding-left: 1.5rem;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
@@ -76,7 +78,7 @@
.sidebar-button { .sidebar-button {
border: transparent; border: transparent;
background-color: orchid; background-color: rgb(190, 113, 188);
box-shadow: 1px 1px rgb(111, 30, 151); box-shadow: 1px 1px rgb(111, 30, 151);
text-align: center; text-align: center;
height: 3.5rem; height: 3.5rem;
@@ -138,22 +140,26 @@
width: 90vw; width: 90vw;
} }
/* Page handling */
.page-handling { .page-handling {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 2rem; padding: 2rem;
background-color: orchid; background-color: rgb(190, 113, 188);
border-radius: 15px; border-radius: 15px;
width: 50%; width: 50%;
height: 3rem; height: 3rem;
} }
.page-handling button { .page-handling button {
background-color: rgb(218, 171, 216); background-color: rgb(0, 0, 0);
color: rgb(190, 113, 188);
border: transparent; border: transparent;
border-radius: 50%; border-radius: 50%;
font-size: 2rem;
height: 3.5rem; height: 3.5rem;
width: 3.5rem; width: 3.5rem;
box-shadow:2rem rgb(111, 30, 151); box-shadow:2rem rgb(111, 30, 151);
@@ -173,9 +179,7 @@
} }
#bottom-page-handling { #bottom-page-handling {
margin-top: 5rem; margin-bottom: 10rem;
position: relative;
bottom: 6rem;
} }
/* Media queries (tablet) */ /* Media queries (tablet) */
@@ -225,6 +229,7 @@
.page-handling button { .page-handling button {
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
font-size: 1.4rem;
margin: 0 0.4rem; margin: 0 0.4rem;
} }
} }
@@ -273,5 +278,6 @@
.page-handling button { .page-handling button {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
font-size: 1rem;
} }
} }

19
src/features/discussion/Discussion.js
View File

@@ -55,13 +55,14 @@ export default function Discussion({permalink, isVisible}) {
console.log(comment.data.replies.data.children[0].data.author) console.log(comment.data.replies.data.children[0].data.author)
return ( return (
<> <div className={comment.data.replies.data.children ? `indiv-comment nested` : "indiv-comment"}>
<p>THIS IS A REPLY:</p> <p className="comment-author">
<p>Nested {comment.data.replies.data.children[0].data.depth} layers deep</p> u/{comment.data.replies.data.children[0].data.author}
<p>{comment.data.replies.data.children[0].data.is_submitter ? 'OP posted' : ''}</p> {comment.data.replies.data.children[0].data.is_submitter ? ' (OP)' : ''}
<p>u/{comment.data.replies.data.children[0].data.author}</p> {comment.data.replies.data.children ? ' replied:' : ''}
<p>{comment.data.replies.data.children[0].data.body}</p> </p>
</> <p className="comment-body">{comment.data.replies.data.children[0].data.body}</p>
</div>
) )
} else { } else {
return; return;
@@ -72,11 +73,13 @@ export default function Discussion({permalink, isVisible}) {
setThread(comments.map((comment) => { setThread(comments.map((comment) => {
return ( return (
<>
<div className="indiv-comment" key={v4()}> <div className="indiv-comment" key={v4()}>
<p>u/{comment.data.author}</p> <p>u/{comment.data.author}</p>
<p>{comment.data.body}</p> <p>{comment.data.body}</p>
{getReplies(comment)}
</div> </div>
{getReplies(comment)}
</>
) )
})) }))
} }

3
src/features/navbar/Navbar.js
View File

@@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import SearchBar from "../searchBar/searchBar"; // import SearchBar from "../searchBar/searchBar";
import Sidebar from "../sidebar/Sidebar"; import Sidebar from "../sidebar/Sidebar";
export default function Navbar() { export default function Navbar() {
@@ -14,7 +14,6 @@ export default function Navbar() {
<div className="navbar"> <div className="navbar">
<h1 className="nav-title-desktop">Reddit, but it's all cats</h1> <h1 className="nav-title-desktop">Reddit, but it's all cats</h1>
<h1 className="nav-title-mobile">Cat Reddit</h1> <h1 className="nav-title-mobile">Cat Reddit</h1>
<SearchBar />
<button className="sidebar-button" onClick={handleCollapse}>Sidebar</button> <button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
</div> </div>
<div className="sidebar-container"> <div className="sidebar-container">

2
src/features/posts/Feed.js
View File

@@ -82,6 +82,8 @@ export default function Feed() {
let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function let sortedPosts = extractedPosts.sort(comparePosts); // implements sorting function
console.log(sortedPosts);
let newFeed = sortedPosts.map((post) => { let newFeed = sortedPosts.map((post) => {
return ( return (
<Post <Post

38
src/features/posts/Post.css
View File

@@ -6,8 +6,7 @@
width: 75%; width: 75%;
padding: 1rem 2rem; padding: 1rem 2rem;
border-radius: 10px; border-radius: 10px;
background-color: #bfbbd8; background-color: rgb(29, 4, 39);
border: 1px solid rgb(250, 206, 248);
margin: 3rem 0; margin: 3rem 0;
z-index: 5; z-index: 5;
} }
@@ -16,13 +15,13 @@
.title { .title {
font-size: 2rem; font-size: 2rem;
color:darkorchid; color: rgb(190, 113, 188);
text-decoration: none; text-decoration: none;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.title:visited { .title:visited {
color: orchid; color: rgb(228, 180, 226);
} }
/* Media */ /* Media */
@@ -46,7 +45,7 @@ img, video {
.post-metadata * { .post-metadata * {
display: inline-flex; display: inline-flex;
background-color:rgb(250, 206, 248); background-color: rgb(190, 113, 188);
border-color: transparent; border-color: transparent;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 8px;
@@ -58,23 +57,27 @@ img, video {
} }
.post-subreddit { .post-subreddit {
color: rgb(111, 30, 151); color: black;
} }
.post-subreddit:visited { .post-subreddit:visited {
color: orchid; color: rgb(97, 49, 95);
} }
.num-comments { .num-comments {
display: inline-flex; display: inline-flex;
background-color: rgb(250, 206, 248); background-color: #7196be;
border-color: transparent; border-color: transparent;
border-radius: 8px; border-radius: 8px;
padding: 5px 8px; padding: 5px 8px;
} }
.num-comments:active { .num-comments:active {
background-color: darkorchid; background-color: #064486;
}
.crosspost-from {
color:rgb(228, 180, 226);
} }
/* Handles comment styles on toggle */ /* Handles comment styles on toggle */
@@ -89,6 +92,23 @@ img, video {
display: none; display: none;
} }
/* Comment styling */
.indiv-comment {
background-color: #7196be;
border-radius: 15px;
}
.nested {
position: relative;
width: calc(100% - 2.5rem);
left: 2.5rem;
}
.indiv-comment p {
padding: 1rem;
}
/* Queries */ /* Queries */
@media only screen and (max-width: 1050px) { /* for tablets */ @media only screen and (max-width: 1050px) { /* for tablets */

31
src/features/posts/Post.js
View File

@@ -14,7 +14,11 @@ export default function Post({data, key}) {
let media = data.post_hint === 'image' && data.url; let media = data.post_hint === 'image' && data.url;
let permalink = data.permalink; let permalink = data.permalink;
let selftext = data.selftext; let selftext = data.selftext;
let video = data.is_video ? data.media.reddit_video.fallback_url : null; // to do: handle media edge cases, especially video let video = data.is_video ? `${data.url}/DASH_1080.mp4` : null; // to do: handle media edge cases, especially video
// fallback_url: "https://v.redd.it/0rditq5l49g81/DASH_1080.mp4?source=fallback"
// url: "https://v.redd.it/0rditq5l49g81"
// id: "sm2wym"
const limit = 300; const limit = 300;
const [body, setBody] = useState(selftext); const [body, setBody] = useState(selftext);
@@ -71,10 +75,17 @@ export default function Post({data, key}) {
if (data.crosspost_parent_list[0].is_video) { if (data.crosspost_parent_list[0].is_video) {
return ( return (
<> <>
<video src={data.crosspost_parent_list[0].url}>This video is not supported by your browser.</video> <video controls src={data.crosspost_parent_list[0].media.reddit_video.fallback_url}>This video is not supported by your browser.</video>
<p>Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p> <p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
</> </>
); );
} else if (data.crosspost_parent_list[0].url && !data.url) {
return (
<>
<img alt={title} src={data.crosspost_parent_list[0].url} />
<p className="crosspost-from">Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
</>
)
} else { } else {
return; return;
} }
@@ -90,18 +101,20 @@ export default function Post({data, key}) {
{media ? <img alt={title} src={media} /> : ''} {media ? <img alt={title} src={media} /> : ''}
{data.crosspost_parent_list ? handleCrosspost() : ''} {data.crosspost_parent_list ? handleCrosspost() : ''}
{data.crosspost_parent_list ?
(data.crosspost_parent_list[0].is_video ?
<video src={data.crosspost_parent_list[0].url}></video>
: null)
: null}
{data.gallery_data ? {data.gallery_data ?
<p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p> <p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
: null} : null}
{video ? {video ?
<video controls type="video/mp4" src={video}></video> <video
controls
poster={data.thumbnail}
preload="auto"
src={video}>
Your video is not supported by the browser.
</video>
: ''} : ''}
{body ? {body ?