Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix toolbar issues #3694

Closed
wants to merge 14 commits into from
Closed

Fix toolbar issues #3694

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1252fc4
change brewrenderer page height flow to rely on viewport units
5e-Cleric Aug 30, 2024
aa1a66f
accomodate toolbar in component
5e-Cleric Aug 30, 2024
d270120
remove position absolute in toolbar
5e-Cleric Aug 30, 2024
30544de
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
26bf75b
cleaning unused styles from toolbar
5e-Cleric Sep 6, 2024
c45d2bf
to flex
5e-Cleric Sep 6, 2024
6a9e58d
remove hardcoded value
5e-Cleric Sep 6, 2024
55d0402
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
08ba4d6
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 6, 2024
8edfb5f
suggested less
5e-Cleric Sep 6, 2024
3dcb1ca
testing redeployment
5e-Cleric Sep 7, 2024
ec1eb5b
Merge branch 'master' into fix-toolbar-issues
calculuschild Sep 9, 2024
92a67e5
Merge branch 'master' of https://github.com/naturalcrit/homebrewery i…
5e-Cleric Sep 16, 2024
abb315d
add page height back
5e-Cleric Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/homebrew/brewRenderer/brewRenderer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const BrewRenderer = (props)=>{
onScroll={getCurrentPage}
onKeyDown={handleControlKeys}
tabIndex={-1}
style={{ height: state.height }}>
style={{ height: "100vh" }}>
5e-Cleric marked this conversation as resolved.
Show resolved Hide resolved

{/* Apply CSS from Style tab and render pages from Markdown tab */}
{state.isMounted
Expand Down
13 changes: 11 additions & 2 deletions client/homebrew/brewRenderer/brewRenderer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,19 @@
.brewRenderer {
overflow-y : scroll;
will-change : transform;
padding-top : 30px;
padding-block : 30px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't opened this up locally yet, so maybe this is a stupid question, but if the toolbar is no longer absolutely positioned and overlapping the brewRenderer, we don't need 30px of padding on top at all, right? We only had that extra padding because we wanted to be sure nothing was hidden under the toolbar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because of changes in flow, this padding is all the vertical space between the brew and the top of its parent, whenever you can check out the PR, you will see this space is there for a reason, I changed it for the weird combination of margins in pages and paddings from outside that caused that chaos.

:where(.pages) {
margin : 30px 0px;
& > :where(.page) {
width : 215.9mm;
height : 279.4mm;
margin-right : auto;
margin-bottom : 30px;
margin-left : auto;
box-shadow : 1px 4px 14px #000000;

&:where(:last-child) {
margin-bottom : 0;
}
}
}
&::-webkit-scrollbar {
Expand All @@ -31,6 +34,12 @@

.pane { position : relative; }

.pane.previewPane {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 32px 1fr;
5e-Cleric marked this conversation as resolved.
Show resolved Hide resolved
}

@media print {
.toolBar { display : none; }
.brewRenderer {
Expand Down
1 change: 0 additions & 1 deletion client/homebrew/brewRenderer/toolBar/toolBar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import (less) './client/icons/customIcons.less';

.toolBar {
position : absolute;
z-index : 1;
box-sizing : border-box;
display : flex;
Expand Down
4 changes: 2 additions & 2 deletions shared/naturalcrit/splitPane/splitPane.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const SplitPane = createClass({

render : function(){
return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
<Pane
<Pane className="editorPane"
Copy link
Member

@calculuschild calculuschild Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these be named more generic leftPane and rightPane, since they are now being used for /vault, not just editors?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably

width={this.state.currentDividerPos}
>
{React.cloneElement(this.props.children[0], {
Expand All @@ -148,7 +148,7 @@ const SplitPane = createClass({
})}
</Pane>
{this.renderDivider()}
<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
<Pane className="previewPane" isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
</div>;
}
});
Expand Down