Initial test with searchbar styling

5monkeys · Apr 3, 2019 · 86852bf · 86852bf
1 parent d989957
commit 86852bf
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 45 deletions.
diff --git a/bananas/static/admin/bananas/css/bananas.css b/bananas/static/admin/bananas/css/bananas.css
@@ -711,7 +711,22 @@ body.popup #changelist #toolbar {
   margin-bottom: 0;
 }
 body:not(.popup) #changelist #toolbar {
-  display: none;
+  /*display: none;*/
+}
+#changelist #toolbar {
+  padding: 15px;
+  margin-bottom: 0;
+  border: 0;
+  background: #f6f6f6;
+}
+
+#changelist #toolbar form {
+  /*float: left;*/
+  width: 50%;
+}
+
+#changelist thead th {
+  border-top: 1px solid #f6f6f6;
 }
 
 .change-list .filtered {
@@ -726,16 +741,17 @@ body:not(.popup) #changelist #toolbar {
 }
 
 .nav-global #toolbar form {
-  display: block;
+  /*display: block;*/
+  display: none;
 }
 
 .change-list #content {
   padding: 0;
 }
 
 .change-list #content-main {
-  padding-top: 45px /* fallback */;
-  padding-top: var(--searchbar-height);
+  /*padding-top: 45px; [> fallback <]*/
+  /*padding-top: var(--searchbar-height);*/
 }
 
 #changelist #changelist-filter {
@@ -748,16 +764,23 @@ body:not(.popup) #changelist #toolbar {
 }
 
 #changelist .actions {
+  padding: 15px;
+  background: transparent;
+  z-index: 5000;
+  color: #222;
   position: absolute;
-  top: calc(-1 * 45px) /* fallback */;
-  top: calc(-1 * var(--searchbar-height));
-  left: 0;
+  top: 0;
+  /*float: right;*/
   right: 0;
-  background: #417690 /* fallback */;
-  background: var(--theme-color);
-  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.33)) /* fallback */;
-  background-image: var(--bg-lighten-33);
-  color: #fff;
+  /*top: calc(-1 * 45px); [> fallback <];*/
+  /*top: calc(-1 * (var(--searchbar-height) + var(--topbar-height)));*/
+  /*left: 0;*/
+  /*right: 0;*/
+  /*background: #417690 [> fallback <];*/
+  /*background: var(--theme-color);*/
+  /*background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.33)) [> fallback <];*/
+  /*background-image: var(--bg-lighten-33);*/
+  /*color: #fff;*/
   line-height: 25px;
   height: 25px;
 }
@@ -774,27 +797,53 @@ body:not(.popup) #changelist #toolbar {
 
 #changelist .actions label {
   vertical-align: top;
+  float: left;
+  font-size: 0; /* Hide "Action:" */
 }
 
-#changelist .actions select {
+#changelist .actions label select {
   min-width: 300px;
-  height: 25px;
+  /*height: 25px;*/
   background: #fff;
-  border-color: #fff;
+  /*border-color: #fff;*/
+
+  -webkit-appearance: none;
+  border-radius: 0;
+  border: 1px solid #ddd;
+  border-right: 0;
+  box-sizing: border-box;
+  height: var(--searchbar-height);
+  /*line-height: 45px [> fallback <];*/
+  /*line-height: var(--searchbar-height);*/
+  margin: 0;
+  padding: 5px 5px 5px 15px;
 }
 
 #changelist .actions .button {
+  border-radius: 0;
   min-width: 48px;
-  height: 25px;
-  margin: 0 0 0 10px;
+  /*height: 25px;*/
+  height: 45px;
+  /*margin: 0 0 0 10px;*/
+  margin: 0;
   vertical-align: top;
-  background: #417690 /* fallback */;
-  background: var(--theme-color);
+  /*background: #417690 [> fallback <];*/
+  /*background: var(--theme-color);*/
+  background: #ddd;
   box-shadow: none;
   border: 0;
   color: #fff;
 }
 
+#changelist .actions span.action-counter {
+  display: inline;
+  position: absolute;
+  right: 80px;
+  line-height: 45px;
+  color: #999;
+  font-style: italic;
+}
+
 #changelist .actions span.all,
 #changelist .actions span.action-counter,
 #changelist .actions span.clear,

diff --git a/bananas/static/admin/bananas/css/banansive.css b/bananas/static/admin/bananas/css/banansive.css
@@ -9,9 +9,29 @@ body:not(.popup) #header #object-tools {
 #changelist-search {
   height: 45px /* fallback */;
   height: var(--searchbar-height);
-  background: #417690 /* fallback */;
-  background: var(--theme-color);
-  display: inline;
+  /*background: #417690 [> fallback <];*/
+  /*background: var(--theme-color);*/
+}
+
+#changelist-search > div {
+  overflow: hidden;
+  display: flex;
+}
+
+#changelist-search .quiet {
+  clear: left;
+  float: right;
+  text-align: right;
+  margin: 0;
+  line-height: 20px;
+  text-align: right;
+  color: #fff;
+  opacity: 0.666;
+  position: relative;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.333);
+  padding: 2px 10px 2px 20px;
+  border-radius: 0 0 0 30px;
 }
 
 #changelist-search label {
@@ -22,14 +42,21 @@ body:not(.popup) #header #object-tools {
 #changelist-search #searchbar {
   float: left;
   width: 185px;
-  height: 35px;
-  line-height: 35px;
+  height: 45px /* fallback */;
+  height: var(--searchbar-height);
+  line-height: 45px /* fallback */;
+  line-height: var(--searchbar-height);
   margin: 0;
   padding: 5px 5px 5px 15px;
   border: 0;
   border-radius: 0;
   outline-width: 0;
+  flex-grow: 1;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  border-right: 0;
 }
+
 #searchbar::-webkit-input-placeholder {
   font-style: italic;
   color: #999;
@@ -60,26 +87,6 @@ body:not(.popup) #header #object-tools {
   background-image: url(/static/admin/bananas/img/search.svg), linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35));
 }
 
-#changelist-search > div {
-  overflow: hidden;
-}
-
-#changelist-search .quiet {
-  clear: left;
-  float: right;
-  text-align: right;
-  margin: 0;
-  line-height: 20px;
-  text-align: right;
-  color: #fff;
-  opacity: 0.666;
-  position: relative;
-  z-index: 1;
-  background-color: rgba(0, 0, 0, 0.333);
-  padding: 2px 10px 2px 20px;
-  border-radius: 0 0 0 30px;
-}
-
 #changelist-form .results {
   clear: both;
 }

diff --git a/bananas/static/admin/bananas/js/bananas.js b/bananas/static/admin/bananas/js/bananas.js
@@ -46,7 +46,7 @@
 
     var $filteredNavItem = $('.filtered nav a.is-selected')[0];
     if ($filteredNavItem) {
-      document.location.hash = $filteredNavItem.name;
+      //document.location.hash = $filteredNavItem.name;
     }
   }