improve branch select design ・ aeea140 ・ Gitprep

- improve branch select design;
- Browse files
- Yuki Kimoto commited on 2016-01-04
- 1 parent 8a2c954
  
  commit aeea14062db6d5584304e69aaa838f58115e563f

Showing 2 changed files with 103 additions and 110 deletions

+61 -76

public/css/bootstrap.css

@@ -769,9 +769,7 @@ button.close {
   border-color: #e6e6e6 #e6e6e6 #bfbfbf;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   border-bottom-color: #b3b3b3;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  border-radius: 4px;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   *zoom: 1;
@@ -840,9 +838,7 @@ button.close {
 .btn-large {
   padding: 11px 19px;
   font-size: 17.5px;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
+  border-radius: 6px;
 }
 
 .btn-large [class^="icon-"],
@@ -853,9 +849,7 @@ button.close {
 .btn-small {
   padding: 2px 10px;
   font-size: 11.9px;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
+  border-radius: 3px;
 }
 
 .btn-small [class^="icon-"],
@@ -871,9 +865,7 @@ button.close {
 .btn-mini {
   padding: 0 6px;
   font-size: 10.5px;
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
+  border-radius: 3px;
 }
 
 /* alert */
@@ -883,9 +875,7 @@ button.close {
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   background-color: #fcf8e3;
   border: 1px solid #fbeed5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  border-radius: 4px;
 }
 
 .alert,
@@ -1075,9 +1065,7 @@ button.close {
   padding-bottom: 8px;
   line-height: 20px;
   border: 1px solid transparent;
-  -webkit-border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-          border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
 }
 
 .nav-tabs > li > a:hover,
@@ -1100,9 +1088,7 @@ button.close {
   padding-bottom: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
-  -webkit-border-radius: 5px;
-     -moz-border-radius: 5px;
-          border-radius: 5px;
+  border-radius: 5px;
 }
 
 .nav-pills > .active > a,
@@ -1126,27 +1112,17 @@ button.close {
 
 .nav-tabs.nav-stacked > li > a {
   border: 1px solid #ddd;
-  -webkit-border-radius: 0;
-     -moz-border-radius: 0;
-          border-radius: 0;
+  border-radius: 0;
 }
 
 .nav-tabs.nav-stacked > li:first-child > a {
-  -webkit-border-top-right-radius: 4px;
-          border-top-right-radius: 4px;
-  -webkit-border-top-left-radius: 4px;
-          border-top-left-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  -moz-border-radius-topleft: 4px;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
 }
 
 .nav-tabs.nav-stacked > li:last-child > a {
-  -webkit-border-bottom-right-radius: 4px;
-          border-bottom-right-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-          border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  -moz-border-radius-bottomleft: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 
 .nav-tabs.nav-stacked > li > a:hover,
@@ -1164,15 +1140,11 @@ button.close {
 }
 
 .nav-tabs .dropdown-menu {
-  -webkit-border-radius: 0 0 6px 6px;
-     -moz-border-radius: 0 0 6px 6px;
-          border-radius: 0 0 6px 6px;
+  border-radius: 0 0 6px 6px;
 }
 
 .nav-pills .dropdown-menu {
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
+  border-radius: 6px;
 }
 
 .nav .dropdown-toggle .caret {
@@ -1277,9 +1249,7 @@ button.close {
 }
 
 .tabs-below > .nav-tabs > li > a {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
 }
 
 .tabs-below > .nav-tabs > li > a:hover,
@@ -1314,9 +1284,7 @@ button.close {
 
 .tabs-left > .nav-tabs > li > a {
   margin-right: -1px;
-  -webkit-border-radius: 4px 0 0 4px;
-     -moz-border-radius: 4px 0 0 4px;
-          border-radius: 4px 0 0 4px;
+  border-radius: 4px 0 0 4px;
 }
 
 .tabs-left > .nav-tabs > li > a:hover,
@@ -1328,7 +1296,6 @@ button.close {
 .tabs-left > .nav-tabs .active > a:hover,
 .tabs-left > .nav-tabs .active > a:focus {
   border-color: #ddd transparent #ddd #ddd;
-  *border-right-color: #ffffff;
 }
 
 .tabs-right > .nav-tabs {
@@ -1339,9 +1306,7 @@ button.close {
 
 .tabs-right > .nav-tabs > li > a {
   margin-left: -1px;
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0;
 }
 
 .tabs-right > .nav-tabs > li > a:hover,
@@ -1362,9 +1327,7 @@ button.close {
   margin: 0 0 20px;
   list-style: none;
   background-color: #f5f5f5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
+  border-radius: 4px;
 }
 
 .breadcrumb > li {
@@ -1414,25 +1377,15 @@ button.close {
   background-color: #ffffff;
   border: 1px solid #999;
   border: 1px solid rgba(0, 0, 0, 0.3);
-  *border: 1px solid #999;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
+  border-radius: 6px;
   outline: none;
-  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding-box;
-          background-clip: padding-box;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  background-clip: padding-box;
 }
 
 .modal.fade {
   top: -25%;
-  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
-          transition: opacity 0.3s linear, top 0.3s ease-out;
+  transition: opacity 0.3s linear, top 0.3s ease-out;
 }
 
 .modal.fade.in {
@@ -1470,13 +1423,8 @@ button.close {
   text-align: right;
   background-color: #f5f5f5;
   border-top: 1px solid #ddd;
-  -webkit-border-radius: 0 0 6px 6px;
-     -moz-border-radius: 0 0 6px 6px;
-          border-radius: 0 0 6px 6px;
-  *zoom: 1;
-  -webkit-box-shadow: inset 0 1px 0 #ffffff;
-     -moz-box-shadow: inset 0 1px 0 #ffffff;
-          box-shadow: inset 0 1px 0 #ffffff;
+  border-radius: 0 0 6px 6px;
+  box-shadow: inset 0 1px 0 #ffffff;
 }
 
 .modal-footer:before,
@@ -1600,3 +1548,40 @@ button.close {
   width:30%;
   color: #767676;
 }
+
+.branch-select-container {
+  overflow:hidden;
+}
+
+.branch-select-left-container {
+  float:left;
+  width:30%;
+}
+
+.branch-select-right-container {
+  float:left;
+  width:70%;
+}
+
+.git-url-container {
+  float:right;
+  overflow:hidden;
+  display:inline-block;
+}
+
+.git-url-container li {
+  float:left;
+}
+
+.git-url-container .btn, .git-url-container .btn-small {
+  border-radius:0;
+}
+
+.page-path-container {
+  float:left;
+}
+
+.donwload-zip {
+  margin-left:5px;
+  font-weight:bold;
+}

+42 -34

templates/include/branch_select.html.ep

View

@@ -13,6 +13,17 @@
     ? 'tree' : 'commits';
   
   my $path = stash('Path');
+
+  my $title;
+  my $rev_short;
+  if (defined $rev && length $rev == 40) {
+    $title = 'tree';
+    $rev_short = substr($rev, 0, 10);
+  }
+  else {
+    $title = 'branch';
+    $rev_short = $rev;
+  }
 %>
 
 %= javascript begin
@@ -83,43 +94,40 @@
   });
 % end
 
-
-<div class="row">
-  <%
-    my $title;
-    my $rev_short;
-    if (defined $rev && length $rev == 40) {
-      $title = 'tree';
-      $rev_short = substr($rev, 0, 10);
-    }
-    else {
-      $title = 'branch';
-      $rev_short = $rev;
-    }
-  %>
-  <div class="span2">
-    <button id="rev-btn" class="btn" style="font-size:13px;padding:2px 10px;margin-right:6px">
-      <span class="muted"><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
+<div class="branch-select-container">
+  <div class="branch-select-left-container">
+    <button id="rev-btn" class="btn btn-small">
+      <span><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
     </button>
   </div>
-  % if ($display eq 'tree_top') {
-    <div class="span10" style="text-algin:right;overflow:hidden">
-      <a class="btn" style="margin-left:5px;float:right;font-size:12px;font-weight:bold;color:#333;padding:3px 6px" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
-        Download ZIP
-      </a>
-      <div class="input-append" style="float:right">
-        <div class="btn-group" data-toggle="buttons-radio">
-          <button class="btn" id="btn_http" style="margin-left:5px;padding:3px 6px;border-top-right-radius:0px; border-bottom-right-radius:0px"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
-          % if ($logined) {
-            <button class="btn" id="btn_ssh" style="padding:3px 7px;border-radius:0">SSH</button>
-          % }
-        </div>
-        <input id="rep_url" type="text" style="width:550px;border-radius:0;padding:3px 7px;border-top-right-radius:3px;border-bottom-right-radius:3px">
+  <div class="branch-select-right-container">
+    % if ($display eq 'tree_top') {
+      <ul class="git-url-container">
+        <li>
+          <button class="btn btn-small" id="btn_http"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
+        </li>
+        % if ($logined) {
+          <li>
+            <button class="btn btn-small" id="btn_ssh">SSH</button>
+          </li>
+        % }
+        <li>
+          <input id="rep_url" type="text">
+        </li>
+        <li>
+          <div class="donwload-zip">
+            <a class="btn btn-small" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
+              Download ZIP
+            </a>
+          </div>
+        </li>
+      </ul>
+    % } elsif ($display eq 'tree' || $display eq 'blob') {
+      <div class="page-path-container">
+        %= include '/include/page_path', Path => $path;
       </div>
-    </div>
-  % } elsif ($display eq 'tree' || $display eq 'blob') {
-    %= include '/include/page_path', Path => $path;
-  % }
+    % }
+  </div>
 </div>
 
 <div style="position:relative">

...	...	@@ -769,9 +769,7 @@ button.close {
769	769	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
770	770	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
771	771	border-bottom-color: #b3b3b3;
772		- -webkit-border-radius: 4px;
773		- -moz-border-radius: 4px;
774		- border-radius: 4px;
	772	+ border-radius: 4px;
775	773	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
776	774	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
777	775	*zoom: 1;
...	...	@@ -840,9 +838,7 @@ button.close {
840	838	.btn-large {
841	839	padding: 11px 19px;
842	840	font-size: 17.5px;
843		- -webkit-border-radius: 6px;
844		- -moz-border-radius: 6px;
845		- border-radius: 6px;
	841	+ border-radius: 6px;
846	842	}
847	843
848	844	.btn-large [class^="icon-"],
...	...	@@ -853,9 +849,7 @@ button.close {
853	849	.btn-small {
854	850	padding: 2px 10px;
855	851	font-size: 11.9px;
856		- -webkit-border-radius: 3px;
857		- -moz-border-radius: 3px;
858		- border-radius: 3px;
	852	+ border-radius: 3px;
859	853	}
860	854
861	855	.btn-small [class^="icon-"],
...	...	@@ -871,9 +865,7 @@ button.close {
871	865	.btn-mini {
872	866	padding: 0 6px;
873	867	font-size: 10.5px;
874		- -webkit-border-radius: 3px;
875		- -moz-border-radius: 3px;
876		- border-radius: 3px;
	868	+ border-radius: 3px;
877	869	}
878	870
879	871	/* alert */
...	...	@@ -883,9 +875,7 @@ button.close {
883	875	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
884	876	background-color: #fcf8e3;
885	877	border: 1px solid #fbeed5;
886		- -webkit-border-radius: 4px;
887		- -moz-border-radius: 4px;
888		- border-radius: 4px;
	878	+ border-radius: 4px;
889	879	}
890	880
891	881	.alert,
...	...	@@ -1075,9 +1065,7 @@ button.close {
1075	1065	padding-bottom: 8px;
1076	1066	line-height: 20px;
1077	1067	border: 1px solid transparent;
1078		- -webkit-border-radius: 4px 4px 0 0;
1079		- -moz-border-radius: 4px 4px 0 0;
1080		- border-radius: 4px 4px 0 0;
	1068	+ border-radius: 4px 4px 0 0;
1081	1069	}
1082	1070
1083	1071	.nav-tabs > li > a:hover,
...	...	@@ -1100,9 +1088,7 @@ button.close {
1100	1088	padding-bottom: 8px;
1101	1089	margin-top: 2px;
1102	1090	margin-bottom: 2px;
1103		- -webkit-border-radius: 5px;
1104		- -moz-border-radius: 5px;
1105		- border-radius: 5px;
	1091	+ border-radius: 5px;
1106	1092	}
1107	1093
1108	1094	.nav-pills > .active > a,
...	...	@@ -1126,27 +1112,17 @@ button.close {
1126	1112
1127	1113	.nav-tabs.nav-stacked > li > a {
1128	1114	border: 1px solid #ddd;
1129		- -webkit-border-radius: 0;
1130		- -moz-border-radius: 0;
1131		- border-radius: 0;
	1115	+ border-radius: 0;
1132	1116	}
1133	1117
1134	1118	.nav-tabs.nav-stacked > li:first-child > a {
1135		- -webkit-border-top-right-radius: 4px;
1136		- border-top-right-radius: 4px;
1137		- -webkit-border-top-left-radius: 4px;
1138		- border-top-left-radius: 4px;
1139		- -moz-border-radius-topright: 4px;
1140		- -moz-border-radius-topleft: 4px;
	1119	+ border-top-right-radius: 4px;
	1120	+ border-top-left-radius: 4px;
1141	1121	}
1142	1122
1143	1123	.nav-tabs.nav-stacked > li:last-child > a {
1144		- -webkit-border-bottom-right-radius: 4px;
1145		- border-bottom-right-radius: 4px;
1146		- -webkit-border-bottom-left-radius: 4px;
1147		- border-bottom-left-radius: 4px;
1148		- -moz-border-radius-bottomright: 4px;
1149		- -moz-border-radius-bottomleft: 4px;
	1124	+ border-bottom-right-radius: 4px;
	1125	+ border-bottom-left-radius: 4px;
1150	1126	}
1151	1127
1152	1128	.nav-tabs.nav-stacked > li > a:hover,
...	...	@@ -1164,15 +1140,11 @@ button.close {
1164	1140	}
1165	1141
1166	1142	.nav-tabs .dropdown-menu {
1167		- -webkit-border-radius: 0 0 6px 6px;
1168		- -moz-border-radius: 0 0 6px 6px;
1169		- border-radius: 0 0 6px 6px;
	1143	+ border-radius: 0 0 6px 6px;
1170	1144	}
1171	1145
1172	1146	.nav-pills .dropdown-menu {
1173		- -webkit-border-radius: 6px;
1174		- -moz-border-radius: 6px;
1175		- border-radius: 6px;
	1147	+ border-radius: 6px;
1176	1148	}
1177	1149
1178	1150	.nav .dropdown-toggle .caret {
...	...	@@ -1277,9 +1249,7 @@ button.close {
1277	1249	}
1278	1250
1279	1251	.tabs-below > .nav-tabs > li > a {
1280		- -webkit-border-radius: 0 0 4px 4px;
1281		- -moz-border-radius: 0 0 4px 4px;
1282		- border-radius: 0 0 4px 4px;
	1252	+ border-radius: 0 0 4px 4px;
1283	1253	}
1284	1254
1285	1255	.tabs-below > .nav-tabs > li > a:hover,
...	...	@@ -1314,9 +1284,7 @@ button.close {
1314	1284
1315	1285	.tabs-left > .nav-tabs > li > a {
1316	1286	margin-right: -1px;
1317		- -webkit-border-radius: 4px 0 0 4px;
1318		- -moz-border-radius: 4px 0 0 4px;
1319		- border-radius: 4px 0 0 4px;
	1287	+ border-radius: 4px 0 0 4px;
1320	1288	}
1321	1289
1322	1290	.tabs-left > .nav-tabs > li > a:hover,
...	...	@@ -1328,7 +1296,6 @@ button.close {
1328	1296	.tabs-left > .nav-tabs .active > a:hover,
1329	1297	.tabs-left > .nav-tabs .active > a:focus {
1330	1298	border-color: #ddd transparent #ddd #ddd;
1331		- *border-right-color: #ffffff;
1332	1299	}
1333	1300
1334	1301	.tabs-right > .nav-tabs {
...	...	@@ -1339,9 +1306,7 @@ button.close {
1339	1306
1340	1307	.tabs-right > .nav-tabs > li > a {
1341	1308	margin-left: -1px;
1342		- -webkit-border-radius: 0 4px 4px 0;
1343		- -moz-border-radius: 0 4px 4px 0;
1344		- border-radius: 0 4px 4px 0;
	1309	+ border-radius: 0 4px 4px 0;
1345	1310	}
1346	1311
1347	1312	.tabs-right > .nav-tabs > li > a:hover,
...	...	@@ -1362,9 +1327,7 @@ button.close {
1362	1327	margin: 0 0 20px;
1363	1328	list-style: none;
1364	1329	background-color: #f5f5f5;
1365		- -webkit-border-radius: 4px;
1366		- -moz-border-radius: 4px;
1367		- border-radius: 4px;
	1330	+ border-radius: 4px;
1368	1331	}
1369	1332
1370	1333	.breadcrumb > li {
...	...	@@ -1414,25 +1377,15 @@ button.close {
1414	1377	background-color: #ffffff;
1415	1378	border: 1px solid #999;
1416	1379	border: 1px solid rgba(0, 0, 0, 0.3);
1417		- *border: 1px solid #999;
1418		- -webkit-border-radius: 6px;
1419		- -moz-border-radius: 6px;
1420		- border-radius: 6px;
	1380	+ border-radius: 6px;
1421	1381	outline: none;
1422		- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
1423		- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
1424		- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
1425		- -webkit-background-clip: padding-box;
1426		- -moz-background-clip: padding-box;
1427		- background-clip: padding-box;
	1382	+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	1383	+ background-clip: padding-box;
1428	1384	}
1429	1385
1430	1386	.modal.fade {
1431	1387	top: -25%;
1432		- -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
1433		- -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
1434		- -o-transition: opacity 0.3s linear, top 0.3s ease-out;
1435		- transition: opacity 0.3s linear, top 0.3s ease-out;
	1388	+ transition: opacity 0.3s linear, top 0.3s ease-out;
1436	1389	}
1437	1390
1438	1391	.modal.fade.in {
...	...	@@ -1470,13 +1423,8 @@ button.close {
1470	1423	text-align: right;
1471	1424	background-color: #f5f5f5;
1472	1425	border-top: 1px solid #ddd;
1473		- -webkit-border-radius: 0 0 6px 6px;
1474		- -moz-border-radius: 0 0 6px 6px;
1475		- border-radius: 0 0 6px 6px;
1476		- *zoom: 1;
1477		- -webkit-box-shadow: inset 0 1px 0 #ffffff;
1478		- -moz-box-shadow: inset 0 1px 0 #ffffff;
1479		- box-shadow: inset 0 1px 0 #ffffff;
	1426	+ border-radius: 0 0 6px 6px;
	1427	+ box-shadow: inset 0 1px 0 #ffffff;
1480	1428	}
1481	1429
1482	1430	.modal-footer:before,
...	...	@@ -1600,3 +1548,40 @@ button.close {
1600	1548	width:30%;
1601	1549	color: #767676;
1602	1550	}
	1551	+
	1552	+.branch-select-container {
	1553	+ overflow:hidden;
	1554	+}
	1555	+
	1556	+.branch-select-left-container {
	1557	+ float:left;
	1558	+ width:30%;
	1559	+}
	1560	+
	1561	+.branch-select-right-container {
	1562	+ float:left;
	1563	+ width:70%;
	1564	+}
	1565	+
	1566	+.git-url-container {
	1567	+ float:right;
	1568	+ overflow:hidden;
	1569	+ display:inline-block;
	1570	+}
	1571	+
	1572	+.git-url-container li {
	1573	+ float:left;
	1574	+}
	1575	+
	1576	+.git-url-container .btn, .git-url-container .btn-small {
	1577	+ border-radius:0;
	1578	+}
	1579	+
	1580	+.page-path-container {
	1581	+ float:left;
	1582	+}
	1583	+
	1584	+.donwload-zip {
	1585	+ margin-left:5px;
	1586	+ font-weight:bold;
	1587	+}

...	...	@@ -13,6 +13,17 @@
13	13	? 'tree' : 'commits';
14	14
15	15	my $path = stash('Path');
	16	+
	17	+ my $title;
	18	+ my $rev_short;
	19	+ if (defined $rev && length $rev == 40) {
	20	+ $title = 'tree';
	21	+ $rev_short = substr($rev, 0, 10);
	22	+ }
	23	+ else {
	24	+ $title = 'branch';
	25	+ $rev_short = $rev;
	26	+ }
16	27	%>
17	28
18	29	%= javascript begin
...	...	@@ -83,43 +94,40 @@
83	94	});
84	95	% end
85	96
86		-
87		-<div class="row">
88		- <%
89		- my $title;
90		- my $rev_short;
91		- if (defined $rev && length $rev == 40) {
92		- $title = 'tree';
93		- $rev_short = substr($rev, 0, 10);
94		- }
95		- else {
96		- $title = 'branch';
97		- $rev_short = $rev;
98		- }
99		- %>
100		- <div class="span2">
101		- <button id="rev-btn" class="btn" style="font-size:13px;padding:2px 10px;margin-right:6px">
102		- <span class="muted"><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
	97	+<div class="branch-select-container">
	98	+ <div class="branch-select-left-container">
	99	+ <button id="rev-btn" class="btn btn-small">
	100	+ <span><%= $title %>:</span> <b><%= $rev_short %></b> <i class="icon-arrow-down"></i>
103	101	</button>
104	102	</div>
105		- % if ($display eq 'tree_top') {
106		- <div class="span10" style="text-algin:right;overflow:hidden">
107		- <a class="btn" style="margin-left:5px;float:right;font-size:12px;font-weight:bold;color:#333;padding:3px 6px" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
108		- Download ZIP
109		- </a>
110		- <div class="input-append" style="float:right">
111		- <div class="btn-group" data-toggle="buttons-radio">
112		- <button class="btn" id="btn_http" style="margin-left:5px;padding:3px 6px;border-top-right-radius:0px; border-bottom-right-radius:0px"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
113		- % if ($logined) {
114		- <button class="btn" id="btn_ssh" style="padding:3px 7px;border-radius:0">SSH</button>
115		- % }
116		- </div>
117		- <input id="rep_url" type="text" style="width:550px;border-radius:0;padding:3px 7px;border-top-right-radius:3px;border-bottom-right-radius:3px">
	103	+ <div class="branch-select-right-container">
	104	+ % if ($display eq 'tree_top') {
	105	+ <ul class="git-url-container">
	106	+ <li>
	107	+ <button class="btn btn-small" id="btn_http"><%= $self->req->is_secure ? 'HTTPS' : 'HTTP' %></button>
	108	+ </li>
	109	+ % if ($logined) {
	110	+ <li>
	111	+ <button class="btn btn-small" id="btn_ssh">SSH</button>
	112	+ </li>
	113	+ % }
	114	+ <li>
	115	+ <input id="rep_url" type="text">
	116	+ </li>
	117	+ <li>
	118	+ <div class="donwload-zip">
	119	+ <a class="btn btn-small" href="<%= url_for("/$user/$project/archive/$rev.zip") %>">
	120	+ Download ZIP
	121	+ </a>
	122	+ </div>
	123	+ </li>
	124	+ </ul>
	125	+ % } elsif ($display eq 'tree' \|\| $display eq 'blob') {
	126	+ <div class="page-path-container">
	127	+ %= include '/include/page_path', Path => $path;
118	128	</div>
119		- </div>
120		- % } elsif ($display eq 'tree' \|\| $display eq 'blob') {
121		- %= include '/include/page_path', Path => $path;
122		- % }
	129	+ % }
	130	+ </div>
123	131	</div>
124	132
125	133	<div style="position:relative">