From d2436a83f5e45143efba9acb29db29f00689c6c7 Mon Sep 17 00:00:00 2001
From: Heiko Kernbach <heiko@arangodb.com>
Date: Tue, 3 Sep 2013 14:44:47 +0200
Subject: [PATCH] frontend design

---
 .../aardvark/frontend/css/collectionView.css  | 23 +++++++++++++++----
 .../aardvark/frontend/css/collectionsView.css |  4 ++++
 .../aardvark/frontend/css/dashboardView.css   |  3 ++-
 .../aardvark/frontend/css/documentView.css    |  2 +-
 .../aardvark/frontend/css/documentsView.css   |  2 +-
 js/apps/aardvark/frontend/css/layout.css      |  4 ++++
 js/apps/aardvark/frontend/css/logsView.css    |  2 +-
 js/apps/aardvark/frontend/css/modal.css       | 21 +++++++++++++----
 .../frontend/js/templates/collectionView.ejs  | 11 +++++----
 .../frontend/js/templates/collectionsView.ejs |  2 +-
 10 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/js/apps/aardvark/frontend/css/collectionView.css b/js/apps/aardvark/frontend/css/collectionView.css
index ff23c618f1..f5f3cbe06b 100644
--- a/js/apps/aardvark/frontend/css/collectionView.css
+++ b/js/apps/aardvark/frontend/css/collectionView.css
@@ -23,17 +23,21 @@
 #change-collection .glyphicon-plus-sign,
 #change-collection .glyphicon-remove-circle {
   float: right;
-  font-size: 22px;
+  font-size: 27px;
   color: #788F3D;
   position: absolute;
-  right: 30px;
-  top: 59px;
+  right: 15px;
+  top: 55px;
 }
 
 #newIndexView .glyphicon-remove-circle {
   color: #DA4F49;
 }
 
+#newIndexView table {
+  width: 100%;
+}
+
 #change-collection .glyphicon-minus-sign {
   color: #DA4F49;
   font-size: 20px;
@@ -56,8 +60,9 @@
   margin-top: 20px;
 }
 
-#change-collection #newIndexView {
-  margin-top: 20px;
+#change-collection #newIndexView,
+#change-collection #indexEditView {
+  margin-top: 0px;
 }
 
 #newIndexType {
@@ -66,8 +71,16 @@
 
 #createIndex {
   margin-top: 15px !important;
+  margin-left: 0;
 }
 
 #tab-content-collection-edit {
   max-height: 300px !important;
 }
+
+#newIndexHeader {
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  color: black;
+}
diff --git a/js/apps/aardvark/frontend/css/collectionsView.css b/js/apps/aardvark/frontend/css/collectionsView.css
index 318a8e2057..9552322774 100644
--- a/js/apps/aardvark/frontend/css/collectionsView.css
+++ b/js/apps/aardvark/frontend/css/collectionsView.css
@@ -286,3 +286,7 @@ border-top: 0;
   background-color: none;
   margin-left: -7px;
 }
+
+#arangoCollectionsContainer {
+  padding-bottom: 0 !important;
+}
diff --git a/js/apps/aardvark/frontend/css/dashboardView.css b/js/apps/aardvark/frontend/css/dashboardView.css
index f075deb52b..ec1465ec2d 100644
--- a/js/apps/aardvark/frontend/css/dashboardView.css
+++ b/js/apps/aardvark/frontend/css/dashboardView.css
@@ -11,7 +11,7 @@
 }
 */
 .dashboardContent {
-  padding-bottom: 20px !important;
+  padding-bottom: 16px !important;
   padding-top: 10px !important;
   margin-bottom: 10px !important;
 }
@@ -462,6 +462,7 @@ li:hover h6, li.hover h6 {
 
 #detailGraphPadding {
   margin-top: -11px !important;
+  margin-bottom: 5px;
 }
 
 .dashboardContent .arangoTab {
diff --git a/js/apps/aardvark/frontend/css/documentView.css b/js/apps/aardvark/frontend/css/documentView.css
index f5e3707733..bffd55b9c7 100644
--- a/js/apps/aardvark/frontend/css/documentView.css
+++ b/js/apps/aardvark/frontend/css/documentView.css
@@ -237,5 +237,5 @@ table.dataTable thead th {
 }
 
 #documentTableID.dataTable thead tr th {
-  border-bottom: 1px solid #888888;
+  border-bottom: 1px solid #C2C2C2;
 }
diff --git a/js/apps/aardvark/frontend/css/documentsView.css b/js/apps/aardvark/frontend/css/documentsView.css
index ce50e99ba4..86fda67e11 100644
--- a/js/apps/aardvark/frontend/css/documentsView.css
+++ b/js/apps/aardvark/frontend/css/documentsView.css
@@ -187,7 +187,7 @@ table.dataTable thead th {
 }
 
 #documentsTableID.dataTable thead tr {
-	border-bottom:1px solid #686766;
+  border-bottom: 1px solid #C2C2C2;
 }
 
 #documentsTableID tbody {
diff --git a/js/apps/aardvark/frontend/css/layout.css b/js/apps/aardvark/frontend/css/layout.css
index dda44d9e15..a5534e1491 100644
--- a/js/apps/aardvark/frontend/css/layout.css
+++ b/js/apps/aardvark/frontend/css/layout.css
@@ -44,6 +44,10 @@
   font-size: 16px;
 }
 
+.arangoHeader {
+  font-weight: 400;
+}
+
 .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
 	background: #788f3d;
 }
diff --git a/js/apps/aardvark/frontend/css/logsView.css b/js/apps/aardvark/frontend/css/logsView.css
index 9687f1caf1..0cc760a6ee 100644
--- a/js/apps/aardvark/frontend/css/logsView.css
+++ b/js/apps/aardvark/frontend/css/logsView.css
@@ -135,6 +135,6 @@ background-color: none !important;
 
 #logTableID thead th, #infoTableID thead th, #debugTableID thead th, #critTableID thead th, #warnTableID thead th {
   border-top: 2px solid #888888;
-  border-bottom: 1px solid #888888;
+  border-bottom: 1px solid #C2C2C2;
   background-color: #FFFFFF !important;
 }
diff --git a/js/apps/aardvark/frontend/css/modal.css b/js/apps/aardvark/frontend/css/modal.css
index c1fd72d6f4..138d84e96c 100644
--- a/js/apps/aardvark/frontend/css/modal.css
+++ b/js/apps/aardvark/frontend/css/modal.css
@@ -3,6 +3,11 @@
   text-align:left;
 }
 
+.collectionTh input, .collectionTh select, .collectionTh textarea,
+.modal-body input, .modal-body select, .modal-body textarea {
+  margin-top: 10px;
+}
+
 .collectinInfoTable {
   width: 200px !important;
   max-width: 200px !important;
@@ -34,10 +39,6 @@
   opacity: 1;
 }
 
-.modal-body table {
-  margin-left: 15px;
-}
-
 .modal-body .accordion-inner {
   margin-left: 0;
   padding-left: 0;
@@ -171,6 +172,8 @@
   background-color: #686766;
   border-bottom: 0 !important;
   padding-top: 4px;
+  padding-left: 5px;
+  padding-right: 10px;
 }
 
 .modal-header .arangoHeader {
@@ -220,10 +223,18 @@
   top: 12.1% !important;
 }
 
-.modal table tr {
+.modal table tr, .thBorderBottom {
   border-bottom: 1px solid #F7F3F2 !important;
 }
 
+.modal table tr:last-child {
+  border-bottom: 0 !important;
+}
+
 #add-collection table tr {
   border-bottom: 0 !important;
 }
+
+.modal-body input[type='checkbox'] {
+  margin-bottom: 10px;
+}
diff --git a/js/apps/aardvark/frontend/js/templates/collectionView.ejs b/js/apps/aardvark/frontend/js/templates/collectionView.ejs
index 15c609139e..2d688d473a 100644
--- a/js/apps/aardvark/frontend/js/templates/collectionView.ejs
+++ b/js/apps/aardvark/frontend/js/templates/collectionView.ejs
@@ -12,10 +12,11 @@
 
     <div class="tab-content" id="tab-content-collection-edit">
       <div class="tab-pane active" id="main">
-        <table>
+        <table id="collectionEditTable">
           <tr>
             <th class="collectionTh">Name:</th>
             <th class="collectionTh"><input type="text" id="change-collection-name" name="name" value=""/></th>
+            <th/>
           </tr>
           <tr id="collectionSizeBox" style="display:none">
             <th class="collectionTh">Journal size:</th>
@@ -45,6 +46,7 @@
             <th class="collectionTh">
               <div id="change-collection-type" class="modal-text"/>
             </th>
+            <th/>
           </tr>
 
           <tr>
@@ -73,11 +75,11 @@
 
         <div id="newIndexView" style="display:none">
           <span class="glyphicon glyphicon-remove-circle" data-original-title="Abort"></span>
-          <a class="arangoHeader">Add Index:</a>
+          <a id="newIndexHeader" class="arangoHeader">Add Index:</a>
           <table>
             <tr>
-              <th class="collectionTh">Type:</th>
-              <th>
+              <th class="collectionTh thBorderBottom">Type:</th>
+              <th class="thBorderBottom">
                 <select id="newIndexType">
                   <option value="Cap">Cap Constraints</option>
                   <option value="Geo">Geo Index</option>
@@ -86,6 +88,7 @@
                   <option value="Skiplist">Skip-List Index</option>
                 </select>
               </th>
+              <th class="thBorderBottom" style="width: 18px"/>
             </tr>
           </table>
 
diff --git a/js/apps/aardvark/frontend/js/templates/collectionsView.ejs b/js/apps/aardvark/frontend/js/templates/collectionsView.ejs
index 450f82ae92..a700a65e12 100644
--- a/js/apps/aardvark/frontend/js/templates/collectionsView.ejs
+++ b/js/apps/aardvark/frontend/js/templates/collectionsView.ejs
@@ -89,7 +89,7 @@
 
 
 </ul>
-<div class="thumbnails">
+<div class="thumbnails" id="arangoCollectionsContainer">
     <div class="containerdivNewLine"/>
     <div id="collectionsThumbnailsIn"/>
 </div>