diff --git a/clientapp/templates.js b/clientapp/templates.js
index a571846..c862cb9 100644
--- a/clientapp/templates.js
+++ b/clientapp/templates.js
@@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) {
var buf = [];
with (locals || {}) {
- buf.push('
');
+ buf.push('');
}
return buf.join("");
};
diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade
index c0a3397..12d2f61 100644
--- a/clientapp/templates/body.jade
+++ b/clientapp/templates/body.jade
@@ -6,6 +6,11 @@ body
aside#menu
section#organization
span#orga_name
+ a(href="/", class="button secondary settings")
+ svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
+ g(transform='scale(0.4)')
+ path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
+ path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
section#bookmarks
h1 Rooms
nav
@@ -21,16 +26,11 @@ body
| You're currently
strong disconnected
button.primary.reconnect Reconnect
- a(href="/", class="button secondary settings")
- svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 25 25", height="25", width="25")
- g(transform='scale(0.4)')
- path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
- path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
- | Settings
- main#pages
- #footer
#me
+ img.avatar
div
- img.avatar
- span.name
- span.status(contenteditable="true", spellcheck="false")
+ span.name
+ span.status(contenteditable="true", spellcheck="false")
+ main#pages
+
+
diff --git a/public/css/_variables.styl b/public/css/_variables.styl
index 2c4f9c9..f0a76ca 100644
--- a/public/css/_variables.styl
+++ b/public/css/_variables.styl
@@ -91,10 +91,10 @@ $sidebarRequestBorder = $sidebarHover
$sidebarStatusText = $sidebarNames
$sidebarStatusBorder = $sidebarInputBorder
-$settingsBg = #fff
-$settingsText = $sidebarBg
-$settingsHoverBg = $sidebarBg
-$settingsHoverText = #fff
+$settingsBg = $sidebarBg
+$settingsText = #fff
+$settingsHoverBg = #fff
+$settingsHoverText = $sidebarSelectionBg
// Font families
diff --git a/public/css/otalk.css b/public/css/otalk.css
index a367ce0..c6ed131 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -534,9 +534,7 @@ button.secondary:hover:not(:disabled) {
}
#menu #organization {
width: 220px;
- height: 53px;
- background-color: #1a233f;
- border-bottom: 2px solid #121a33;
+ height: 42px;
margin-bottom: 10px;
}
#menu #organization #orga_name {
@@ -547,6 +545,26 @@ button.secondary:hover:not(:disabled) {
vertical-align: middle;
margin-left: 20px;
}
+#menu #organization .settings {
+ position: relative;
+ height: 30px;
+ left: 0px;
+ background-color: #3d486b;
+ color: #fff;
+ transition: none;
+ border: 0;
+}
+#menu #organization .settings svg {
+ position: absolute;
+ top: 55%;
+ left: 3px;
+ margin: 0px;
+ margin-top: -13px;
+ fill: #fff;
+}
+#menu #organization .settings:hover svg {
+ fill: #94b021;
+}
#menu .main {
margin: 10px 0 0 0;
text-align: center;
@@ -630,8 +648,8 @@ button.secondary:hover:not(:disabled) {
#bookmarks li {
list-style-type: none;
padding: 4px 10px;
- margin: 0px;
- border-radius: 0px 0.25rem 0.25rem 0px;
+ margin: 0px 0px 0px 10px;
+ border-radius: 0.25rem;
position: relative;
height: 25px;
font-size: 14px;
@@ -799,7 +817,7 @@ button.secondary:hover:not(:disabled) {
height: 17px;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
position: absolute;
- left: 32px;
+ left: 22px;
max-width: 140px;
}
#roster li .unread,
@@ -868,10 +886,10 @@ button.secondary:hover:not(:disabled) {
display: inline-block;
}
#roster .wrap {
- padding-left: 10px;
+ padding-left: 0px;
}
#bookmarks .wrap {
- padding-left: 24px;
+ padding-left: 14px;
}
@-moz-keyframes pulsate {
0% {
@@ -938,7 +956,7 @@ button.secondary:hover:not(:disabled) {
top: 0px;
right: 0px;
left: 220px;
- right: 90px;
+ right: 200px;
height: 55px;
z-index: 101;
}
@@ -1752,7 +1770,7 @@ rgba(0,0,0,0.7)
margin: 0;
}
#topbar.connected {
- background-color: transparent;
+ background-color: #f7f7f7;
z-index: 100;
}
#topbar.connected #connectionStatus {
@@ -1793,69 +1811,37 @@ rgba(0,0,0,0.7)
margin: 3px 0;
cursor: pointer;
}
-#topbar .settings {
+#topbar #me {
+ display: none;
position: fixed;
- padding-left: 30px;
- line-height: 30px;
- height: 30px;
- right: 5px;
- top: 12px;
- background-color: #fff;
- color: #3d486b;
- transition: none;
- border: 0;
+ right: 0;
+ padding: 8px 5px 5px 5px;
+ width: 175px;
}
-#topbar .settings svg {
- position: absolute;
- top: 50%;
- left: 5px;
- margin: 0px;
- margin-top: -13px;
- fill: #3d486b;
-}
-#topbar .settings:hover {
- background-color: #3d486b;
- color: #fff;
-}
-#topbar .settings:hover svg {
- fill: #fff;
-}
-#footer {
- bottom: 0px;
- left: 0px;
- background-color: #1a233f;
- width: 100%;
- height: 4rem;
- position: fixed;
- z-index: 301;
-}
-#footer #me {
- border-top: 2px solid #121a33;
- padding: 7px 0px 9px 8px;
-}
-#footer .avatar {
- float: left;
- width: 48px;
- height: 48px;
+#topbar .avatar {
+ float: right;
+ width: 35px;
+ height: 35px;
background: rgba(0,0,0,0);
background-color: transparent;
vertical-align: middle;
- margin: 0px 0.5rem 0px 0px;
+ margin: 3px 0.5rem 0px 0px;
}
-#footer .name,
-#footer .status {
+#topbar .name,
+#topbar .status {
display: block;
- width: 145px;
+ width: 120px;
overflow: hidden;
text-overflow: ellipsis;
+ text-align: right;
}
-#footer .name {
- color: #fff;
+#topbar .name {
+ color: #555459;
font-size: 17px;
font-weight: 900;
}
-#footer .status {
- color: #c1dcec;
+#topbar .status {
+ color: #9e9ea6;
font-weight: normal;
font-size: 14px;
line-height: 14px;
@@ -1873,16 +1859,19 @@ rgba(0,0,0,0.7)
-ms-user-select: initial;
user-select: initial;
}
-#footer .status:focus {
+#topbar .status:focus {
border-radius: 0.25rem;
- border: 1px solid #626f9c;
+ border: 1px solid #9e9ea6;
outline: none;
padding: 2px;
}
-#footer .status:empty:before {
+#topbar .status:empty:before {
content: 'Update your status';
}
-#footer .status:before,
-#footer .status:empty:focus:before {
+#topbar .status:before,
+#topbar .status:empty:focus:before {
content: '';
}
+#topbar.connected #me {
+ display: block;
+}
diff --git a/public/css/otalk.styl b/public/css/otalk.styl
index f81b193..b4dab30 100644
--- a/public/css/otalk.styl
+++ b/public/css/otalk.styl
@@ -13,4 +13,4 @@
@import 'pages/aux'
@import 'pages/callbar'
@import 'pages/header'
-@import 'pages/footer'
+@import 'pages/me'
diff --git a/public/css/pages/chat.styl b/public/css/pages/chat.styl
index 804e25e..5672238 100644
--- a/public/css/pages/chat.styl
+++ b/public/css/pages/chat.styl
@@ -18,7 +18,7 @@
top: 0px
right: 0px
left: 220px
- right: 90px
+ right: 200px
height: 55px
z-index: 101
diff --git a/public/css/pages/header.styl b/public/css/pages/header.styl
index be4dd06..46cdde4 100644
--- a/public/css/pages/header.styl
+++ b/public/css/pages/header.styl
@@ -2,7 +2,7 @@
@import '../_mixins'
#topbar.connected
- background-color: transparent
+ background-color: rgb(247, 247, 247)
z-index: 100
#connectionStatus
display: none
@@ -36,30 +36,3 @@
height: 30px
margin: 3px 0
cursor: pointer
-
- .settings
- position: fixed
- padding-left: 30px
- line-height: 30px
- height: 30px
- right: 5px
- top: 12px
- background-color: $settingsBg
- color: $settingsText
- transition: none
- border: 0
-
- svg
- position: absolute
- top: 50%
- left: 5px
- margin: 0px
- margin-top: -13px
- fill: $settingsText
-
- &:hover
- background-color: $settingsHoverBg
- color: $settingsHoverText
-
- svg
- fill: #fff
diff --git a/public/css/pages/footer.styl b/public/css/pages/me.styl
similarity index 66%
rename from public/css/pages/footer.styl
rename to public/css/pages/me.styl
index c301a63..82809fb 100644
--- a/public/css/pages/footer.styl
+++ b/public/css/pages/me.styl
@@ -1,42 +1,39 @@
@import '../_variables'
@import '../_mixins'
-#footer
- bottom: 0px
- left: 0px
- background-color: $sidebarTopAndBottomBg
- width:100%
- height: 4rem;
- position: fixed
- z-index: 301
+#topbar
#me
- border-top: 2px solid $sidebarBorder
- padding: 7px 0px 9px 8px;
+ display: none
+ position: fixed
+ right: 0
+ padding: 8px 5px 5px 5px
+ width: 175px
.avatar
- float:left
- width: 48px
- height: 48px
+ float:right
+ width: 35px
+ height: 35px
background: rgba(0,0,0,0)
background-color: transparent
vertical-align: middle
- margin: 0px 0.5rem 0px 0px;
+ margin: 3px 0.5rem 0px 0px;
.name,
.status
display: block
- width: 145px
+ width: 120px
overflow: hidden
text-overflow: ellipsis
+ text-align: right
.name
- color: #fff
+ color: $gray-dark
font-size: $font-size-large
font-weight: $font-weight-bolder
.status
- color: $sidebarStatusText
+ color: $gray
font-weight: normal
font-size: $font-size-base
line-height: $font-size-base
@@ -51,7 +48,7 @@
&:focus
border-radius: 0.25rem
- border: 1px solid $sidebarStatusBorder
+ border: 1px solid $gray
outline: none
padding: 2px
@@ -61,3 +58,7 @@
&:before,
&:empty:focus:before
content: ''
+
+ &.connected
+ #me
+ display: block
diff --git a/public/css/pages/roster.styl b/public/css/pages/roster.styl
index c2771d9..e1c7bd4 100644
--- a/public/css/pages/roster.styl
+++ b/public/css/pages/roster.styl
@@ -18,9 +18,7 @@
#organization
width: 220px
- height: 53px
- background-color: $sidebarTopAndBottomBg
- border-bottom: 2px solid $sidebarBorder
+ height: 42px
margin-bottom: 10px
#orga_name
@@ -31,6 +29,27 @@
vertical-align: middle
margin-left: 20px
+ .settings
+ position: relative
+ height: 30px
+ left: 0px
+ background-color: $settingsBg
+ color: $settingsText
+ transition: none
+ border: 0
+
+ svg
+ position: absolute
+ top: 55%
+ left: 3px
+ margin: 0px
+ margin-top: -13px
+ fill: $settingsText
+
+ &:hover
+ svg
+ fill: $settingsHoverText
+
.main
margin: 10px 0 0 0
text-align: center
@@ -104,8 +123,8 @@
li
list-style-type: none
padding: 4px 10px
- margin: 0px
- border-radius: 0px 0.25rem 0.25rem 0px;
+ margin: 0px 0px 0px 10px
+ border-radius: 0.25rem
position: relative
height: 25px
font-size: $font-size-base
@@ -230,7 +249,7 @@
height: $font-size-base+3
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
position: absolute
- left: 32px
+ left: 22px
max-width: 140px
.unread
@@ -285,11 +304,11 @@
#roster
.wrap
- padding-left: 10px
+ padding-left: 0px
#bookmarks
.wrap
- padding-left: 24px
+ padding-left: 14px
@keyframes pulsate
0%