ActionItem152: MSIE SUX!!!

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1290 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem152: MSIE SUX!!!
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1290 3f533792-8f58-4932-b0fe-aaf55b0a4547
AurelioAHeckert
1 parent f86ab7eb
Showing 8 changed files with 90 additions and 13 deletions Show diff stats
app/views/layouts/application.rhtml
public/designs/icons/default/firefox-24x24.gif
public/designs/icons/default/style.css
public/javascripts/auto-open-menu.js
public/javascripts/better-browser-promotion.js
public/stylesheets/common.css
public/stylesheets/forms.css
public/stylesheets/menu.css
@@ -44,8 +44,9 @@
       /* Adds a class to "msie" to the body element if a Microsoft browser is
        * detected. This is needed to workaround several of their limitations.
        */
-      if ( navigator.appName.indexOf("Microsoft") > -1 ) {
-        document.body.className += " msie";
+      if ( navigator.appVersion.indexOf("MSIE") > -1 ) {
+        document.body.className += " msie msie" +
+          navigator.appVersion.replace(/^.*MSIE\s+([0-9]+).*$/, "$1");
       }
     </script>
@@ -120,5 +121,17 @@
       <%= localist_menu %>
       <%= footer %>
     </div><!-- id="footer" -->
+
+    <div id="better-browser-promotion" style="display:none">
+      <h3><%=
+      _('Hey! Your web browser is really old!') +'</h3><p/>'+
+      _('This great website will be not so good on that.
+         Don\'t you want to use Firefox? That is a great web browser, free,
+         and made by people of all the world parts.')
+      %><p/>
+      <b id="bbp-getff"><a href="http://getfirefox.com" class="icon-firefox" target="getff"><%= _('Get Firefox Now!') %></a></b>
+    </div>
+    <%= javascript_include_tag 'better-browser-promotion' %>
+
   </body>
 </html>
@@ -20,6 +20,7 @@
 .icon-ok      { background-image: url(gtk-ok.png);             }
 .icon-login   { background-image: url(key-HC.gif);             }
 .icon-help    { background-image: url(help.gif);               }
+.icon-firefox { background-image: url(firefox-24x24.gif);      }
 .icon-menu-           { background-image: url(menu-without-ico-HC.gif) }
 .icon-menu-blog       { background-image: url(blog-HC.gif);            }
 .icon-menu-album      { background-image: url(album-HC.gif);           }
@@ -7,15 +7,16 @@ function setAutoOpenMenu( menu ) {
   mul.h = mul.clientHeight; // remember the current height to a faster animation
   mul.minSize = mul.clientHeight;
   var vli = mul.getElementsByTagName("li");
-  mul.paddingBottom = parseInt( menu.className.replace( /.*AOM_paddingBottom_([^\s]+).*/, "$1" ) );
+  mul.paddingBottom = parseInt( menu.className.replace( /^.*AOM_paddingBottom_([^\s]+).*$/, "$1" ) );
   mul.maxSize = ( vli.length * ( vli[1].offsetTop - vli[0].offsetTop ) );
+  mul.inc = 1;
   window["autoOpenMenu-"+menu.id] = menu;
   menu.mul = mul;
   if ( mul.minSize == 1 ) {
     // Work arround bug for IE - ie sux - ie sux - ie sux - ie sux -ie sux -ie sux -ie sux - ie sux!!!
-    mul.h = 12;
+    mul.h = 3;
     setTimeout('m = window[\'autoOpenMenu-'+menu.id+'\']; m.onmouseout()', 10);
   }
@@ -26,21 +27,24 @@ function setAutoOpenMenu( menu ) {
     var mul = this.mul;
     if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = mul.paddingBottom +"px";
     if ( mul.h < mul.maxSize ) {
-      mul.h += 10;
+      mul.h += mul.inc;
+      mul.inc += 2;
       mul.style.height = mul.h +"px";
       this.timeoutOpen = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseover()", 33 );
     } else {
       mul.h = mul.maxSize;
       mul.style.height = mul.h +"px";
+      mul.inc = 1;
     }
   }
-  menu.onmouseout = function ( doIt ) {
+  menu.onmouseout = function ( doIt, firstDoIt ) {
     clearTimeout( this.timeoutOpen );
     var mul = this.mul;
-    if ( doIt ) {
+    if ( firstDoIt ) mul.inc = 1;
+    if ( doIt == true ) {
       if ( mul.h > mul.minSize ) {
-        mul.h -= 10;
+        mul.h -= mul.inc++;
         if ( mul.h < 0 ) mul.h = 0;
         if ( this.isIE ) if ( mul.h < 1 ) mul.h = 1;
         mul.style.height = mul.h +"px";
@@ -49,10 +53,11 @@ function setAutoOpenMenu( menu ) {
         mul.h = mul.minSize;
         mul.style.height = mul.h +"px";
         if ( mul.paddingBottom ) mul.parentNode.style.paddingBottom = "0px";
+        mul.inc = 2;
       }
     } else {
       // Work arround IE bug
-      this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true)", 200 );
+      this.timeoutClose = setTimeout( "window['autoOpenMenu-"+this.id+"'].onmouseout(true, true)", 200 );
     }
   }
@@ -0,0 +1,9 @@
+if ( navigator.appVersion.indexOf("MSIE 5") > -1 ) {
+  if ( document.cookie.indexOf("better-browser-promotion=done") == -1 ) {
+    var bbp = $("better-browser-promotion")
+    bbp.style.display = 'block';
+    bbp.innerHTML += '<a href="javascript:void(bbp.style.display=\'none\')" class="button icon-close"><span>X</span></a>'
+    // remember to show only one time per session:
+    document.cookie = "better-browser-promotion=done";
+  }
+}
@@ -360,6 +360,37 @@ body.category4 #content h4, body.category4 #content h5, body.category4 #content 
   margin: 0px 0px 10px 0px;
 }
+#better-browser-promotion {
+  position: absolute;
+  top: 100px;
+  left: 20%;
+  right: 20%;
+  border: 2px solid #000;
+  background: #FE0;
+  padding: 15px 5%;
+  text-align: justify;
+}
+
+#bbp-getff {
+  display: block;
+  text-align: center;
+}
+
+#bbp-getff a {
+  height: 24px;
+  line-height: 24px;
+  padding-left: 26px;
+  background-repeat: no-repeat;
+  background-position: 0px 50%;
+}
+
+#better-browser-promotion .button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 20px;
+}
+
 /* Category */
 #view-category { /* none */ }
@@ -22,8 +22,11 @@
   text-indent: 5px;
   padding: 2px 0px;
 }
-.msie .formfield input {
+.msie5 .formfield input,
+.msie6 .formfield input {
   background-attachment: fixed;
+}
+.msie .formfield input {
   padding-left: 2px;
 }
 .formfield textarea {
@@ -151,6 +151,9 @@ body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermel
   right: 0px;
   padding: 0px 0px 0px 10px;
 }
+.msie #assets_menu {
+  right: -1px;
+}
 #assets_menu_layout_iten {
   position: absolute;
@@ -169,6 +172,7 @@ body.category4 #assets_menu_layout_iten { background: url(/images/top-bar/assets
 #assets_menu_list {
   padding: 0px 0px 6px 5px;
   background: url(/images/top-bar/assets-menu-bg-azul.gif) 0% 100%;
+  Xborder-right: 1px solid #2A5896;
 }
 body.category1 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-laranja.gif)   }
 body.category2 #assets_menu_list { background-image: url(/images/top-bar/assets-menu-bg-verde.gif)     }
@@ -180,7 +184,8 @@ body.category4 #assets_menu_list { background-image: url(/images/top-bar/assets-
   padding: 0px;
   overflow: hidden;
   height: 56px;
-  width: 135px;
+  max-width: 135px;
+  width: 136px;
 }
 .top_extra_menu li {
@@ -216,6 +221,11 @@ body.category4 .top_extra_menu a { color: #F79494 }
   background: #3465A4;
   color: #FFF;
 }
+.msie5 #user_box a,
+.msie5 .top_extra_menu a {
+  color: #FFF;
+  text-decoration: none;
+}
 body.category1 #user_box a:hover,
 body.category1 .top_extra_menu a:hover { background: #F57900; color: #FFF }
 body.category2 #user_box a:hover,
@@ -240,6 +250,11 @@ body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
   opacity: 0.7;
 	filter: alpha(opacity=70);
 }
+.msie5 #user_box a img,
+.msie5 #user_box a span,
+.msie5 .top_extra_menu a span {
+  display: none;
+}
 #user_box a img,
 #user_box a:hover span,
 .top_extra_menu a:hover span {
@@ -260,13 +275,13 @@ body.category4 .top_extra_menu a:hover { background: #CC0000; color: #FFF }
   position: absolute;
   top: 0px;
   right: 0px;
-  width: 200px;
+  width: 150px;
 }
 #open_search {
   position: absolute;
   top: 2px;
-  left: 64px;
+  left: 14px;
   float: left;
 }
 #user_box #open_search:hover {
	@@ -44,8 +44,9 @@		@@ -44,8 +44,9 @@
44	/* Adds a class to "msie" to the body element if a Microsoft browser is	44	/* Adds a class to "msie" to the body element if a Microsoft browser is
45	* detected. This is needed to workaround several of their limitations.	45	* detected. This is needed to workaround several of their limitations.
46	*/	46	*/
47	- if ( navigator.appName.indexOf("Microsoft") > -1 ) {
48	- document.body.className += " msie";	47	+ if ( navigator.appVersion.indexOf("MSIE") > -1 ) {
		48	+ document.body.className += " msie msie" +
		49	+ navigator.appVersion.replace(/^.MSIE\s+([0-9]+).$/, "$1");
49	}	50	}
50	</script>	51	</script>
51		52
	@@ -120,5 +121,17 @@		@@ -120,5 +121,17 @@
120	<%= localist_menu %>	121	<%= localist_menu %>
121	<%= footer %>	122	<%= footer %>
122	</div><!-- id="footer" -->	123	</div><!-- id="footer" -->
		124	+
		125	+ <div id="better-browser-promotion" style="display:none">
		126	+ <h3><%=
		127	+ _('Hey! Your web browser is really old!') +'</h3><p/>'+
		128	+ _('This great website will be not so good on that.
		129	+ Don\'t you want to use Firefox? That is a great web browser, free,
		130	+ and made by people of all the world parts.')
		131	+ %><p/>
		132	+ <b id="bbp-getff"><a href="http://getfirefox.com" class="icon-firefox" target="getff"><%= _('Get Firefox Now!') %></a></b>
		133	+ </div>
		134	+ <%= javascript_include_tag 'better-browser-promotion' %>
		135	+
123	</body>	136	</body>
124	</html>	137	</html>
@@ -0,0 +1,9 @@		@@ -0,0 +1,9 @@
	1	+if ( navigator.appVersion.indexOf("MSIE 5") > -1 ) {
	2	+ if ( document.cookie.indexOf("better-browser-promotion=done") == -1 ) {
	3	+ var bbp = $("better-browser-promotion")
	4	+ bbp.style.display = 'block';
	5	+ bbp.innerHTML += '<a href="javascript:void(bbp.style.display=\'none\')" class="button icon-close"><span>X</span></a>'
	6	+ // remember to show only one time per session:
	7	+ document.cookie = "better-browser-promotion=done";
	8	+ }
	9	+}
	@@ -360,6 +360,37 @@ body.category4 #content h4, body.category4 #content h5, body.category4 #content		@@ -360,6 +360,37 @@ body.category4 #content h4, body.category4 #content h5, body.category4 #content
360	margin: 0px 0px 10px 0px;	360	margin: 0px 0px 10px 0px;
361	}	361	}
362		362
		363	+#better-browser-promotion {
		364	+ position: absolute;
		365	+ top: 100px;
		366	+ left: 20%;
		367	+ right: 20%;
		368	+ border: 2px solid #000;
		369	+ background: #FE0;
		370	+ padding: 15px 5%;
		371	+ text-align: justify;
		372	+}
		373	+
		374	+#bbp-getff {
		375	+ display: block;
		376	+ text-align: center;
		377	+}
		378	+
		379	+#bbp-getff a {
		380	+ height: 24px;
		381	+ line-height: 24px;
		382	+ padding-left: 26px;
		383	+ background-repeat: no-repeat;
		384	+ background-position: 0px 50%;
		385	+}
		386	+
		387	+#better-browser-promotion .button {
		388	+ position: absolute;
		389	+ top: 5px;
		390	+ right: 5px;
		391	+ height: 20px;
		392	+}
		393	+
363	/* Category */	394	/* Category */
364		395
365	#view-category { /* none */ }	396	#view-category { /* none */ }