improved bottom-bar;modified narrow-panel input style

media/css/seahub.css

@@ -511,7 +511,6 @@ textarea:-moz-placeholder {/* for FF */
 }
 .narrow-panel input {
     width:318px;
-    height:1.8em;
     margin:0 0 0.6em;
 }
 .narrow-panel input.submit {
@@ -1399,25 +1398,30 @@ textarea:-moz-placeholder {/* for FF */
     border-radius:2px;
 }
 /*bottom bar*/
+#bottom-bar {
+    position:fixed;
+    bottom:0;
+    right:10px;
+}
 #bottom-bar button {
     color:#fff;
-    background:#646464;
     font-size:15px;
+    background:#646464;
+    margin-left:5px;
 }
 /* File comment */
 #file-comment,
 #to-group,
 #recommend-to-group-form {
     width:400px;
+    padding:0 15px;
     position:fixed;
     right:10px;
-    bottom:44px;
+    background:#fff;
     border:1px solid #cbcbcb;
-    padding:0 15px;
     box-shadow: 0 2px 4px rgba(0,0,0,.2);
     -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
     -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
-    background:#fff;
 }
 #comment-input {
     width:315px;
@@ -1446,8 +1450,6 @@ textarea:-moz-placeholder {/* for FF */
 #recommend-to-group-caret {
     width:28px;
     position:fixed;
-    right:27px;
-    bottom:31px;
 }
 /*to-group*/
 #to-group {

templates/repo_view_file.html

@@ -342,10 +342,12 @@ $('#comment-input').bind('autocompleteopen', function(e, ui) {
 });
 {% if comment_open %}
 $('#file-comment, #comment-caret').removeClass('hide');
+$(function() { $('#comment-caret').css({'left': $('#comment').offset().left}); });
 {% endif %}
 $('#comment').click(function() {
     if ($('#file-comment').hasClass('hide')) {
         $('#file-comment, #comment-caret').removeClass('hide');
+        $('#comment-caret').css({'left':$('#comment').offset().left});
         $('#comment-list').css({'max-height':parseInt($('#file-comment').css('max-height')) - $('#file-comment-form').outerHeight(true), 'overflow':'auto'});
     } else {
         $('#file-comment, #comment-caret').addClass('hide');

templates/snippets/bottom_bar.html

@@ -2,8 +2,7 @@
 {% load url from future %}
 var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="recommend">{% trans "Recommend" %}</button><button id="click-into-group">{% trans "Back to group" %}</button>{% endif %}</div>';
 $('#wrapper').append(Bottom_bar);
-$('#bottom-bar').css({'position':'fixed', 'bottom':0, 'right':'10px'});
+$('#main-panel').css('margin-bottom', $('#bottom-bar button').outerHeight() + 2);
-$('#main-panel').css('margin-bottom', '28px');
 $('#footer').addClass('hide');
 
 {% if groups %}
@@ -11,10 +10,10 @@ var group_list = []
 {% for group in groups %}
 group_list.push('{{ group.props.group_name }} <{{ group.props.creator_name }}>');
 {% endfor %}
-$('#recommend-to-group-caret').css('left', $('#recommend').offset().left);
 $('#recommend').click(function() {
     if ($('#recommend-to-group-form').hasClass('hide')) {
         $('#recommend-to-group-form, #recommend-to-group-caret').removeClass('hide');
+        $('#recommend-to-group-caret').css('left', $('#recommend').offset().left);
     } else {
         $('#recommend-to-group-form, #recommend-to-group-caret').addClass('hide');
     }
@@ -34,8 +33,6 @@ $('#recommend-submit').click(function() {
 });
 
 $('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div class="outer-caret"><div class="inner-caret"></div></div></div>');
-$('#to-group').css({'width':$('#to-group').width(), 'left':$('#click-into-group').offset().left - $('#to-group').width()/3});
-$('#to-group-caret').css('left', $('#click-into-group').offset().left);
 $('#click-into-group').click(function() {
     {% if groups|length == 1 %}
     // only one group, just turn to group page
@@ -47,6 +44,10 @@ $('#click-into-group').click(function() {
     // more than one group, then let user choose
     if ($('#to-group').hasClass('hide')) {
         $('#to-group, #to-group-caret').removeClass('hide');
+        $('#to-group-caret').css('left', $('#click-into-group').offset().left + $('#click-into-group').width()/3);
+        if ($('#to-group').offset().left > $('#click-into-group').offset().left) {
+            $('#to-group').css('left', $('#click-into-group').offset().left);
+        }
     } else {
         $('#to-group, #to-group-caret').addClass('hide');
     }
@@ -58,4 +59,10 @@ $(document).click(function(e) {
         $('#to-group, #to-group-caret').addClass('hide');
     }   
 });
+
+$(function() {
+    var btn_height = $('#bottom-bar button').outerHeight();
+    $('#recommend-to-group-caret, #to-group-caret, #comment-caret').css({'bottom': btn_height + 1});
+    $('#file-comment, #to-group, #recommend-to-group-form').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
+});
 {% endif %}