mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
Move crumbbar to header and change visual appearance
(imported from commit 435e3b46b615f6c496be10b7d170ed3e4201787d)
This commit is contained in:
Allen Rabinovich
BIN
static/images/logo/zulipcornerlogo@2x.png
Normal file
BIN
static/images/logo/zulipcornerlogo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
@@ -36,5 +36,21 @@ exports.luminance_to_lightness = function (luminance) {
|
||||
return 116*v - 16;
|
||||
};
|
||||
|
||||
exports.getDecimalColor = function (hexcolor) {
|
||||
return {r: parseInt(hexcolor.substr(1,2), 16),
|
||||
g: parseInt(hexcolor.substr(3,2), 16),
|
||||
b: parseInt(hexcolor.substr(5,2), 16)};
|
||||
};
|
||||
|
||||
exports.getLighterColor = function (rgb, lightness) {
|
||||
return {r: (lightness * 255 + (1 - lightness) * rgb.r).toFixed(),
|
||||
g: (lightness * 255 + (1 - lightness) * rgb.g).toFixed(),
|
||||
b: (lightness * 255 + (1 - lightness) * rgb.b).toFixed()};
|
||||
};
|
||||
|
||||
exports.getHexColor = function (rgb) {
|
||||
return "#" + parseInt(rgb.r, 10).toString(16) + parseInt(rgb.g, 10).toString(16) + parseInt(rgb.b, 10).toString(16);
|
||||
};
|
||||
|
||||
return exports;
|
||||
}());
|
||||
|
||||
@@ -2,12 +2,13 @@ var tab_bar = (function () {
|
||||
|
||||
var exports = {};
|
||||
|
||||
function make_tab(title, hash, data, extra_class) {
|
||||
function make_tab(title, hash, data, extra_class, home) {
|
||||
return {active: "inactive",
|
||||
cls: extra_class || "",
|
||||
title: title,
|
||||
hash: hash,
|
||||
data: data};
|
||||
data: data,
|
||||
home: home || false };
|
||||
}
|
||||
|
||||
function make_tab_data() {
|
||||
@@ -30,7 +31,7 @@ function make_tab_data() {
|
||||
null));
|
||||
}
|
||||
} else {
|
||||
tabs.push(make_tab("Home", "#", "home", "root"));
|
||||
tabs.push(make_tab('Home', "#", "home", "root", true));
|
||||
}
|
||||
|
||||
if (narrow.active() && narrow.operators().length > 0) {
|
||||
@@ -91,14 +92,11 @@ function make_tab_data() {
|
||||
}
|
||||
|
||||
// Last tab is not a link
|
||||
tabs[tabs.length - 1].hash = false;
|
||||
|
||||
tabs[tabs.length - 1].hash = null;
|
||||
return tabs;
|
||||
}
|
||||
|
||||
exports.colorize_tab_bar = function () {
|
||||
// The stream tab, if it exists, should be the same color as that stream's chosen color
|
||||
// Likewise, the border and outline should be the stream color as well
|
||||
var stream_tab = $('#tab_list .stream');
|
||||
if (stream_tab.length > 0) {
|
||||
var stream_name = stream_tab.data('name');
|
||||
@@ -107,28 +105,29 @@ exports.colorize_tab_bar = function () {
|
||||
}
|
||||
stream_name = stream_name.toString();
|
||||
|
||||
var stream_color = stream_data.get_color(stream_name);
|
||||
var color_for_stream = stream_data.get_color(stream_name);
|
||||
var stream_dark = stream_color.get_color_class(color_for_stream);
|
||||
var stream_light = colorspace.getHexColor(colorspace.getLighterColor(colorspace.getDecimalColor(color_for_stream), 0.2));
|
||||
|
||||
if (!stream_tab.hasClass('active')) {
|
||||
stream_tab.css('border-color', stream_color);
|
||||
if (stream_tab.hasClass("stream")) {
|
||||
stream_tab.css('border-left-color', color_for_stream).css('background-color', color_for_stream);
|
||||
if (stream_tab.hasClass("inactive")) {
|
||||
stream_tab.hover (
|
||||
function () {
|
||||
$(this).css('border-left-color', stream_light).css('background-color', stream_light);
|
||||
}, function () {
|
||||
$(this).css('border-left-color', color_for_stream).css('background-color', color_for_stream);
|
||||
}
|
||||
);
|
||||
}
|
||||
stream_tab.addClass(stream_dark);
|
||||
}
|
||||
|
||||
$('#tab_list li.active').css('border-color', stream_color);
|
||||
}
|
||||
};
|
||||
|
||||
function build_tab_bar() {
|
||||
var tabs = make_tab_data();
|
||||
|
||||
// Insert the narrow spacer between each tab
|
||||
if (tabs.length > 1) {
|
||||
var idx = -1;
|
||||
while (Math.abs(idx) < tabs.length) {
|
||||
tabs.splice(idx, 0, {cls: "narrow_spacer", icon: true});
|
||||
idx -= 2;
|
||||
}
|
||||
}
|
||||
|
||||
var tab_bar = $("#tab_bar");
|
||||
tab_bar.empty();
|
||||
|
||||
|
||||
@@ -480,7 +480,6 @@ exports.resize_bottom_whitespace = function (h) {
|
||||
exports.resize_page_components = function () {
|
||||
var composebox = $("#compose");
|
||||
var floating_recipient_bar = $("#floating_recipient_bar");
|
||||
var tab_bar = $("#tab_bar");
|
||||
var tab_bar_under = $("#tab_bar_underpadding");
|
||||
var desired_width;
|
||||
if (exports.home_tab_obscured() === 'other_tab') {
|
||||
@@ -488,7 +487,6 @@ exports.resize_page_components = function () {
|
||||
} else {
|
||||
desired_width = $("#main_div").outerWidth();
|
||||
}
|
||||
tab_bar.width(desired_width);
|
||||
tab_bar_under.width(desired_width);
|
||||
|
||||
var h;
|
||||
|
||||
@@ -16,7 +16,6 @@ body {
|
||||
|
||||
/* Common background color */
|
||||
body,
|
||||
#tab_bar,
|
||||
#tab_bar_underpadding,
|
||||
.message_list,
|
||||
#compose-container {
|
||||
@@ -29,7 +28,6 @@ body,
|
||||
}
|
||||
|
||||
body.narrowed_view,
|
||||
.narrowed_view #tab_bar,
|
||||
.narrowed_view #tab_bar_underpadding,
|
||||
.narrowed_view .message_list,
|
||||
.narrowed_view #compose-container {
|
||||
@@ -70,18 +68,9 @@ a {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
background: rgb(172,197,193); /* Old browsers */
|
||||
background: -moz-linear-gradient(top, rgba(172,197,193,1) 0%, rgba(220,241,234,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(172,197,193,1)), color-stop(100%,rgba(220,241,234,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(172,197,193,1) 0%,rgba(220,241,234,1) 100%); /* W3C */
|
||||
|
||||
background-image: url(/static/images/backgrounds/lightteal.png);
|
||||
background-size: 150px 50px;
|
||||
|
||||
border-bottom: 1px solid #314945;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 1px -1px #c4c4c4;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.app {
|
||||
@@ -93,6 +82,7 @@ a {
|
||||
|
||||
.app-main,
|
||||
.header-main {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
min-width: 950px;
|
||||
margin: 0px auto;
|
||||
@@ -107,11 +97,15 @@ a {
|
||||
}
|
||||
|
||||
.column-left {
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.column-right {
|
||||
float: right;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.app-main .column-left .left-sidebar,
|
||||
@@ -127,22 +121,10 @@ a {
|
||||
}
|
||||
|
||||
.column-middle {
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-right: -200px;
|
||||
margin-left: -200px;
|
||||
}
|
||||
|
||||
.column-middle-inner {
|
||||
margin-right: 200px;
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.app-main .column-middle .column-middle-inner {
|
||||
margin-left: 400px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
textarea,
|
||||
input {
|
||||
font-family: 'Humbug', Helvetica, Arial, sans-serif;
|
||||
@@ -194,7 +176,7 @@ li,
|
||||
}
|
||||
|
||||
.header-main .logo {
|
||||
display: block;
|
||||
display: inline-block;
|
||||
font-size: 120%;
|
||||
font-weight: 900;
|
||||
text-shadow: none;
|
||||
@@ -202,16 +184,14 @@ li,
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 2px;
|
||||
line-height: 18px;
|
||||
padding-top: 10px;
|
||||
padding-left: 5px;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-main .logoimage {
|
||||
width: 45px;
|
||||
height: auto;
|
||||
}
|
||||
height: 40px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#user-settings-avatar {
|
||||
width: 100px;
|
||||
@@ -1649,24 +1629,26 @@ input.recipient_box {
|
||||
|
||||
#searchbox {
|
||||
width: 100%;
|
||||
padding-right: 30px;
|
||||
height: 40px;
|
||||
box-shadow: 1px 0px 1px -1px #c4c4c4;
|
||||
}
|
||||
|
||||
#tab_bar {
|
||||
position: fixed;
|
||||
top: 41px;
|
||||
z-index: 2;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
float:left;
|
||||
letter-spacing: normal;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#tab_list {
|
||||
list-style: none;
|
||||
height: 20px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
padding: 0px 0px 0px 15px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1676,62 +1658,117 @@ input.recipient_box {
|
||||
list-style-type: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-weight: 300;
|
||||
background-color: #f9f9f9;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
border-radius: 0px 0px 3px 3px;
|
||||
border-left: 10px solid;
|
||||
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
|
||||
border-bottom: 1px solid;
|
||||
border-right: 1px solid;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#tab_list li.narrow_spacer {
|
||||
margin: 0px;
|
||||
padding: 0px 0px 0px 1px;
|
||||
min-width: 0px;
|
||||
text-shadow: 0px 1px 0px #fff;
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
#tab_list li.inactive {
|
||||
border-top-color: rgba(0, 0, 0, 0);
|
||||
border-right-color: rgba(0, 0, 0, 0);
|
||||
border-bottom-color: rgba(0, 0, 0, 0);
|
||||
background-color: #e2e2e2;
|
||||
border-left-color: #e2e2e2;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
#tab_list li.private_message {
|
||||
border-color: #444;
|
||||
#tab_list li.private_message a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#tab_list li.inactive:after {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
content: " ";
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
margin-top: -32px;
|
||||
border-style: solid;
|
||||
border-width: 25px 0 25px 12px;
|
||||
border-color: inherit;
|
||||
z-index: 2;
|
||||
-moz-transform: scale(.9999);
|
||||
}
|
||||
|
||||
#tab_list li.inactive:before {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
content: " ";
|
||||
height: 0px;
|
||||
width: 0px;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
margin-top: -35px;
|
||||
border-style: solid;
|
||||
border-width: 28px 0 28px 14px;
|
||||
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
|
||||
z-index: 1;
|
||||
-moz-transform: scale(.9999);
|
||||
}
|
||||
|
||||
#tab_list a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-color: inherit;
|
||||
height: 15px;
|
||||
width: 100%;
|
||||
min-width: 80px;
|
||||
display: inline-block;
|
||||
padding: 3px 9px 6px 8px;
|
||||
padding: 0px 8px;
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#tab_list li.active {
|
||||
padding: 3px 9px 6px 8px;
|
||||
height: 15px;
|
||||
min-width: 80px;
|
||||
padding-left: 17px;
|
||||
padding-right: 10px;
|
||||
background-color: #e2e2e2;
|
||||
max-width: 120px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#tab_list li.active.root {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#tab_list li.private_message {
|
||||
border-top-color: rgba(0, 0, 0, 0);
|
||||
border-right-color: rgba(0, 0, 0, 0);
|
||||
border-bottom-color: rgba(0, 0, 0, 0);
|
||||
background-color: #111111;
|
||||
border-left-color: #111111;
|
||||
color: #ffffff;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
#tab_list .root {
|
||||
border-color: #7dcbff;
|
||||
border-color: #e2e2e2;
|
||||
background-color: #e2e2e2;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#tab_list li.stream a,
|
||||
#tab_list li.private_message a {
|
||||
padding-left: 17px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
#tab_list li.root a {
|
||||
color: #858585;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
|
||||
#tab_list .root a:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#tab_bar_underpadding {
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
@@ -1745,6 +1782,8 @@ input.recipient_box {
|
||||
white-space: nowrap;
|
||||
margin-left: 15px;
|
||||
margin-top: 7px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
#navbar-buttons ul.nav {
|
||||
@@ -1758,15 +1797,15 @@ input.recipient_box {
|
||||
left: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-right: 1px solid #777;
|
||||
border-right: 2px solid #afbfca;
|
||||
}
|
||||
|
||||
#streamlist-toggle-button {
|
||||
text-decoration: none;
|
||||
color: #ffffff;
|
||||
color: #858585;
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
background-color: #e4e4e4;
|
||||
width: 40px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 9px;
|
||||
@@ -1812,7 +1851,7 @@ input.recipient_box {
|
||||
}
|
||||
|
||||
.nav .dropdown-menu {
|
||||
left: -10px;
|
||||
left: -31px;
|
||||
top: 30px;
|
||||
min-width: 180px;
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
@@ -1824,11 +1863,11 @@ input.recipient_box {
|
||||
position: absolute;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
top: -5px;
|
||||
right: 5px;
|
||||
top: -7px;
|
||||
left: 5px;
|
||||
display: inline-block;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #fff;
|
||||
border-bottom: 7px solid #aaa;
|
||||
border-left: 7px solid transparent;
|
||||
content: '';
|
||||
z-index: 10;
|
||||
@@ -1838,7 +1877,7 @@ input.recipient_box {
|
||||
#navbar-buttons ul.nav .dropdown-toggle,
|
||||
#navbar-buttons ul.nav li.active .dropdown-toggle {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
color: #858585;
|
||||
text-shadow: none;
|
||||
padding-left: 0px !important;
|
||||
background-color: inherit;
|
||||
@@ -1853,12 +1892,12 @@ input.recipient_box {
|
||||
|
||||
#navbar-buttons ul.nav .dropdown-toggle,
|
||||
#navbar-buttons ul.nav li.active .dropdown-toggle:hover {
|
||||
text-shadow: 0px 0px 1px #000, 0px 0px 3px #fff;
|
||||
color: #111111;
|
||||
}
|
||||
|
||||
#navbar-buttons ul.nav li.dropdown.open .dropdown-toggle {
|
||||
background: none;
|
||||
color: #fff;
|
||||
color: #111111;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -1869,62 +1908,47 @@ input.recipient_box {
|
||||
|
||||
#searchbox .input-append .icon-vector-search {
|
||||
padding: 0px;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 0px;
|
||||
width: auto;
|
||||
float: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#search_query {
|
||||
width: 100%;
|
||||
font-size: 1em;
|
||||
line-height: 20px;
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
color: #222;
|
||||
height: 27px;
|
||||
min-height: 27px;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
margin-left: 5px;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 2px;
|
||||
padding-left: 25px;
|
||||
box-shadow: inset 2px 0px 0px 0px #afbfca;
|
||||
padding-left: 35px;
|
||||
padding-right: 20px;
|
||||
background: -moz-linear-gradient(top, rgba(14,70,67,0.2) 0%, rgba(14,83,68,0.2) 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,70,67,0.2)), color-stop(100%,rgba(14,83,68,0.2))); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* IE10+ */
|
||||
background: linear-gradient(to bottom, rgba(14,70,67,0.2) 0%,rgba(14,83,68,0.2) 100%); /* W3C */
|
||||
background: rgb(255,255,255); /* Old browsers */
|
||||
border: none;
|
||||
border-top: 1px solid #777;
|
||||
border-left: 1px solid #777;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
|
||||
border-radius: 0px;
|
||||
font-family: 'Humbug';
|
||||
font-weight: 300;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
|
||||
#search_query:focus {
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.7), 0px 0px 8px rgba(255,255,255, 0.4);
|
||||
box-shadow: inset 0px 0px 0px 2px #afbfca;
|
||||
}
|
||||
|
||||
#searchbox .search_button,
|
||||
#searchbox .search_button[disabled]:hover {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
right: 2px;
|
||||
top: 6px;
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
border: none;
|
||||
@@ -1932,6 +1956,7 @@ input.recipient_box {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
color: #ccc;
|
||||
font-size:18px;
|
||||
box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
@@ -3600,15 +3625,11 @@ div.edit_bot {
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
margin-right: 60px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#navbar-buttons {
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
#searchbox {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
#navbar-buttons.right-userlist .settings-dropdown-caret {
|
||||
@@ -3636,7 +3657,6 @@ div.edit_bot {
|
||||
}
|
||||
|
||||
.nav .dropdown-menu {
|
||||
left: -190px;
|
||||
min-width: 180px;
|
||||
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
@@ -3654,7 +3674,6 @@ div.edit_bot {
|
||||
|
||||
.column-middle-inner {
|
||||
margin-left: 200px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.app-main .column-middle {
|
||||
@@ -3727,10 +3746,6 @@ div.edit_bot {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.navbar-search {
|
||||
margin-left: 37px;
|
||||
}
|
||||
|
||||
#streamlist-toggle {
|
||||
display: block;
|
||||
}
|
||||
@@ -3750,6 +3765,10 @@ div.edit_bot {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
#searchbox {
|
||||
margin-left: 37px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
|
||||
@@ -6,9 +6,18 @@
|
||||
{{/if}}
|
||||
{{! Most tabs are links, but some are not since we don't have a narrow for them (e.g. Search) }}
|
||||
{{#if hash}}
|
||||
<a href="{{hash}}">{{title}}</a>
|
||||
{{#if home}}
|
||||
<a href="{{hash}}"><i class="icon-vector-home"></i></a>
|
||||
{{else}}
|
||||
<a href="{{hash}}">{{title}}</a>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
{{#if home}}
|
||||
<i class="icon-vector-home"></i>
|
||||
{{/if}}
|
||||
{{#unless home}}
|
||||
{{title}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
|
||||
@@ -8,8 +8,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="tab_bar" class="notdisplayed">
|
||||
</div>
|
||||
<div id="tab_bar_underpadding">
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,31 +1,7 @@
|
||||
<div class="header">
|
||||
<div class="header-main" id="top_navbar">
|
||||
<div class="column-left">
|
||||
<div>
|
||||
<a class="brand logo" href="#"><img src="/static/images/logo/zulip@2x.png" class="logoimage" alt="Zulip" content="Zulip" /></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-middle" id="navbar-middle">
|
||||
<div class="column-middle-inner">
|
||||
<div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
|
||||
<span id="streamlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="searchbox">
|
||||
<form id="searchbox_form" class="form-search navbar-search">
|
||||
<div id="search_arrows" class="input-append">
|
||||
<i class="icon-vector-search"></i>
|
||||
<input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
|
||||
autocomplete="off" />
|
||||
{# Start the button off disabled since there is no active search #}
|
||||
<button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>{# /searchbox #}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<a class="brand logo" href="#"><img src="/static/images/logo/zulipcornerlogo@2x.png" class="logoimage" alt="Zulip" content="Zulip" /></a>
|
||||
<div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<ul class="nav" role="navigation">
|
||||
<li class="dropdown actual-dropdown-menu" id="gear-menu">
|
||||
@@ -126,6 +102,30 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-middle" id="navbar-middle">
|
||||
<div class="column-middle-inner">
|
||||
<div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
|
||||
<a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
|
||||
<span id="streamlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="searchbox">
|
||||
<div id="tab_bar" class="notdisplayed">
|
||||
</div>
|
||||
<form id="searchbox_form" class="form-search navbar-search">
|
||||
<div id="search_arrows" class="input-append">
|
||||
<i class="icon-vector-search"></i>
|
||||
<input class="search-query input-block-level" id="search_query" type="text" placeholder="Search"
|
||||
autocomplete="off" />
|
||||
{# Start the button off disabled since there is no active search #}
|
||||
<button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>{# /searchbox #}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column-right">
|
||||
<div id="userlist-toggle">
|
||||
<a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
|
||||
<span id="userlist-toggle-unreadcount">0</span>
|
||||
|
||||
Reference in New Issue
Block a user