tweak design

hds-lab · Aug 26, 2015 · 35dc1c5 · 35dc1c5
1 parent 924f1d7
commit 35dc1c5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 43 deletions.
diff --git a/msgvis/static/SparQs/controllers.js b/msgvis/static/SparQs/controllers.js
@@ -330,7 +330,7 @@
         };
 
         $scope.group_class = function(group){
-            return (group.selected) ? "active" : "";
+            return ($scope.is_being_editing(group)) ? "edit-class" : ((group.selected) ? "active" : "");
         };
 
     };

diff --git a/msgvis/static/grouper.less b/msgvis/static/grouper.less
@@ -23,7 +23,6 @@ body {
 .box {
     margin: 2px;
     padding: 5px;
-    height: 100%;
     -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
     -moz-box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
     box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
@@ -85,11 +84,10 @@ body {
     height: @top-row-height;
 }
 #groups {
-    height: @top-row-height + 25;
+    height: @top-row-height + 20;
     overflow-x: auto;
     padding-left: 0;
     #group-wrapper {
-        height: 100%;
         white-space: nowrap;
     }
     position: relative;
@@ -100,39 +98,55 @@ body {
     }
     .heading {
         font-weight: 700;
+        font-size: 1.5em;
+        padding: 2px;
+        //text-overflow: ellipsis;
+        width: 85%;
+        //overflow: hidden;
+
+    }
+    .keyword-list {
+        width: 90%;
+        text-wrap: normal;
         font-size: 1.1em;
         line-height: 2em;
-        padding: 2px;
-        text-overflow: ellipsis;
-        width: 91%;
-        overflow: hidden;
+    }
+    .icon {
+        position: absolute;
+        right: 10px;
+        top: 15px;
+        color: #aaa;
+        font-size: 1.2em;
+        z-index: 1000;
     }
     .group-box {
-        width: 200px;
-        height: 100%;
-
+        margin-top: 0;
+        width: 350px;
+        height: @top-row-height - 5;
+        background-color: white;
 
-
-        display: inline-table;
+        display: inline-block;
         position: relative;
 
+        .group-wrap {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 97%;
+        }
+
         .bottom-bar {
             .count {
                 position: absolute;
-                left: 10px;
-                bottom: 10px;
-                color: #aaa;
-            }
-            .icon {
-                position: absolute;
-                right: 10px;
+                left: 0px;
                 bottom: 10px;
                 color: #aaa;
             }
 
+
         }
         .group-content{
-            height: 100%;
+            height: @top-row-height - 15;
         }
         .mask {
             background-color: black;
@@ -144,20 +158,14 @@ body {
             top: 0;
             right: 0;
         }
-        .edit-class {
-            width: 350px;
-            -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
-            transition: width 1s;
-            background-color: white;
-            cursor: default;
 
-        }
         .edit-form {
+            width: 100%;
+             background-color: white;
             //transition: visibility linear 1s;
             .heading {
                 font-weight: 700;
-                font-size: 1.1em;
-                line-height: 2em;
+                font-size: 1.5em;
                 padding: 2px;
                 width: 99%;
                 border: 1px dashed #666;
@@ -191,9 +199,13 @@ body {
         cursor: pointer;
     }
     .group-box.active {
-        .box {
-            background-color: rgb(201, 233, 255);
-        }
+        background-color: rgb(201, 233, 255);
+    }
+    .group-box.edit-class {
+
+        background-color: white !important;
+        cursor: default !important;
+
     }
 
 }

diff --git a/msgvis/templates/grouper.html b/msgvis/templates/grouper.html
@@ -111,13 +111,15 @@
                 </div>
                 <div id="groups" class="col-md-9">
                     <div id="group-wrapper">
-                        <div class="group-box"
+                        <div class="box group-box"
                              ng-repeat="group in Group.group_list | orderBy:'id':true"
                              ng-class="group_class(group)">
-                            <div class="box" ng-class="editing_class(group)" id="group_{$ group.id $}">
+
+                            <div class="group-wrap" id="group_{$ group.id $}">
                                 <div class="group-content" ng-hide="is_being_editing(group)"
                                     ng-click="toggle_group($event, group)">
                                     <div class="heading">#{$ group.id $} {$ group.name $}</div>
+
                                     <div class="keyword-list">
                                         Including: {$ group.inclusive_keywords.join(' ') $}
                                     </div>
@@ -128,15 +130,9 @@
                                         <div class="count">
                                             message count: {$ group.message_count $}
                                         </div>
-                                        <div class="icon">
-                                            <span class="glyphicon glyphicon-pencil"
-                                                 ng-click="edit_group($event, group)" ></span>
-                                            <span class="glyphicon glyphicon-trash"
-                                                 ng-click="delete_group($event, group)" ></span>
-                                        </div>
                                     </div>
                                 </div>
-                                <div class="mask" ng-show="show_mask(group)"></div>
+
                                 <div class="edit-form" ng-show="is_being_editing(group)">
                                     <form class="form-inline">
                                     {% csrf_token %}
@@ -163,9 +159,17 @@
                                         <button class="btn btn-default" ng-click="save($event)">Save</button>
                                     </div>
                                     <span us-spinner="spinnerOptions" spinner-key="update-spinner"></span>
+                                    </form>
                                 </div>
-                            </form>
+
+                            </div>
+                            <div class="icon" ng-hide="is_being_editing(group)">
+                                <span class="glyphicon glyphicon-pencil"
+                                     ng-click="edit_group($event, group)" ></span>
+                                <span class="glyphicon glyphicon-remove"
+                                     ng-click="delete_group($event, group)" ></span>
                             </div>
+                            <div class="mask" ng-show="show_mask(group)"></div>
                         </div>
                     </div>
                 </div>