Changeset 1266

Timestamp:

Dec 15, 2010, 12:39:03 PM (13 years ago)

Author:

robert@…

Message:

Fixed several IE7 bugs. See tickets #231, #232, #234 and #237

Location:

trunk

Files:

• grails-app/views/common/_topnav.gsp (modified) (1 diff)
• grails-app/views/study/show.gsp (modified) (4 diffs)
• web-app/css/default_style.css (modified) (5 diffs)
• web-app/css/wizard.css (modified) (2 diffs)
• web-app/js/importer.js (modified) (1 diff)
• web-app/js/wizard.js (modified) (1 diff)

trunk/grails-app/views/common/_topnav.gsp

@@ -52 +52 @@
                 <ul class="subnav">
                         <li><g:link controller="publication" action="list">View publications</g:link></li>
-                        <li><g:link controller="publication" action="add">Add publication</g:link></li>
+                        <li><g:link controller="publication" action="create">Add publication</g:link></li>
                 </ul>
         </li>

trunk/grails-app/views/study/show.gsp

@@ -11 +11 @@
         <g:set var="entityName" value="${message(code: 'study.label', default: 'Study')}"/>
         <title><g:message code="default.show.label" args="[entityName]"/></title>
-        <script type="text/javascript">
+        <script type="text/javascript">
+            // Flag whether the timelines have been loaded
+        var timelineloaded = false;
+
                 // Number of timelines that should be loaded
                 var numTimelines = ${studyList?.size()};
@@ -18 +21 @@
                 $(function() {
                         $("#tabs").tabs({
-                                load: function(event, ui) {
-                                        // If the events tab is shown, the timeline should be redrawn
-                                        if (ui.tab.hash == '#Events_timeline') {
-                                                loadTimeline('eventstimeline', 'eventtitles', 0);
-                                        }
-                                },
+                show: function(event, ui) {
+                  // If the events tab is shown, the timeline should be redrawn
+                  if( ui.tab.hash == '#events-timeline' && !timelineloaded ) {
+                    loadTimeline( 'eventstimeline', 'eventtitles', 0 );
+                    timelineloaded = true;
+                  }
+                },
                                 ajaxOptions: {
                                         error: function(xhr, status, index, anchor) {
@@ -62 +66 @@
                                 <li><a href="#study">Study Information</a></li>
                                 <li><a href="<g:createLink action="show_subjects" id="${studyList.id.join(',')}"/>" title="Subjects"><span>Subjects</span></a></li>
-                                <li><a href="<g:createLink action="show_events_timeline" id="${studyList.id.join(',')}"/>" title="Events timeline"><span>Events timeline</span></a></li>
+                                <li><a href="#events-timeline"><span>Events timeline</span></a></li>
                                 <li><a href="<g:createLink action="show_events_table" id="${studyList.id.join(',')}"/>" title="Events table"><span>Events table</span></a></li>
                                 <li><a href="<g:createLink action="show_assays" id="${studyList.id.join(',')}"/>" title="Assays"><span>Assays</span></a></li>
@@ -180 +184 @@
                         </div>
 
+                  <div id="events-timeline">
+                        <g:if test="${studyList*.events?.flatten()?.size()==0 && studyInstance*.samplingEvents?.flatten()?.size()==0 }">
+                          No events in these studies
+                        </g:if>
+                        <g:else>
+                          <g:each in="${studyList}" var="study" status="i">
+                                <div style="margin: 10px; ">
+                                  <div class="eventtitles" id="eventtitles-${i}"></div>
+                                  <div class="eventstimeline" id="eventstimeline-${i}"></div>
+                                </div>
+                          </g:each>
+                          <noscript>
+                                Javascript is needed for showing the timeline, but it has been disabled in your browser. Please enable javascript or use
+                                the events table instead.
+                          </noscript>
+                        </g:else>
+                  </div>
+
                         <% /*
                   All other tabs are moved to separate views and are loaded using

trunk/web-app/css/default_style.css

@@ -74 +74 @@
         font-size: 1.2em;
         background: url(../images/default_style/topnav/topnav_bg.gif) repeat-x;
-        z-index: 1000;
+        z-index: 1005; /** Important: keeps submenu's on top of other elements in IE7. See http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7#comment-547 */
 }
 
@@ -82 +82 @@
         padding: 0 15px 0 0;
         position: relative; /*--Declare X and Y axis base--*/
+        z-index: 1004; /** Important: keeps submenu's on top of other elements in IE7. See http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7#comment-547 */
 }
 
@@ -130 +131 @@
         -webkit-border-bottom-right-radius: 5px;
         border: 1px solid #111;
+        z-index: 1001; /** Important: keeps submenu's on top of other elements in IE7. See http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7#comment-547 */
 }
 
@@ -139 +141 @@
         clear: both;
         width: 170px;
+        position:relative;
+        z-index: 1000; /** Important: keeps submenu's on top of other elements in IE7. See http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7#comment-547 */
 }
 
@@ -440 +444 @@
 #facebookConnect {
         padding:0px 0px 10px 0px;
-        z-index: -1;
-}
+        position:relative;
+        z-index: 0;
+}

trunk/web-app/css/wizard.css

@@ -242 +242 @@
     -o-transform: rotate(180g);
     cursor: pointer;
+    zoom: 1; /* IE 6 & 7 hack */
+    *display: inline; /* IE 6 & 7 hack */
 }
 
@@ -325 +327 @@
 }
 
-.wizard .table .highlight, .wizard .table .highlight input, .wizard .table .highlight select, .wizard .table .highlight b {
+#wizard div.row:hover, #wizard div.row:hover b{
     background-color: #006DBA;
     color: #fff;
 }
 
-.wizard .table .highlight input, .wizard .table .highlight select {
+#wizard div.row:hover input, #wizard div.row:hover select {
     background-color: #6e99d4;
     color: #fff;
 }
+
 /* END :: TABLE */
 

trunk/web-app/js/importer.js

@@ -217 +217 @@
 // attach subject events
 function attachTableEvents() {
-    $('div#wizard').find('div.row').each(function() {
-        $(this).hover(
-                function() {
-                    $(this).addClass('highlight');
-                },
-                function() {
-                    $(this).removeClass('highlight');
-                }
-        );
-    });
+        // This method handled the background hover color on table rows
+        // Since this broke select boxes in IE7, this is now handled by css
+        // See wizard.css and #234 and #237
 }
 

trunk/web-app/js/wizard.js

@@ -222 +222 @@
 // attach subject events
 function attachTableEvents() {
-    $('div#wizard').find('div.row').each(function() {
-        $(this).hover(
-                function() {
-                    $(this).addClass('highlight');
-                },
-                function() {
-                    $(this).removeClass('highlight');
-                }
-        );
-    });
+        // This method handled the background hover color on table rows
+        // Since this broke select boxes in IE7, this is now handled by css
+        // See wizard.css and #234 and #237
 }