fix: improve component catalog style

ktsn · Oct 28, 2018 · 1f85488 · 1f85488
1 parent 4203ca2
commit 1f85488
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 35 deletions.
diff --git a/src/view/components/ComponentCatalog.vue b/src/view/components/ComponentCatalog.vue
@@ -2,20 +2,16 @@
   <ul class="catalog-list">
     <li
       v-for="c in components"
-      :key="c.uri" 
+      :key="c.uri"
       class="catalog-item"
       draggable="true"
       @dragstart="onDragStart($event, c)"
       @dragend="onDragEnd()"
     >
-      <div class="catalog-item-inner">
-        <div class="catalog-item-layout">
-          <div class="catalog-preview">
-            <ComponentCatalogPreview :component="c" />
-          </div>
-          <p class="catalog-component-name">{{ c.displayName }}</p>
-        </div>
+      <div class="catalog-preview">
+        <ComponentCatalogPreview :component="c" />
       </div>
+      <p class="catalog-component-name">{{ c.displayName }}</p>
     </li>
   </ul>
 </template>
@@ -55,45 +51,33 @@ export default Vue.extend({
 
 <style scoped>
 .catalog-list {
+  display: flex;
+  flex-wrap: wrap;
   margin: 0;
-  padding: 0;
+  padding: 7.5px;
   list-style: none;
 }
 
 .catalog-item {
-  padding: 0 15px;
+  padding: 7.5px;
+  width: 50%;
+  box-sizing: border-box;
   position: relative;
 }
 
-.catalog-item-inner {
-  padding: 10px 0;
-  border-top: 1px solid var(--vd-border-color);
-}
-
 .catalog-item:first-child .catalog-item-inner {
   border-top-width: 0;
 }
 
-.catalog-item-layout {
-  display: table;
-  table-layout: fixed;
-  box-sizing: border-box;
-  width: 100%;
-}
-
 .catalog-preview {
-  display: table-cell;
-  padding-right: 15px;
-  width: 50px;
-  vertical-align: middle;
+  width: 100%;
 }
 
 .catalog-component-name {
-  display: table-cell;
-  font-weight: bold;
-  font-size: var(--vd-font-size-small);
-  text-align: left;
-  vertical-align: middle;
+  margin-top: 5px;
+  margin-bottom: 0;
+  font-size: var(--vd-font-size);
+  text-align: center;
   word-wrap: break-word;
   overflow-wrap: break-word;
 }

diff --git a/src/view/components/ComponentCatalogPreview.vue b/src/view/components/ComponentCatalogPreview.vue
@@ -62,16 +62,18 @@ export default Vue.extend({
   box-sizing: border-box;
   border: 1px solid var(--vd-border-color);
   background-color: #fff;
-  height: 50px;
-  width: 50px;
+  height: 0;
+  width: 100%;
+  padding-bottom: 100%;
 }
 
 .preview-content {
   position: absolute;
   top: 0;
   left: 0;
-  width: 500px;
-  transform: scale(0.25);
+  width: 200%;
+  height: 200%;
+  transform: scale(0.5);
   transform-origin: left top;
 }
 </style>
diff --git a/src/view/global.css b/src/view/global.css
@@ -25,7 +25,14 @@ body {
 }
 
 .vd-reset {
+  all: initial;
   font-family: sans-serif;
   font-size: var(--vd-font-size);
   color: var(--vd-text-color);
 }
+
+.vd-reset *,
+.vd-reset *::before,
+.vd-reset *::after {
+  box-sizing: border-box;
+}