CSS fixes for the media state and item panels

MKHenson · Jun 15, 2016 · fae68ed · fae68ed
1 parent 56dc9b2
commit fae68ed
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/admin/lib/directives/item-panel/item-panel.html b/admin/lib/directives/item-panel/item-panel.html
@@ -1,6 +1,6 @@
 <div class="item-panel">
 
-    <div class="item-panel-delete animated-panel animated-panel-small" ng-show="confirmDelete">
+    <div class="item-panel-delete animated-panel animated-panel-small ng-hide" ng-show="confirmDelete">
         <div>Are you sure you want to delete this item? </div>
         <remove-button ng-click="onDelete(model)" no-icon="true" text="'Yes'"></remove-button>
         <remove-button ng-click="confirmDelete=false" no-icon="true" text="'No'"></remove-button>
@@ -11,7 +11,7 @@
     <div class="item-panel-preview" ng-transclude="preview"></div>
 
 
-    <div class="item-panel-content animated-panel animated-panel-large" ng-show="more" ng-transclude="content"></div>
+    <div class="item-panel-content animated-panel animated-panel-large ng-hide" ng-show="more" ng-transclude="content"></div>
 
 
 </div>
diff --git a/admin/lib/states/media/dash-media.html b/admin/lib/states/media/dash-media.html
@@ -22,13 +22,13 @@
                     <h2 ng-if="!mediaController.editFileMode">{{mediaController.selectedEntity.name}}</h2>
                     <input ng-if="mediaController.editFileMode" type="text" id="file-name" value="{{mediaController.selectedEntity.name}}" />
                     <input ng-if="!mediaController.editFileMode" type="text" value="{{mediaController.selectedEntity.publicURL}}" />
-                    <div title="ID"><div class="sprite sprite-file-info-id"></div>{{mediaController.selectedEntity.identifier}}</div>
-                    <div title="Created On"><div class="sprite sprite-file-info-clock"></div>{{mediaController.selectedEntity.created | date:"MM/dd/yyyy 'at' h:mma"}}</div>
-                    <div title="Size"><div class="sprite sprite-file-info-size"></div>{{mediaController.selectedEntity.size | bytes}}</div>
-                    <div title="Mime Type"><div class="sprite sprite-file-info-mime"></div>{{mediaController.selectedEntity.mimeType}}</div>
-                    <div title="Num Downloads"><div class="sprite sprite-file-info-downloads"></div>{{mediaController.selectedEntity.numDownloads}}</div>
+                    <div title="ID" class="detail"><div class="sprite sprite-file-info-id"></div>{{mediaController.selectedEntity.identifier}}</div>
+                    <div title="Created On" class="detail"><div class="sprite sprite-file-info-clock"></div>{{mediaController.selectedEntity.created | date:"MM/dd/yyyy 'at' h:mma"}}</div>
+                    <div title="Size" class="detail"><div class="sprite sprite-file-info-size"></div>{{mediaController.selectedEntity.size | bytes}}</div>
+                    <div title="Mime Type" class="detail"><div class="sprite sprite-file-info-mime"></div>{{mediaController.selectedEntity.mimeType}}</div>
+                    <div title="Num Downloads" class="detail"><div class="sprite sprite-file-info-downloads"></div>{{mediaController.selectedEntity.numDownloads}}</div>
                     <approve-button ng-click="mediaController.renameFile(mediaController.selectedEntity)" ng-if="mediaController.editFileMode && !mediaController.loading" text="'Update'"></approve-button>
-                    <div class="nav-button file-edit"><a ng-click="mediaController.editFileMode = !mediaController.editFileMode">{{ (!mediaController.editFileMode ? "Edit" : "Cancel") }}</a></div>
+                    <div class="cancel nav-button file-edit"><a ng-click="mediaController.editFileMode = !mediaController.editFileMode">{{ (!mediaController.editFileMode ? "Edit" : "Cancel") }}</a></div>
                 </div>
             </div>
             <div class="left panel-view" ng-class="{ expanded : mediaController.editMode && mediaController.selectedFolder }">

diff --git a/admin/lib/states/media/style.scss b/admin/lib/states/media/style.scss
@@ -120,38 +120,41 @@
         vertical-align:middle;
     }
 
-    div {
+    .detail {
         font-size:20px;
         margin: 10px 0;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        display: inherit;
+    }
 
-        .sprite {
-            vertical-align:middle;
-            margin: 0 10px 0 0;
-        }
+    .cancel {
+        margin: 0 0 0 15px;
+    }
 
-        .sprite-file-info-clock{
-            @include sprite($file-info-clock, inline-block);
-        }
+    .sprite {
+        vertical-align:middle;
+        margin: 0 10px 0 0;
+    }
 
-        .sprite-file-info-downloads{
-            @include sprite($file-info-downloads, inline-block);
-        }
+    .sprite-file-info-clock{
+        @include sprite($file-info-clock, inline-block);
+    }
 
-        .sprite-file-info-id{
-            @include sprite($file-info-id, inline-block);
-        }
+    .sprite-file-info-downloads{
+        @include sprite($file-info-downloads, inline-block);
+    }
 
-        .sprite-file-info-mime{
-            @include sprite($file-info-mime, inline-block);
-        }
+    .sprite-file-info-id{
+        @include sprite($file-info-id, inline-block);
+    }
 
-        .sprite-file-info-size{
-            @include sprite($file-info-size, inline-block);
-        }
+    .sprite-file-info-mime{
+        @include sprite($file-info-mime, inline-block);
+    }
+
+    .sprite-file-info-size{
+        @include sprite($file-info-size, inline-block);
     }
 }