add sidebar + sort modules #2225

NOTMEE12 · 2023-06-02T15:15:13Z

I will add sidebar (maybe also make it look better).
Also I feel that sorting by Most Usefull stuff, Advanced stuff, is not the best sorting, so I will sort modules by Usecase (pygame.display will go to Window section, etc.)

NOTMEE12 · 2023-06-03T10:59:22Z

mockup of what I want to get:

btw. this is a screenshot edited in paint, not a index.html file. This is not done in the time that I'm writing this.

Notenlish · 2023-06-08T18:20:16Z

why are you adding '▼' into the text itself? You should add it as a seperate element because:
A) It wont appear as text when you hold down the mouse
B) Cleaner implementation

Secondly, you should make the width of the sidebar fixed, not based on the window width. Because it just leads to the sidebar getting narrower when you make the window narrower. Instead it should ideally have more or less a fixed width. If the window is too narrow, It should work like how the godot docs handles it.

Thirdly, I dont think that making the sidebar have a gradient for background makes sense.

Also, the sidebar shouldn't change width when hovering over it. It just makes it distracting.

NOTMEE12 · 2023-06-08T18:34:07Z

About 1:
I can make it as an new element, but I dont know if it will be on the same line.
About 2:
I'm adding support for smaller screens ( < 1100 width ). It will just create a navbar on top of the screen and if you click it, it will expand and show more options.
About 3:
It looks very good when you add shadow :).

About last:
Yeah, I can remove that.

Notenlish · 2023-06-08T18:37:37Z

About 2: I'm adding support for smaller screens ( < 1100 width ). It will just create a navbar on top of the screen and if you click it, it will expand and show more options.

When you make the window width narrower, the width of the sidebar changes(with a transition). I like the navbar idea, just wanted to point out the sidebar width changing when you change the width of the window(even by a small amount).

support for small devices polish

Notenlish

Fix the div with the class "related" taking up sidebar's space

Notenlish

Fix this(screenshot from iphone 12 pro screen resolution)

Notenlish

Can you replace the icon, doesn't fit well. It's too big and the white outline doesn't really make sense)

Notenlish

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: bezier;
    transition-delay: 0.1s;

I think you should get rid of the transition

Notenlish

Add cursor: pointer; for hovering over that part

Notenlish

div.header > div {
    /* border: {{ theme_headerborder }}; */
    border-collapse: collapse;
    background-color: {{ theme_headerbgcolor }};
    background-image: linear-gradient(to bottom, {{ theme_headerbgcolor}}, {{ theme_bgcolor }});
}
.dark-theme div.header > div {
    background-color: {{ theme_dark_headerbgcolor }};
    border: {{ theme_dark_headerborder }};
    background-image: linear-gradient(to bottom, {{ theme_dark_headerbgcolor }}, {{ theme_dark_bgcolor }});
}
div.header .logo {
    background-color: {{ theme_logobgcolor }};
    background-image: linear-gradient(to bottom, {{ theme_logobgcolor }}, {{ theme_headerbgcolor }});
    padding: 0.3em;
    /* border-right: 3px solid black; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.dark-theme div.header .logo {
    background-color: {{ theme_dark_logobgcolor }};
    background-image: linear-gradient(to bottom, {{ theme_dark_logobgcolor}}, {{ theme_dark_headerbgcolor }});
    border: none;
}

Get rid of background-image. I don't think a gradient is needed, just using a color should be fine.

Notenlish

function toggleSectionVisibility(section, message){
	document.getElementById(section).hidden = ! document.getElementById(section).hidden;
	if (document.getElementById(section).hidden === true){ // show
		items = localStorage.getItem('hidden');
		if (items !== null){
			if (!(items.includes(section))){
				items = items + section + '|';
			}
			localStorage.setItem('hidden', items);
		} else {
			localStorage.setItem('hidden', section + '|');
		}
		document.getElementById(section[0]).innerHTML = document.getElementById(section[0]).innerHTML.replace('▼', '▲');
	} else {  // hide
		items = localStorage.getItem('hidden');
		if (items !== null){
			if (items.includes(section)){
				items = items.replace(section + '|', '');
			}
			localStorage.setItem('hidden', items);
		}
		document.getElementById(section[0]).innerHTML = document.getElementById(section[0]).innerHTML.replace('▲', '▼');
	}
}

function toggleChecked(classname){
    if (window.innerWidth <= 1100) {
        el = document.getElementsByClassName(classname)[0];
        console.log(el.id);
        if (el.id !== 'clicked') {
            el.id = 'clicked';
            htmlElement.classList.add('clicked');
        } else {
            el.id = null;
            htmlElement.classList.remove('clicked');
        }
    }
}

Do we have to save the hidden/closed tabs in localStorage? I don't think resetting hidden parts would create any inconvenience for the user.

Notenlish

function toggleSectionVisibility(section, message){
    ...
}

message argument isn't used

NOTMEE12 · 2023-06-10T20:41:33Z

How did you get that. What are the steps to replicate this?

cool-dev-guy · 2023-06-11T01:35:16Z

Can you replace the icon, doesn't fit well. It's too big and the white outline doesn't really make sense)

What about using unicode?<p>≡ </p> for hamburger menu?instead of svg?
eg :

≡

cool-dev-guy · 2023-06-11T01:38:41Z

	box-shadow: 20px 10px 15px 0px rgba(0, 0, 0, 0.2);
	margin: 0;
	top: 0;
	height: 100vh;
	transition-property: all;

use 100% instead of 100vh

Is it working,cuz if the body&html is not 100% it cant take the entire window size.

Edit:

I checked the code and found that html is 100vh and body is 100% and div.header is 100vh,So the problem i mentioned above dosen't matter now.

docs/reST/_static/sections.js

I don't know how it got there.

Notenlish

It's hard to see the sidebar in light theme

docs/reST/themes/classic/static/pygame.css_t

Notenlish · 2023-06-22T20:04:42Z

docs/reST/themes/classic/static/pygame.css_t

+input[name="q"]{
+    :-webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;


border-radius seems to be supported pretty much everywhere, why do you use -mox-border-radius and :-webkit-border-radius ?

should I remove it?

MyreMylar

Thanks for having a go at doing this.

My three thoughts when looking it over:

I don't like the extra scroll bar that I get on the left hand side when all the submodule sections are open at the same time. I think that a) the submodules should perhaps start closed, only expanding when you click on the category and b) all the other sections should close when you expand one of them. This is how the default read the docs theme works, you can experiment with it in the Pygame GUI docs here.
The upwards pointing arrow icons on the drop downs are confusing, generally I think the convention is that the arrows point to the right until expanded and then point down.
I like the idea of broad categorisations for grouping the submodules, but since they are being changed from the classic trio of 'Most useful', 'Advanced' and 'Other'. There needs to be a bit of debate over the broad categories here. For instance, I would call the one labelled 'Music' here 'Sound' because it covers sound effects as well as playing music or midi tracks. The drawing section has too much stuff in it - including some very rarely used submodules alongside frequently used ones. time does seem to belong under window, and we also have a new submodule and class on the way called 'window' and Window. I'd be tempted to seperate out font and freetype into a section called 'Text'. 'touch' should definitely be in the input section. 'BufferProxy', 'PixelArray', 'pixelcopy' and surfarray could all go in the 'Other' bucket imho. I'm sure there are other changes that could be made but those would be a decent start, and many others will have opinions.

MyreMylar · 2023-10-12T17:39:01Z

What I'm talking about with the drop down arrows btw (I've slightly edited a screenshot of the docs built on this PR):

You'll have to click though on the image to make out the arrows.

NOTMEE12 · 2023-10-13T15:42:34Z

I don't like the extra scroll bar that I get on the left hand side when all the submodule sections are open at the same time. I think that a) the submodules should perhaps start closed, only expanding when you click on the category and b) all the other sections should close when you expand one of them. This is how the default read the docs theme works, you can experiment with it in the Pygame GUI docs here.

You mean that:

all sections should closed by default
only one section can be open at a time

The upwards pointing arrow icons on the drop downs are confusing, generally I think the convention is that the arrows point to the right until expanded and then point down.

replace that with an arrow pointing to the right. Ok got it.

I like the idea of broad categorisations for grouping the submodules, but since they are being changed from the classic trio of 'Most useful', 'Advanced' and 'Other'. There needs to be a bit of debate over the broad categories here. For instance, I would call the one labelled 'Music' here 'Sound' because it covers sound effects as well as playing music or midi tracks. The drawing section has too much stuff in it - including some very rarely used submodules alongside frequently used ones. time does seem to belong under window, and we also have a new submodule and class on the way called 'window' and Window. I'd be tempted to seperate out font and freetype into a section called 'Text'. 'touch' should definitely be in the input section. 'BufferProxy', 'PixelArray', 'pixelcopy' and surfarray could all go in the 'Other' bucket imho. I'm sure there are other changes that could be made but those would be a decent start, and many others will have opinions.

So here:

"Music" change to "Sound"
font and freetype to section "Text".
touch to the "input" section.
readd the "Other" section and put in it some not frequently used modules (like BufferProxy, PixelArray, pixelcopy)

Did I get everything right?

MyreMylar · 2023-10-15T14:56:50Z

Thanks for sorting out the arrows 👍

all sections should closed by default

only one section can be open at a time

Correct. It should eliminate the double scrollbar issue and will also make things less cluttered when you first arrive.

So here:

"Music" change to "Sound"

font and freetype to section "Text".

touch to the "input" section.

readd the "Other" section and put in it some not frequently used modules (like BufferProxy, PixelArray, pixelcopy)

Did I get everything right?

Yep pretty much - though the 'Other' section is still there at the minute (at least on the latest version of this branch) so no need to readd it:

I think the grouping of submodules is a good idea, I just expect the exact organisation of submodules to take up the most time in getting this PR merged as I expect everyone with a stake in pygame-ce will have an opinion on it 😄

NOTMEE12 · 2023-10-15T17:53:52Z

hmmm... Yes the input section.

Now that I think about it, it should contain:

touch
controller
joystick
key

Which would leave the "events" section with only one item in it being the "event"

Should it be that way?

zoldalma999 · 2023-10-15T18:56:26Z

I am not sure whether I agree with this PR or not. On one hand I like the new sections, as they make more sense than just how useful they are (which is arbitrary anyway). And the looks of the side panel isn't bad either.

On the other hand, I don't like that now you can't see all the modules at a glance, and modules are one more click away (I used the top bar a fair amount, and this makes it a bit more "effort")

Anyway this is what I came up with for the sections:

Sections

essential (/core?)
-----
display
event
time
pygame (This could be in other?)
Surface (I put it in Surface manipulation, but it fits here too. Same with Rects)


Useful types (needs a better name, but I think it makes sense to put these together)
-----
Color
math
Rect
Mask


input
-----
key
mouse
joystick
controller
touch
camera (with a bit of a stretch, probably would go to other instead)


sound
-----
mixer
music
midi
sndarray


drawing and text
-----
draw
gfxdraw
font
freetype


surface manipulation
-----
Surface
transform
image
PixelArray
pixelcopy
surfarray
BufferProxy


system info
-----
system
scrap
cursors


experimental
-----
for not yet released modules (video, touch, controller, geometry, window) could
be here? Anything that has progress but is not yet ready to be released fully


other
-----
sprite
locals
version
examples
tests

MyreMylar · 2023-12-16T07:45:52Z

Looks like I can't resolve merge conflicts or merge with main on this PR - probably because it is from NOTMEE12's main branch.

I'm going to switch it to draft due to the inability to fix it up and lack of agreement on the website changes.

zoldalma999 · 2025-01-05T12:57:27Z

Seems like this PR has been superseded by #2924.

added sidebar + sorted modules by sections

98d0ea0

NOTMEE12 requested a review from a team as a code owner June 2, 2023 15:15

NOTMEE12 marked this pull request as draft June 2, 2023 15:17

NOTMEE12 added 2 commits June 2, 2023 21:10

added gradient

0793527

docs are functioning

06e3b64

fixed issue pygame-community#2224

d5d7822

NOTMEE12 mentioned this pull request Jun 3, 2023

Documentation: Insufficient Contrast of Code Operators in Light Mode #2224

Closed

NOTMEE12 added 2 commits June 3, 2023 19:41

opening/closing sections is saved.

fe2cab5

custom scrollbars

8c4e685

yunline added the docs label Jun 4, 2023

NOTMEE12 closed this Jun 4, 2023

NOTMEE12 reopened this Jun 4, 2023

added arrows

177598f

Notenlish mentioned this pull request Jun 7, 2023

Documentation Styling Modification #2233

Open

NOTMEE12 and others added 2 commits June 10, 2023 12:18

added many things

b18202c

support for small devices polish

Merge branch 'main' into main

5f62c5a

NOTMEE12 marked this pull request as ready for review June 10, 2023 10:28

Notenlish suggested changes Jun 10, 2023

View reviewed changes

NOTMEE12 added 4 commits June 11, 2023 11:25

fixed pygame-community#2225 (review)

bc31c29

approving changes

2268e2b

update

afb5917

more changes

8eea316

NOTMEE12 requested a review from Notenlish June 16, 2023 11:04

andrewhong04 reviewed Jun 17, 2023

View reviewed changes

docs/reST/_static/sections.js Outdated Show resolved Hide resolved

NOTMEE12 added 2 commits June 17, 2023 09:07

replaces tabs with spaces

e9b6281

removed additional bracket at the end

5c219c6

I don't know how it got there.

NOTMEE12 requested a review from andrewhong04 June 17, 2023 09:31

Notenlish suggested changes Jun 22, 2023

View reviewed changes

NOTMEE12 added 3 commits June 23, 2023 19:08

changed scrollbar color in light mode to lighter

d136cb5

removed unnecesary comments

f65cdde

replaced 40vh with 40%

a4cb056

MyreMylar requested changes Oct 12, 2023

View reviewed changes

fix some problems with the search bar

4baa953

changed the arrows from pointing up to pointing right

a51c5d3

MyreMylar requested review from Starbuck5, zoldalma999 and ankith26 October 15, 2023 14:57

MyreMylar marked this pull request as draft December 16, 2023 07:45

zoldalma999 closed this Jan 5, 2025

Uh oh!

add sidebar + sort modules #2225

add sidebar + sort modules #2225

Uh oh!

Conversation

NOTMEE12 commented Jun 2, 2023

Uh oh!

NOTMEE12 commented Jun 3, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Notenlish commented Jun 8, 2023

Uh oh!

NOTMEE12 commented Jun 8, 2023

Uh oh!

Notenlish commented Jun 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

NOTMEE12 commented Jun 10, 2023

Uh oh!

cool-dev-guy commented Jun 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

≡

Uh oh!

cool-dev-guy commented Jun 11, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Edit:

Uh oh!

Uh oh!

Notenlish left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Notenlish Jun 22, 2023

Choose a reason for hiding this comment

Uh oh!

NOTMEE12 Jun 23, 2023

Choose a reason for hiding this comment

Uh oh!

MyreMylar left a comment

Choose a reason for hiding this comment

Uh oh!

MyreMylar commented Oct 12, 2023

Uh oh!

NOTMEE12 commented Oct 13, 2023

Uh oh!

MyreMylar commented Oct 15, 2023

Uh oh!

NOTMEE12 commented Oct 15, 2023

Uh oh!

zoldalma999 commented Oct 15, 2023

Uh oh!

MyreMylar commented Dec 16, 2023

Uh oh!

zoldalma999 commented Jan 5, 2025

Uh oh!

NOTMEE12 commented Jun 3, 2023 •

edited

Loading

Notenlish commented Jun 8, 2023 •

edited

Loading

cool-dev-guy commented Jun 11, 2023 •

edited

Loading

cool-dev-guy commented Jun 11, 2023 •

edited

Loading