source: mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html @ 8313

Subversion URL: http://proj.badc.rl.ac.uk/svn/ndg/mauRepo/MolesManager/trunk/src/MolesManager/static/templates/cedaBrowse.html@8313
Revision 8313, 11.5 KB checked in by jhorton, 8 years ago (diff)

moved citation buttons to better location

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3  <head>
4    <title>CEDA Browse</title>
5
6    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
7    <link rel="stylesheet" type="text/css" href="/static/css/960/reset.css"  />
8<!--
9    <link rel="stylesheet" type="text/css" href="/static/css/960/960_12_col.css"  />
10-->
11    <link rel="stylesheet" type="text/css" href="/static/css/960/960_10.css"  />
12    <link rel="stylesheet" type="text/css" href="/static/css/960/text.css"  />
13    <link rel="stylesheet" type="text/css" href="/static/css/ceda.css"  />
14    <link rel="stylesheet" type="text/css" href="/static/css/cedacat.css"  />
15
16    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"></link>
17
18    <script src="http://openlayers.org/api/OpenLayers.js"></script>
19<!--
20    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
21-->
22    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
23    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
24
25    <style>
26      body {
27        background-color: #D0D7E4;
28        line-height: 2.0;
29      }
30      div p {
31        background-color:#fff;
32        margin-top: 0px;
33        margin-bottom: 10px;
34        font:bold 12px arial,sans-serif;
35        line-height: 2.0;
36      }
37      div p textarea {
38        background-color:#fff;
39        font:bold 12px arial,sans-serif;
40        line-height: 2.0;
41      }
42      div p.title textarea {
43        background-color:#fff;
44        font:bold 20px arial,sans-serif;
45        line-height: 2.0;
46      }
47      .container { background-color:#333; }
48      div button {
49        font-size:10px;
50        font-family:Tahoma,sans-serif;
51        font-weight:bold;
52        text-align:left;
53        color:#FFFFFF;
54        width:150px;
55        height:35px;
56        background-color:#2878C0;
57        border-style:default;
58        border-color:#2878C0;
59        border-width:5px;
60      }
61      div p {
62        -webkit-border-top-left-radius: 15px;
63        -webkit-border-top-right-radius: 15px;
64        -webkit-border-bottom-right-radius: 15px;
65        -webkit-border-bottom-left-radius: 15px;
66        -moz-border-radius-topleft: 15px;
67        -moz-border-radius-topright: 15px;
68        -moz-border-radius-bottomright: 15px;
69        -moz-border-radius-bottomleft: 15px;
70        border-top-left-radius: 15px;
71        border-top-right-radius: 15px;
72        border-bottom-right-radius: 15px;
73        border-bottom-left-radius: 15px;
74        border:1px solid #333; padding:10px;
75      }
76    </style>
77
78    <script type="text/javascript" language="javascript">
79      $(document).ready(function() {
80        // setup tabs
81        $( "#tabs" ).tabs();
82        // setup accordian
83        $( "#accordion1" ).accordion();
84        // setup help dialog
85        var $helpdialog = $('<div></div>')
86          .html('For Assistance please contact <a href="mailto: {{ email_contact_addr }}">{{ email_contact_name }}</a>')
87          .dialog({
88            autoOpen: false,
89            show: "blind",
90            hide: "explode",
91            title: 'Help'
92        });       
93        $("#b_help").click(function() {
94          $helpdialog.dialog('open');
95          return false;
96        });
97        // setup citation dialog
98        var $citationdialog = $('<div></div>')
99          .html('{{ citation }}')
100          .dialog({
101            autoOpen: false,
102            show: "blind",
103            hide: "explode",
104            title: 'Help'
105        });
106        $("#b_cit").click(function() {
107          $citationdialog.dialog('open');
108          return false;
109        });
110        // setup openlayers map
111        var map;// = new OpenLayers.Map("map");
112        init();
113        function init() {
114          map = new OpenLayers.Map('map');
115          var wms = new OpenLayers.Layer.WMS(
116            "OpenLayers WMS",
117            "http://labs.metacarta.com/wms/vmap0",
118            {layers: 'basic'}
119          );
120
121          var w = parseFloat(" {{ geographic_extentW }} ");
122          var s = parseFloat(" {{ geographic_extentS }} ");
123          var e = parseFloat(" {{ geographic_extentE }} ");
124          var n = parseFloat(" {{ geographic_extentN }} ");
125          // if we have no extents or if they are bad create a global box
126          if (isNaN(w) || isNaN(s) || isNaN(e) || isNaN(n)) {
127            w = -180.0;
128            s = -90.0;
129            e = 180.0;
130            n = 90.0;
131          }
132          var box_extents = [ w, s, e, n ];
133
134          var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
135          bounds = OpenLayers.Bounds.fromArray(box_extents);
136          box = new OpenLayers.Feature.Vector(bounds.toGeometry());
137          boxes.addFeatures(box);
138
139          map.addLayers([wms, boxes]);
140          map.addControl(new OpenLayers.Control.LayerSwitcher());
141          var sf = new OpenLayers.Control.SelectFeature(boxes);
142          map.addControl(sf);
143          map.zoomToMaxExtent();
144        }
145      });
146    </script>
147  </head>
148  <body>
149    <div class="container_12">
150      <div class="grid_12">
151        <img style="z-index:-1;position:absolute" src="/static/img/stfcHeader_960.jpg" alt="cedalogo" height="94"/width="940">
152        <img src="/static/img/stfc_ceda_left.jpg" alt="cedalogo" height="94" width="352" />
153      </div>
154      <div class="clear">nbsp;</div>
155      <div class="grid_2">
156        <img src="/static/img/cedaObsLogo.jpg" alt="cedalogo" />
157      </div>
158      <div class="grid_10">
159        <p class="title">
160          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
161{{ title }}.{{ author }}.{{ DOI }}
162          </textarea>
163        </p>
164      </div>
165      <div class="clear">nbsp;</div>
166      <div class="grid_3">
167        <p>
168          <img src="/static/img/neodc.jpg" alt="cedalogo" height="90" width="180" />
169        </p>
170          <div align="center">
171          <p>
172            <button id="b_cit" >Citation</button>
173            <br/>
174            <button id="b_citby" >Cited by</button>
175          </p>
176          </div>
177          <div align="center">
178          <p>
179          <button id="b1">sample data</button>
180          <br/>
181          <button id="b2">download and services</button>
182          <br/>
183          <button id="b3">apply for access</button>
184          <br/>
185          <button id="b_help">help</button>
186          </p>
187          </div>
188      </div>
189      <div class="grid_6">
190        <p>
191          <textarea readonly="readonly" width="100%" cols="60" rows="10" style="overflow=y:scroll">
192Abstract :  {{ abstract }}
193          </textarea>
194        </p>
195        <p>
196          <textarea readonly="readonly" width="100%" cols="60" rows="2" style="overflow=y:scroll">
197latest news
198          </textarea>
199        </p>
200      </div>
201      <div class="grid_3">
202        <p>
203          <b>Status :</b> {{ status }}
204          <br/>
205          <b>Last Update :</b> {{ last_update_year }}-{{ last_update_month }}-{{ last_update_day }}
206        </p>
207       
208        <div id="map" style="width: 230px; height: 150px"></div>
209      <!--
210        <p>
211      -->
212          <div id="accordion1">
213<!--
214          <textarea readonly="readonly" width="100%" cols="26" rows="5" style="overflow=y:scroll">
215-->
216            <h3><a href="#">Phenomenom</a></h3>
217              <div>
218Phenomenon begin : {{ phenomenon_begin_year }}-{{ phenomenon_begin_month }}-{{ phenomenon_begin_day }}
219Phenomenon end : {{ phenomenon_end_year }}-{{ phenomenon_end_month }}-{{ phenomenon_end_day }}
220              </div>
221            <h3><a href="#">Resolution And Extends</a></h3>
222              <div>
223              <textarea readonly="readonly" width="100%" cols="26" rows="7" style="overflow=y:scroll">
224
225Resolution : {{ resolution }}
226Vertical Extent :
227{% for ve in vertical_extent %}
228  {{ ve }}
229{% endfor %}
230Bounding Box
231          N : {{ geographic_extentN }}
232
233W : {{ geographic_extentW }}    E : {{ geographic_extentE }}
234
235          S : {{ geographic_extentS }}
236
237            </textarea>
238            </div>
239          </div>
240<!--
241        </p>
242-->:
243      </div>
244      <div class="grid_9">
245          <div id="tabs">
246            <!-- tabs -->
247            <ul>
248              <li><a href="#tabs-1">Parameters</a></li>
249              <li><a href="#tabs-2">Format</a></li>
250              <li><a href="#tabs-3">Data Quality</a></li>
251              <li><a href="#tabs-4">Data Lineage</a></li>
252              <li><a href="#tabs-5">Related Data</a></li>
253              <li><a href="#tabs-6">Project Details</a></li>
254              <li><a href="#tabs-7">Data Production Details</a></li>
255              <li><a href="#tabs-8">documentation and links</a></li>
256              <li><a href="#tabs-9">archive content details</a></li>
257            </ul>
258
259            <!-- tab containers -->
260            <div id="tabs-1">
261              <p>
262              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
263Observerd Property : {{ observed_property }}
264Parameters :
265{% for pa in parameters %}
266  {{ pa }}
267{% endfor %}
268              </textarea>
269              </p>
270            </div>
271            <div id="tabs-2">
272              <p>
273              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
274
275              </textarea>
276              </p>
277            </div>
278            <div id="tabs-3">
279              <p>
280              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
281Data quality :
282{% for dq in quality_statement %}
283  {{ dq }}
284{% endfor %}
285              </textarea>
286              </p>
287            </div>
288            <div id="tabs-4">
289              <p>
290              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
291{{ lineage }}
292              </textarea>
293              </p>
294            </div>
295            <div id="tabs-5">
296              <p>
297              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
298Related data :
299{% for rd in related_data %}
300  {{ rd }}
301{% endfor %}
302             </textarea>
303             </p>
304            </div>
305            <div id="tabs-6">
306              <p>
307              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
308Related party :
309{% for pd in project_details %}
310  {{ pd }}
311{% endfor %}
312              </textarea>
313              </p>
314            </div>
315            <div id="tabs-7">
316              <p>
317              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
318Procedure : {{ procedure }}
319              </textarea>
320              </p>
321            </div>
322            <div id="tabs-8">
323              <p>
324              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
325Documentation :
326{% for d in documentation %}
327  {{ d }}
328{% endfor %}
329              </textarea>
330              </p>
331            </div>
332            <div id="tabs-9">
333              <p>
334              <textarea readonly="readonly" width="100%" cols="90" rows="4" style="overflow=y:scroll">
335Number Of Files : {{ archive_no_files }}
336{% for l in archive_linkage %}
337link : {{ l }}
338{% endfor %}
339              </textarea>
340              </p>
341            </div>
342          </div>
343      </div>
344      <div class="grid_3">
345        <div align="center">
346          <p>
347          <button id="b9">file list and checksums</button>
348          <br/>
349          <button id="b10">XML</button>
350          </p>
351        </div>
352      </div>
353    </div>
354  </body>
355</html>
Note: See TracBrowser for help on using the repository browser.