Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity
c9fa13eadc
gristlabs_grist-core/app/client/ui/PagePanels.ts

382 lines
10 KiB
TypeScript
Raw Normal View History

Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
/**
* Note that it assumes the presence of cssVars.cssRootVars on <body>.
*/
import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
import {transition} from 'app/client/ui/transitions';
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
import {colors, cssHideForNarrowScreen, isNarrowScreen, mediaNotSmall, mediaSmall} from 'app/client/ui2018/cssVars';
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
import {icon} from 'app/client/ui2018/icons';
import {dom, DomArg, noTestId, Observable, styled, TestId} from "grainjs";
export interface PageSidePanel {
// Note that widths need to start out with a correct default in JS (having them in CSS is not
// enough), needed for open/close transitions.
panelWidth: Observable<number>;
panelOpen: Observable<boolean>;
hideOpener?: boolean; // If true, don't show the opener handle.
header: DomArg;
content: DomArg;
}
export interface PageContents {
leftPanel: PageSidePanel;
rightPanel?: PageSidePanel; // If omitted, the right panel isn't shown at all.
headerMain: DomArg;
contentMain: DomArg;
onResize?: () => void; // Callback for when either pane is opened, closed, or resized.
testId?: TestId;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
optimizeNarrowScreen?: boolean; // If true, show an optimized layout when screen is narrow.
(core) Adds current page name to the bottom bar [narrow screen] Test Plan: Tested Manually, behave well also for long page name. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2702
2021-01-14 11:20:13 +00:00
contentBottom?: DomArg;
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
}
export function pagePanels(page: PageContents) {
const testId = page.testId || noTestId;
const left = page.leftPanel;
const right = page.rightPanel;
const onResize = page.onResize || (() => null);
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
const optimizeNarrowScreen = Boolean(page.optimizeNarrowScreen);
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
return [cssPageContainer(
cssPageContainer.cls('-optimizeNarrowScreen', optimizeNarrowScreen),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
cssLeftPane(
testId('left-panel'),
cssTopHeader(left.header),
left.content,
dom.style('width', (use) => use(left.panelOpen) ? use(left.panelWidth) + 'px' : ''),
// Opening/closing the left pane, with transitions.
cssLeftPane.cls('-open', left.panelOpen),
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
optimizeNarrowScreen && isNarrowScreen() ? null : transition(left.panelOpen, {
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
prepare(elem, open) { elem.style.marginRight = (open ? -1 : 1) * (left.panelWidth.get() - 48) + 'px'; },
run(elem, open) { elem.style.marginRight = ''; },
finish: onResize,
}),
),
// Resizer for the left pane.
// TODO: resizing to small size should collapse. possibly should allow expanding too
cssResizeFlexVHandle(
{target: 'left', onSave: (val) => { left.panelWidth.set(val); onResize(); }},
testId('left-resizer'),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
dom.show(left.panelOpen),
cssHideForNarrowScreen.cls('', optimizeNarrowScreen)),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
// Show plain border when the resize handle is hidden.
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
cssResizeDisabledBorder(
dom.hide(left.panelOpen),
cssHideForNarrowScreen.cls('', optimizeNarrowScreen)),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
cssMainPane(
cssTopHeader(
(core) support ?embed=true and &style=light for a clean embed experience Summary: This adds query parameters useful for tailoring the Grist experience, with an eye to embedding. Setting `style=light` removes side and top bars, as a first pass at a focused view of a single document page (this would benefit from refining). Setting `embed=true` has no significant effect just yet other than it restricts document access to viewer at most (this can be overridden by specifying `/m/default`). Test Plan: added tests Reviewers: dsagal Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2585
2020-08-14 16:40:39 +00:00
testId('top-header'),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
(left.hideOpener ? null :
cssPanelOpener('PanelRight', cssPanelOpener.cls('-open', left.panelOpen),
testId('left-opener'),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
dom.on('click', () => toggleObs(left.panelOpen)),
cssHideForNarrowScreen.cls('', optimizeNarrowScreen))
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
),
page.headerMain,
(!right || right.hideOpener ? null :
cssPanelOpener('PanelLeft', cssPanelOpener.cls('-open', right.panelOpen),
testId('right-opener'),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
dom.on('click', () => toggleObs(right.panelOpen)),
cssHideForNarrowScreen.cls('', optimizeNarrowScreen))
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
),
),
page.contentMain,
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
testId('main-pane'),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
),
(right ? [
// Resizer for the right pane.
cssResizeFlexVHandle(
{target: 'right', onSave: (val) => { right.panelWidth.set(val); onResize(); }},
testId('right-resizer'),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
dom.show(right.panelOpen),
cssHideForNarrowScreen.cls('', optimizeNarrowScreen)),
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
cssRightPane(
testId('right-panel'),
cssTopHeader(right.header),
right.content,
dom.style('width', (use) => use(right.panelOpen) ? use(right.panelWidth) + 'px' : ''),
// Opening/closing the right pane, with transitions.
cssRightPane.cls('-open', right.panelOpen),
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
optimizeNarrowScreen && isNarrowScreen() ? null : transition(right.panelOpen, {
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
prepare(elem, open) { elem.style.marginLeft = (open ? -1 : 1) * right.panelWidth.get() + 'px'; },
run(elem, open) { elem.style.marginLeft = ''; },
finish: onResize,
}),
)] : null
),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
cssContentOverlay(
dom.show((use) => use(left.panelOpen) || Boolean(right && use(right.panelOpen))),
(core) Making side bars a bit more usable for narrow screen Summary: - closes side bars when tapping content area - opens left panel when tapping the page name Test Plan: Includes browser tests. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2705
2021-01-19 09:28:07 +00:00
dom.on('click', () => {
left.panelOpen.set(false);
if (right) { right.panelOpen.set(false); }
}),
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
testId('overlay')
),
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
), (
!optimizeNarrowScreen ? null :
cssBottomFooter(
testId('bottom-footer'),
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
cssPanelOpenerNarrowScreenBtn(
cssPanelOpenerNarrowScreen(
'FieldTextbox',
dom.on('click', () => {
right?.panelOpen.set(false);
toggleObs(left.panelOpen);
}),
testId('left-opener-ns')
),
cssPanelOpenerNarrowScreenBtn.cls('-open', left.panelOpen)
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
),
(core) Adds current page name to the bottom bar [narrow screen] Test Plan: Tested Manually, behave well also for long page name. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2702
2021-01-14 11:20:13 +00:00
page.contentBottom,
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
(!right ? null :
cssPanelOpenerNarrowScreenBtn(
cssPanelOpenerNarrowScreen(
'Settings',
dom.on('click', () => {
left.panelOpen.set(false);
toggleObs(right.panelOpen);
}),
testId('right-opener-ns')
),
cssPanelOpenerNarrowScreenBtn.cls('-open', right.panelOpen),
)
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
),
)
)];
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
}
function toggleObs(boolObs: Observable<boolean>) {
boolObs.set(!boolObs.get());
}
const cssVBox = styled('div', `
display: flex;
flex-direction: column;
`);
const cssHBox = styled('div', `
display: flex;
`);
const cssPageContainer = styled(cssHBox, `
position: absolute;
isolation: isolate; /* Create a new stacking context */
z-index: 0; /* As of March 2019, isolation does not have Edge support, so force one with z-index */
top: 0;
left: 0;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
right: 0;
bottom: 0;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
min-width: 600px;
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
background-color: ${colors.lightGrey};
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
@media ${mediaSmall} {
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
&-optimizeNarrowScreen {
bottom: 48px;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
min-width: 240px;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
}
(core) Don't show mobile-friendly bottom bar when printing or embedding. Test Plan: Added a check for bottom-footer on small screen to the InterfaceStyle test. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2722
2021-02-04 06:49:01 +00:00
.interface-light & {
bottom: 0;
}
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
`);
export const cssLeftPane = styled(cssVBox, `
position: relative;
background-color: ${colors.lightGrey};
width: 48px;
margin-right: 0px;
overflow: hidden;
transition: margin-right 0.4s;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
@media ${mediaSmall} {
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
.${cssPageContainer.className}-optimizeNarrowScreen & {
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
width: 240px;
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
position: fixed;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
z-index: 10;
top: 0;
bottom: 0;
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
left: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
visibility: hidden;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
box-shadow: 10px 0 5px rgba(0, 0, 0, 0.2);
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
transition: left 0.4s, visibility 0.4s;
will-change: left;
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
}
.${cssPageContainer.className}-optimizeNarrowScreen &-open {
left: 0;
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
visibility: visible;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
}
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
&-open {
width: 240px;
min-width: 160px;
max-width: 320px;
}
(core) Add some media queries to improve printing Summary: - Hides left and right panels and the top bar - Hides cursor and active-section highlight - Hides "=" icon on formulas - Nudges browser to include background for row/column headers, which is not otherwise included. Still only what's visible is printed (e.g. large tables not paginated). Test Plan: Tried a few pages manually on Firefox and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2579
2020-08-07 21:53:53 +00:00
@media print {
& {
display: none;
}
}
(core) support ?embed=true and &style=light for a clean embed experience Summary: This adds query parameters useful for tailoring the Grist experience, with an eye to embedding. Setting `style=light` removes side and top bars, as a first pass at a focused view of a single document page (this would benefit from refining). Setting `embed=true` has no significant effect just yet other than it restricts document access to viewer at most (this can be overridden by specifying `/m/default`). Test Plan: added tests Reviewers: dsagal Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2585
2020-08-14 16:40:39 +00:00
.interface-light & {
display: none;
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
`);
const cssMainPane = styled(cssVBox, `
position: relative;
flex: 1 1 0px;
min-width: 0px;
background-color: white;
z-index: 1;
`);
const cssRightPane = styled(cssVBox, `
position: relative;
background-color: ${colors.lightGrey};
width: 0px;
margin-left: 0px;
overflow: hidden;
transition: margin-left 0.4s;
z-index: 0;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
@media ${mediaSmall} {
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
.${cssPageContainer.className}-optimizeNarrowScreen & {
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
width: 240px;
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
position: fixed;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
z-index: 10;
top: 0;
bottom: 0;
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
right: -${240 + 15}px; /* adds an extra 15 pixels to also hide the box shadow */
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
box-shadow: -10px 0 5px rgba(0, 0, 0, 0.2);
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
visibility: hidden;
transition: right 0.4s, visibility 0.4s;
will-change: right;
(core) Animate side panels Summary: Diff makes side panels slide horizontally when opening/closing them. Caveats: . Right panel: even though the panel do transition nicely, the content however disappears suddently. We could prevent disposal of the dom by removing the two below lines. But it's hard to tell what possible side effect we could get from it as I don't know why these line were added in the first place. I could investigate further, but maybe it's already good enough as it is. ``` private _buildContentDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); ``` ``` private _buildHeaderDom() { return dom.domComputed((use) => { // if (!use(this._isOpen)) { return null; } // remove line const tool = use(this._extraTool); return tool ? this._buildToolHeader(tool) : this._buildStandardHeader(); ``` Test Plan: Tested manually on desktop environnment with FF and chrome by shrinking the window. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2710
2021-01-25 13:09:09 +00:00
}
.${cssPageContainer.className}-optimizeNarrowScreen &-open {
right: 0;
(core) Fix page panels scrolling out of the viewport. Summary: Side panels sliding out of the viewport was causing the browser window to be scrollable, hence it was possible to scroll the page panels out of the viewport. Solution is to use fixed positioning instead of absolute. Test Plan: Tested manually on FF and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2714
2021-01-26 14:54:59 +00:00
visibility: visible;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
}
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
&-open {
width: 240px;
min-width: 240px;
max-width: 320px;
}
(core) Add some media queries to improve printing Summary: - Hides left and right panels and the top bar - Hides cursor and active-section highlight - Hides "=" icon on formulas - Nudges browser to include background for row/column headers, which is not otherwise included. Still only what's visible is printed (e.g. large tables not paginated). Test Plan: Tried a few pages manually on Firefox and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2579
2020-08-07 21:53:53 +00:00
@media print {
& {
display: none;
}
}
(core) support ?embed=true and &style=light for a clean embed experience Summary: This adds query parameters useful for tailoring the Grist experience, with an eye to embedding. Setting `style=light` removes side and top bars, as a first pass at a focused view of a single document page (this would benefit from refining). Setting `embed=true` has no significant effect just yet other than it restricts document access to viewer at most (this can be overridden by specifying `/m/default`). Test Plan: added tests Reviewers: dsagal Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2585
2020-08-14 16:40:39 +00:00
.interface-light & {
display: none;
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
`);
const cssTopHeader = styled('div', `
height: 48px;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid ${colors.mediumGrey};
(core) Add some media queries to improve printing Summary: - Hides left and right panels and the top bar - Hides cursor and active-section highlight - Hides "=" icon on formulas - Nudges browser to include background for row/column headers, which is not otherwise included. Still only what's visible is printed (e.g. large tables not paginated). Test Plan: Tried a few pages manually on Firefox and Chrome. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2579
2020-08-07 21:53:53 +00:00
@media print {
& {
display: none;
}
}
(core) support ?embed=true and &style=light for a clean embed experience Summary: This adds query parameters useful for tailoring the Grist experience, with an eye to embedding. Setting `style=light` removes side and top bars, as a first pass at a focused view of a single document page (this would benefit from refining). Setting `embed=true` has no significant effect just yet other than it restricts document access to viewer at most (this can be overridden by specifying `/m/default`). Test Plan: added tests Reviewers: dsagal Reviewed By: dsagal Differential Revision: https://phab.getgrist.com/D2585
2020-08-14 16:40:39 +00:00
.interface-light & {
display: none;
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
`);
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
const cssBottomFooter = styled ('div', `
height: 48px;
background-color: white;
z-index: 20;
display: flex;
flex-direction: row;
(core) Adds current page name to the bottom bar [narrow screen] Test Plan: Tested Manually, behave well also for long page name. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2702
2021-01-14 11:20:13 +00:00
align-items: center;
justify-content: space-between;
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
padding: 8px 16px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
border-top: 1px solid ${colors.mediumGrey};
@media ${mediaNotSmall} {
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
& {
display: none;
}
}
(core) Don't show mobile-friendly bottom bar when printing or embedding. Test Plan: Added a check for bottom-footer on small screen to the InterfaceStyle test. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2722
2021-02-04 06:49:01 +00:00
@media print {
& {
display: none;
}
}
.interface-light & {
display: none;
}
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
`);
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
const cssResizeFlexVHandle = styled(resizeFlexVHandle, `
--resize-handle-color: ${colors.mediumGrey};
--resize-handle-highlight: ${colors.lightGreen};
(core) Implement 'Print widget' option to print individual view sections. Summary: - Supports multi-page printing with some aggressive css overrides. - Relies on a new function implemented by grist-plugin-api to print a multi-page CustomView. - Renders all rows for printing for scrolly-based views. Test Plan: Doesn't seem possible to do a selenium test for printing. Tested manually on Chrome, Firefox, and Safari. Reviewers: paulfitz Reviewed By: paulfitz Differential Revision: https://phab.getgrist.com/D2635
2020-10-09 21:39:13 +00:00
@media print {
& {
display: none;
}
}
Initial config with a few files that build on client and server side.
2020-05-20 04:50:46 +00:00
`);
const cssResizeDisabledBorder = styled('div', `
flex: none;
width: 1px;
height: 100%;
background-color: ${colors.mediumGrey};
`);
const cssPanelOpener = styled(icon, `
flex: none;
width: 32px;
height: 32px;
padding: 8px 8px;
cursor: pointer;
-webkit-mask-size: 16px 16px;
background-color: ${colors.lightGreen};
transition: transform 0.4s;
&:hover { background-color: ${colors.darkGreen}; }
&-open { transform: rotateY(180deg); }
`);
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
const cssPanelOpenerNarrowScreenBtn = styled('div', `
width: 32px;
height: 32px;
--icon-color: ${colors.slate};
cursor: pointer;
border-radius: 4px;
&-open {
background-color: ${colors.lightGreen};
--icon-color: white;
}
`);
const cssPanelOpenerNarrowScreen = styled(icon, `
width: 24px;
height: 24px;
margin: 4px;
`);
const cssContentOverlay = styled('div', `
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: grey;
opacity: 0.5;
display: none;
z-index: 9;
(core) Add viewport meta tag conditionally, and show a toggle for it on small devices. Summary: - Enable narrow-screen layout for home page - Clean up margins/spacing on small-screen home page - Use "<768" as small-screen condition rather than "<=768". - Include meta-viewport tag conditionally, off by default. - Include "Toggle Mobile Mode" option in AccountMenu to toggle it on. - In a test, add an after() clause to restore window size even when test fails Test Plan: Only tested manually on iPhone (Safari & FF). Reviewers: paulfitz Reviewed By: paulfitz Subscribers: cyprien Differential Revision: https://phab.getgrist.com/D2708
2021-01-21 19:12:24 +00:00
@media ${mediaSmall} {
(core) Adds scafoldings for the narrow screen layout Summary: This commit adds a bottom bar with 2 openers button for each side panels. It takes care of showing/hiding other openers when appropriate. It also implements the new style for narrow screen with the side panels overlapping the main pane. Remaining tasks: - adjust content of the breadcrumbs for narrow screen. - content of the bottom bar Test Plan: Adds test to projects/PagePanels Reviewers: paulfitz Reviewed By: paulfitz Subscribers: dsagal Differential Revision: https://phab.getgrist.com/D2701
2021-01-12 15:11:28 +00:00
.${cssPageContainer.className}-optimizeNarrowScreen & {
display: unset;
}
}
`);
Reference in New Issue Copy Permalink