Add sidebar section #247

AhmedBasem20 · 2023-07-20T22:44:56Z

This addresses #246 and introduces a sidebar with plugin content outlines. To implement the sidebar, several considerations were taken into account:

Keep the sidebar isolated from the header and footer
Disable the sidebar for small screens (mobile phones)
Make it in a fixed position, and allow for scrolling.

I used Materials UI Drawer component, it handles most of the above with less code.

A lot of things are done in App.jsx so I tried to modularize the code a little bit.

The project folder structure

- public
- src
 -- assets
 -- Components
      ---MainIndex.jsx
      ---Details.jsx
      ---Sidebar.jsx
  --App.jsx
  --main.jsx
-index.html

still facing styling issues so I'll open it as a draft until it is ready for review

…to ui-improvements

github-actions · 2023-07-21T00:10:43Z

PR Preview Action v1.4.4
🚀 Deployed preview to https://aiidateam.github.io/aiida-registry/pr-preview/pr-247/
on branch `gh-pages` at 2023-08-10 20:31 UTC

unkcpz · 2023-08-08T16:50:23Z

Thanks!

It'll be better if the logo header is not stick but will disappear/reveal when scroll page up, as show in the example of this post The result looks like the example in the end of this article https://webdesign.tutsplus.com/how-to-hide-reveal-a-sticky-header-on-scroll-with-javascript--cms-33756t

unkcpz

Had some questions, I have to admit I am very ignorant on css and jsx 😅
You even move elements to components, wonderful!

aiida-registry-app/src/App.css

aiida-registry-app/src/App.jsx

unkcpz · 2023-08-09T21:41:10Z

aiida-registry-app/src/App.jsx

+ * It renders the Details component on the left side and the Sidebar component on the right side.
+ *
+ * @component
+ * @example


What is this @example?

it is used to show how the component should be rendered, it is good for complex components with parameters. but it doesn't add much for simple components like <DetailsContainer /> so I'll delete it.

AhmedBasem20 · 2023-08-10T00:00:03Z

I have to admit I am very ignorant on css and jsx 😅

This is normal, I feel this all the time while working on tasks related to css and design🤣
Currently, I spent much of the time reviewing css basics.

AhmedBasem20 · 2023-08-10T00:15:55Z

can you check the preview page? it works now.
Sorry I pushed the code when it worked but there are some ambiguous parts that need to be documented. I'll ping you when done.

unkcpz

Looks all good to me. Let's wait all tests pass and we can merge. There is a small issue, but not related to this PR you can see if it easy to fix but just nitpick you can ignore it.

unkcpz · 2023-08-10T19:11:53Z

aiida-registry-app/src/Components/Details.jsx

+      <h1 className='plugin-header'>
+          AiiDA plugin package &quot;<a href={value.code_home}>{value.name}</a>&quot;
+      </h1>
+      <Link to={'/'}><p>&lt; back to the registry index</p></Link>


I notice that when the mouse hover not on the text but on the same line the hyperlink is still activated, this may cause coincidently trigger to go back to the /. I guess this is the code related.

(You can check by moving the mouse not on the "back to the registry index" but on the same horizontal line.)

AhmedBasem20 · 2023-08-10T19:44:21Z

Thanks @unkcpz this is fixed now! let's wait another 40 minutes😄

unkcpz · 2023-08-10T21:02:55Z

Cheers! 🚀

This addresses #246 and introduces a sidebar with plugin content outlines. To implement the sidebar, several considerations were taken into account: * Keep the sidebar isolated from the header and footer * Disable the sidebar for small screens (mobile phones) * Make it in a fixed position, and allow for scrolling. We used Materials UI `Drawer` component, it handles most of the above with less code. Things are done in `App.jsx` and modulized to the have components in `components` folder. The project folder structure ``` - public - src -- assets -- Components ---MainIndex.jsx ---Details.jsx ---Sidebar.jsx --App.jsx --main.jsx -index.html ```

author AhmedBasem <demhamesab@gmail.com> 1687946371 +0300 committer Jusong Yu <jusong.yeu@gmail.com> 1692310651 +0200 Add PR preview action Initialize React app. Created the components and routes of the app. Updated The webpage.yml with the deploy script. Commit the plugins JSON file into git so that the React app can read the data from it. Reused the current stylesheet and svg images feat: sort plugins by commit count (aiidateam#241) Use github API to get the commits endpoint. To get the number of commits in the last year we specify the period in the params of the request and then extract the number of pages from the response header. For plugins not hosted on github, we clone the repository and use git directly. fix layout deploy only when merged to master Fix PR preview path issue update Display Entry points information & Add Sort feature (aiidateam#245) This commit introduces a new ranking of the yearly commits for sorting the plugins. It also includes the implementation of showing the plugin descriptions to the plugin detail page. Change checkbox icon (aiidateam#248) Using `CheckCircleIcon` from `@mui/icons-material/CheckCircle` Add sidebar section (aiidateam#247) This addresses aiidateam#246 and introduces a sidebar with plugin content outlines. To implement the sidebar, several considerations were taken into account: * Keep the sidebar isolated from the header and footer * Disable the sidebar for small screens (mobile phones) * Make it in a fixed position, and allow for scrolling. We used Materials UI `Drawer` component, it handles most of the above with less code. Things are done in `App.jsx` and modulized to the have components in `components` folder. The project folder structure ``` - public - src -- assets -- Components ---MainIndex.jsx ---Details.jsx ---Sidebar.jsx --App.jsx --main.jsx -index.html ``` Fix the website design on small screens (aiidateam#253)

This addresses #246 and introduces a sidebar with plugin content outlines. To implement the sidebar, several considerations were taken into account: * Keep the sidebar isolated from the header and footer * Disable the sidebar for small screens (mobile phones) * Make it in a fixed position, and allow for scrolling. We used Materials UI `Drawer` component, it handles most of the above with less code. Things are done in `App.jsx` and modulized to the have components in `components` folder. The project folder structure ``` - public - src -- assets -- Components ---MainIndex.jsx ---Details.jsx ---Sidebar.jsx --App.jsx --main.jsx -index.html ```

AhmedBasem20 added 10 commits July 13, 2023 15:53

Display Entry points information & Add Sort feature

9123eb1

fix precommit

2bad3a3

fix routing for pr preview

3059d2a

fix incomplete info

f11d803

display number of commits

c7f5943

Display installing status

390aecf

display installation status

687353c

Display entry points information as markdown

7deb468

Merge branch 'gsoc' of https://github.com/aiidateam/aiida-registry in…

8abf72f

…to ui-improvements

Add sidebar section

c462df6

AhmedBasem20 force-pushed the sidebar-section branch from b50082a to c462df6 Compare July 20, 2023 22:48

Fix sidebar layout

13c0627

AhmedBasem20 marked this pull request as ready for review August 8, 2023 14:57

AhmedBasem20 requested review from unkcpz and ltalirz August 8, 2023 16:04

align sidebar to top

a1cdc59

AhmedBasem20 force-pushed the sidebar-section branch 2 times, most recently from b8fd8ea to a1cdc59 Compare August 9, 2023 09:30

AhmedBasem20 added 4 commits August 9, 2023 12:32

Merge branch 'gsoc' into sidebar-section

b0ad7df

Update MainIndex.jsx

88241d3

Update App.jsx

9ebce37

Show & hide header on scroll

304ceb2

unkcpz reviewed Aug 9, 2023

View reviewed changes

fix scrolling behaviour

5585ef2

AhmedBasem20 requested a review from unkcpz August 10, 2023 18:10

fix pre-commit

89b3dc4

unkcpz approved these changes Aug 10, 2023

View reviewed changes

fix hover issue

68cf675

AhmedBasem20 requested a review from unkcpz August 10, 2023 20:42

unkcpz merged commit 4d94a38 into gsoc Aug 10, 2023
10 checks passed

unkcpz deleted the sidebar-section branch August 10, 2023 21:02

unkcpz mentioned this pull request Aug 10, 2023

In the plugin details, add outlines of plugins and can redirect to the specific item. #252

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sidebar section #247

Add sidebar section #247

AhmedBasem20 commented Jul 20, 2023

github-actions bot commented Jul 21, 2023 •

edited

Loading

unkcpz commented Aug 8, 2023

unkcpz left a comment

unkcpz Aug 9, 2023

AhmedBasem20 Aug 9, 2023

AhmedBasem20 commented Aug 10, 2023

AhmedBasem20 commented Aug 10, 2023

unkcpz left a comment

unkcpz Aug 10, 2023

AhmedBasem20 commented Aug 10, 2023

unkcpz commented Aug 10, 2023

Add sidebar section #247

Add sidebar section #247

Conversation

AhmedBasem20 commented Jul 20, 2023

github-actions bot commented Jul 21, 2023 • edited Loading

unkcpz commented Aug 8, 2023

unkcpz left a comment

Choose a reason for hiding this comment

unkcpz Aug 9, 2023

Choose a reason for hiding this comment

AhmedBasem20 Aug 9, 2023

Choose a reason for hiding this comment

AhmedBasem20 commented Aug 10, 2023

AhmedBasem20 commented Aug 10, 2023

unkcpz left a comment

Choose a reason for hiding this comment

unkcpz Aug 10, 2023

Choose a reason for hiding this comment

AhmedBasem20 commented Aug 10, 2023

unkcpz commented Aug 10, 2023

github-actions bot commented Jul 21, 2023 •

edited

Loading