random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-09 18:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Emulator Quickstart Tutorials (#2121)

Browse Source 
* updated all outdated sample apps
Co-authored-by: nishthaAhujaa <nishtha17354@iiittd.ac.in>
This commit is contained in:
Nishtha Ahuja 2025-04-30 13:32:53 +05:30 committed by GitHub
parent 9f3236c29c
commit 8bcad6e0e0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 688 additions and 696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
less/quickstart.less
View File

@ -58,8 +58,8 @@ body {
.topSelected:hover { .topSelected:hover {
border-left: 4px solid @AccentMediumHigh; border-left: 4px solid @AccentMediumHigh;
background: #666666!important; background: #666666 !important;
cursor: default!important; cursor: default !important;
} }
#Quickstart:hover span.activemenu, #Quickstart:hover span.activemenu,
@ -130,19 +130,19 @@ menuQuickStart {
.content { .content {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
transition: all .4s ease-in-out; transition: all 0.4s ease-in-out;
-ms-transition: all .4s ease-in-out; -ms-transition: all 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;
-moz-transition: all .4s ease-in-out; -moz-transition: all 0.4s ease-in-out;
height: 100vh; height: 100vh;
} }
.mini { .mini {
width: 0%; width: 0%;
float: left; float: left;
transition: all .4s ease-in-out; transition: all 0.4s ease-in-out;
-webkit-transition: all .4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;
-moz-transition: all .4s ease-in-out; -moz-transition: all 0.4s ease-in-out;
height: 100vh; height: 100vh;
background-color: white; background-color: white;
} }
@ -226,39 +226,39 @@ menuQuickStart {
cursor: pointer; cursor: pointer;
} }
#tbodycontent>tr>td { #tbodycontent > tr > td {
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
#tbodycontent>tr:last-child>td { #tbodycontent > tr:last-child > td {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.gridRowSelected { .gridRowSelected {
background-color: #DEF; background-color: #def;
} }
.gridRowSelected:hover { .gridRowSelected:hover {
background-color: #DEF!important; background-color: #def !important;
cursor: initial; cursor: initial;
} }
.collectionNodeSelected { .collectionNodeSelected {
background-color: #DEF; background-color: #def;
} }
.collectionNodeSelected:hover { .collectionNodeSelected:hover {
background-color: #DEF!important; background-color: #def !important;
cursor: default!important; cursor: default !important;
} }
.databaseNodeSelected { .databaseNodeSelected {
background-color: #DEF; background-color: #def;
} }
.databaseNodeSelected:hover { .databaseNodeSelected:hover {
background-color: #DEF!important; background-color: #def !important;
cursor: default!important; cursor: default !important;
} }
.leftsidepanle-hr { .leftsidepanle-hr {
@ -266,7 +266,7 @@ menuQuickStart {
border-top: 1px solid #eee; border-top: 1px solid #eee;
margin-left: -17px; margin-left: -17px;
width: 100%; width: 100%;
color: 1px solid #53575B; color: 1px solid #53575b;
} }
.partitioning-btn { .partitioning-btn {
@ -328,7 +328,7 @@ menuQuickStart {
.collid-white { .collid-white {
width: 100%; width: 100%;
border: solid 1px #DDD; border: solid 1px #ddd;
} }
.plusimg-but { .plusimg-but {
@ -515,11 +515,11 @@ label {
.datalist-arrow:focus:after, .datalist-arrow:focus:after,
.datalist-arrow:active:after { .datalist-arrow:active:after {
background: #1EBBEE; background: #1ebbee;
} }
input::-webkit-calendar-picker-indicator::after { input::-webkit-calendar-picker-indicator::after {
content: '\276F'; content: "\276F";
right: 0; right: 0;
top: -8%; top: -8%;
display: block; display: block;
@ -533,7 +533,7 @@ input::-webkit-calendar-picker-indicator::after {
} }
.datalist-arrow:after:hover { .datalist-arrow:after:hover {
content: '\276F'; content: "\276F";
position: absolute; position: absolute;
right: 1px; right: 1px;
top: 6%; top: 6%;
@ -545,7 +545,7 @@ input::-webkit-calendar-picker-indicator::after {
color: #fff; color: #fff;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
background-color: #1EBBEE; background-color: #1ebbee;
} }
.Introline3 { .Introline3 {
@ -567,7 +567,7 @@ input::-webkit-calendar-picker-indicator::after {
} }
.collectionCollapsed:hover { .collectionCollapsed:hover {
background: #EEEEEE; background: #eeeeee;
} }
.collectionCollapsed:active { .collectionCollapsed:active {
@ -590,12 +590,12 @@ input::-webkit-calendar-picker-indicator::after {
.leftarrowCollapsed { .leftarrowCollapsed {
padding: 2px 4px 4px 5px; padding: 2px 4px 4px 5px;
border: solid 1px #FFF; border: solid 1px #fff;
margin: 6px 4px 0px -11px; margin: 6px 4px 0px -11px;
} }
.leftarrowCollapsed:hover { .leftarrowCollapsed:hover {
background-color: #EEEEEE; background-color: #eeeeee;
} }
.leftarrowCollapsed:active { .leftarrowCollapsed:active {
@ -635,12 +635,12 @@ input::-webkit-calendar-picker-indicator::after {
padding-left: 15px; padding-left: 15px;
} }
.numberheading>p { .numberheading > p {
padding-top: 10px; padding-top: 10px;
font-size: 12px; font-size: 12px;
} }
.numberheading>ul { .numberheading > ul {
padding-top: 10px; padding-top: 10px;
padding-left: 0px; padding-left: 0px;
list-style-type: none; list-style-type: none;
@ -650,16 +650,12 @@ input::-webkit-calendar-picker-indicator::after {
padding-bottom: 5px; padding-bottom: 5px;
} }
.numberheading>ul>li>a { .numberheading > ul > li > a {
font-size: 12px; font-size: 12px;
color: #0058ad; color: #0058ad;
} }
.netApp { .sampleApp {
padding-bottom: 80px;
}
.pythonApp {
padding-bottom: 45px; padding-bottom: 45px;
} }
@ -667,7 +663,7 @@ input::-webkit-calendar-picker-indicator::after {
padding-bottom: 110px; padding-bottom: 110px;
} }
.step1>input { .step1 > input {
font-size: 12px; font-size: 12px;
} }
@ -691,7 +687,7 @@ input::-webkit-calendar-picker-indicator::after {
.atags { .atags {
color: @AccentMediumHigh; color: @AccentMediumHigh;
font-weight: 400; font-weight: 400;
cursor: pointer cursor: pointer;
} }
.qsmenuicons { .qsmenuicons {
@ -754,13 +750,13 @@ a:link {
} }
.command:hover { .command:hover {
background-color: #E6E6E6; background-color: #e6e6e6;
cursor: pointer; cursor: pointer;
padding-bottom: 12px; padding-bottom: 12px;
} }
.command:active { .command:active {
background-color: #CCCCCC; background-color: #cccccc;
border: solid 1px @AccentMediumHigh; border: solid 1px @AccentMediumHigh;
} }
@ -770,7 +766,7 @@ a:link {
outline: none; outline: none;
} }
.nav>li>a:focus { .nav > li > a:focus {
background-color: white; background-color: white;
} }
@ -895,7 +891,7 @@ a:link {
padding: 4px 4px -1px 0px; padding: 4px 4px -1px 0px;
} }
#divcontent>.mongoDocumentEditor .monaco-editor.vs .redsquiggly { #divcontent > .mongoDocumentEditor .monaco-editor.vs .redsquiggly {
display: none !important; display: none !important;
} }
@ -933,7 +929,7 @@ td a:hover {
} }
.table-fixed tbody td, .table-fixed tbody td,
.table-fixed thead>tr>th { .table-fixed thead > tr > th {
float: left; float: left;
border-bottom-width: 0; border-bottom-width: 0;
} }
@ -966,7 +962,7 @@ a:link {
color: #393939; color: #393939;
} }
.tab [type=radio] { .tab [type="radio"] {
display: none; display: none;
} }
@ -979,40 +975,40 @@ a:link {
padding: 15px 0px 20px 0; padding: 15px 0px 20px 0;
} }
.tab [type=radio]:checked~label { .tab [type="radio"]:checked ~ label {
border: 1px solid #0072c6; border: 1px solid #0072c6;
background-color: @AccentMediumHigh; background-color: @AccentMediumHigh;
color: white; color: white;
z-index: 2; z-index: 2;
} }
.tab [type=radio]:checked~label:hover { .tab [type="radio"]:checked ~ label:hover {
border: 1px solid @AccentMediumHigh; border: 1px solid @AccentMediumHigh;
background-color: @AccentMediumHigh; background-color: @AccentMediumHigh;
color: white; color: white;
z-index: 2; z-index: 2;
} }
.tab [type=radio]:checked~label:active { .tab [type="radio"]:checked ~ label:active {
border: 1px solid #0072c6; border: 1px solid #0072c6;
background-color: #0072c6; background-color: #0072c6;
color: white; color: white;
z-index: 2; z-index: 2;
} }
.tab [type=radio]:checked~label~.tabcontent { .tab [type="radio"]:checked ~ label ~ .tabcontent {
z-index: 1; z-index: 1;
display: initial; display: initial;
} }
.tab [type=radio]:not(:checked)~label:hover { .tab [type="radio"]:not(:checked) ~ label:hover {
border: 1px solid #969696; border: 1px solid #969696;
background-color: #969696; background-color: #969696;
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
.tab [type=radio]:not(:checked)~label~.tabcontent { .tab [type="radio"]:not(:checked) ~ label ~ .tabcontent {
display: none; display: none;
} }
@ -1042,7 +1038,7 @@ a:link {
} }
.atagdetails { .atagdetails {
padding-left: 55px!important; padding-left: 55px !important;
} }
.path { .path {
@ -1180,7 +1176,7 @@ a:link {
cursor: col-resize; cursor: col-resize;
} }
.nav-tabs>li>a { .nav-tabs > li > a {
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
padding: 8px 0px 4px 0px; padding: 8px 0px 4px 0px;
color: #393939; color: #393939;
@ -1190,10 +1186,10 @@ a:link {
position: relative; position: relative;
} }
.nav-tabs>li.active>a, .nav-tabs > li.active > a,
.nav-tabs>li.active>a:focus, .nav-tabs > li.active > a:focus,
.nav-tabs>li.active>a:hover { .nav-tabs > li.active > a:hover {
border-bottom-color: #FFF; border-bottom-color: #fff;
} }
.tabList { .tabList {
@ -1238,12 +1234,12 @@ a:link {
padding: 2px 12px 0 13px; padding: 2px 12px 0 13px;
} }
.nav-tabs>li>a:active { .nav-tabs > li > a:active {
background-color: #e0e0e0; background-color: #e0e0e0;
border-color: @AccentMediumHigh; border-color: @AccentMediumHigh;
} }
.nav-tabs>li>a:active .tab_Content { .nav-tabs > li > a:active .tab_Content {
border: transparent; border: transparent;
width: 130px; width: 130px;
} }
@ -1262,7 +1258,7 @@ a:link {
.clickableLink { .clickableLink {
color: @AccentMediumHigh; color: @AccentMediumHigh;
font-family: 'Segoe UI'; font-family: "Segoe UI";
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
} }
@ -1292,7 +1288,7 @@ a:link {
width: 86px; width: 86px;
} }
input.codeblock{ input.codeblock {
background-color: @BaseMediumLow; background-color: @BaseMediumLow;
color: #252525; color: #252525;
border: 1px solid @BaseMediumHigh; border: 1px solid @BaseMediumHigh;
@ -1306,6 +1302,6 @@ input.codeblock{
cursor: text; cursor: text;
} }
#divQuickStartConnections{ #divQuickStartConnections {
padding-bottom: 10px; padding-bottom: 10px;
} }

62
src/quickstart.html
View File

@ -64,41 +64,40 @@
</li> </li>
<li> <li>
<a data-toggle="tab" href="#springboot"> <a data-toggle="tab" href="#springboot">
<img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Springboot <img class="qsmenuicons" src="../images/springboot.svg" alt="Spring Boot" /> Spring Boot
</a> </a>
</li> </li>
</ul> </ul>
<div class="tab-content tab-content-override">
<div class="tab-content">
<div id="net" class="tab-pane fade in active"> <div id="net" class="tab-pane fade in active">
<div class="netApp"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Open and run a sample .NET app Create a new .NET app
<p> <p>
We created a sample .NET app connected to your Azure Cosmos DB Emulator instance. Download, extract, Follow this
build and run the app. <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-dotnet" target="_blank"
>tutorial
</a>
to create a new .NET app connected to Azure Cosmos DB.
</p> </p>
<a href="quickstart/DocumentDB-Quickstart-DotNet.zip"
><button class="btncreatecoll">Download</button></a
>
</div> </div>
</div> </div>
<div class="learn-more"></div> <div class="learn-more"></div>
</div> </div>
<div id="java" class="tab-pane fade"> <div id="java" class="tab-pane fade">
<div class="step1"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Open and run a sample Java app Create a new Java app
<p> <p>
We created a sample Java app connected to your Azure Cosmos DB Emulator instance. Download, extract, Follow this
build and run the app. <a href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-java" target="_blank"
</p> >tutorial
<a href="quickstart/DocumentDB-Quickstart-Java.zip"><button class="btncreatecoll">Download</button></a> </a>
<p> to create a new Java app connected to Azure Cosmos DB.
Follow instructions in the readme.md to setup prerequisites needed to run Java web apps, if you
haven’t already.
</p> </p>
</div> </div>
</div> </div>
@ -106,20 +105,18 @@
</div> </div>
<div id="nodejs" class="tab-pane fade"> <div id="nodejs" class="tab-pane fade">
<div class="step1"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Open and run a sample Node.js app Create a new Node.js app
<p> <p>
We created a sample Node.js app connected to your Azure Cosmos DB Emulator instance. Download, Follow this
extract, build and run the app. <a
</p> href="https://learn.microsoft.com/azure/cosmos-db/nosql/quickstart-nodejs?pivots=programming-language-ts"
<a href="quickstart/DocumentDB-Quickstart-NodeJs.zip" target="_blank"
><button class="btncreatecoll">Download</button></a >tutorial
> </a>
<p> to create a new Node.js app connected to Azure Cosmos DB.
Run <strong>npm install</strong> and <strong>npm start</strong>, and navigate to
<a href="http://localhost:3000" _targe="blank">http://localhost:3000</a>.
</p> </p>
</div> </div>
</div> </div>
@ -127,7 +124,7 @@
</div> </div>
<div id="python" class="tab-pane fade"> <div id="python" class="tab-pane fade">
<div class="pythonApp"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Create a new Python app Create a new Python app
@ -141,9 +138,8 @@
<div class="learn-more"></div> <div class="learn-more"></div>
</div> </div>
<!-- Go -->
<div id="go" class="tab-pane fade"> <div id="go" class="tab-pane fade">
<div class="pythonApp"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Create a new Go app Create a new Go app
@ -158,7 +154,7 @@
</div> </div>
<div id="springboot" class="tab-pane fade"> <div id="springboot" class="tab-pane fade">
<div class="pythonApp"> <div class="sampleApp">
<div class="numbersize numbersizePadding">1</div> <div class="numbersize numbersizePadding">1</div>
<div class="numberheading"> <div class="numberheading">
Create a new Spring Boot app Create a new Spring Boot app