Changeset f5d4792 for reactapp

Timestamp:

07/30/22 23:57:30 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

ad40ec0

Parents:

5347491

Message:

styled professor page

Location:

reactapp/src

Files:

• Components/OpinionCard.style.js (modified) (1 diff)
• Components/OpinionTree.js (modified) (3 diffs)
• Pages/Professor.js (modified) (1 diff)

reactapp/src/Components/OpinionCard.style.js

@@ -1 +1 @@
 import styled from "styled-components";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const OpinionCard = styled.div`
   background-color: papayawhip;
-  width: fit-content;
+  width: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  border: 1px solid black;
+`;
+
+export const OpinionCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionCardContentTitle = styled.p`
+  font-weight: bold;
+`;
+
+export const OpinionCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
 `;
 
 export const OpinionReplyCard = styled.div`
-  background-color: lavender;
-  width: fit-content;
-  margin-top: 7px;
-  margin-bottom: 7px;
+  background-color: papayawhip;
+  width: auto;
   margin-left: ${(props) => props.indent};
+  padding: 10px;
+  border-left: thick solid tan;
 `;
+
+export const OpinionReplyCardContent = styled.div`
+  padding: 5px;
+  transition: 0.5s;
+  &:hover {
+    background-color: seashell;
+  }
+  position: relative;
+`;
+
+export const OpinionReplyCardContentTime = styled.p`
+  font-size: small;
+  font-style: italic;
+`;
+
+export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  color: darkgrey;
+  display: block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: ${(props) => props.indent};
+`;

reactapp/src/Components/OpinionTree.js

@@ -1 @@
-import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
+import {
+  OpinionCard,
+  OpinionCardContent,
+  OpinionCardContentTime,
+  OpinionCardContentTitle,
+  OpinionReplyCard,
+  OpinionReplyCardContent,
+  OpinionReplyCardContentTime,
+  StyledFontAwesomeIcon,
+} from "./OpinionCard.style";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  solid,
+  regular,
+  brands,
+} from "@fortawesome/fontawesome-svg-core/import.macro";
 import { dateConverter } from "../Util/dateConverter";
 
@@ -12 +27 @@
       <div key={child.postId}>
         <OpinionReplyCard indent={replyIndent + "px"}>
-          <p>
-            <a href="#">{child.author.username}</a> му реплицирал на{" "}
-            {parentPostAuthorUsername}
-          </p>
-          <p>{child.content}</p>
-          <p>
-            {dateConverter(new Date(child.timePosted).toString().slice(4, -43))}
-          </p>
+          <OpinionReplyCardContent>
+            <p>
+              <a href="#">{child.author.username}</a> му реплицирал на{" "}
+              {parentPostAuthorUsername}
+            </p>
+            <p>{child.content}</p>
+            <OpinionReplyCardContentTime>
+              {dateConverter(
+                new Date(child.timePosted).toString().slice(4, -43)
+              )}
+            </OpinionReplyCardContentTime>
+            <StyledFontAwesomeIcon
+              icon={solid("thumbs-up")}
+              right={50 + "px"}
+            />
+            <StyledFontAwesomeIcon
+              icon={solid("thumbs-down")}
+              right={10 + "px"}
+            />
+            <StyledFontAwesomeIcon icon={solid("reply")} right={90 + "px"} />
+          </OpinionReplyCardContent>
+          {child.children.map((childOfChild) =>
+            displayChildPosts(
+              childOfChild,
+              child.author.username,
+              replyIndent + 30
+            )
+          )}
         </OpinionReplyCard>
-        {child.children.map((childOfChild) =>
-          displayChildPosts(
-            childOfChild,
-            child.author.username,
-            replyIndent + 30
-          )
-        )}
       </div>
     );
@@ -37 +65 @@
         if (!renderedOpinionIds.includes(opinion.postId)) {
           postCount = renderedOpinionIds.push(opinion.postId);
-          var replyIndent = 30;
           return (
             <div key={opinion.postId}>
               <OpinionCard>
-                <p>
-                  <a href="#">{opinion.author.username}</a> напишал
-                </p>
-
-                <p>{opinion.title}</p>
-                <p>{opinion.content}</p>
-                <p>
-                  {dateConverter(
-                    new Date(opinion.timePosted).toString().slice(4, -43)
-                  )}
-                </p>
+                <OpinionCardContent>
+                  <p>
+                    <a href="#">{opinion.author.username}</a> напишал
+                  </p>
+                  <OpinionCardContentTitle>
+                    {opinion.title}
+                  </OpinionCardContentTitle>
+                  <p>{opinion.content}</p>
+                  <OpinionCardContentTime>
+                    {dateConverter(
+                      new Date(opinion.timePosted).toString().slice(4, -43)
+                    )}
+                  </OpinionCardContentTime>
+                  <StyledFontAwesomeIcon
+                    icon={solid("thumbs-up")}
+                    right={50 + "px"}
+                  />
+                  <StyledFontAwesomeIcon
+                    icon={solid("thumbs-down")}
+                    right={10 + "px"}
+                  />
+                  <StyledFontAwesomeIcon
+                    icon={solid("reply")}
+                    right={90 + "px"}
+                  />
+                </OpinionCardContent>
+                {opinion.children.map((child) =>
+                  displayChildPosts(child, opinion.author.username, 30)
+                )}
               </OpinionCard>
-              {opinion.children.map((child) =>
-                displayChildPosts(child, opinion.author.username, replyIndent)
-              )}
             </div>
           );

reactapp/src/Pages/Professor.js

@@ -57 +57 @@
           </div>
         </ProfessorCard>
-        <h3>{professor.relatedOpinions.length} мислења</h3>
+        <h3 style={{ marginBottom: "10px" }}>
+          {professor.relatedOpinions.length}{" "}
+          {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
+        </h3>
         <div className="opinionTree">
           <OpinionTree professor={professor} />