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

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaObservation.html@8215
Revision 8215, 5.3 KB checked in by gparton, 9 years ago (diff)

committing GPs new additions to CEDA OBs pages and associated js

Line 
1{% extends "base.html" %}
2        {% block extra_head %}
3                <script src="http://openlayers.org/api/OpenLayers.js"></script>
4                <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
5        {% endblock %}
6
7{% block title %} CEDA Observation Record {% endblock %}
8   
9{% block main %}
10
11<script type="text/javascript">
12        require(['ceda/cedaObservation']);
13</script>
14
15<div id = "upper_section" class="grid_12 whiteFill">
16  <h4>Search Results</h4>
17  <div class="grid_2" id="cedaObsLogo"></div> <!-- End of div cedaObsLogo -->
18  <div class="grid_8 " id="upper_middle">
19       
20        <div class="grid_8 alpha cedaObs" id="upper_middle_top">
21                <label for="title">Title</label><div id="title_id" class = "coObs_cite"></div>  <br />
22                <label for="citation">Citation</label><div id="citation_id"></div><br />
23                <label for="keywords">Keywords</label><div id="keywords_id"></div><br />
24        </div> <!-- End of div upper_middle_top -->
25
26  </div>   
27</div> 
28
29
30<div id = "middle_section" class="grid_12 whiteFill">
31        <div class="grid_3 cedaobs alpha" id="middleLeft cedaObs">
32                <script type="text/javascript">
33                        require(["dojo/parser", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane"]);
34                </script>
35       
36                <div data-dojo-type="dijit.layout.AccordionContainer">
37                        <div data-dojo-type="dijit.layout.ContentPane" title="Sample Data">
38            <p>Link to some Sample Data </p>
39        </div>
40                        <div data-dojo-type="dijit.layout.ContentPane" title="Download & Services" selected="true">
41            <p>Links to download and data services </p>
42        </div>
43                        <div data-dojo-type="dijit.layout.ContentPane" title="Apply for Access">
44                        <div id="access_id">Access to these data may be restricted</div>
45                </div>
46                        <div data-dojo-type="dijit.layout.ContentPane" title="Help">
47            <div id="help_id">For assistance contact <a href="mailto:badc@rl.ac.uk">badc@rl.ac.uk</a></div>
48        </div>
49                </div>
50        </div> 
51        <div class="grid_5 cedaObs" id="middleMiddle">
52                <div class="grid_5 alpha" id="description">
53                        <label for="description">Description</label><div id="description_id"></div>
54                        <br />
55                </div><!-- End of div description -->
56                <!-- <div class="grid_5 omega" id="news">
57                         <p>News bar</p>
58                </div><!-- End of div news  -->
59        </div>   
60        <div class="grid_3 cedaObs omega" id="middleRight">
61                <label for="geographicExtent">Geographic Extent</label><div id="geographicalExtent_id"></div> <br />
62                <!-- begin map test -->
63       
64        <div style="width:220px; height:150px" id="map" class="smallmap"></div>
65
66                <!-- end map test -->
67
68                <label for="resolution">Resolution</label><div id="resolution_id"></div> <br /> 
69   </div> <!-- End of div upper_right -->
70</div> <!-- End of div upper_section -->
71
72
73<div id="lower_section" class="grid_12 whiteFill">
74
75 
76    <div id="lower_tab1" class="grid_7 cedaObs" style="height:300px">
77
78                <script type="text/javascript">
79                        /* require necessary classes */
80                        dojo.require('dijit.layout.TabContainer');
81                        dojo.require('dijit.layout.ContentPane');
82                        dojo.require('dijit.form.Button');
83                       
84                        /* when all classes have loaded... */
85                        dojo.ready(function() {
86                                /*
87                                        don't need to do anything programmatically!
88                                        parseOnLoad and dojoType does the magic!
89                                */
90                        });
91                </script>
92
93        <!-- will host all tabs and their content panes -->
94                <div dojoType="dijit.layout.TabContainer" id="tabContainer" style="width:100%;height:100%;">
95               
96               
97                        <!-- content panes: title is tab name, make this tab selected -->
98                        <div dojoType="dijit.layout.ContentPane" title="Parameters" selected="true">                   
99                        <p>Parameter List to go in here</p>                     
100                </div>
101               
102                        <!-- content panes: title is tab name, no special features here -->
103                        <div dojoType="dijit.layout.ContentPane" title="Format">
104                        <p>Details of format to go in here</p>
105                </div>
106               
107                        <!-- content panes: title is tab name, make this tab closable -->
108                        <div dojoType="dijit.layout.ContentPane" title="Data Quality">
109                        <p>Quality Statement goes in here</p>
110                </div>
111               
112                        <!-- content panes: title is tab name, load content remotely, preload -->
113                        <div dojoType="dijit.layout.ContentPane" title="Data Lineage">
114                        <p><label for="id_dataLineage">Data Lineage</label><div id="records_dataLineage"></div> <br /> <br /></p>
115                </div>
116               
117                </div>
118
119        </div> <!-- End of div lower_tab1 -->
120    <div id="lower_side" class="grid_4 cedaObs">
121                <h5><i>Additional Information:</i></h5>
122               
123                <div data-dojo-type="dijit.layout.AccordionContainer">
124                        <div data-dojo-type="dijit.layout.ContentPane" title="Related Data">
125                                <p>Links to related data products</p>
126                        </div>
127                        <div data-dojo-type="dijit.layout.ContentPane" title="Project Details" selected="true">
128                                <p>Link to Project</p>
129                        </div>
130                        <div data-dojo-type="dijit.layout.ContentPane" title="Data Production Details">
131                                <p>Link to Procedure</p>
132                        </div>
133                        <div data-dojo-type="dijit.layout.ContentPane" title="Documentation and Links">
134                                <p>Links to external documentation and sites</p>
135                        </div>
136                        <div data-dojo-type="dijit.layout.ContentPane" title="Archive content details">
137                                <p>Links to external documentation and sites</p>
138                        </div>
139                        <div data-dojo-type="dijit.layout.ContentPane" title="File list and Checksums">
140                                <label for="relatedParty">Related Parties</label><div id="relatedParty"></div><br />
141
142                        </div>
143                </div>         
144    </div> <!-- End of div lower_side -->
145</div> <!-- End of div lower_section -->
146<div class="corner-content-1col-bottom"></div> 
147
148{% endblock %}
Note: See TracBrowser for help on using the repository browser.