dentalruralhealth-pack
Version:
Interactive to simulate a rural health office creation
150 lines (142 loc) • 7.55 kB
HTML
<div class="page-5">
<!-- Modal for Strategy space -->
<div class="modal fade" id="strategy-modal" tabindex="-1" role="dialog" aria-labelledby="Strategy">
<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">×</span></button>
<h4 class="modal-title">Review Pros & Cons</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row info-header">
<div class="col-xs-6">
<h3>5. Review Pros & Cons</h3>
</div>
<div class="col-xs-6 info-nav">
<!-- Instructions button -->
<a class="btn btn-default btn-sm btn-help pull-right" href="#" data-target="#help-modal-5" data-toggle="modal" role="button">
<span class="glyphicon glyphicon-question-sign"></span> Instructions</a>
</a>
<!-- Instructions modal -->
<div class="modal fade" id="help-modal-5" tabindex="-1" role="dialog" aria-labelledby="Instructions">
<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">×</span></button>
<h4 class="modal-title">Instructions</h4>
</div>
<div class="modal-body">
<h4>Review Pros & Cons</h4>
<p>Review the pros and cons for the strategy you selected.</p>
<p>Click the green notepads to review pros and cons for the other strategies.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Map Layer button -->
<a href="#" class="btn btn-default btn-sm pull-right" data-toggle="modal" data-target="#map-view-modal-5">
<span class="glyphicon glyphicon-picture"></span> Map View
</a>
<!-- Map Layer modal -->
<div class="modal fade map-view-modal" id="map-view-modal-5" tabindex="-1" role="dialog" aria-labelledby="Map Layer">
<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">×</span></button>
<h4 class="modal-title">Map View</h4>
</div>
<div class="modal-body">
<div class="map-layers">
<img class="map-layer" src="<%=layers[0].image%>" alt="rural health base map" />
<% for (var i=1; i < layers.length; i++) { %>
<% var layer = layers[i]; %>
<img data-id="<%=layer.id%>"
class="map_layer_<%=layer.id%> map-layer"
src="<%=layer.image%>"
alt="<%= layer.name %>"
style="display: none; z-index: <%=layer.z_index%>; opacity:0.<%=layer.transparency%>; -moz-opacity:0.<%=layer.transparency%>; filter:alpha(opacity=<%=layer.transparency%>);"></img>
<% } %>
</div>
<div class="map-legend-container clearfix row-nopadding">
<div class="map-legend-container">
<div>
<h4>Map Legends</h4>
<div id="base_map_layer"><%= layers[0].legend %></div>
</div>
<% for (var i=1; i < layers.length; i++) { %>
<% var layer = layers[i]; %>
<div data-id="<%=layer.id%>"
class="pull-left map_legend_<%=layer.id%> map_legend choices"
style="display: none">
<h5><%=layer.display_name%></h5>
<%=layer.legend %>
</div>
<% } %>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row row-nopadding">
<div class="col-xs-7 alert-container">
<div class="basic_instructions well left alert-info">
1. Review the pros and cons for the strategy you selected. The summary information is included below.<br />
2. Click the green notepads to review pros and cons for the other strategies.<br />
3. Next, click <b>Step 6</b> to reflect on your choice.
</div>
</div>
<div class="col-xs-5 strategy-state-container">
<div>
<% for (var i = strategies.length - 1; i >= 0; i--) { %>
<% var strategy = strategies[i] %>
<div data-id="<%=strategy.id%>" class="strategy-state pull-right <% if (strategy.selected) { %>selected<% } %> <% if (strategy.viewed) { %> viewed <% } %>">
<%= strategy.ordinal %>
</div>
<% } %>
<div class="strategy-state-label pull-right">Strategies: </div>
</div>
</div>
</div>
<div class="custom-container">
<div class="row">
<div class="col-xs-1">
<div class="strategy-state viewed selected">
<%= selectedStrategy.ordinal %>
</div>
</div>
<div class="col-xs-11">
<div class="strategy-title"><%= selectedStrategy.title %></div>
</div>
</div>
<div class="strategy-download pull-right">
<a href="./<%=selectedStrategy.pdf%>" target="_blank" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-download-alt"></span> Download full proposal</a>
</div>
<div>
<h5>PROS</h5>
<%= selectedStrategy.pros %>
</div>
<div>
<h5>CONS</h5>
<%= selectedStrategy.cons %>
</div>
<div class="strategy-container">
<h5>SUMMARY</h5>
<%= selectedStrategy.summary %>
</div>
</div>
</div>