Add some basic styling; Fix SetHeight issue

ChristopherJennings · Jan 25, 2019 · bb2577c · bb2577c
1 parent 088d115
commit bb2577c
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 22 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,10 @@
     "deploy-dev": "npm run build-dev && .\\deploy.bat"
   },
   "dependencies": {
+    "bulma": "^0.7.2",
     "unsplash-js": "^4.8.0",
-    "vue": "^2.5.21"
+    "vue": "^2.5.21",
+    "vue-images-loaded": "^1.1.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.3.0",

diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <title>unsplash-element</title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,23 +1,54 @@
 /* global CustomElement */
 <template>
-  <div id="app" v-if="loaded">
-    <h1>Unsplash</h1>
-    <input :disabled="element.disabled" v-model="searchTerm" placeholder="edit me">
-    <button @click="searchPhotos">Search</button>
-    <button @click="updateSize">Height?</button>
+  <section class="section" id="app" v-if="loaded">
+    <div class="container">
+      <h1 class="title">Unsplash</h1>
+    <div>
+      <div class="field has-addons">
+        <div class="control">
+          <input
+            class="input is-rounded"
+            :disabled="element.disabled"
+            v-model="searchTerm"
+            placeholder="edit me"
+            @keyup.enter="searchPhotos"
+            @keyup.esc="searchTerm = ''"
+          >
+        </div>
+        <div class="control">
+          <button @click="searchPhotos" class="button is-rounded is-info">
+            <span class="icon">
+              <i class="fas fa-search"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div class="control">
+        <button class="button" @click="updateSize">Height?</button>
+      </div>
+    </div>
+
     <p>Saved: {{ value }} {{ height }}</p>
-    <div class="masonry">
+    <div class="masonry" v-imageload="updateSize">
       <div class="item" v-for="result in searchResults.results" :key="result.id">
-        <img :src="result.urls.thumb" />
+        <img :src="result.urls.small" />
+        <div>
+          <img :src="result.user.profile_image.small" />
+          {{ result.user.name }}
+          <button>Select</button>
+        </div>
         {{ result.description}}
       </div>
     </div>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script>
-import Unsplash, { toJson } from 'unsplash-js'
+//import Unsplash, { toJson } from 'unsplash-js'
 import SampleData from './sample.json'
+import BeachSampleData from './sample-beach.json'
+import imageload from 'vue-images-loaded'
 
 export default {
   name: 'app',
@@ -36,14 +67,18 @@ export default {
       return this.element.value
     },
     unsplashInstance() {
-      return this.loaded
-        ? new Unsplash({
-            applicationId: this.element.config.accessKey,
-            secret: this.element.config.secretKey
-          })
-        : null
+      // return this.loaded
+      //   ? new Unsplash({
+      //       applicationId: this.element.config.accessKey,
+      //       secret: this.element.config.secretKey
+      //     })
+      //   : null
+      return {}
     }
   },
+  directives: {
+    imageload
+  },
   methods: {
     searchPhotos() {
       if(this.unsplashInstance && this.searchTerm) {
@@ -52,13 +87,14 @@ export default {
         // .then(json => {
         //   this.searchResults = json
         // })
-        this.searchResults = SampleData
+
+        this.searchResults = this.searchTerm === 'beach' ? BeachSampleData : SampleData
       }
     },
     updateSize() {
       // Update the custom element height in the Kentico UI.
       const height = document.documentElement.offsetHeight
-
+      //const diff = height - this.height
       this.height = height
       CustomElement.setHeight(height);
     }
@@ -76,12 +112,16 @@ export default {
       this.element = element
       this.context = context
       this.loaded = true
+
+      this.$nextTick(function() {
+        this.updateSize()
+      })
     })
   },
   updated: function() {
-    this.$nextTick(function() {
-      this.updateSize()
-    })
+    // this.$nextTick(function() {
+    //   this.updateSize()
+    // })
   }
 }
 
@@ -97,7 +137,7 @@ body {
   background-color: orangered;
 }
 .masonry { /* Masonry container */
-    column-count: 4;
+    column-count: 3;
     column-gap: 1em;
 }
 

diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+import 'bulma/css/bulma.css'
 
 Vue.config.productionTip = false