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

feat: new SubNavigation component and new MiniToc for mobile #249

Merged
merged 20 commits into from
Jul 17, 2024
Merged

feat: new SubNavigation component and new MiniToc for mobile #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
ecdaf1f
fix: mobile: hide mini-toc and change margins
Jul 5, 2024
a4de78c
create SubNavigation in storybook
Jul 9, 2024
b993953
show SubNavigation and MiniToc on mobile The SubHeader was displayed …
Jul 9, 2024
6870de0
refactor components
Jul 10, 2024
fb85e37
SubNavigation slides up when scrolling the page
Jul 11, 2024
5252aea
feat: create mobile mini-toc and subnavigation
Jul 15, 2024
232bef7
fix: improve code-style in SubNavigation
Jul 16, 2024
5b4d991
fix: change subheader-height to correct
Jul 16, 2024
a5858ce
Merge branch 'diplodoc-platform:master' into master
JeikZim Jul 16, 2024
46c7649
merge mobile-ui branch
Jul 16, 2024
19c6b5b
fix: share button in docs without header
Jul 16, 2024
0aeca29
fix: Node.JS.Timeout error
Jul 16, 2024
897ba70
fix: style fixes
Jul 16, 2024
7e18af6
feat: share a page
Jul 16, 2024
aff7c91
fix: prettier errors
Jul 16, 2024
cf7d863
fix: imrove code
Jul 16, 2024
ef1025c
fix: delete unnecessary
Jul 16, 2024
f3c024a
fix: window.clearTimeout
Jul 16, 2024
8a79d8f
fix: separate business-logic from SubNavigation
Jul 16, 2024
aa445f8
fix: click outside menu broke another interectives
Jul 17, 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
19 changes: 12 additions & 7 deletions demo/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 13 additions & 1 deletion src/components/DocLayout/DocLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,19 @@
@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
flex-direction: column-reverse;

&__center + &__right:has(> .dc-subnavigation_invisible) {
margin-top: calc(0px - var(--dc-subheader-height, 52px));
}

&__right {
display: none;
position: sticky;
top: calc(var(--dc-header-height) - 1px);
left: 0;
z-index: 119;

height: fit-content;
width: 100%;
padding: 0;
}

&__left {
Expand All @@ -93,6 +104,7 @@
position: static;
width: auto;
height: auto;
padding: 0 20px;

.dc-toc {
/* stylelint-disable-next-line declaration-no-important */
Expand Down
8 changes: 8 additions & 0 deletions src/components/DocLeadingPage/DocLeadingPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
margin: 40px 0 $normalOffset;

@include text-size(display-2);

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
margin-top: 20px;
}
}

&__description {
Expand All @@ -43,6 +47,10 @@
flex-direction: row;
margin-top: 70px;
margin-bottom: -$blockMarginBottomLarge;

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
margin-top: 20px;
}
}
}

Expand Down
70 changes: 56 additions & 14 deletions src/components/DocPage/DocPage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,41 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);

@include text-size(body-1);

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
position: absolute;
top: var(--dc-subheader-height);
z-index: 117;

display: flex;
flex-direction: column;
align-items: flex-start;

box-sizing: border-box;
max-height: 0px;
width: 100%;
padding: 0 16px 0 16px;

background: var(--g-color-base-background, #FFF);
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);

transition: max-height 300ms 0s;;

overflow-y: hidden;

&_open-mini-toc {
max-height: 80vh;
}

&_hidden-mini-toc {
padding: 0;
}

&-mini-toc {
width: 100%;
padding: 16px 0 16px 0;
}
}

@media screen and (min-width: 1280px) {
& {
width: 200px;
Expand Down Expand Up @@ -57,11 +92,11 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

&__controls {
display: flex;
display: none;
top: 0;
align-items: center;
height: 40px;
z-index: 102;
z-index: 121;
position: absolute;
right: 7px;

Expand All @@ -80,6 +115,8 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

@media (min-width: map-get($screenBreakpoints, 'md')) {
display: flex;

&_vertical {
top: calc(6px + var(--dc-header-height, #{$headerHeight}));
justify-content: center;
Expand Down Expand Up @@ -145,9 +182,13 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

&__title {
margin-bottom: 12px;
margin-top: 20px;

@include text-size(display-2);

@media (min-width: map-get($screenBreakpoints, 'md')) {
margin-bottom: 12px;
}
}

&__content {
Expand Down Expand Up @@ -222,15 +263,16 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
&__main {
margin-top: var(--dc-subheader-height);
padding: 0 20px;
}

&__breadcrumbs {
padding: 0 20px;
}

/* CHECK display: block; temporarily hidden */
&__content-mini-toc {
display: block;
display: none;
}

&__toc-nav-panel {
Expand Down Expand Up @@ -327,7 +369,7 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

& > p {
margin: 0 0 10px 0;
margin: 0 0 10px;

&:first-child {
&::before {
Expand All @@ -348,10 +390,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

$colors: (
dc-accent-info: $infoColor,
dc-accent-tip: $tipColor,
dc-accent-alert: $importantColor,
dc-accent-warning: $warningColor
dc-accent-info: $infoColor,
dc-accent-tip: $tipColor,
dc-accent-alert: $importantColor,
dc-accent-warning: $warningColor,
);

@each $type, $color in $colors {
Expand All @@ -365,10 +407,10 @@ $importantBackgroundColor: rgba(235, 50, 38, 0.08);
}

$backgroundColors: (
dc-accent-info: $infoBackgroundColor,
dc-accent-tip: $tipBackgroundColor,
dc-accent-alert: $importantBackgroundColor,
dc-accent-warning: $warningBackgroundColor
dc-accent-info: $infoBackgroundColor,
dc-accent-tip: $tipBackgroundColor,
dc-accent-alert: $importantBackgroundColor,
dc-accent-warning: $warningBackgroundColor,
);

@each $type, $color in $backgroundColors {
Expand Down
16 changes: 14 additions & 2 deletions src/components/DocPage/DocPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {Feedback, FeedbackView} from '../Feedback';
import {HTML} from '../HTML';
import {MiniToc} from '../MiniToc';
import {SearchBar, withHighlightedSearchWords} from '../SearchBar';
import {SubNavigation} from '../SubNavigation';
import {TocNavPanel} from '../TocNavPanel';
import UpdatedAtDate from '../UpdatedAtDate/UpdatedAtDate';

Expand Down Expand Up @@ -84,6 +85,7 @@ export interface DocPageProps extends DocPageData, DocSettings {

type DocPageInnerProps = InnerProps<DocPageProps, DocSettings>;
type DocPageState = {
mobileMiniTocOpen: boolean;
loading: boolean;
keyDOM: number;
showNotification: boolean;
Expand All @@ -100,6 +102,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
super(props);

this.state = {
mobileMiniTocOpen: false,
loading: props.singlePage,
keyDOM: getRandomKey(),
showNotification: true,
Expand Down Expand Up @@ -155,6 +158,7 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
'full-screen': fullScreen,
'hidden-mini-toc': hideMiniToc,
'single-page': singlePage,
'open-mini-toc': this.state.mobileMiniTocOpen,
};

return (
Expand All @@ -164,7 +168,6 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
headerHeight={headerHeight}
className={b(modes)}
fullScreen={fullScreen}
hideRight={hideMiniToc}
tocTitleIcon={tocTitleIcon}
wideFormat={wideFormat}
hideTocHeader={hideTocHeader}
Expand Down Expand Up @@ -194,9 +197,18 @@ class DocPage extends React.Component<DocPageInnerProps, DocPageState> {
{this.renderSinglePageControls()}
</DocLayout.Center>
<DocLayout.Right>
<SubNavigation
title={this.props.title}
hideMiniToc={hideMiniToc}
miniTocOpened={this.state.mobileMiniTocOpen}
toggleMiniTocOpen={() =>
this.setState({mobileMiniTocOpen: !this.state.mobileMiniTocOpen})
}
closeMiniToc={() => this.setState({mobileMiniTocOpen: false})}
/>
{/* This key allows recalculating the offset for the mini-toc for Safari */}
<div
className={b('aside')}
className={b('aside', modes)}
key={getStateKey(this.showMiniToc, wideFormat, singlePage)}
>
{hideMiniToc ? null : this.renderAsideMiniToc()}
Expand Down
14 changes: 12 additions & 2 deletions src/components/MiniToc/MiniToc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
color: var(--g-color-text-primary);
margin-bottom: 12px;
margin-top: 0;

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
margin-bottom: 8px;
}
}

&__sections {
Expand All @@ -18,8 +22,14 @@
height: calc(
100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
);
overflow-y: auto;
overflow-x: hidden;
overflow: hidden auto;

@media (max-width: map-get($screenBreakpoints, 'md') - 1) {
height: fit-content;
max-height: calc(
80vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
);
}
}

&__section {
Expand Down
Loading
Loading