← Back to team overview

yellow team mailing list archive

Style charm results panel. (issue 6817101)

 

Reviewers: mp+133325_code.launchpad.net,

Message:
Please take a look.

Description:
Style charm results panel.

Does not include filter dropdown as that design is not finalized.

https://code.launchpad.net/~bac/juju-gui/charm-search-style/+merge/133325

(do not edit description out of merge proposal)


Please review this at https://codereview.appspot.com/6817101/

Affected files:
   A [revision details]
   M lib/views/stylesheet.less


Index: [revision details]
=== added file '[revision details]'
--- [revision details]	2012-01-01 00:00:00 +0000
+++ [revision details]	2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: gary.poster@xxxxxxxxxxxxx-20121107131831-9jtz62d6vw1qnyfu
+New revision: bac@xxxxxxxxxxxxx-20121107193234-scato1liflsjlquc

Index: lib/views/stylesheet.less
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less	2012-11-07 13:18:31 +0000
+++ lib/views/stylesheet.less	2012-11-07 19:32:34 +0000
@@ -4,9 +4,10 @@
  /* Define common colors. */
  @label-color: #292929;
  @text-entry-color: #6d6e70;
+@charm-panel-orange: #dd4814;
  @charm-panel-configure-title-color: #eee7d5;
  @charm-panel-configure-name-color: #8f8f88;
-@charm-panel-deploy-button-color: #dd4814;
+@charm-panel-deploy-button-color: @charm-panel-orange;
  @charm-panel-deploy-button-bottom-gradient: #e65c19;
  @charm-panel-deploy-button-shadow: #8a2d0c;
  @charm-panel-cancel-button-color: #b8b8b8;
@@ -36,11 +37,11 @@
      background-image: linear-gradient(top, @gradient-start, @gradient-end);
      background-repeat: repeat-x;
      -moz-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
-	                 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px  
@shadow-color inset;
+                         2px 0 3px -2px @shadow-color inset, -2px 0 3px  
-2px @shadow-color inset;
      -webkit-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
-	                    2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px  
@shadow-color inset;
+                            2px 0 3px -2px @shadow-color inset, -2px 0 3px  
-2px @shadow-color inset;
      box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
-	            2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px  
@shadow-color inset;
+                    2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px  
@shadow-color inset;
      -moz-border-radius: ~"4px / 7px";
      -webkit-border-radius: ~"4px / 7px";
      border-radius: ~"4px / 7px";
@@ -142,6 +143,7 @@
                          font-size: 1em;
                      }
                      &:focus {
+                        color: gray;
                          border-color: rgba(82, 168, 236, 0.8);
                          outline: 0;
                          outline: thin dotted 9;
@@ -790,13 +792,14 @@
      .btn.deploy {
          margin-top: 5px;
          margin-left: 5px;
-        vertical-align: middle;
          background-position: 0 0;     /* Needed to defeat bootstrap  
btn:hover 0 -15px*/
-        .create-button(@charm-panel-deploy-button-color,  
@charm-panel-deploy-button-bottom-gradient,
-		       @charm-panel-deploy-button-shadow, 0px);
+        .create-button(@charm-panel-deploy-button-color,
+                       @charm-panel-deploy-button-bottom-gradient,
+                       @charm-panel-deploy-button-shadow, 0px);
          &:active {
-            .create-button(@charm-panel-deploy-button-color,  
@charm-panel-deploy-button-color,
-			   @charm-panel-deploy-button-shadow, 1px);
+            .create-button(@charm-panel-deploy-button-color,
+                           @charm-panel-deploy-button-color,
+                           @charm-panel-deploy-button-shadow, 1px);
          }
      }

@@ -813,10 +816,10 @@
          background-position: 0 0;     /* Needed to defeat bootstrap  
btn:hover 0 -15px*/
          background-image: url(/juju-ui/assets/images/cancel-button.png);
          .create-button(@charm-panel-cancel-button-color,  
@charm-panel-cancel-button-bottom-gradient,
-		       @charm-panel-cancel-button-shadow, 0px);
+                       @charm-panel-cancel-button-shadow, 0px);
          &:active {
              .create-button(@charm-panel-cancel-button-color,  
@charm-panel-cancel-button-color,
-			   @charm-panel-cancel-button-shadow, 1px);
+                           @charm-panel-cancel-button-shadow, 1px);
          }
      }
      .charm-panel-configure-buttons {
@@ -959,33 +962,41 @@
      .search-result-div {
          overflow-y:auto;
          overflow-x:hidden;
+        background-color: #EEEEEE;
          .series-charms {
-            border-top: 4px solid #D0D0D0;
-            margin-top: 8px;
-            margin-bottom: 4px;
-            &:first-child {
-                border: none;
-                margin-top: 0;
-            }
              h3 {
                  font-weight: bold;
-                text-transform: uppercase;
-                font-size: 11px;
+                font-size: 16px;
+                text-transform: capitalize;
+                padding-left: 11px;
+                background-color: #CBCBCB;
+                border-top: 1px solid #989898;
+            }
+            ul {
+                margin-bottom: 0;
              }
              .charm-entry {
-                border-top: 1px solid #D0D0D0;
-                padding: 0.5em 4px;
-                padding-bottom: 4px;
-                margin: 0.2em 0 0 2px;
+                padding: 11px;
+                border-top: 1px solid #FFFFFF;
+                border-bottom: 1px solid #BDBDBD;
+                background-color: #EDEDED;
+                &:hover {
+                    background-color: white;
+                }
                  &:first-child {
-                    border: none;
-                    padding-top: 0;
+                    padding-top: 11px;
+                }
+                a.charm-detail {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: @charm-panel-orange;
+                    line-height: 18px;
                  }
                  .charm-summary {
                      margin-bottom: 4px;
-                }
-                a.charm-detail {
-                    font-weight: bold;
+                    font-size: 12px;
+                    line-height: 14px;
+                    padding-top: 10px;
                  }
                  .btn {
                      float: right;





-- 
https://code.launchpad.net/~bac/juju-gui/charm-search-style/+merge/133325
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~bac/juju-gui/charm-search-style into lp:juju-gui.


References