archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Scrollbar on window instead of container? (On pages with sidebar) #48994

New Issue
Closed
opened 2016-08-01 17:03:08 +02:00 by nucularJohn · 8 comments
nucularJohn commented 2016-08-01 17:03:08 +02:00
Copy Link

Found an easy way to make this:
Screenshot from 2016-08-01 16-22-49.png

into this:
Screenshot from 2016-08-01 16-22-30.png

while maintaining .project-sidebar, .project_nav, and .project_nav-footer fixed position.

Yeah but why?
When User scrolls outside of the container nothing happens, with this "fix" User can scroll wherever (except on the sidebar) for scrolling to happen.

Found an easy way to make this: ![Screenshot from 2016-08-01 16-22-49.png](https://archive.blender.org/developer/F330958/Screenshot_from_2016-08-01_16-22-49.png) into this: ![Screenshot from 2016-08-01 16-22-30.png](https://archive.blender.org/developer/F330959/Screenshot_from_2016-08-01_16-22-30.png) while maintaining `.project-sidebar`, `.project_nav`, and `.project_nav-footer` fixed position. **Yeah but why?** When User scrolls outside of the container nothing happens, with this "fix" User can scroll wherever (except on the sidebar) for scrolling to happen.
nucularJohn commented 2016-08-01 17:03:08 +02:00
Author
Copy Link

Changed status to: 'Open'

Changed status to: 'Open'
nucularJohn commented 2016-08-01 17:03:08 +02:00
Author
Copy Link

Added subscriber: @nucularJohn

Added subscriber: @nucularJohn
nucularJohn commented 2016-08-01 17:06:33 +02:00
Author
Copy Link

Is this something you would be interested in?

Is this something you would be interested in?
Francesco Siddi commented 2016-08-02 09:20:47 +02:00
Copy Link

Added subscribers: @pablovazquez, @fsiddi

Added subscribers: @pablovazquez, @fsiddi
Pablo Vazquez was assigned by Francesco Siddi 2016-08-02 09:20:47 +02:00
Francesco Siddi commented 2016-08-02 09:20:47 +02:00
Copy Link

Will look into it with @venomgfx. Thank you for the idea!

Will look into it with @venomgfx. Thank you for the idea!
Pablo Vazquez commented 2016-08-02 12:08:44 +02:00
Copy Link

Ah that'd be nice!

Feel free to provide a patch (even submit it here so it can be applied with arc), or just let me know the changes.

Thanks a lot for checking on these issues (it's kind of embarrassing since some parts of the code are so old haha). It really helps to have new eyes on it!

Ah that'd be nice! Feel free to provide a patch (even submit it here so it can be applied with arc), or just let me know the changes. Thanks a lot for checking on these issues (it's kind of embarrassing since some parts of the code are so old haha). It really helps to have new eyes on it!
nucularJohn commented 2016-08-03 19:04:29 +02:00
Author
Copy Link

I'm not comfortable with git, arc, patches, diffs, etc. and right now (summers in touristic places are busy) I don't have the time to learn them the way I think I should, so I will write it to you instead. But let me warn you, it is a "hackish" way of doing it in an already "hackish" code.

Except the toggle (show/hide) thing, everything works, but there might be some rough edges that you should soften (if that's the right way to say it (not 100% fluent in English either...)).

The concept is that: if you "position: fixed;" the content of a flex-ed container it maintains its top, right, left, bottom. To maintain the height you set it's top to 50px (so it stays below the fixed nav) and set the bottom to 0.

This is how I'm able to achieve that in Cosmos Laundromat's page with Chromium (52.0.2743.82 for Linux).

  1. On #project-container remove js's (?) max-height and height, and remove "overflow: hidden;" rule.

  2. Make a container for #project-sidebar and #project_nav. Set a "display: flex;" rule for it.

  3. On #project-sidebar remove "background-color: #1f262e;".
    ** On .project-tabs add: "position: fixed; | background-color: #1f262e; | top: 50px; | bottom: 0;"

  4. On #project_nav remove "background-color: #33404d;".

  5. Inside #project_nav make a container for #project-header, #project_tree and #project_nav-footer. In this container add the height of the window minus the height of the nav (js?) and add "position: fixed; | width: 240px; | background-color: #33404d;"

This should work, but remember to reposition #project_nav-footer, .project_split and redo the js of the toggle (show/hide) thing so it works as it should.

Also if you add it to the code, re-check that classes and ids are correct and that they're are not used somewhere else.

I'll keep looking for bugs and/or weird behaviors if I find them (and if I have the time).

Saludos, from Ibiza.

*I'm not comfortable with git, arc, patches, diffs, etc. and right now (summers in touristic places are busy) I don't have the time to learn them the way I think I should, so I will write it to you instead. But let me warn you, it is a "hackish" way of doing it in an already "hackish" code.* *Except the toggle (show/hide) thing, everything works, but there might be some rough edges that you should soften (if that's the right way to say it (not 100% fluent in English either...)).* --- The concept is that: if you "position: fixed;" the content of a flex-ed container it maintains its top, right, left, bottom. To maintain the height you set it's top to 50px (so it stays below the fixed nav) and set the bottom to 0. This is how I'm able to achieve that in [Cosmos Laundromat](https://cloud.blender.org/p/cosmos-laundromat/)'s page with Chromium (52.0.2743.82 for Linux). 1. On `#project-container` remove js's (?) max-height and height, and remove "overflow: hidden;" rule. 2. Make a container for `#project-sidebar` and `#project_nav`. Set a "display: flex;" rule for it. 3. On `#project-sidebar` remove "background-color: #1f262e;". ** On `.project-tabs` add: "position: fixed; | background-color: #1f262e; | top: 50px; | bottom: 0;" 4. On `#project_nav` remove "background-color: #33404d;". 5. Inside `#project_nav` make a container for `#project-header`, `#project_tree` and `#project_nav-footer`. In this container add the height of the window minus the height of the nav (js?) and add "position: fixed; | width: 240px; | background-color: #33404d;" This should work, but remember to reposition `#project_nav-footer`, `.project_split` and redo the js of the toggle (show/hide) thing so it works as it should. Also if you add it to the code, re-check that classes and ids are correct and that they're are not used somewhere else. --- I'll keep looking for bugs and/or weird behaviors if I find them (and if I have the time). Saludos, from Ibiza.
Pablo Vazquez commented 2016-08-05 14:23:13 +02:00
Copy Link

Changed status from 'Open' to: 'Resolved'

Changed status from 'Open' to: 'Resolved'
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Priority::High
Priority::Low
Priority::Normal
Status::Archived
Status::Confirmed
Status::Resolved
Type::Bug
Type::Design
Type::Patch
Type::Report
Type::To Do
legacy project
Infrastructure: Websites
legacy project
Pillar
legacy project
Pillar Framework
legacy project
Pillar Website
No Label
Priority::Normal
Status::Resolved
Type::Design
legacy project
Pillar
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
blender-admin
No Assignees Pablo Vazquez
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: archive/pillar#48994
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?