random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 08:51:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Quickstart UI changes (#1327)

Browse Source
This commit is contained in:
victor-meng
2022-09-27 14:03:28 -07:00
committed by GitHub
parent 3abbb63adc
commit 42731d1aae
3 changed files with 136 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Explorer/SplashScreen/SplashScreen.less
View File

@@ -40,6 +40,7 @@
text-align: center;
cursor: pointer;
margin: 40px auto;
width: 84%;
> .mainButton {
min-width: 124px;

47
src/Explorer/SplashScreen/SplashScreen.tsx
View File

@@ -191,8 +191,8 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Coachmark>
)}
{userContext.apiType === "Postgres" ? (
<Stack horizontal style={{ margin: "0 auto" }} tokens={{ childrenGap: "15%" }}>
<Stack>
<Stack horizontal style={{ margin: "0 auto", width: "84%" }} tokens={{ childrenGap: 32 }}>
<Stack style={{ width: "33%" }}>
<Text
variant="large"
style={{
@@ -204,7 +204,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Text>
{this.getNextStepItems()}
</Stack>
<Stack>
<Stack style={{ width: "33%" }}>
<Text
variant="large"
style={{
@@ -216,6 +216,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
</Text>
{this.getTipsAndLearnMoreItems()}
</Stack>
<Stack style={{ width: "33%" }}></Stack>
</Stack>
) : (
<div className="moreStuffContainer">
@@ -634,24 +635,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
private getNextStepItems(): JSX.Element {
const items: { link: string; title: string; description: string }[] = [
{
link: "",
title: "Performance tuning",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "https://go.microsoft.com/fwlink/?linkid=2208312",
title: "Data Modeling",
description: "",
},
{
link: "",
title: "Join Citus community",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: " https://go.microsoft.com/fwlink/?linkid=2206941 ",
title: "How to choose a Distribution Column",
description: "",
},
{
link: "",
title: "Useful diagnostic queries",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "https://go.microsoft.com/fwlink/?linkid=2207425",
title: "Build Apps with Python/Java/Django",
description: "",
},
];
return (
<Stack>
<Stack style={{ minWidth: 124, maxWidth: 296 }}>
{items.map((item, i) => (
<Stack key={`nextStep${i}`} style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
@@ -670,24 +671,24 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
private getTipsAndLearnMoreItems(): JSX.Element {
const items: { link: string; title: string; description: string }[] = [
{
link: "",
title: "Data modeling",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "https://go.microsoft.com/fwlink/?linkid=2207226",
title: "Performance Tuning",
description: "",
},
{
link: "",
title: "How to choose a distribution Column",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "https://go.microsoft.com/fwlink/?linkid=2208037",
title: "Useful Diagnostic Queries",
description: "",
},
{
link: "",
title: "Build apps with Python/ Java/ Django",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
link: "https://go.microsoft.com/fwlink/?linkid=2205270",
title: "Distributed SQL Reference",
description: "",
},
];
return (
<Stack>
<Stack style={{ minWidth: 124, maxWidth: 296 }}>
{items.map((item, i) => (
<Stack key={`tips${i}`} style={{ marginBottom: 26 }}>
<Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>