From 03526465aa7a9a3bb0246af05de43d60a652bf30 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Thu, 26 Jul 2018 15:03:37 +0100
Subject: [PATCH 1/2] feat: lovely lesson layout

WIP on #15

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/App.vue               |   5 ++
 src/components/Button.vue |  39 ++++++++++
 src/components/Lesson.vue | 149 ++++++++++++++++++--------------------
 3 files changed, 113 insertions(+), 80 deletions(-)
 create mode 100644 src/components/Button.vue

diff --git a/src/App.vue b/src/App.vue
index 22a26c938..9d249564c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,4 +21,9 @@ export default {
 pre {
   overflow: auto;
 }
+
+.focus-outline:focus {
+  outline: 0;
+  box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4);
+}
 </style>
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 000000000..e567d6cc6
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,39 @@
+<template>
+  <button
+    v-on:click="click"
+    class="avenir dib v-mid fw7 nowrap lh-copy bn br1 pv2 ph3 pointer focus-outline">
+    <slot>Submit</slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    click: {
+      type: Function,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+  button {
+    opacity: 0.9;
+    min-width:120px;
+  }
+  button:hover {
+    opacity: 1;
+  }
+
+  button:active {
+    opacity: 0.95;
+    box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
+  }
+
+  button:disabled {
+    opacity: 0.8;
+    box-shadow: initial;
+    cursor: default;
+  }
+</style>
diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index 89f126327..51f23ebf0 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -1,47 +1,64 @@
 <template>
-  <div class="lesson">
-    <div class="lesson-title">
-      <h2>{{lessonTitle}}</h2>
-    </div>
-    <div class="lesson-text" v-html="parsedText">
-    </div>
-    <div class="test-runner">
-      <div class="editor">
-        <MonacoEditor
-          :editorOptions="options"
-          class="editor"
-          :code="code"
-          theme="vs"
-          language="javascript"
-          @mounted="onMounted"
-          @codeChange="onCodeChange"
-          >
-        </MonacoEditor>
+  <div >
+    <header class="bg-navy pa3 flex items-center justify-around">
+      <a href='/#/' class="dn db-ns link flex-auto w-third-ns">
+        <img src="./home/ipfs-logo.svg" alt="IPFS" style="height: 66px" class="ml3-ns"/>
+      </a>
+      <a href='/#/' class="link ma0 ttu f3 f1-ns fw4 w-third-ns tc">
+        <span class="green">Proto</span>
+        <span class="white">school</span>
+      </a>
+      <div class="w-third-ns tr dn db-ns">
+        <img src="./home/ipfs-illustrations-how-3.svg" alt="" style="height: 50px">
       </div>
-      <div class="run">
-        <div class="run-buttons">
-          <div class="run-button">
-            <button v-on:click="run">run</button>
-          </div>
+    </header>
+    <section class="db bt border-aqua bw4 indent-1">
+      <div class="measure-wide pv3">
+        <h1 class="f3">{{lessonTitle}}</h1>
+        <div class="lesson-text lh-copy" v-html="parsedText"></div>
+      </div>
+
+      <div class="exercise pv4 ph2 ph4-l mb5" style="background: #F6F7F9; max-width: 700px">
+        <div class="editor bg-white">
+          <MonacoEditor
+            :editorOptions="options"
+            class="editor"
+            :code="code"
+            theme="vs"
+            language="javascript"
+            @mounted="onMounted"
+            @codeChange="onCodeChange">
+          </MonacoEditor>
         </div>
-        <div v-if="output.test" class="output" v-bind="output.test">
-          <div class="output-error" v-if="output.test.error">
-            {{output.test.error.stack}}
+        <div class="pv2">
+          <div v-if="output.test" v-bind="output.test">
+            <div class="lh-copy pv2 ph3 bg-red white" v-if="output.test.error">
+              Error: {{output.test.error.message}}
+            </div>
+            <div class="lh-copy pv2 ph3 bg-red white" v-if="output.test.fail">
+              {{output.test.fail}}
+            </div>
+            <div class="lh-copy pv2 ph3 bg-green white" v-if="output.test.success">
+              {{output.test.success}}
+              <a class="link fw7 underline-hover dib ph2 mh2 white"  target='explore-ipld' :href='exploreIpldUrl'>
+                View in IPLD Explorer
+              </a>
+            </div>
           </div>
-          <div class="output-fail" v-if="output.test.fail">
-            {{output.test.fail}}
+          <div class="lh-copy pv2 ph3" v-else>
+            Update the code to complete the exercise. Click <strong>submit</strong> to check your answer.
           </div>
-          <div class="output-success" v-if="output.test.success">
-            {{output.test.success}}
-            <button v-on:click="next">Next Lesson</button>
+        </div>
+        <div class="pt3 ph2 tr">
+          <div v-if="output.test && output.test.success">
+            <Button v-bind:click="next" class="bg-aqua white">Next</Button>
           </div>
-          <div class="output-explorer" v-if="output.test.cid">
-            <Explorer :cid="output.test.cid.toBaseEncodedString()">
-            </Explorer>
+          <div v-else>
+            <Button v-bind:click="run" class="bg-green white">Submit</Button>
           </div>
         </div>
       </div>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -49,6 +66,7 @@
 import Vue from 'vue'
 import MonacoEditor from 'vue-monaco-editor'
 import Explorer from './Explorer.vue'
+import Button from './Button.vue'
 const IPFS = require('ipfs')
 const CID = require('cids')
 const marked = require('marked')
@@ -90,7 +108,8 @@ let oldIPFS
 export default {
   components: {
     MonacoEditor,
-    Explorer
+    Explorer,
+    Button
   },
   data: self => {
     return {
@@ -107,6 +126,13 @@ export default {
       }
     }
   },
+  computed: {
+    exploreIpldUrl: function () {
+      let cid = this.output.test && this.output.test.cid && this.output.test.cid.toBaseEncodedString()
+      cid = cid || ''
+      return `https://ipfs.io/ipfs/QmeznoNAoUcQdCFEEz4ktv4zLfYYyhVNin28Frsv8LLxCb/#/explore/${cid}`
+    }
+  },
   methods: {
     run: async function () {
       if (oldIPFS) {
@@ -156,53 +182,16 @@ export default {
 </script>
 
 <style scoped>
-.lesson {
-  display: grid;
-  grid-gap: 2%;
-  grid-template-columns: 39% 59%;
-  grid-template-areas:
-    "lesson-title ..."
-    "lesson-text test-runner";
-  background-color: #fff;
-  color: #444;
-  margin: 15px 15px 15px 15px;
-}
-.test-runner {
-  grid-area: test-runner;
-}
 .editor {
   width: 100%;
-  height: 50vh;
-  border: 1px solid #eee;
+  height: 35vh;
 }
-.lesson-text {
-  grid-area: lesson-text;
+.indent-1 {
+  padding-left: 1rem;
 }
-.lesson-title {
-  grid-area: lesson-title;
-}
-button {
-  border: solid #222 2px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-weight: bold;
-}
-.run {
-  grid-area: run;
-  padding-top: 5px;
-}
-.output * {
-  margin-top: 5px;
-  padding: 5px 5px 5px 5px;
-  border-radius: 5px;
-}
-.output-error {
-  background-color: pink;
-}
-.output-fail {
-  background-color: pink;
-}
-.output-success {
-  background-color: greenyellow;
+@media screen and (min-width: 60rem) {
+  .indent-1 {
+    padding-left: 93px;
+  }
 }
 </style>

From d8b5f1b446c9d07db5db0f954e06d9f4f9278ca0 Mon Sep 17 00:00:00 2001
From: Oli Evans <oli@tableflip.io>
Date: Thu, 26 Jul 2018 16:25:45 +0100
Subject: [PATCH 2/2] feat: nice code styles

License: MIT
Signed-off-by: Oli Evans <oli@tableflip.io>
---
 src/App.vue               | 15 ++++++++++++++-
 src/components/Lesson.vue | 16 ++++++++++++++--
 src/main.js               |  8 ++++----
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9d249564c..c383be6cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,9 +21,22 @@ export default {
 pre {
   overflow: auto;
 }
-
 .focus-outline:focus {
   outline: 0;
   box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4);
 }
+.code, code {
+  border-radius: 3px;
+  background-color: rgba(27,31,35,0.05);
+  padding: 0.2rem 0.3rem;
+  margin: 0 -0.1rem;
+  font-size: 85%;
+  font-family: SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+}
+pre code {
+  margin: 0.5rem 0;
+  padding: 0.6rem 0.8rem;
+  display: block;
+  font-size: 12px;
+}
 </style>
diff --git a/src/components/Lesson.vue b/src/components/Lesson.vue
index 51f23ebf0..1e235c4eb 100644
--- a/src/components/Lesson.vue
+++ b/src/components/Lesson.vue
@@ -17,12 +17,10 @@
         <h1 class="f3">{{lessonTitle}}</h1>
         <div class="lesson-text lh-copy" v-html="parsedText"></div>
       </div>
-
       <div class="exercise pv4 ph2 ph4-l mb5" style="background: #F6F7F9; max-width: 700px">
         <div class="editor bg-white">
           <MonacoEditor
             :editorOptions="options"
-            class="editor"
             :code="code"
             theme="vs"
             language="javascript"
@@ -186,6 +184,20 @@ export default {
   width: 100%;
   height: 35vh;
 }
+.code, code {
+  border-radius: 3px;
+  background-color: rgba(27,31,35,0.05);
+  padding: 0.2rem 0.3rem;
+  margin: 0 -0.1rem;
+  font-size: 85%;
+  font-family: SFMono-Regular, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
+}
+pre code {
+  margin: 0.5rem 0;
+  padding: 0.6rem 0.8rem;
+  display: block;
+  font-size: 12px;
+}
 .indent-1 {
   padding-left: 1rem;
 }
diff --git a/src/main.js b/src/main.js
index 68bac731c..995425020 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,7 @@
+// Global styles. Opt-in single-purpose atoms only, no hairy css "frameworks".
+import 'tachyons'
+import 'ipfs-css'
+
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
@@ -11,10 +15,6 @@ import LessonPw04 from './lessons/Pw/04.vue'
 import LessonPw05 from './lessons/Pw/05.vue'
 import LessonPw06 from './lessons/Pw/06.vue'
 
-// Global styles. Opt-in single-purpose atoms only, no hairy css "frameworks".
-import 'tachyons'
-import 'ipfs-css'
-
 Vue.use(VueRouter)
 
 const routes = [