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:
parent
ef6ecf0a5f
commit
c1b74266eb
|
@ -11,7 +11,7 @@
|
|||
|
||||
.publicGalleryTabContainer {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.publicGalleryTabOverlayContent {
|
||||
|
|
|
@ -388,7 +388,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
|
|||
private createSearchBarHeader(content: JSX.Element): JSX.Element {
|
||||
return (
|
||||
<Stack tokens={{ childrenGap: 10 }}>
|
||||
<Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
|
||||
<Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
|
||||
<Stack.Item grow>
|
||||
<SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
|
||||
</Stack.Item>
|
||||
|
|
|
@ -36,6 +36,7 @@ exports[`GalleryViewerComponent renders 1`] = `
|
|||
"padding": 10,
|
||||
}
|
||||
}
|
||||
wrap={true}
|
||||
>
|
||||
<StackItem
|
||||
grow={true}
|
||||
|
@ -121,6 +122,7 @@ exports[`GalleryViewerComponent renders 1`] = `
|
|||
"padding": 10,
|
||||
}
|
||||
}
|
||||
wrap={true}
|
||||
>
|
||||
<StackItem
|
||||
grow={true}
|
||||
|
|
|
@ -36,7 +36,7 @@ const onInit = async () => {
|
|||
<header>
|
||||
<GalleryHeaderComponent />
|
||||
</header>
|
||||
<div style={{ marginLeft: 138, marginRight: 138 }}>
|
||||
<div style={{ margin: "auto", width: "85%" }}>
|
||||
<div style={{ paddingLeft: 26, paddingRight: 26, paddingTop: 20 }}>
|
||||
<Text block>
|
||||
Welcome to the Azure Cosmos DB notebooks gallery! View the sample notebooks to learn about use cases, best
|
||||
|
|
Loading…
Reference in New Issue