Asset styling changed.

src/Squidex/app/features/content/shared/assets-editor.component.scss

@@ -24,8 +24,8 @@
         @include border-radius;
         @include flex-box;
         border: 2px dashed $color-border;
-        height: $asset-height + 1.5rem;
+        height: $asset-height;
-        width: $asset-height;
+        width: $asset-width;
         margin-left: 8px;
         font-size: 1.2rem;
         font-weight: normal;

src/Squidex/app/shared/components/asset.component.html

@@ -8,14 +8,14 @@
             <div *ngIf="asset.isImage" class="file-image">
                 <img [sqxImageSource]="asset | sqxAssetPreviewUrl">
             </div>
-            <div *ngIf="!asset.isImage" class="file-icon-container">
+            <div *ngIf="!asset.isImage" class="file-icon">
-                <img class="file-icon" [attr.src]="asset | sqxFileIcon">
+                <img [attr.src]="asset | sqxFileIcon">
             </div>
 
-            <div class="file-overlay">
+            <div class="overlay">
-                <div class="file-overlay-background"></div>
+                <div class="overlay-background"></div>
                 
-                <div class="file-menu">
+                <div class="overlay-menu">
                     <a class="file-download" [attr.href]="asset | sqxAssetUrl" target="_blank" (click)="$event.stopPropagation()">
                         <i class="icon-download"></i>
                     </a>
@@ -28,19 +28,33 @@
                     </a>
                 </div>
 
-                <span class="file-overlay-type" *ngIf="asset.fileType">
+                <span class="overlay-type" *ngIf="asset.fileType">
                     {{asset.fileType}}
                 </span>
-                <span class="file-user">
+
+                <div class="overlay-user">
+                    <div>
                         <i class="icon-user"></i> {{asset.lastModifiedBy | sqxUserNameRef}}
-                </span>
+                    </div>
-                <span class="file-modified">
+                    <div>
                         {{asset.lastModified | sqxFromNow}}
-                </span>
                     </div>
                 </div>
             </div>
-    <div class="card-footer" *ngIf="asset && progress == 0">
+        </div>
+
+        <div class="upload-progress" *ngIf="progress > 0">
+            <sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar>
+        </div>
+    
+        <div class="drop-overlay" *ngIf="asset && progress === 0">
+            <div class="drop-overlay-background"></div>
+    
+            <span class="drop-overlay-text">Drop to update</span>
+        </div>
+    </div>
+    <div class="card-footer">
+        <ng-container *ngIf="asset">
             <div>
                 <div *ngIf="!renaming" class="file-name editable" [attr.title]="asset.fileName" (dblclick)="renameStart()">
                     {{asset.fileName}}
@@ -53,21 +67,12 @@
                     </form>
                 </div>
             </div>
-        <div class="tags">
+            <div class="file-tags tags">
                 <sqx-tag-editor [useDefaultValue]="false" [formControl]="tagInput" class="blank"></sqx-tag-editor>
             </div>
             <div class="file-info">
                 <ng-container *ngIf="asset.pixelWidth">{{asset.pixelWidth}}x{{asset.pixelHeight}}px, </ng-container> {{asset.fileSize | sqxFileSize}}
             </div>
-    </div>
+        </ng-container>
-
-    <div class="upload-progress" *ngIf="progress > 0">
-        <sqx-progress-bar mode="Circle" [value]="progress"></sqx-progress-bar>
-    </div>
-
-    <div class="drop-overlay" *ngIf="asset && progress == 0">
-        <div class="drop-overlay-background"></div>
-
-        <span class="drop-overlay-text">Drop to update</span>
     </div>
 </div>

src/Squidex/app/shared/components/asset.component.scss

@@ -32,21 +32,7 @@
 }
 
 @mixin asset-link {
-    & {
-        font-size: 1.1rem;
-        font-weight: normal;
-        cursor: pointer;
-        color: darken($color-dark-foreground, 10%);
-    }
     
-    &:hover {
-        color: $color-dark-foreground;
-    }
-
-    &:focus,
-    &:hover {
-        text-decoration: none;
-    }
 }
 
 .drop-overlay {
@@ -63,55 +49,63 @@
     }
 }
 
+:host {
+    padding-bottom: 1rem;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
 .card {
     & {
         @include overlay-container;
         width: $asset-width;
-        margin-bottom: 1rem;
-        margin-left: 8px;
-        margin-right: 8px;
-        min-height: $asset-height;
     }
 
-    &.selectable {
+    &-body,
-        cursor: pointer;
+    &-footer {
+        position: relative;
+        padding: 1rem;
     }
 
     &-body {
-        position: relative;
+        padding: 0;
-        min-height: 0.75 * $asset-height;
+        min-height: $asset-header;
-        max-height: 0.75 * $asset-height;
+        max-height: $asset-header;
     }
 
     &-footer {
-        border: 0;
+        padding-top: .5rem;
-        background: transparent;
+        min-height: $asset-footer;
-        padding: .8rem;
+        max-height: auto;
-        padding-top: .4rem;
     }
+
+    &.drag {
+        .drop-overlay {
+            @include opacity(1);
         }
 
-.upload-progress {
+        .file-type {
-    @include absolute(2rem, 2rem, 2rem, 2rem);
+            @include opacity(0);
+        }
     }
 
-.file {
+    &.selectable {
-    &-info {
+        cursor: pointer;
-        font-size: .8rem;
+    }
 }
 
-    &-image {
+.upload-progress {
-        min-height: 100%;
+    @include absolute(1rem, 3em, 1rem, 3rem);
-        max-height: 100%;
 }
 
+.file {
     &-preview {
         & {
-            @include absolute(.8rem, .8rem, 0, .8rem);
+            @include absolute(0, 0, 0, 0);
         }
 
         &:hover {
-            .file-overlay {
+            .overlay {
                 @include opacity(1);
             }
 
@@ -121,65 +115,82 @@
         }
     }
 
-    &-info {
-        margin-top: .25rem;
-    }
-
-    &-user {
-        @include absolute(auto, auto, 1.7rem, .5rem);
-    }
-
-    &-modified {
-        @include absolute(auto, auto, .5rem, .5rem);
-    }
-
-    &-menu {
-        @include absolute(.5rem, 1rem, auto, auto);
-
-        a {
-            @include asset-link;
-        }
-    }
-
     &-type {
         @include transition(opacity .4s ease);
-        @include absolute(.7rem, auto, auto, .5rem);
+        @include absolute(1rem, auto, auto, 1rem);
         @include asset-type;
         @include border-radius(3px);
         background: $color-dark-black;
     }
 
-    &-name {
+    &-name,
+    &-info {
         @include truncate;
-        font-size: 1rem;
-        font-weight: normal;
-        line-height: 2rem;
     }
 
+    &-image,
     &-icon {
-        margin-top: 10%;
+        height: $asset-image;
-        margin-bottom: 0;
-        height: 70%;
     }
 
-    &-icon-container {
+    &-name {
+        line-height: 2rem;
+    }
+
+    &-tags {
+        margin-bottom: .25rem;
+    }
+
+    &-info {
+        font-size: .75rem;
+    }
+
+    &-icon {
+        line-height: $asset-image;
         background: $color-border;
         border: 0;
         text-align: center;
-        height: 100%;
+    }
 }
 
-    &-overlay {
+.overlay {
     & {
         @include overlay;
         font-size: .8rem;
         font-weight: normal;
     }
 
+    &-menu {
+        & {
+            @include absolute(1rem, 1rem, auto, auto);
+        }
+
+        a {
+            & {
+                font-size: 1.1rem;
+                font-weight: normal;
+                cursor: pointer;
+                color: darken($color-dark-foreground, 10%);
+            }
+        
+            &:hover {
+                color: $color-dark-foreground;
+            }
+        
+            &:focus,
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
     &-type {
-            @include absolute(.7rem, auto, auto, .5rem);
+        @include absolute(1rem, auto, auto, 1rem);
         @include asset-type;
     }
+
+    &-user {
+        @include absolute(auto, auto, 1rem, 1rem);
     }
 }
 

src/Squidex/app/theme/_vars.scss

@@ -98,4 +98,7 @@ $panel-sidebar:             3.75rem;
 $panel-light-background:    #fff;
 
 $asset-width:               16rem;
-$asset-height:              18rem;
+$asset-height:              19rem;
+$asset-header:              12rem;
+$asset-image:               12rem;
+$asset-footer:              7rem;