Changeset f5d4792 for reactapp/src


Ignore:
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:
3 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/Components/OpinionCard.style.js

    r5347491 rf5d4792  
    11import styled from "styled-components";
     2import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    23
    34export const OpinionCard = styled.div`
    45  background-color: papayawhip;
    5   width: fit-content;
     6  width: auto;
     7  margin-top: 20px;
     8  margin-bottom: 20px;
     9  padding: 10px;
     10  border: 1px solid black;
     11`;
     12
     13export const OpinionCardContent = styled.div`
     14  padding: 5px;
     15  transition: 0.5s;
     16  &:hover {
     17    background-color: seashell;
     18  }
     19  position: relative;
     20`;
     21
     22export const OpinionCardContentTitle = styled.p`
     23  font-weight: bold;
     24`;
     25
     26export const OpinionCardContentTime = styled.p`
     27  font-size: small;
     28  font-style: italic;
    629`;
    730
    831export const OpinionReplyCard = styled.div`
    9   background-color: lavender;
    10   width: fit-content;
    11   margin-top: 7px;
    12   margin-bottom: 7px;
     32  background-color: papayawhip;
     33  width: auto;
    1334  margin-left: ${(props) => props.indent};
     35  padding: 10px;
     36  border-left: thick solid tan;
    1437`;
     38
     39export const OpinionReplyCardContent = styled.div`
     40  padding: 5px;
     41  transition: 0.5s;
     42  &:hover {
     43    background-color: seashell;
     44  }
     45  position: relative;
     46`;
     47
     48export const OpinionReplyCardContentTime = styled.p`
     49  font-size: small;
     50  font-style: italic;
     51`;
     52
     53export const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
     54  color: darkgrey;
     55  display: block;
     56  position: absolute;
     57  top: 50%;
     58  transform: translateY(-50%);
     59  right: ${(props) => props.indent};
     60`;

  • reactapp/src/Components/OpinionTree.js

    r5347491 rf5d4792  
    1 import { OpinionCard, OpinionReplyCard } from "./OpinionCard.style";
     1import {
     2  OpinionCard,
     3  OpinionCardContent,
     4  OpinionCardContentTime,
     5  OpinionCardContentTitle,
     6  OpinionReplyCard,
     7  OpinionReplyCardContent,
     8  OpinionReplyCardContentTime,
     9  StyledFontAwesomeIcon,
     10} from "./OpinionCard.style";
     11import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
     12import {
     13  solid,
     14  regular,
     15  brands,
     16} from "@fortawesome/fontawesome-svg-core/import.macro";
    217import { dateConverter } from "../Util/dateConverter";
    318
    … …  
    1227      <div key={child.postId}>
    1328        <OpinionReplyCard indent={replyIndent + "px"}>
    14           <p>
    15             <a href="#">{child.author.username}</a> му реплицирал на{" "}
    16             {parentPostAuthorUsername}
    17           </p>
    18           <p>{child.content}</p>
    19           <p>
    20             {dateConverter(new Date(child.timePosted).toString().slice(4, -43))}
    21           </p>
     29          <OpinionReplyCardContent>
     30            <p>
     31              <a href="#">{child.author.username}</a> му реплицирал на{" "}
     32              {parentPostAuthorUsername}
     33            </p>
     34            <p>{child.content}</p>
     35            <OpinionReplyCardContentTime>
     36              {dateConverter(
     37                new Date(child.timePosted).toString().slice(4, -43)
     38              )}
     39            </OpinionReplyCardContentTime>
     40            <StyledFontAwesomeIcon
     41              icon={solid("thumbs-up")}
     42              right={50 + "px"}
     43            />
     44            <StyledFontAwesomeIcon
     45              icon={solid("thumbs-down")}
     46              right={10 + "px"}
     47            />
     48            <StyledFontAwesomeIcon icon={solid("reply")} right={90 + "px"} />
     49          </OpinionReplyCardContent>
     50          {child.children.map((childOfChild) =>
     51            displayChildPosts(
     52              childOfChild,
     53              child.author.username,
     54              replyIndent + 30
     55            )
     56          )}
    2257        </OpinionReplyCard>
    23         {child.children.map((childOfChild) =>
    24           displayChildPosts(
    25             childOfChild,
    26             child.author.username,
    27             replyIndent + 30
    28           )
    29         )}
    3058      </div>
    3159    );
    … …  
    3765        if (!renderedOpinionIds.includes(opinion.postId)) {
    3866          postCount = renderedOpinionIds.push(opinion.postId);
    39           var replyIndent = 30;
    4067          return (
    4168            <div key={opinion.postId}>
    4269              <OpinionCard>
    43                 <p>
    44                   <a href="#">{opinion.author.username}</a> напишал
    45                 </p>
    46 
    47                 <p>{opinion.title}</p>
    48                 <p>{opinion.content}</p>
    49                 <p>
    50                   {dateConverter(
    51                     new Date(opinion.timePosted).toString().slice(4, -43)
    52                   )}
    53                 </p>
     70                <OpinionCardContent>
     71                  <p>
     72                    <a href="#">{opinion.author.username}</a> напишал
     73                  </p>
     74                  <OpinionCardContentTitle>
     75                    {opinion.title}
     76                  </OpinionCardContentTitle>
     77                  <p>{opinion.content}</p>
     78                  <OpinionCardContentTime>
     79                    {dateConverter(
     80                      new Date(opinion.timePosted).toString().slice(4, -43)
     81                    )}
     82                  </OpinionCardContentTime>
     83                  <StyledFontAwesomeIcon
     84                    icon={solid("thumbs-up")}
     85                    right={50 + "px"}
     86                  />
     87                  <StyledFontAwesomeIcon
     88                    icon={solid("thumbs-down")}
     89                    right={10 + "px"}
     90                  />
     91                  <StyledFontAwesomeIcon
     92                    icon={solid("reply")}
     93                    right={90 + "px"}
     94                  />
     95                </OpinionCardContent>
     96                {opinion.children.map((child) =>
     97                  displayChildPosts(child, opinion.author.username, 30)
     98                )}
    5499              </OpinionCard>
    55               {opinion.children.map((child) =>
    56                 displayChildPosts(child, opinion.author.username, replyIndent)
    57               )}
    58100            </div>
    59101          );

  • reactapp/src/Pages/Professor.js

    r5347491 rf5d4792  
    5757          </div>
    5858        </ProfessorCard>
    59         <h3>{professor.relatedOpinions.length} мислења</h3>
     59        <h3 style={{ marginBottom: "10px" }}>
     60          {professor.relatedOpinions.length}{" "}
     61          {professor.relatedOpinions.length !== 1 ? "мислења" : "мислење"}
     62        </h3>
    6063        <div className="opinionTree">
    6164          <OpinionTree professor={professor} />
Note: See TracChangeset for help on using the changeset viewer.