From f7397f57343364f4f58064f4c278d0064d10d0f3 Mon Sep 17 00:00:00 2001 From: Gustavo Cortez Date: Fri, 24 Jan 2014 16:50:59 -0300 Subject: [PATCH] modified navbar to support small device. responsive fix for homepage --- public/css/common.css | 84 ++++++++++++++++++++------------- public/js/controllers/header.js | 2 +- public/views/header.html | 49 ++++++++++--------- public/views/index.html | 27 +++++------ 4 files changed, 91 insertions(+), 71 deletions(-) diff --git a/public/css/common.css b/public/css/common.css index cede0770..d97d6c8c 100644 --- a/public/css/common.css +++ b/public/css/common.css @@ -1,13 +1,3 @@ -.insight { - color: #FFFFFF !important; - font-family: 'Ubuntu', sans-serif; - font-size: 34px; - font-style: italic; - font-weight: 400; - line-height: 25px; - margin-right: 50px; -} - /* Sticky footer styles -------------------------------------------------- */ html, @@ -46,18 +36,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .navbar-default { background-color: #8DC429; border-bottom: 4px solid #64920F; - color: #fff; - min-height: 60px; - padding: 0; } -.navbar-form { margin: 12px 0; } - .navbar-default .navbar-nav>li>a { color: #F4FBE8; font-family: 'Ubuntu', sans-serif; - font-size: 16px; - line-height: 28px; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>li>a:hover { @@ -68,6 +51,37 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #373D42; } +.navbar-form .form-group { + display: block; +} + +@media (min-width: 768px) { + .navbar-form { + width: 35%; + } +} + +@media (max-width: 768px) { + .status { + margin: 0 14px !important; + } +} + +.insight { + font-family: 'Ubuntu', sans-serif; + font-size: 34px; + font-style: italic; + font-weight: 400; +} + +.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { + color: #fffffe; +} + +.navbar-default .navbar-brand { + color: #FFFFFF; +} + .navbar-form .form-control { background-color: #7CAD23; border-radius: 3px; @@ -82,24 +96,21 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { #search { color: #fff; font-family: 'Ubuntu', sans-serif; - font-weight: 100; } #search::-webkit-input-placeholder { color: #BCDF7E; font-family: 'Ubuntu', sans-serif; - font-size: 15px; + font-size: 14px; font-style: italic; font-weight: 100; - line-height: 20px; } #search::-moz-placeholder { color: #BCDF7E; font-family: 'Ubuntu', sans-serif; - font-size: 15px; + font-size: 14px; font-weight: 100; - line-height: 20px; } .status { @@ -107,24 +118,30 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { -webkit-border-radius: 3px; background-color: #597338; border-radius: 3px; - float: right; - font-weight: 300; - margin: 11px 0; - padding: 8px 15px; + margin: 8px 0; + padding: 8px 10px; + font-size: 12px; + color: #eee; + text-align: center; } -.status i { margin: 0 5px; } +.status .tooltip { + margin: 0; +} .col-gray { -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #F4F4F4; border-radius: 5px; - margin-top: 21px; padding: 15px; width: 267px; } +.col-gray-responsive { + width: auto; +} + .ellipsis { display: block; overflow: hidden; @@ -218,8 +235,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .progress-bar-info { background-color: #8DC429; } -#home .col-gray { width: 100%; } - /* Set the fixed height of the footer here */ #footer { background-color: #373D42; @@ -232,6 +247,11 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { #footer a.insight { font-size: 20px; text-decoration: none; + color: #fff; +} + +#footer a.insight:hover { + color: #fffffe; } #footer a.insight small { font-size: 11px; } @@ -261,8 +281,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .address { font-size: 11px; } -#search { width: 300px; } - .no_matching { background-color: #FFFFFF; border: 2px solid #64920F; @@ -323,8 +341,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .status .t { color: white; - display: inline-block; - padding:0px 5px; } .status .text-danger { background: red; } diff --git a/public/js/controllers/header.js b/public/js/controllers/header.js index 0fc60c8b..0e539fa4 100755 --- a/public/js/controllers/header.js +++ b/public/js/controllers/header.js @@ -33,5 +33,5 @@ angular.module('insight.system').controller('HeaderController', }); - $scope.isCollapsed = false; + $scope.isCollapsed = true; }); diff --git a/public/views/header.html b/public/views/header.html index ffe876fb..eea5638b 100755 --- a/public/views/header.html +++ b/public/views/header.html @@ -1,36 +1,41 @@
+ Insight
+
-
- -
+ + +
diff --git a/public/views/index.html b/public/views/index.html index f07e0f5f..21852139 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -4,16 +4,16 @@
-
-

Latest Blocks

- +
+

Latest Blocks

+
- + - + @@ -22,24 +22,24 @@ - +
Height AgeTransactionsTransactions SizeConfirmationsConfirmations
{{b.height}} {{humanSince(b.time)}}{{humanSince(b.time)}} {{b.tx.length}} {{b.size}} {{b.confirmations}}
-

About

+

About

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, sint, neque harum libero eos maiores rerum rem fuga quae architecto ea incidunt dolore optio ullam sit placeat vero perferendis beatae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, unde quidem commodi dolor asperiores ullam molestias sit a sapiente ipsa!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt tempora fugiat dolorem cupiditate perspiciatis praesentium.

-
-
-

Latest Transactions

+
+
+

Latest Transactions

- +
@@ -58,9 +58,8 @@
Hash
-
-

Other Bitcoin Links

-
    +

    Other Bitcoin Links

    +