Stylistic changes

src/asset_manager/view/AssetImageView.js

@@ -10,8 +10,8 @@ module.exports = require('./AssetView').extend({
     const pfx = this.pfx;
     const src = this.model.get('src');
     return `
-      <div id="${pfx}preview" style="background-image: url(${src});"></div>
+      <div class="${pfx}preview" style="background-image: url(${src});"></div>
-      <div id="${pfx}preview-bg" class="${this.ppfx}checker-bg"></div>
+      <div class="${pfx}preview-bg ${this.ppfx}checker-bg"></div>
     `;
   },
 
@@ -25,8 +25,8 @@ module.exports = require('./AssetView').extend({
     let dim = width && height ? `${width}x${height}${unit}` : '';
     name = name || model.getFilename();
     return `
-      <div id="${pfx}name">${name}</div>
+      <div class="${pfx}name">${name}</div>
-      <div id="${pfx}dimensions">${dim}</div>
+      <div class="${pfx}dimensions">${dim}</div>
     `;
   },
 

src/asset_manager/view/AssetView.js

@@ -15,13 +15,13 @@ module.exports = Backbone.View.extend({
   template() {
     const pfx = this.pfx;
     return `
-      <div id="${pfx}preview-cont">
+      <div class="${pfx}preview-cont">
         ${this.getPreview()}
       </div>
-      <div id="${pfx}meta">
+      <div class="${pfx}meta">
         ${this.getInfo()}
       </div>
-      <div id="${pfx}close" data-toggle="asset-remove">&Cross;</div>
+      <div class="${pfx}close" data-toggle="asset-remove">&Cross;</div>
       <div style="clear:both"></div>
     `;
   },

src/styles/scss/_gjs_assets.scss

@@ -22,6 +22,8 @@
   height: 290px;
   overflow: auto;
   clear: both;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .#{$am-prefix}assets-header {
@@ -33,7 +35,8 @@
     width: 70%;
     float: left;
   }
-  button{
+
+  button {
     width: 25%;
     float: right;
   }
@@ -43,75 +46,87 @@
   padding: 6px;
 }
 
-.#{$am-prefix}assets-cont {
+.#{$am-prefix}preview-cont {
-  background-color: $mainDklColor;
+  position: relative;
-  border-radius: 3px;
+  height: 70px;
-  box-sizing: border-box;
+  width: 30%;
-  padding: 10px;
+  background-color: $mainColor;
-  width: 45%;
+  border-radius: 2px;
-  float:right;
+  float: left;
-  height: 325px;
   overflow: hidden;
+}
 
-  ##{$am-prefix}preview-cont{
+.#{$am-prefix}preview {
-    position: relative;
+  position: absolute;
-    height: 70px; width: 30%;
+  background-position: center center;
-    background-color: $mainColor;
+  background-size: cover;
-    border-radius: 2px;
+  background-repeat: no-repeat;
-    float: left;
+  height: 100%;
-    overflow: hidden;
+  width: 100%;
-  }
+  z-index: 1;
+}
 
-  ##{$am-prefix}preview{
+.#{$am-prefix}preview-bg {
-    position: absolute;
+  @include opacity(0.5);
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    z-index: 1;
-  }
 
-  ##{$am-prefix}preview-bg{
+  position: absolute;
-    position: absolute;
+  height: 100%;
-    height: 100%;
+  width: 100%;
-    width: 100%;
+  z-index: 0;
-    @include opacity(0.5);
+}
-    z-index: 0;
-  }
 
-  .#{$am-prefix}highlight {
+.#{$am-prefix}dimensions {
-    background-color: $mainLhColor;
+  @include opacity(0.5);
-  }
 
-  .#{$am-prefix}asset {
+  font-size: 10px;
-    border-bottom: 1px solid darken($mainDkColor, 3%);
+}
-    padding: 5px;
-    cursor:pointer;
-    position: relative;
 
-    &:hover ##{$am-prefix}close { display: block;}
+.#{$am-prefix}meta {
+  width: 70%;
+  float: left;
+  font-size: 12px;
+  padding: 5px 0 0 5px;
+  box-sizing: border-box;
 
+  > div {
+    margin-bottom: 5px;
   }
-  ##{$am-prefix}close {
+}
-    @extend .btn-cl;
-    position: absolute;
-    right: 5px;
-      top: 0;
-      display: none;
-  }
 
-  ##{$am-prefix}meta {
+.#{$am-prefix}close {
-    width: 70%;
+  @extend .btn-cl;
-    float: left;
+
-    font-size: 12px;
+  cursor: pointer;
-    padding: 5px 0 0 5px;
+  position: absolute;
-    box-sizing: border-box;
+  right: 5px;
-
+  top: 0;
-      > div { margin-bottom: 5px;}
+  display: none;
-      ##{$am-prefix}dimensions {
+}
-      font-size: 10px;
+
-      @include opacity(0.5);
+.#{$am-prefix}asset {
-    }
+  border-bottom: 1px solid darken($mainDkColor, 3%);
+  padding: 5px;
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+
+  &:hover .#{$am-prefix}close {
+    display: block;
   }
 }
+
+.#{$am-prefix}highlight {
+  background-color: $mainLhColor;
+}
+
+.#{$am-prefix}assets-cont {
+  background-color: $mainDklColor;
+  border-radius: 3px;
+  box-sizing: border-box;
+  padding: 10px;
+  width: 45%;
+  float: right;
+  height: 325px;
+  overflow: hidden;
+}