kallithea Changeset - d561eb3787f5

Changeset - d561eb3787f5

Parent rev.

Child rev.

[Not reviewed]

beta

0 2 0

Mads Kiilerich - 13 years ago 2013-01-31 23:27:21
madski@unity3d.com

header: don't use fixed position

A fixed div at the top prevents anchors and pageup/pagedown from working
correctly ... and it is not like the top menu items are used all the time -
next/previous page links would be more relevant to show in a fixed position.

made the upper menu as a dropdown to old fixed mode by clicking upper
semi transparent bar

2 files changed with 30 insertions and 7 deletions:

rhodecode/public/css/style.css

rhodecode/templates/base/base.html

0 comments (0 inline, 0 general)

rhodecode/public/css/style.css

➞

Show inline comments

@@ @@ -234,26 +234,24 @@ a.permalink:hover { @@
 h1:hover > a.permalink,
 h2:hover > a.permalink,
 h3:hover > a.permalink,
 h4:hover > a.permalink,
 h5:hover > a.permalink,
 h6:hover > a.permalink,
 div:hover > a.permalink {
     visibility: visible;
+}
 #header {
     margin: 0;
     padding: 0 10px;
+}
 #header ul#logged-user {
     margin-bottom: 5px !important;
     -webkit-border-radius: 0px 0px 8px 8px;
     -khtml-border-radius: 0px 0px 8px 8px;
     -moz-border-radius: 0px 0px 8px 8px;
     border-radius: 0px 0px 8px 8px;
     height: 37px;
     background-color: #003B76;
     background-repeat: repeat-x;
     background-image: -khtml-gradient(linear, left top, left bottom, from(#003B76), to(#00376E) );
@@ @@ -301,24 +299,44 @@ div:hover > a.permalink { @@
 #header ul#logged-user li a:hover {
     text-decoration: underline;
+}
 #header ul#logged-user li.highlight a {
     color: #fff;
+}
 #header ul#logged-user li.highlight a:hover {
     color: #FFF;
+}
 #header-dd {
     clear: both;
     position: fixed !important;
     background-color: #003B76;
     opacity: 0.01;
     cursor: pointer;
     min-height: 10px;
     width: 100% !important;
     -webkit-border-radius: 0px 0px 4px 4px;
     -khtml-border-radius: 0px 0px 4px 4px;
     -moz-border-radius: 0px 0px 4px 4px;
     border-radius: 0px 0px 4px 4px;
+}
 #header-dd:hover{
 	opacity: 0.2;
     -webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
+}
 #header #header-inner {
     min-height: 44px;
     clear: both;
     position: relative;
     background-color: #003B76;
     background-repeat: repeat-x;
     background-image: -khtml-gradient(linear, left top, left bottom, from(#003B76), to(#00376E) );
     background-image: -moz-linear-gradient(top, #003b76, #00376e);
     background-image: -ms-linear-gradient(top, #003b76, #00376e);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003b76),color-stop(100%, #00376e) );
     background-image: -webkit-linear-gradient(top, #003b76, #00376e);
@@ @@ -326,32 +344,31 @@ div:hover > a.permalink { @@
     background-image: linear-gradient(top, #003b76, #00376e);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003b76',endColorstr='#00376e', GradientType=0 );
     margin: 0;
     padding: 0;
     display: block;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
     -webkit-border-radius: 4px 4px 4px 4px;
     -khtml-border-radius: 4px 4px 4px 4px;
     -moz-border-radius: 4px 4px 4px 4px;
     border-radius: 4px 4px 4px 4px;
+}
 #header #header-inner.hover {
     position: fixed !important;
     width: 100% !important;
     margin-left: -10px !important;
     z-index: 10000;
     -webkit-border-radius: 0px 0px 0px 0px;
     -khtml-border-radius: 0px 0px 0px 0px;
     -moz-border-radius: 0px 0px 0px 0px;
     border-radius: 0px 0px 0px 0px;
     position: fixed !important;
     z-index: 10000;
+}
 .ie7 #header #header-inner.hover,
 .ie8 #header #header-inner.hover,
 .ie9 #header #header-inner.hover
+{
     z-index: auto !important;
+}
 .header-pos-fix, .anchor {
     margin-top: -46px;
     padding-top: 46px;
@@ @@ -3476,25 +3493,25 @@ div.gravatar img { @@
     -khtml-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
+}
 #header, #content, #footer {
     min-width: 978px;
+}
 #content {
     clear: both;
     overflow: hidden;
-    padding: 54px 10px 14px 10px;
+    padding: 10px 10px 14px 10px;
+}
 #content div.box div.title div.search {
     border-left: 1px solid #316293;
+}
 #content div.box div.title div.search div.input input {
     border: 1px solid #316293;
+}
 .ui-btn {
     color: #515151;

rhodecode/templates/base/base.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 <%inherit file="root.html"/>
 <!-- HEADER -->
 <div id="header-dd"></div>
 <div id="header">
-    <div id="header-inner" class="title hover">
     <div id="header-inner" class="title">
         <div id="logo">
             <h1><a href="${h.url('home')}">${c.rhodecode_name}</a></h1>
         </div>
         <!-- MENU -->
         ${self.page_nav()}
         <!-- END MENU -->
         ${self.body()}
     </div>
 </div>
 <!-- END HEADER -->
 <!-- CONTENT -->
@@ @@ -348,14 +349,19 @@ @@
       var loaded = YUD.hasClass('repo_switcher','loaded');
       if(!loaded){
          YUD.addClass('repo_switcher','loaded');
          ypjax("${h.url('repo_switcher')}",'repo_switcher_list',
              function(o){qfilter_activate();YUD.get(target).focus()},
              function(o){YUD.removeClass('repo_switcher','loaded');}
              ,null);
       }else{
          YUD.get(target).focus();
+      }
       return false;
      });
      YUE.on('header-dd', 'click',function(e){
          YUD.addClass('header-inner', 'hover');
      });
 </script>
 </%def>

0 comments (0 inline, 0 general)