Skip to content

Commit

Permalink
ui changes done
Browse files Browse the repository at this point in the history
  • Loading branch information
riya-2206 committed Jun 18, 2024
1 parent 8148988 commit 744f675
Show file tree
Hide file tree
Showing 9 changed files with 217 additions and 240 deletions.
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import React from "react";

function C4GT2024Page() {
function C4GT2024Description() {
return (
<div
className="container padding-top--md padding-bottom--lg"
style={{ minHeight: "60vh" }}
className="container padding-top--md padding-bottom--lg container-height"
>
<div className="row">
<div className="col width">
<div>
<article>
<nav
className="theme-doc-breadcrumbs"
style={{ marginBottom: ".4rem" }}
className="theme-doc-breadcrumbs breadcrumbs-margin"
aria-label="breadcrumbs"
>
<ul className="breadcrumbs">
Expand All @@ -23,8 +21,7 @@ function C4GT2024Page() {
</li>
<li className="breadcrumbs__item breadcrumbs__item--active">
<a
className="breadcrumbs__link breadcrumbs-items"
style={{ cursor: "pointer" }}
className="breadcrumbs__link breadcrumbs-items cursor-pointer"
>
C4GT'24
</a>
Expand Down Expand Up @@ -65,4 +62,4 @@ function C4GT2024Page() {
);
}

export default C4GT2024Page;
export default C4GT2024Description;
12 changes: 12 additions & 0 deletions src/components/ErrorComponent.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";

function ErrorComponent({ error }) {
return (
<div className="error"
>
<h3>{error.message}</h3>
</div>
);
}

export default ErrorComponent;
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import useParseMarkdown from "../hooks/useParseMarkdown";
import Markdown from "markdown-to-jsx";
import uncheckedBox from "/img/checkbox.png";
import checkedBox from "/img/tickedCheckbox.png";
import ErrorComponent from "./ErrorComponent";

function SubProjectDescription({ currentOrg, currentIssue }) {
function IssueDescription({ currentOrg, currentIssue }) {
const { API_AUTH_KEY, API_BASE_URL } = useParseMarkdown();
const [description, setDescription] = useState(null);
const [isLearningsDropdown, setLearningsDropdown] = useState(0);
Expand Down Expand Up @@ -37,28 +38,15 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
return (
<>
{error ? (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
flexDirection: "column",
}}
>
<h3>{error.message}</h3>
</div>
<ErrorComponent error={error} />
) : (
<div
className="container padding-top--md padding-bottom--lg"
style={{ minHeight: "60vh" }}
className="container padding-top--md padding-bottom--lg container-height"
>
{description && (
<article>
<nav
className="theme-doc-breadcrumbs"
style={{ marginBottom: ".4rem" }}
className="theme-doc-breadcrumbs breadcrumbs-margin"
aria-label="breadcrumbs"
>
<ul className="breadcrumbs">
Expand All @@ -77,8 +65,7 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
</li>
<li className="breadcrumbs__item breadcrumbs__item--active">
<a
className="breadcrumbs__link breadcrumbs-items"
style={{ cursor: "pointer" }}
className="breadcrumbs__link breadcrumbs-items cursor-pointer"
>
{description?.name}
</a>
Expand Down Expand Up @@ -112,7 +99,7 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
</header>
{description?.description && (
<>
<h2 style={{ fontSize: "32px" }}>Overview</h2>
<h2>Overview</h2>
<p>{description?.description}</p>
</>
)}
Expand Down Expand Up @@ -204,7 +191,7 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
className="markdown-body"
style={{ marginBottom: "16px" }}
>
<h2 style={{ fontSize: "32px" }}>Weekly Goals</h2>
<h2>Weekly Goals</h2>
{description?.weekly_goals?.map((d, i) => {
return (
<table className="fullwidth-table">
Expand Down Expand Up @@ -303,7 +290,7 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
className="markdown-body"
style={{ marginBottom: "16px" }}
>
<h2 style={{ fontSize: "32px" }}>Weekly Learnings</h2>
<h2>Weekly Learnings</h2>
{description?.weekly_learnings?.map((d, i) => {
return (
<table className="fullwidth-table">
Expand Down Expand Up @@ -394,4 +381,4 @@ function SubProjectDescription({ currentOrg, currentIssue }) {
);
}

export default SubProjectDescription;
export default IssueDescription;
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import useParseMarkdown from "../hooks/useParseMarkdown";
import ErrorComponent from "./ErrorComponent";

function ProjectDescription({
currentOrg,
currentOrgData
}) {
function OrgDescription({ currentOrg, currentOrgData }) {
const history = useHistory();
const { API_AUTH_KEY, API_BASE_URL } = useParseMarkdown();
const [description, setDescription] = useState(null);
Expand Down Expand Up @@ -55,30 +53,17 @@ function ProjectDescription({
return (
<>
{error ? (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh",
flexDirection: "column",
}}
>
<h3>{error.message}</h3>
</div>
<ErrorComponent error={error} />
) : description ? (
<div
className="container padding-top--md padding-bottom--lg"
style={{ minHeight: "60vh" }}
className="container padding-top--md padding-bottom--lg container-height"
>
<div className="row">
<div className="col width">
<div>
<article>
<nav
className="theme-doc-breadcrumbs"
style={{ marginBottom: ".4rem" }}
className="theme-doc-breadcrumbs breadcrumbs-margin"
aria-label="breadcrumbs"
>
<ul className="breadcrumbs">
Expand All @@ -92,8 +77,7 @@ function ProjectDescription({
</li>
<li className="breadcrumbs__item breadcrumbs__item--active">
<a
className="breadcrumbs__link breadcrumbs-items"
style={{ cursor: "pointer" }}
className="breadcrumbs__link breadcrumbs-items cursor-pointer"
>
{description?.name}
</a>
Expand All @@ -116,7 +100,8 @@ function ProjectDescription({
{currentOrgData?.[0]?.issues?.map((d, i) => {
return (
<li key={i}>
<a style={{cursor:"pointer"}}
<a
className="cursor-pointer"
onClick={() => {
const newUrl = `/docs/2024/org?id=${currentOrg}&issue=${d.id}`;
history.push(newUrl);
Expand Down Expand Up @@ -144,4 +129,4 @@ function ProjectDescription({
);
}

export default ProjectDescription;
export default OrgDescription;
102 changes: 102 additions & 0 deletions src/components/Sidebar.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import React from "react";
import { useHistory } from "react-router-dom";

function Sidebar({
currentTab,
issueData,
currentOrg,
setCurrentOrg,
currentIssue,
setCurrentIssue,
}) {
const history = useHistory();
return (
<div className="sidebar-styles">
<nav className="menu thin-scrollbar menu_styles">
<ul className="theme-doc-sidebar-menu menu__list">
<li className="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item">
<div
className={`menu__link cursor-pointer ${currentTab == "c4gt" ? "menu__link--active" : ""}`}
onClick={() => {
window.location.href = `/docs/2024/`;
}}
>
C4GT'24
</div>
</li>
{issueData == null ? (
<></>
) : (
issueData?.map((data, i) => {
return (
<li
key={i}
className={`theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item ${currentOrg == data?.org_name ? "" : "menu__list-item--collapsed"}`}
>
<div
className={`menu__list-item-collapsible cursor-pointer ${currentOrg == data?.org_name && currentIssue == null ? "menu__list-item-collapsible--active" : ""}`}
onClick={() => {
const newUrl = `/docs/2024/org?id=${data?.org_name}`;
history.push(newUrl);
setCurrentOrg(() => data?.org_name);
setCurrentIssue(() => null);
}}
>
<div
className={`menu__link ${currentOrg == data?.org_name ? "menu__link--active" : ""}`}
>
{data?.org_name}
</div>
<button
aria-label={`Toggle the collapsible sidebar category ${data?.org_name}`}
type="button"
className="clean-btn menu__caret"
></button>
</div>
{currentOrg == data?.org_name ? (
<ul
className="menu__list"
style={{
display: "block",
overflow: "visible",
height: "auto",
willChange: "height",
transition: "height 187ms ease-in-out 0s",
}}
>
{data?.issues?.map((d, i) => {
if (d?.name != null)
return (
<li
key={i}
className="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"
>
<div
className={`menu__link cursor-pointer ${currentIssue == d.id ? "menu__link--active" : ""}`}
onClick={() => {
const newUrl = `/docs/2024/org?id=${currentOrg}&issue=${d.id}`;
history.push(newUrl);
setCurrentIssue(() => d.id);
}}
>
{d.name}
</div>
</li>
);
else <></>;
})}
</ul>
) : (
<></>
)}
</li>
);
})
)}
</ul>
</nav>
</div>
);
}

export default Sidebar;
4 changes: 4 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -48,3 +48,7 @@
line-height: 25px;
color: #1c1e21;
}

.cursor-pointer{
cursor: pointer;
}
19 changes: 19 additions & 0 deletions src/pages/docs/2024/index.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.sidebar-container-2024{
display: none;
}
.sidebar-container{
width: 100%;
display: flex;
}
.main-container{
display: flex;
width: 100%;
Expand Down Expand Up @@ -41,6 +45,20 @@ table tr:nth-child(2n){
.fullwidth-table th{
background-color: #f5f6f7 !important;
}
.error{
display: flex;
justify-content: center;
align-items: center;
width:100%;
height: 100vh;
flex-direction: column
}
.container-height{
min-height: 60vh;
}
.breadcrumbs-margin{
margin-bottom: .4rem;
}


@media screen and (max-width: 779px){
Expand Down Expand Up @@ -76,6 +94,7 @@ table tr:nth-child(2n){
.main-container{
flex-grow: 1;
max-width: calc(100% - 300px);
height: 100%;
}
.width{
max-width: 75% !important;
Expand Down
Loading

0 comments on commit 744f675

Please sign in to comment.