demo of complex user map content

This commit is contained in:
tomjohnson1492
2016-06-02 22:23:24 -07:00
parent 97335d6e70
commit 15ee5146da
13 changed files with 130 additions and 77 deletions

View File

@ -1,10 +1,7 @@
<div id="userMap">
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg modalButton1" data-toggle="modal" data-target="#myModal1">
Step 1
</button>
<button type="button" class="btn btn-default btn-lg modalButton1" data-toggle="modal" data-target="#myModal1">Get Started</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
@ -12,10 +9,18 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Step 1</h4>
<h4 class="modal-title" id="myModalLabel">Get Started</h4>
</div>
<div class="modal-body">
...
<p>This is just dummy text ... Your first steps should be to get started. You will need to do the following:</p>
<ul>
<li>{{site.data.urls.p2_sample6.link}}</li>
<li>{{site.data.urls.p2_sample7.link}}</li>
<li>{{site.data.urls.p2_sample8.link}}</li>
</ul>
<p>If you run into any of these setup issues, you must solve them before you can continue on.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@ -26,19 +31,24 @@
<span class="complexArrow"></span>
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg modalButton2" data-toggle="modal" data-target="#myModal2">
Step 2
</button>
<button type="button" class="btn btn-default btn-lg modalButton2" data-toggle="modal" data-target="#myModal2">Build your widgets</button>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Step 2</h4>
<h4 class="modal-title" id="myModalLabel">Build your widgets</h4>
</div>
<div class="modal-body">
...
<p>In this step, you will build the widgets for your system. The widgets form the various components that blah blah blah this is dummy text power the nuclear capabilities of your energy transformer into deep space using wormhole technology and warp drive speeds.</p>
<p>In order to configure your widgets, you will need to follow these topics:</p>
<ul>
<li>{{site.data.urls.p2_sample9.link}}</li>
<li>{{site.data.urls.p2_sample10.link}}</li>
<li>{{site.data.urls.p2_sample11.link}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@ -50,19 +60,23 @@
<span class="complexArrow"></span>
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg modalButton3" data-toggle="modal" data-target="#myModal3">
Step 3
</button>
<button type="button" class="btn btn-default btn-lg modalButton3" data-toggle="modal" data-target="#myModal3">Publish your app</button>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Step 3</h4>
<h4 class="modal-title" id="myModalLabel">Publish your app</h4>
</div>
<div class="modal-body">
...
<p>After you've configured all the necessary components to build your space transformer, you need to publish your app. Of course this content is also just dummy text. Pay no particular attention to the content but rather the format and placement of the map.</p>
<p>To publish your app, see the following:
<ul>
<li>{{site.data.urls.p2_sample12.link}}</li>
<li>{{site.data.urls.p2_sample13.link}}</li>
<li>{{site.data.urls.p2_sample14.link}}</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
@ -71,53 +85,6 @@ Step 3
</div>
</div>
<span class="complexArrow"></span>
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg modalButton4" data-toggle="modal" data-target="#myModal4">
Step 4
</button>
<!-- Modal -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Step 4</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<span class="complexArrow"></span>
<!-- Button trigger modal -->
<button type="button" class="btn btn-default btn-lg modalButton5" data-toggle="modal" data-target="#myModal5">
Step 5
</button>
<!-- Modal -->
<div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Step 5</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>