From 49b2fd6b2f1ba4df1e2e0477e7c48a9394d7f334 Mon Sep 17 00:00:00 2001 From: William Tran Date: Tue, 18 May 2021 20:56:11 -0400 Subject: [PATCH] Add styling to OrganizedContent Also fixes props interface --- components/OrganizedContent.module.css | 89 ++++++++++++++++++++++++-- components/OrganizedContent.tsx | 84 ++++++++++++++++++------ components/playground.tsx | 33 ++++++++-- pages/_app.css | 4 +- 4 files changed, 176 insertions(+), 34 deletions(-) diff --git a/components/OrganizedContent.module.css b/components/OrganizedContent.module.css index dcc336a0..e3bde3d1 100644 --- a/components/OrganizedContent.module.css +++ b/components/OrganizedContent.module.css @@ -1,6 +1,85 @@ -.organizedcontent { - background-color: rgb(78, 212, 178, 0.2); - color: var(--purple-2); - display:flex; - flex-direction:row; +.organizedContent { + display: flex; +} + +.contentHeading { + margin: 1rem 0 1rem 0; + color: var(--blue-2); +} + +.nav { + margin: 1rem 2rem 0 0.5rem; +} + +.navOption { + width: max-content; + padding: 0.5rem 2rem 0.5rem 0.5rem; + font-size: 0.875rem; +} + +.divider { + border-bottom: 1px solid var(--blue-2); + opacity: 0.25; + width: '100%', +} + +.footer { + margin-top: 1rem; + display: flex; + justify-content: space-between; +} + +.footerSection { + display: flex; +} + +.selectedHeading { + color: var(--blue-2); + font-weight: bold; +} + +.selectedHeadingArea { + background-color: rgba(92, 175, 249, 0.05); +} + +.readAll { + font-weight: bold; +} + +.arrowHeading { + color: var(--blue-2); + font-size: 0.875rem; + font-weight: bold; + text-decoration: underline; + text-underline-offset: 0.5rem; + text-decoration-thickness: 0.1rem; +} + +.prevNext { + font-size: 0.75rem; +} + +.nextText { + text-align: end; +} + +.arrow { + fill: var(--blue-2); + margin-top: 1.7rem; +} + +.prevArrow { + transform: rotate(90deg); + padding-right: 0.5rem; + +} + +.nextArrow { + transform: rotate(270deg); + padding-left: 0.5rem; +} + +.footerSection { + cursor: pointer; + display: flex; } \ No newline at end of file diff --git a/components/OrganizedContent.tsx b/components/OrganizedContent.tsx index c3c6ad05..a10fa4e5 100644 --- a/components/OrganizedContent.tsx +++ b/components/OrganizedContent.tsx @@ -27,35 +27,79 @@ export const OrganizedContent: React.FC = ({ children, link: Link, }) => { - const prevHeading = currentIndex > 0 ? headings[currentIndex - 1] : undefined; + const isReadAll = headings[currentIndex].name === "Read All" + const prevHeading = currentIndex > 0 && headings[currentIndex - 1].name !== "Read All" ? headings[currentIndex - 1] : undefined; const nextHeading = - currentIndex < headings.length - 1 ? headings[currentIndex + 1] : undefined; + currentIndex < headings.length - 1 && !isReadAll ? headings[currentIndex + 1] : undefined; return ( -
-
+
+
{headings.map((heading, index) => ( -

- {heading.name} -

+
+
+ {heading.name} +
+
+
))}
-

{headings[currentIndex].name}

+ {!isReadAll && +

{headings[currentIndex].name}

} {children} - {prevHeading && ( - - Previous - {prevHeading.name} - - )} - {nextHeading && ( - - Next - {nextHeading.name} - - )} +
+ {prevHeading && ( +
+ +
+ + + +
+
Previous
+
{prevHeading.name}
+
+
+ +
+ )} +
+ {nextHeading && ( +
+ +
+
+
Next
+
{nextHeading.name}
+
+ + + +
+ +
+ )} +
); diff --git a/components/playground.tsx b/components/playground.tsx index 6efb17d1..441e02e8 100644 --- a/components/playground.tsx +++ b/components/playground.tsx @@ -54,25 +54,43 @@ export function MiniEventCardDemo() { export function OrganizedContentDemo() { let sections = [ { - name: "Heading1", + name: "1. Name", url: "a", - content:
Hello World! 1
, + key: "a", + content:
1. The name of this organization shall be the "Computer Science Club of the University of Waterloo".
, }, { - name: "Heading2", + name: "2. Purpose", url: "b", - content:
Hello World! 2
, + key: "b", + content:
The Club is organized and will be operated exclusively for educational and scientific purposes in furtherance of: + promoting an increased knowledge of computer science and its applications; + promoting a greater interest in computer science and its applications; and + providing a means of communication between persons having interest in computer science. + The above purposes will be fulfilled by the organization of discussions and lectures with professionals and academics in the field of computer science and related fields, the maintenance of a library of materials related to computer science, the maintenance of an office containing the library as an aid to aim (1.3) above, and such other means as decided by the club membership.
, }, { - name: "Heading3", + name: "3. Membership", url: "c", - content:
Hello World! 3
, + key: "c", + content:
In compliance with MathSoc regulations and in recognition of the club being primarily targeted at undergraduate students, full membership is open to all Social Members of the Mathematics Society and restricted to the same. + Affiliate membership in this Club shall be open to all members of the University community, including alumni. Affiliate members shall have all the rights of full members except for the rights of voting and holding executive office. + Membership shall be accounted for on a termly basis, where a term begins at the start of lectures in Winter or Spring, and at the start of Orientation Week in Fall. + A person is not a member until he or she has paid the current membership fee and has been enrolled in the member database. The termly membership fee is set from time to time by the Executive. Under conditions approved by the Executive, a member who purchases a membership at the end of the current term may be given membership for both the current term and the next term. If the membership fee changes, then this does not affect the validity of any membership terms already paid for. + The Club may grant access to its systems, either free of charge or for a fee, to members of the University community in order to offer them services. This does not constitute membership.
, + }, + { + name: "Consequences of Unacceptable Behavior", + url: "d", + key: "d", + content:
CODEY
, }, ]; const readAllSection = { - name: "Read all", + name: "Read All", url: "readall", + key: "readall", content: <>{sections.map((section => section.content))} } @@ -83,6 +101,7 @@ export function OrganizedContentDemo() { function FakeLink({ url, children }: LinkProps) { return (
{ const target = sections.findIndex((section) => section.url === url); diff --git a/pages/_app.css b/pages/_app.css index dd661abc..7a8d3a91 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -12,7 +12,7 @@ body { --teal-1: #76ffdc; --teal-2: #4ed4b2; --blue-1: #5caff9; - --blue-2: #5caff9; + --blue-2: #1482E3; --purple-1: #525284; --purple-2: #2a2a62; --gradient-blue-green: linear-gradient( @@ -27,7 +27,7 @@ body { --teal-1: #76ffdc; --teal-2: #4ed4b2; --blue-1: #5caff9; - --blue-2: #5caff9; + --blue-2: #1482E3; --purple-1: #525284; --purple-2: #2a2a62; --gradient-blue-green: linear-gradient(