UI Update and DevOps Server labs (microsoft#239)

* updated ui design and added devops server labs page
njhowork · Apr 18, 2019 · 6648504 · 6648504
1 parent 87e1e43
commit 6648504
Show file tree

Hide file tree

Showing 92 changed files with 1,712 additions and 796 deletions.
diff --git a/_config.yml b/_config.yml
@@ -3,7 +3,7 @@ repository: Microsoft/ALMVM
 output: web
 # this property is useful for conditional filtering of content that is separate from the PDF.
 
-topnav_title:  Azure DevOps
+topnav_title:  Azure DevOps Labs
 # this appears on the top navigation bar next to the home button
 
 site_title: Azure DevOps Hands-on-Labs

diff --git a/_includes/feedbackforlabs.html b/_includes/feedbackforlabs.html
@@ -0,0 +1,5 @@
+<h4 class="ml-3 heading4">Feedback</h4>
+<div class="alert alert-secondary">
+  <p>Send feedback about: </p>
+     <p><a href="https://github.com/Microsoft/azuredevopslabs/issues" class="github-btn"><i class="fa fa-github"></i> This page <i class="fa fa-external-link"></i></a></p> 
+</div>
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,16 +1,73 @@
 <footer>
 
-
-  <div class="container">
-    <div class="row">
-      <div class="col-sm-12">             
-            <h2>Feedback</h2>
-            Do you want to contribute? have an idea or a suggestion for a topic? found something outdated or not working? whatever it is, please write to us. We need your feedback. Post your comments on social using the buttons below, in the disqus forum, or send us an <a href="mailto:[email protected]">email</a>. Your feedback is so important to us!!!
-          <br />
-          <hr color="#80cae5" size="3" width="100%">	                
-               &copy;{{ site.time | date: "%Y"  }} {{site.company_name}}. All rights reserved. <br />	   <br />	   <br />	  
-
-      </div>
-    </div>      
+  <div class="footerSection1">
+  <div class="container-fluid">    
+    <div class="row px-4 py-5">
+        <div class="col-sm-1"> </div>
+
+        <div class="col-sm-4">  
+             <h4>Microsoft Azure Account</h4> 
+             <p>You will need a valid and active Azure account. You can sign up for a free azure account and enjoy 12 months of services</p>
+             <a href="https://azure.microsoft.com/en-us/free/"  target="_blank" class="footer-btn">
+             Create your free account</a>
+        </div>  
+
+          <div class="col-sm-3 mt-30-xs">  
+          <h4>Azure DevOps </h4> 
+          <p>Easily set up automated pipelines to build, test and deploy your code to any platform. If you don’t have one, sign up for one</p>
+          <a href="https://azure.microsoft.com/en-us/services/devops/"  target="_blank" class="footer-btn">
+          Try for free</a>
+        </div>
+
+      <div class="col-sm-3 mt-30-xs">
+          <h4>Azure DevOps Demo Generator</h4> 
+          <p>Provision a project with pre-defined data on to your Azure DevOps services organization. </p><br />
+          <a href="https://azuredevopsdemogenerator.azurewebsites.net/" target="_blank" class="footer-btn">
+          Learn more</a>
+              </div>
+    </div>
+  </div>
+</div>
+  <div class="footerSection2">
+      <div class="container-fluid">
+    <div class="row px-4 py-5">
+      <div class="col-sm-3"> 
+        <h6>Go Social</h6>
+        <!--div class="sharethis-inline-share-buttons"></div-->
+        <ul class="list-unstyled">
+          <li><a href="http://www.facebook.com/sharer.php?u={{site.url }}{{site.baseurl }}{{page.url }}&t={{page.title | url_encode}}" target="_blank" class="text-white-50"><i class="fa fa-facebook-square fa-2x text-white"></i> Facebook</a></li>
+          <li><a href="https://www.linkedin.com/shareArticle?mini=true&url=http://aka.ms/devopslabs&title={{page.title | url_encode}}" target="_blank" class="text-white-50"><i class="fa fa-linkedin-square fa-2x text-white"></i> LinkedIn</a></li>
+          <li><a href="https://twitter.com/intent/tweet?url=http://aka.ms/devopslabs&text={{page.title | url_encode}}&via=visualstudio&hashtags=devopslabs" target="_blank" class="text-white-50"><i class="fa fa-twitter-square fa-2x text-white"></i> Twitter</a></li>
+        </ul>         
+        </div>
+        <div class="col-sm-3"> 
+            <h6>DevOps Resources</h6>
+            <ul class="list-unstyled">
+              <li><a href="https://docs.microsoft.com/en-us/azure/devops/learn/" class="text-white-50">DevOps Resource Center</a></li>
+              <li><a href="https://docs.microsoft.com/en-us/azure/devops/index?view=azure-devops" class="text-white-50"> Azure DevOps Documentation </a></li>
+              <li><a href="https://www.youtube.com/channel/UC-ikyViYMM69joIAv7dlMsA" class="text-white-50">Azure DevOps Videos</a></li>
+            </ul> 
+          </div>
+          <div class="col-sm-3"> 
+              <h6>Additional Links</h6>
+              <ul class="list-unstyled">
+              <li class="text-white-50"><a href="http://azuredev.tips" target="_blank" class="text-white-50">Azure Tips and Tricks</a></li>
+              <li><a href="https://aka.ms/appcenterdemogenerator" target="_blank" class="text-white-50">App Center Demo Generator</a></li>
+              <li><a href="https://aka.ms/TailwindTraders" target="_blank" class="text-white-50">Tailwind Traders Repo on GitHub</a></li>
+            </ul> 
+            </div>
+            <div class="col-sm-3"> 
+                <h6>Other Links</h6>
+                <ul class="list-unstyled">
+                  <li><a href="mailto:[email protected]" class="text-white-50">Contact us</a></li>
+                  <li><a href="https://github.com/Microsoft/azuredevopslabs/issues" target="_blank" class="text-white-50">Feedback</a></li>
+                  <li><a href="https://github.com/Microsoft/azuredevopslabs" target="_blank" class="text-white-50">GitHub Page</a></li>
+                </ul>
+              </div>
+    </div> 
+    <hr size="3" width="100%">	                
+    &copy;{{ site.time | date: "%Y"  }} {{site.company_name}}. All rights reserved. <br />	   <br />	 
+  </div>     
   </div>
+
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -114,7 +114,9 @@
     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
     })(window,document,'script','dataLayer','GTM-NMC3LPS');</script>
     <!-- End Google Tag Manager -->
-
+  <!-- Sharethis.com -->
+<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5c888611cbb218001761db30&product=inline-share-buttons' async='async'></script>
+<!-- Sharethis.com -->
 </head>
 
 <body border="1" border-color="#000000">
@@ -137,28 +139,33 @@
 
     <!-- div style="color:#F87431;height:7px;">-------------------</div-->
     <!-- Page Content -->
-    <div class="bg-image-lab" style="padding-top:45px">
+    <div class="banner2-for-labs text-white" style="padding-top:45px">
             <div class="container">
              <div class="row">
                 <div class="col-sm-12">
                    <div class="post-header" >
                     <p style="margin-bottom:0px">
                         <span class="PageTitle">{{ page.title }}</span><br />
+                       <div class="sharethis-inline-share-buttons"></div>                        
                         <script>function fbs_click() {u="http://aka.ms/devopslabs";t={{page.title | url_encode}};window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>
+
                         {% if page.updated == "blank" %}
 
                         {% elsif page.updated == null %} 
                         <span>Last updated : {{ "now" | date: "%b %d,%Y" }}</span>
                         {% else %}
                         {{page.version}}<span>&nbsp;&nbsp;&nbsp;&nbsp;</span>{{page.updated}}
-                        {% endif %}             
+                        {% endif %}   
+                        &nbsp;&nbsp;&nbsp;&nbsp;
 
+                        &nbsp;&nbsp;&nbsp;&nbsp;
                     </p>                
-                    <p style="margin-bottom:5px">
+                    <!-- <p style="margin-bottom:5px">
                         <a href="http://www.facebook.com/sharer.php?u={{site.url }}{{site.baseurl }}{{page.url }}&t={{page.title | url_encode}}" onclick="return fbs_click()" target="_blank"><button class="btn btn-sm fb-css"><span class="fa fa-facebook mr-2"></span></button></a>
-                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{site.url }}{{site.baseurl }}{{page.url }}&t={{page.title | url_encode}}" onclick="return lnk_click()" target="_blank"><button class="btn btn-sm insta-css"><span class="fa fa-linkedin"></span></button>
-                        <a href="https://twitter.com/intent/tweet?url={{site.url }}{{site.baseurl }}{{page.url }}&text={{page.title | url_encode}}&via=visualstudio&hashtags=devopslabs" data-size="large" target="_blank"><button class="btn btn-sm twit-css"><span class="fa fa-twitter"></span></button></a>
+                        <a href="https://www.linkedin.com/shareArticle?mini=true&url=http://aka.ms/devopslabs&title={{page.title | url_encode}}" onclick="return lnk_click()" target="_blank"><button class="btn btn-sm linkedin-css"><span class="fa fa-linkedin"></span></button>
+                        <a href="https://twitter.com/intent/tweet?url=http://aka.ms/devopslabs&text={{page.title | url_encode}}&via=visualstudio&hashtags=devopslabs" data-size="large" target="_blank"><button class="btn btn-sm twit-css"><span class="fa fa-twitter"></span></button></a>
                     </p>
+                    <div class="sharethis-inline-share-buttons"></div> -->
                    </div>
                 </div>
              </div>
@@ -193,8 +200,8 @@
         </div>
         <div class="container">
                 <div class="row">
-                        <div clas="col-sm-12" id="footer-content">
-                                {% include footer.html %}
+                        <div class="col-sm-10 pl-3" id="footer-content">
+                                {% include feedbackforlabs.html %}
                         </div>
                 </div>
             </div>
@@ -243,6 +250,7 @@
         rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
         s.parentNode.insertBefore(rw, s);
         }(document, new Date(), "script", "rating-widget.com/"));</script>
+
 </body>
 {% include google_analytics.html %} {% include gototop.html %}
 

diff --git a/_layouts/homepage.html b/_layouts/homepage.html
@@ -72,6 +72,9 @@
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
         })(window,document,'script','dataLayer','GTM-NMC3LPS');</script>
         <!-- End Google Tag Manager -->
+         <!-- Sharethis.com -->
+<!-- <script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5c888611cbb218001761db30&product=inline-share-buttons' async='async'></script> -->
+<!-- Sharethis.com -->
 </head>
 
 <body>
@@ -82,9 +85,8 @@
     <!-- Page Content  -->
     {% include topnav.html %}
 
-
-
-        {{content}}
+            {{content}}
+
         <!--<div class="column">
             <div class="col-lg-12">
                         

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -26,7 +26,7 @@
 {% endif %}
 <div class="post-content">
 <div class="pading-t-10"><a href="{{site.url }}{{site.baseurl }}/default.html">Home</a> / <span>{{ page.title }}</span></div>
-
+<a href="https://github.com/Microsoft/azuredevopslabs/tree/master{{page.url}}"><button class="btn btn-primary btn-sm"><i class="fa fa-github"></i> Edit on GitHub</button></a>
    {% if page.summary %}
     <div class="summary">{{page.summary}}</div>
    {% endif %}

diff --git a/css/customstyles.css b/css/customstyles.css
@@ -266,7 +266,7 @@ p.post-meta {
 /* search area */
 
 #search-demo-container ul#results-container {list-style: none;
-font-size: 13px;position: absolute;top: 29px;right: 26px;z-index: -1;
+font-size: 13px;position: absolute;top: 27px;right: 26px;z-index: -1;
 width: 208px;padding: 5px 10px;background: #ffffff;}
 
 ul#results-container a {
@@ -381,7 +381,7 @@ li.dropdownActive a {
 }
 
 footer {
-    font-size: smaller;
+   /* font-size: smaller; */
 }