diff --git a/static/css/style.css b/static/css/style.css index aa044d734c601d02cf6a9748a261c968c8160d27..db5ab5f69e266bf7683cf186c40f3f3b0b6b6aeb 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -20,6 +20,10 @@ table.analysis_specific {width:100%} margin-left: 15px; margin-right: 15px; } + +table.figures tr.figrow {text-align:center;} +table.figures {width:300px;height:270px;border:1px solid gray;} + /* End Branson */ td, th {padding:3px;border:none;} diff --git a/templates/gracedb/event_detail.html b/templates/gracedb/event_detail.html index d330a586937b55a99385c43f76555552fac64fcf..937c1d7848d085260a5b58abab024e37d4c94c9c 100644 --- a/templates/gracedb/event_detail.html +++ b/templates/gracedb/event_detail.html @@ -13,7 +13,7 @@ <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> </script> - <script src="http{% if request.is_secure %}s{% endif %}://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script> + <script src="http{% if request.is_secure %}s{% endif %}://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js" type="text/javascript"></script> <script src="{{MEDIA_URL}}js/labeltips.js" type="text/javascript"></script> <link rel="stylesheet" href="{{MEDIA_URL}}css/labeltips.css"> <script type="text/javascript"> @@ -24,6 +24,7 @@ "dojox/editor/plugins/Preview", "dijit/form/Button", "dijit/TitlePane", + "dojox/layout/ScrollPane", "dojox/image/LightboxNano", "dijit/_editor/plugins/TextColor", "dijit/_editor/plugins/LinkDialog", @@ -31,7 +32,7 @@ "dijit/_editor/plugins/NewPage", "dijit/_editor/plugins/FullScreen", "dojo/parser", - "dojo/domReady!"], function (Editor, Save, Preview, Button, TitlePane) { + "dojo/domReady!"], function (Editor, Save, Preview, Button, TitlePane, ScrollPane) { dojo.parser.parse(); @@ -138,6 +139,22 @@ open:false}); pane_holder.appendChild(tp.domNode); dojo.destroy(event_log); + + // Now, deal with the silly figure containers. + var figure_container_ids = new Array(); + {% for tag in object.getAvailableTags %} + if (dojo.byId("{{tag.name}}_figure_container")) { + console.log("detected figure container for {{tag.name}}"); + figure_container_ids.push("{{tag.name}}_figure_container"); + } + {% endfor %} + var figure_scrollpanes = new Array(); + for (var i = 0; i<figure_container_ids.length; i++) { + figure_scrollpanes.push(new dojox.layout.ScrollPane({ + orientation:"horizontal", + style:"overflow:hidden;"}, + figure_container_ids[i])); + } {% endif %} }); @@ -298,36 +315,72 @@ <div id="editor"></div> {% endif %} -<!-- Branson. Loop over the available tags. --> +{# Loop over the available tags. #} {% if object.getAvailableTags %} {% for tag in object.getAvailableTags %} + {# Create a div to hold the pane innerHTML for this tag #} <div id="{{tag.name}}"> - <table class="event"> - <tr> - <th>No.</th> - <th>{{ "logtime"|timeselect:"utc" }} Log Entry Created</th> - <th>Submitter</th> - <th>Comment</th> - <th> </th> - </tr> - {% for log in object|getLogsForTag:tag.name %} - <tr class="{% cycle 'odd' 'even'%}"> - <td>{{log.getN}}</td> - <td>{{log.created|multiTime:"logtime"}}</td> - <td>{{log.issuer}}</td> - <td>{{log.comment|sanitize}} - {% if log.fileurl %} - <a href="{{log.fileurl}}">{{log.filename}}</a> - {% endif %} - </td> - <td> - {% if log.hasImage %} - <a href="{{ log.fileurl }}" dojoType="dojox.image.LightboxNano"><img height="60" src="{{ log.fileurl }}"></a> - {% endif %} - </td> - </tr> - {% endfor %} - </table> + + {# A section for the images #} + {% if object|logsForTagHaveImage:tag.name %} + <!-- XXX in case there are a lot of figures, you should put the figure container table inside a scrolling div or something --> + <div id="{{tag.name}}_figure_container"> + <table class="figure_container"> + <tr> + {% for log in object|getLogsForTag:tag.name %} + {% if log.hasImage %} + <td> + <table class="figures"> + <!-- A row for the images themselves --> + <tr class="figrow"> + <td> <a href="{{ log.fileurl }}" dojoType="dojox.image.LightboxNano"><img height="180" src="{{ log.fileurl }}"></a> + </td> + </tr> + <!-- A row for the captions --> + <tr> + <td> {{log.comment|sanitize}} + {% if log.fileurl %} + <a href="{{log.fileurl}}">{{log.filename}}.</a> + {% endif %} + Submitted by {{log.issuer}} on {{log.created}} + </td> + </tr> + </table> + </td> + {% endif %} + {% endfor %} + </tr> + </table> + </div> + {% endif %} + + {# A section for the text-only captions #} + {% if object|logsForTagHaveText:tag.name %} + {# Set up regular log message table #} + <table class="event"> + <tr> + <th>No.</th> + <th>{{ "logtime"|timeselect:"utc" }} Log Entry Created</th> + <th>Submitter</th> + <th>Comment</th> + </tr> + {% for log in object|getLogsForTag:tag.name %} + {% if not log.hasImage %} + <tr class="{% cycle 'odd' 'even'%}"> + <td>{{log.getN}}</td> + <td>{{log.created|multiTime:"logtime"}}</td> + <td>{{log.issuer}}</td> + <td>{{log.comment|sanitize}} + {% if log.fileurl %} + <a href="{{log.fileurl}}">{{log.filename}}</a> + {% endif %} + </td> + </tr> + {% endif %} + {% endfor %} + </table> + {% endif %} + </div> {% endfor %} {% endif %}