#5 Add more padding to the main container to have more space when the…

… navbar wraps on small resolutions
TheHive-Project · Nov 14, 2016 · 7938d85 · 7938d85
1 parent 0193057
commit 7938d85
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 51 deletions.
diff --git a/ui/app/styles/main.css b/ui/app/styles/main.css
@@ -20,14 +20,22 @@ body {
 .navbar-brand>img {
     display: inline;
 }
+.main-navbar .nav>li>a {
+    padding: 15px 8px;
+}
+.main-navbar .input-group-addon {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
 .clickable {
     cursor: pointer;
 }
 .not-clickable {
     cursor: default;
 }
 .container-main {
-    padding-top: 70px;
+    padding-top: 100px;
 }
 .marked > table,
 .markdown > table {
@@ -362,29 +370,3 @@ tr.task-row .tast-status {
         transform: rotate(360deg);
     }
 }
-
-/* make sidebar nav vertical */
-
-@media (min-width: 384px) {
-    .sidebar-nav {
-        width: 250px;
-    }
-    .sidebar-nav .navbar .navbar-collapse {
-        padding: 0;
-        max-height: none;
-    }
-    .sidebar-nav .navbar ul {
-        float: none;
-    }
-    .sidebar-nav .navbar ul:not {
-        display: block;
-    }
-    .sidebar-nav .navbar li {
-        float: none;
-        display: block;
-    }
-    .sidebar-nav .navbar li a {
-        padding-top: 12px;
-        padding-bottom: 12px;
-    }
-}
diff --git a/ui/app/views/app.html b/ui/app/views/app.html
@@ -1,5 +1,5 @@
 <div>
-    <nav class="navbar navbar-inverse navbar-fixed-top" ng-if="!hideStatusBar" ng-show="currentUser.id" role="navigation">
+    <nav class="navbar navbar-inverse navbar-fixed-top main-navbar" ng-if="!hideStatusBar" ng-show="currentUser.id" role="navigation">
         <div class="container-fluid">
             <div class="navbar-header">
                 <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#th-navbar-collapse" data-toggle="collapse" type="button">
@@ -70,33 +70,42 @@
 
                     <li>
                         <form ng-submit="search(querystring)" style="margin-top : 10px">
-                            <div class="form-group has-feedback has-feedback-right">
+                            <div class="input-group" style="width: 220px">
+                                <span class="input-group-addon">
+                                    <i class="glyphicon glyphicon-search"></i>
+                                </span>
                                 <input autofocus="autofocus" class="input-sm form-control" ng-model="querystring" placeholder="Case, user, URL, hash, IP, domain ..." style="width : 200px" tooltype="Enter your query string" type="text"></input>
-                                <i class="form-control-feedback glyphicon glyphicon-search" style="top : 0px"></i>
+                                <div class="input-group-btn">
+                                    <div class="btn-group dropdown" dropdown>
+                                        <a class="btn btn-sm btn-default dropdown-toggle" dropdown-toggle href>
+                                            <span class="caret"></span>
+                                        </a>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <li class="dropdown-header" role="presentation">Custom search</li>
+                                            <li>
+                                                <a ng-click="querystring = 'status:Resolved' ; search(querystring);">Closed cases</a>
+                                            </li>
+                                            <li>
+                                                <a ng-click="querystring = 'caseId:'">By case number</a>
+                                            </li>
+                                            <li>
+                                                <a ng-click="querystring = '_type:case_artifact '">Observables</a>
+                                            </li>
+                                            <li class="divider"></li>
+                                            <li>
+                                                <a ng-click="querystring = '_type:case AND (_missing_:endDate) AND (startDate:{* TO now-1M})' ; search(querystring);">Cold cases</a>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
                             </div>
+
+                            <!-- <div class="form-group has-feedback has-feedback-right">
+                                <input autofocus="autofocus" class="input-sm form-control" ng-model="querystring" placeholder="Case, user, URL, hash, IP, domain ..." style="width : 200px" tooltype="Enter your query string" type="text"></input>
+                                <i class="form-control-feedback glyphicon glyphicon-search" style="top : 0px"></i>
+                            </div> -->
                         </form>
                     </li>
-                    <li class="dropdown" dropdown>
-                        <a class="dropdown-toggle" dropdown-toggle href>
-                            <span class="caret"></span>
-                        </a>
-                        <ul class="dropdown-menu" role="menu">
-                            <li class="dropdown-header" role="presentation">Custom search</li>
-                            <li>
-                                <a ng-click="querystring = 'status:Resolved' ; search(querystring);">Closed cases</a>
-                            </li>
-                            <li>
-                                <a ng-click="querystring = 'caseId:'">By case number</a>
-                            </li>
-                            <li>
-                                <a ng-click="querystring = '_type:case_artifact '">Observables</a>
-                            </li>
-                            <li class="divider"></li>
-                            <li>
-                                <a ng-click="querystring = '_type:case AND (_missing_:endDate) AND (startDate:{* TO now-1M})' ; search(querystring);">Cold cases</a>
-                            </li>
-                        </ul>
-                    </li>
                     <li class="dropdown" dropdown ng-if="isAdmin(currentUser)">
                         <a class="dropdown-toggle" dropdown-toggle href>
                             <i class="fa fa-cog"></i>