Ev/card list item + postcss-preset-env (#197)

* router - use archived file for cloverList (/ why do we need?)

* Create CloverItem--Row.vue for Feed/Home

* Create CloverItem--Card.vue, basic markup

* PostCSS - use postcss-preset-env for features

* CloverItem--Card - dotted border :)

* CSS - enforce postcss-preset-env nesting spec (need & always)

.postcssrc.js

@@ -3,14 +3,7 @@
 module.exports = {
   plugins: [
     require('postcss-import')(),
-    require('precss')(),
-    require('postcss-custom-properties')(),
-    require('postcss-custom-media')(),
-    require('postcss-calc')(),
-    require('postcss-nested')(),
-    require('postcss-color-function')(),
-    require('postcss-discard-comments')(),
-    require('postcss-reporter')(),
+    require('postcss-preset-env')({stage: 0}),
     require('autoprefixer')()
   ]
 }

package.json

@@ -73,6 +73,7 @@
     "node-sass": "^4.7.2",
     "postcss-color-function": "^4.0.1",
     "postcss-import": "^11.1.0",
+    "postcss-preset-env": "^6.4.0",
     "postcss-reporter": "^5.0.0",
     "pre-commit": "^1.2.2",
     "precss": "^3.1.2",

src/App.vue

@@ -42,10 +42,10 @@ export default {
   @import './style/global';
   @import './style/imports';
   .intro-screen {
-    .clover {
+    & .clover {
       display: inline-block;
     }
-    .text-path {
+    & .text-path {
       bottom: -2.6em;
       left: -2.6em;
       right: -2.6em;

src/components/CloverItem--Card.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  article.relative
+    figure.pb-100.relative
+      .absolute.top-0.left-0.col-12.h-100.flex.items-center.justify-center
+        img.block.col-6(:src="cloverImage(clover, 128)")
+    header.px1.pb2
+      .px1
+        h3.h2.font-mono.truncate.center
+          span(v-if="clover.name !== clover.board") {{clover.name}}
+          span &nbsp;
+      .mt1.flex
+        .px1.col-6
+          h6.h8 Owner
+          h4.h5.font-mono.truncate {{clover.owner}}
+        .px1.col-6
+          .pl1
+            h6.h8 Price &clubs;
+            h4.h5.font-mono.truncate {{prettyBigNumber(clover.price, 0)}}
+</template>
+
+<script>
+import { cloverImage, prettyBigNumber, abbrvAddr } from '@/utils'
+export default {
+  name: 'CloverItem--Card',
+  props: {
+    clover: {type: Object, default: () => {}, required: true},
+    borderLeft: false
+  },
+  methods: {
+    cloverImage,
+    prettyBigNumber
+  }
+}
+</script>
+
+<style scoped>
+/* white dots to cover the intersections */
+article{
+  &:before,
+  &:after{
+    content:'';
+    display: block;
+    width:4px;
+    height:4px;
+    background:white;
+    position: absolute;
+  }
+  &:before{
+    top:-2px;
+    left:-2px;
+  }
+  &:after{
+    bottom:-2px;
+    right:-2px;
+  }
+}
+</style>

src/components/CloverItem--Row.vue

@@ -0,0 +1,75 @@
+<template>
+  <article v-if="clover.board" class="flex py2 relative">
+    <!-- RFT highlight -->
+    <div v-if="isRFT" class="absolute top-0 left-0 h-100 bg-red" style="width:4px"></div>
+    <!-- image -->
+    <div class="col-3 center">
+      <img :src="cloverImage(clover, 64)" width="64" height="64"/>
+    </div>
+
+    <div class="col-3 flex flex-column justify-center">
+      <h3 class="h4 truncate font-mono">
+        <span v-if="clover.name !== clover.board">{{ clover.name }}</span>
+      </h3>
+    </div>
+
+    <div class="col-3 flex flex-column justify-center px2">
+      <template v-if="isRFT">
+        <p class="h7 m0">Market Cap &clubs;</p>
+        <p class="h4 m0 truncate font-mono">0</p>
+      </template>
+      <template v-else>
+        <h6 class="h7 m0">Owner</h6>
+        <h5 class="h4 m0 truncate font-mono" style="max-width:4.5em">{{clover.owner}}</h5>
+      </template>
+    </div>
+
+    <div class="col-2 flex flex-column justify-center pl1">
+      <template v-if="isRFT">
+        <p class="h7 m0">&clubs; / Share</p>
+        <p class="h4 m0 truncate font-mono">0</p>
+      </template>
+      <template v-else>
+        <p class="h7 m0 nowrap">Price &clubs;</p>
+        <p v-if="forSale(clover)" class="h4 m0 truncate">{{ cloverPrice(clover) }}</p>
+        <p v-else class="h4 m0 font-mono">---</p>
+      </template>
+    </div>
+
+    <div class="col-1 center flex justify-center pr2">
+      <img src="~../assets/icons/arrow-right.svg" width="18" height="18"/>
+    </div>
+  </article>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { cloverImage, prettyBigNumber } from '@/utils'
+import BigNumber from 'bignumber.js'
+export default {
+  name: 'CloverItem--Row',
+  props: {
+    clover: {type: Object, default: () => {}, required: true}
+  },
+  computed: {
+    isRFT ({ owner }) {
+      // inCurationMarket
+      return owner === this.curationMarketAddress
+    },
+    ...mapGetters(['curationMarketAddress'])
+  },
+  methods: {
+    cloverImage,
+    cloverPrice ({ price }) {
+      return prettyBigNumber(price, 0)
+    },
+    forSale ({ price }) {
+      if (typeof price !== 'object') price = new BigNumber(price)
+      return price.gt(0)
+    }
+  }
+}
+</script>
+
+<style>
+</style>