Skip to content

feat: lovely lesson layout #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 26, 2018
Merged

feat: lovely lesson layout #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0352646
feat: lovely lesson layout
olizilla Jul 26, 2018
d8b5f1b
feat: nice code styles
olizilla Jul 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +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>
39 changes: 39 additions & 0 deletions src/components/Button.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
157 changes: 79 additions & 78 deletions src/components/Lesson.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,70 @@
<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"
: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>

<script>
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')
Expand Down Expand Up @@ -90,7 +106,8 @@ let oldIPFS
export default {
components: {
MonacoEditor,
Explorer
Explorer,
Button
},
data: self => {
return {
Expand All @@ -107,6 +124,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) {
Expand Down Expand Up @@ -156,53 +180,30 @@ 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;
}
.lesson-text {
grid-area: lesson-text;
}
.lesson-title {
grid-area: lesson-title;
height: 35vh;
}
button {
border: solid #222 2px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
.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
}
.run {
grid-area: run;
padding-top: 5px;
pre code {
margin: 0.5rem 0;
padding: 0.6rem 0.8rem;
display: block;
font-size: 12px;
}
.output * {
margin-top: 5px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
.indent-1 {
padding-left: 1rem;
}
.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>
8 changes: 4 additions & 4 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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 = [
Expand Down