source: mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaObservation.html @ 8216

{% extends "base.html" %} 
        {% block extra_head %}
                <script src="http://openlayers.org/api/OpenLayers.js"></script>
                <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
        {% endblock %}

{% block title %} CEDA Observation Record {% endblock %}
    
{% block main %}

<script type="text/javascript">
        require(['ceda/cedaObservation']);
</script>

<div id = "upper_section" class="grid_12 whiteFill">
  <h4>Search Results</h4>
  <div class="grid_2" id="cedaObsLogo"></div> <!-- End of div cedaObsLogo -->
  <div class="grid_8 " id="upper_middle">
        
        <div class="grid_8 alpha cedaObs" id="upper_middle_top">
                <label for="title">Title</label><div id="title_id" class = "coObs_cite"></div>  <br />
                <label for="citation">Citation</label><div id="citation_id"></div><br />
                <label for="keywords">Keywords</label><div id="keywords_id"></div><br />
        </div> <!-- End of div upper_middle_top -->

  </div>    
</div>  


<div id = "middle_section" class="grid_12 whiteFill">
        <div class="grid_3 cedaobs alpha" id="middleLeft cedaObs">
                <script type="text/javascript">
                        require(["dojo/parser", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane"]);
                </script>
        
                <div data-dojo-type="dijit.layout.AccordionContainer">
                        <div data-dojo-type="dijit.layout.ContentPane" title="Sample Data">
            <p>Link to some Sample Data </p>
        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Download & Services" selected="true">
            <p>Links to download and data services </p>
        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Apply for Access">
                        <div id="access_id">Access to these data may be restricted</div>
                </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Help">
            <div id="help_id">For assistance contact <a href="mailto:badc@rl.ac.uk">badc@rl.ac.uk</a></div>
        </div>
                </div>
        </div>  
        <div class="grid_5 cedaObs" id="middleMiddle">
                <div class="grid_5 alpha" id="description">
                        <label for="description">Description</label><div id="description_id"></div>
                        <br />
                </div><!-- End of div description -->
                <!-- <div class="grid_5 omega" id="news">
                         <p>News bar</p>
                </div><!-- End of div news  -->
        </div>    
        <div class="grid_3 cedaObs omega" id="middleRight">
                <label for="geographicExtent">Geographic Extent</label><div id="geographicalExtent_id"></div> <br />
                <!-- begin map test -->
        
        <div style="width:220px; height:150px" id="map" class="smallmap"></div>

                <!-- end map test -->

                <label for="resolution">Resolution</label><div id="resolution_id"></div> <br /> 
   </div> <!-- End of div upper_right -->
</div> <!-- End of div upper_section -->


<div id="lower_section" class="grid_12 whiteFill">

  
    <div id="lower_tab1" class="grid_7 cedaObs" style="height:300px">

                <script type="text/javascript">
                        /* require necessary classes */
                        dojo.require('dijit.layout.TabContainer');
                        dojo.require('dijit.layout.ContentPane');
                        dojo.require('dijit.form.Button');
                        
                        /* when all classes have loaded... */
                        dojo.ready(function() {
                                /* 
                                        don't need to do anything programmatically!
                                        parseOnLoad and dojoType does the magic!
                                */
                        });
                </script>

        <!-- will host all tabs and their content panes -->
                <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
                
                
                        <!-- content panes: title is tab name, make this tab selected -->
                        <div dojoType="dijit.layout.ContentPane" title="Parameters" selected="true">                    
                        <p>Parameter List to go in here</p>                     
                </div>
                
                        <!-- content panes: title is tab name, no special features here -->
                        <div dojoType="dijit.layout.ContentPane" title="Format">
                        <p>Details of format to go in here</p>
                </div>
                
                        <!-- content panes: title is tab name, make this tab closable -->
                        <div dojoType="dijit.layout.ContentPane" title="Data Quality">
                        <p>Quality Statement goes in here</p>
                </div>
                
                        <!-- content panes: title is tab name, load content remotely, preload -->
                        <div dojoType="dijit.layout.ContentPane" title="Data Lineage">
                        <p><label for="id_dataLineage">Data Lineage</label><div id="records_dataLineage"></div> <br /> <br /></p>
                </div>
                
                </div>

        </div> <!-- End of div lower_tab1 -->
    <div id="lower_side" class="grid_4 cedaObs">
                <h5><i>Additional Information:</i></h5>
                
                <div data-dojo-type="dijit.layout.AccordionContainer">
                        <div data-dojo-type="dijit.layout.ContentPane" title="Related Data">
                                <p>Links to related data products</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Project Details">
                                <p>Link to Project</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Data Production Details">
                                <p>Link to Procedure</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Documentation and Links">
                                <p>Links to external documentation and sites</p>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="Archive content details" selected="true">
                                <div id="docLink_id"><p>Links to external documentation and sites</p></div>
                        </div>
                        <div data-dojo-type="dijit.layout.ContentPane" title="File list and Checksums">
                                <label for="relatedParty">Related Parties</label><div id="relatedParty"></div><br />

                        </div>
                </div>          
    </div> <!-- End of div lower_side -->
</div> <!-- End of div lower_section -->
<div class="corner-content-1col-bottom"></div>  

{% endblock %}