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

Improved styling #12

Merged
innocuous-symmetry merged 4 commits from improved-styling into master 2022-02-06 18:49:26 +00:00
Conversation 1 Commits 4 Files Changed 6 +81 -38
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 {
display: flex;
flex-direction: column;
background-color: #d1aabc;
background-color: #6b4477;
align-items: center;
margin: 0;
padding: 0;
overflow-y: hidden;
}
.loading-message {
color:rgb(111, 30, 151);
color:white;
font-family: 'Indie Flower', sans-serif;
font-size: 2.5rem;
height: 100vh;
}
@@ -45,14 +47,14 @@
align-items: center;
width: 100%;
height: 5rem;
background-color: rgb(111, 30, 151);
background-color: rgb(0, 0, 0);
border-bottom: 1px solid black;
z-index: 9;
}
.nav-title-desktop {
display: inline-flex;
color: orchid;
color: rgb(190, 113, 188);
padding-left: 1.5rem;
font-family: 'Open Sans', sans-serif;
}
@@ -76,7 +78,7 @@
.sidebar-button {
border: transparent;
background-color: orchid;
background-color: rgb(190, 113, 188);
box-shadow: 1px 1px rgb(111, 30, 151);
text-align: center;
height: 3.5rem;
@@ -138,22 +140,26 @@
width: 90vw;
}
/* Page handling */
.page-handling {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 2rem;
background-color: orchid;
background-color: rgb(190, 113, 188);
border-radius: 15px;
width: 50%;
height: 3rem;
}
.page-handling button {
background-color: rgb(218, 171, 216);
background-color: rgb(0, 0, 0);
color: rgb(190, 113, 188);
border: transparent;
border-radius: 50%;
font-size: 2rem;
height: 3.5rem;
width: 3.5rem;
box-shadow:2rem rgb(111, 30, 151);
@@ -173,9 +179,7 @@
}
#bottom-page-handling {
margin-top: 5rem;
position: relative;
bottom: 6rem;
margin-bottom: 10rem;
}
/* Media queries (tablet) */
@@ -225,6 +229,7 @@
.page-handling button {
height: 2rem;
width: 2rem;
font-size: 1.4rem;
margin: 0 0.4rem;
}
}
@@ -273,5 +278,6 @@
.page-handling button {
height: 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)
return (
<>
<p>THIS IS A REPLY:</p>
<p>Nested {comment.data.replies.data.children[0].data.depth} layers deep</p>
<p>{comment.data.replies.data.children[0].data.is_submitter ? 'OP posted' : ''}</p>
<p>u/{comment.data.replies.data.children[0].data.author}</p>
<p>{comment.data.replies.data.children[0].data.body}</p>
</>
<div className={comment.data.replies.data.children ? `indiv-comment nested` : "indiv-comment"}>
<p className="comment-author">
u/{comment.data.replies.data.children[0].data.author}
{comment.data.replies.data.children[0].data.is_submitter ? ' (OP)' : ''}
{comment.data.replies.data.children ? ' replied:' : ''}
</p>
<p className="comment-body">{comment.data.replies.data.children[0].data.body}</p>
</div>
)
} else {
return;
@@ -72,11 +73,13 @@ export default function Discussion({permalink, isVisible}) {
setThread(comments.map((comment) => {
return (
<>
<div className="indiv-comment" key={v4()}>
<p>u/{comment.data.author}</p>
<p>{comment.data.body}</p>
{getReplies(comment)}
</div>
{getReplies(comment)}
</>
)
}))
}

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

@@ -1,5 +1,5 @@
import React, { useState } from "react";
import SearchBar from "../searchBar/searchBar";
// import SearchBar from "../searchBar/searchBar";
import Sidebar from "../sidebar/Sidebar";
export default function Navbar() {
@@ -14,7 +14,6 @@ export default function Navbar() {
<div className="navbar">
<h1 className="nav-title-desktop">Reddit, but it's all cats</h1>
<h1 className="nav-title-mobile">Cat Reddit</h1>
<SearchBar />
<button className="sidebar-button" onClick={handleCollapse}>Sidebar</button>
</div>
<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
console.log(sortedPosts);
let newFeed = sortedPosts.map((post) => {
return (
<Post

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

@@ -6,8 +6,7 @@
width: 75%;
padding: 1rem 2rem;
border-radius: 10px;
background-color: #bfbbd8;
border: 1px solid rgb(250, 206, 248);
background-color: rgb(29, 4, 39);
margin: 3rem 0;
z-index: 5;
}
@@ -16,13 +15,13 @@
.title {
font-size: 2rem;
color:darkorchid;
color: rgb(190, 113, 188);
text-decoration: none;
margin-bottom: 1rem;
}
.title:visited {
color: orchid;
color: rgb(228, 180, 226);
}
/* Media */
@@ -46,7 +45,7 @@ img, video {
.post-metadata * {
display: inline-flex;
background-color:rgb(250, 206, 248);
background-color: rgb(190, 113, 188);
border-color: transparent;
text-decoration: none;
border-radius: 8px;
@@ -58,23 +57,27 @@ img, video {
}
.post-subreddit {
color: rgb(111, 30, 151);
color: black;
}
.post-subreddit:visited {
color: orchid;
color: rgb(97, 49, 95);
}
.num-comments {
display: inline-flex;
background-color: rgb(250, 206, 248);
background-color: #7196be;
border-color: transparent;
border-radius: 8px;
padding: 5px 8px;
}
.num-comments:active {
background-color: darkorchid;
background-color: #064486;
}
.crosspost-from {
color:rgb(228, 180, 226);
}
/* Handles comment styles on toggle */
@@ -89,6 +92,23 @@ img, video {
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 */
@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 permalink = data.permalink;
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 [body, setBody] = useState(selftext);
@@ -71,10 +75,17 @@ export default function Post({data, key}) {
if (data.crosspost_parent_list[0].is_video) {
return (
<>
<video src={data.crosspost_parent_list[0].url}>This video is not supported by your browser.</video>
<p>Crosspost from {data.crosspost_parent_list[0].subreddit_name_prefixed}</p>
<video controls src={data.crosspost_parent_list[0].media.reddit_video.fallback_url}>This video is not supported by your browser.</video>
<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 {
return;
}
@@ -90,18 +101,20 @@ export default function Post({data, key}) {
{media ? <img alt={title} src={media} /> : ''}
{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 ?
<p>View the gallery of photos corresponding to this post <a href={data.url}>here</a>.</p>
: null}
{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 ?