random-mirrors
/
cosmos-explorer
mirror of https://github.com/Azure/cosmos-explorer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Gallery fixes (#514) 

- Fix COC overlay height
- Make standalone gallery usable on mobile devices

Before:
![image](https://user-images.githubusercontent.com/693092/110415215-81cd0680-80b7-11eb-8000-bd0b8536607a.png)

After:
![image](https://user-images.githubusercontent.com/693092/110415236-898cab00-80b7-11eb-8266-94a5718113fe.png)
This commit is contained in:
Tanuj Mittal 2021-03-10 00:12:54 +05:30 committed by GitHub
parent ef6ecf0a5f
commit c1b74266eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
View File

@ -11,7 +11,7 @@
.publicGalleryTabContainer { .publicGalleryTabContainer {
position: relative; position: relative;
height: 100vh; min-height: 100vh;
} }
.publicGalleryTabOverlayContent { .publicGalleryTabOverlayContent {

2
src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
View File

@ -388,7 +388,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
private createSearchBarHeader(content: JSX.Element): JSX.Element { private createSearchBarHeader(content: JSX.Element): JSX.Element {
return ( return (
<Stack tokens={{ childrenGap: 10 }}> <Stack tokens={{ childrenGap: 10 }}>
<Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}> <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
<Stack.Item grow> <Stack.Item grow>
<SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} /> <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
</Stack.Item> </Stack.Item>

2
src/Explorer/Controls/NotebookGallery/__snapshots__/GalleryViewerComponent.test.tsx.snap
View File

@ -36,6 +36,7 @@ exports[`GalleryViewerComponent renders 1`] = `
"padding": 10, "padding": 10,
} }
} }
wrap={true}
> >
<StackItem <StackItem
grow={true} grow={true}
@ -121,6 +122,7 @@ exports[`GalleryViewerComponent renders 1`] = `
"padding": 10, "padding": 10,
} }
} }
wrap={true}
> >
<StackItem <StackItem
grow={true} grow={true}

2
src/GalleryViewer/GalleryViewer.tsx
View File

@ -36,7 +36,7 @@ const onInit = async () => {
<header> <header>
<GalleryHeaderComponent /> <GalleryHeaderComponent />
</header> </header>
<div style={{ marginLeft: 138, marginRight: 138 }}> <div style={{ margin: "auto", width: "85%" }}>
<div style={{ paddingLeft: 26, paddingRight: 26, paddingTop: 20 }}> <div style={{ paddingLeft: 26, paddingRight: 26, paddingTop: 20 }}>
<Text block> <Text block>
Welcome to the Azure Cosmos DB notebooks gallery! View the sample notebooks to learn about use cases, best Welcome to the Azure Cosmos DB notebooks gallery! View the sample notebooks to learn about use cases, best