From d01f4b37a1b6f4efa9ab76ad6919b53290617dcc Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Fri, 12 Sep 2014 18:03:16 -0700 Subject: [PATCH] Added server password to 'Connect' window --- client/css/bootstrap.css | 117 ++------------------------------------- client/css/style.css | 75 ++++++++++++++++--------- client/index.html | 77 ++++++++++++++++---------- package.json | 2 +- 4 files changed, 103 insertions(+), 168 deletions(-) diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css index e9b1d71c..62db2037 100644 --- a/client/css/bootstrap.css +++ b/client/css/bootstrap.css @@ -835,7 +835,7 @@ address { .col-xs-offset-0 { margin-left: 0%; } -@media (min-width: 768px) { +@media (min-width: 480px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } @@ -1199,7 +1199,7 @@ tbody.collapse.in { .visible-lg-inline-block { display: none !important; } -@media (max-width: 767px) { +@media (max-width: 479px) { .visible-xs { display: block !important; } @@ -1214,131 +1214,26 @@ tbody.collapse.in { display: table-cell !important; } } -@media (max-width: 767px) { +@media (max-width: 479px) { .visible-xs-block { display: block !important; } } -@media (max-width: 767px) { +@media (max-width: 479px) { .visible-xs-inline { display: inline !important; } } -@media (max-width: 767px) { +@media (max-width: 479px) { .visible-xs-inline-block { display: inline-block !important; } } -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm { - display: block !important; - } - table.visible-sm { - display: table; - } - tr.visible-sm { - display: table-row !important; - } - th.visible-sm, - td.visible-sm { - display: table-cell !important; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-block { - display: block !important; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline { - display: inline !important; - } -} -@media (min-width: 768px) and (max-width: 991px) { - .visible-sm-inline-block { - display: inline-block !important; - } -} -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md { - display: block !important; - } - table.visible-md { - display: table; - } - tr.visible-md { - display: table-row !important; - } - th.visible-md, - td.visible-md { - display: table-cell !important; - } -} -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-block { - display: block !important; - } -} -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline { - display: inline !important; - } -} -@media (min-width: 992px) and (max-width: 1199px) { - .visible-md-inline-block { - display: inline-block !important; - } -} -@media (min-width: 1200px) { - .visible-lg { - display: block !important; - } - table.visible-lg { - display: table; - } - tr.visible-lg { - display: table-row !important; - } - th.visible-lg, - td.visible-lg { - display: table-cell !important; - } -} -@media (min-width: 1200px) { - .visible-lg-block { - display: block !important; - } -} -@media (min-width: 1200px) { - .visible-lg-inline { - display: inline !important; - } -} -@media (min-width: 1200px) { - .visible-lg-inline-block { - display: inline-block !important; - } -} -@media (max-width: 767px) { +@media (max-width: 479px) { .hidden-xs { display: none !important; } } -@media (min-width: 768px) and (max-width: 991px) { - .hidden-sm { - display: none !important; - } -} -@media (min-width: 992px) and (max-width: 1199px) { - .hidden-md { - display: none !important; - } -} -@media (min-width: 1200px) { - .hidden-lg { - display: none !important; - } -} .visible-print { display: none !important; } diff --git a/client/css/style.css b/client/css/style.css index 9320a9b3..530d40aa 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,4 +1,5 @@ @import url('//fonts.googleapis.com/css?family=Lato:400,700'); +@import url('//fonts.googleapis.com/css?family=Open+Sans:300,400,700'); @font-face { font-family: "FontAwesome"; src: url("fonts/fontawesome.svg") format("svg"), url("fonts/fontawesome.woff") format("woff"); @@ -75,7 +76,7 @@ button { } .container { margin: 80px auto; - max-width: 420px; + max-width: 480px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; @@ -316,12 +317,16 @@ button { top: 0px; width: 100%; } +#windows label { + font-size: 14px; +} #windows .input { border: 1px solid #cdd3da; border-radius: 2px; color: #222; font-size: 14px; margin: 2px 0; + margin-bottom: 10px; outline: 0; padding: 8px 10px; transition: border-color .2s; @@ -354,6 +359,7 @@ button { top: 0; } #windows .window { + bottom: -44px !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } @@ -370,37 +376,39 @@ button { #windows .active { display: block; } -#windows .window .lt { - margin-top: 4px; - margin-left: 8px; -} -#chat { - bottom: 0; - font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; - left: 0; - position: absolute; - right: 0; - top: 0; -} -#chat button:hover { - opacity: .6; -} -#chat .header { +#windows .header { border-bottom: 1px solid #e7e7e7; line-height: 50px; height: 48px; padding: 0 20px; } -#chat .header .title { +#windows .header .title { font: 16px Lato; } -#chat .header .topic { +#windows .header .topic { /* Hidden for now */ display: none; color: #777; margin-left: 8px; text-transform: capitalize; } +#windows .window .header { + display: none; +} +#chat { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} +#chat, +#windows .header { + font: 13px Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; +} +#chat button:hover { + opacity: .6; +} #chat .chat, #chat .sidebar { top: 58px; @@ -591,22 +599,25 @@ button { color: #e74c3c; margin-top: 1em; } +#sign-in .container { + margin-top: 120px; +} #connect label { display: block; - margin-top: 10px; + margin-top: 11px; } #connect .title { margin-bottom: 10px; } #connect .port:before { content: ":"; - margin: 28px 0 0 -17px; + margin: 9px 0 0 -17px; position: absolute; } #connect .tls { float: left; font-size: 14px; - padding: 10px 2px; + margin-top: 6px; } #connect .tls input { float: left; @@ -614,7 +625,7 @@ button { } #connect .btn { float: left; - margin-top: 25px; + margin-top: 30px; } #settings .title { margin-bottom: -10px; @@ -655,7 +666,7 @@ button { left: 0; position: absolute; right: 0px; - z-index: 1; + /*z-index: 1;*/ } #form input { border: 1px solid #cfdae1; @@ -682,6 +693,9 @@ button { } @media (max-width: 768px) { + .container { + margin-top: 60px !important; + } #viewport.lt { -webkit-transform: translate3d(220px, 0, 0); transform: translate3d(220px, 0, 0); @@ -707,6 +721,9 @@ button { #viewport .channel .rt { display: block; } + #windows .window .header { + display: block; + } #chat .sidebar { right: -180px; transition: all .4s; @@ -720,9 +737,15 @@ button { } } -@media (max-width: 480px) { +@media (max-width: 479px) { .container { - margin: 40px 0; + margin: 40px 0 !important; + } + #connect .tls { + margin: 20px 0; + } + #windows .input { + margin-bottom: 2px; } #chat .messages { display: block; diff --git a/client/index.html b/client/index.html index f7db4ef3..ec128d9e 100644 --- a/client/index.html +++ b/client/index.html @@ -35,7 +35,9 @@
- +
+ +
@@ -65,53 +67,66 @@
- +
+ +
-
+

Connect

-
-