Gaffen/JamVueSSRPOC
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

begin styling

Browse Source
This commit is contained in:
Gaffen 2019-08-21 07:17:41 +01:00
parent 2e6a91b804
commit 28fd65323c
9 changed files with 88 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
layouts/base.njk
View File

@ -4,17 +4,19 @@
<div class="hidden"> <div class="hidden">
{% include "./partials/sprite.svg" %} {% include "./partials/sprite.svg" %}
</div> </div>
<header> <div class="gridwrap">
<h1>SSR Rendering in Nunjucks proof of concept</h1> <header>
</header> <h1>SSR Rendering in Nunjucks proof of concept</h1>
{% block body %} </header>
{{ content | safe }} {% block body %}
{% endblock %} {{ content | safe }}
{% block footer %} {% endblock %}
<footer class="sitefooter"> {% block footer %}
{% include 'partials/footer.njk' %} <footer class="sitefooter col col--1">
</footer> {% include 'partials/footer.njk' %}
<script async="true" src="/assets/{{manifest.main.js}}"></script> </footer>
{% endblock %} <script async="true" src="/assets/{{manifest.main.js}}"></script>
{% endblock %}
</div>
</body> </body>
</html> </html>

34
layouts/home.njk
View File

@ -1,17 +1,25 @@
{% extends "./base.njk" %} {% extends "./base.njk" %}
{% block body %} {% block body %}
<h2>Simple Vue Component (Why would you do this?)</h2> <div class="col col--1-3">
{% vue { component:"HelloWorld" } %} <h2>Simple Vue Component (Why would you do this?)</h2>
{% vue { component:"HelloWorld", props: { message: "This is a test" } } %} {% vue { component:"HelloWorld" } %}
{% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %} {% vue { component:"HelloWorld", props: { message: "This is a test" } } %}
<h2>Todo List</h2> {% vue { component:"HelloWorld", props: { message: "Of server rendered Vue components" } } %}
{% vue { component:"ListComp"} %} </div>
{% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %} <div class="col col--1-3">
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %} <h2>Todo List</h2>
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %} {% vue { component:"ListComp"} %}
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %} {% vue { component:"ListComp", props: { startlist: [{message:"Render Vue in Nunjucks"}, {message:"???"}, {message:"Profit!"}] } } %}
<section id="content" role="main" class="content-wrapper"> </div>
{{content|safe}} <div class="col col--1-3">
</section> {% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/last_time.mp3" } } %}
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/generation_y.mp3" } } %}
{% vue { component:"RecordPlayer", props: { record: "https://hearsepileup.rip/music/pretty_shiny_things.mp3" } } %}
</div>
<div class="col col--1">
<section id="content" role="main" class="content-wrapper">
{{content|safe}}
</section>
</div>
{% endblock %} {% endblock %}

2
layouts/partials/header.njk
View File

@ -6,7 +6,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>{{meta.title}}</title> <title>{{meta.title}}</title>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,700&display=swap" as="style" /> <link rel="preload" href="https://fonts.googleapis.com/css?family=Work+Sans:400,600,800&display=swap" as="style" />
<link rel="preload" href="/assets/{{manifest.main.css}}" as="style" /> <link rel="preload" href="/assets/{{manifest.main.css}}" as="style" />
<link rel="preload" href="/assets/{{manifest.main.js}}" as="script"/> <link rel="preload" href="/assets/{{manifest.main.js}}" as="script"/>

2
package.json
View File

@ -7,7 +7,7 @@
"build": "webpack --env production && eleventy", "build": "webpack --env production && eleventy",
"compile": "npx eleventy", "compile": "npx eleventy",
"start": "npm run devserve", "start": "npm run devserve",
"devserve": "NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js", "devserve": "webpack --env development && NODE_ENV=development npx babel-node --presets @babel/preset-env ./serve.js",
"spritesheet": "node ./svgsprite.js" "spritesheet": "node ./svgsprite.js"
}, },
"author": "Matthew Gaffen", "author": "Matthew Gaffen",

5
serve.js
View File

@ -78,7 +78,7 @@ function startServer() {
], ],
fn: (event, file) => { fn: (event, file) => {
debug(`File changed: ${file}`); debug(`File changed: ${file}`);
// build_site(false); build_site(false);
} }
} }
// { // {
@ -177,6 +177,7 @@ compiler.hooks.afterCompile.tap("eleventy", params => {
} catch (err) { } catch (err) {
console.error(err); console.error(err);
} }
build_site();
sync.reload(); sync.reload();
}); });
build_site();

28
src/js/components/ListComp.vue
View File

@ -2,8 +2,10 @@
<div class="ListComp" v-bind:data-startlist="startlist"> <div class="ListComp" v-bind:data-startlist="startlist">
<ol> <ol>
<li v-for="(item, index) in list"> <li v-for="(item, index) in list">
<p>{{ item.message }}</p> <div class="itemtext">
<button v-on:click="removeItem(index)">&times;</button> <p>{{ item.message }}</p>
<button v-on:click="removeItem(index)">&times;</button>
</div>
</li> </li>
</ol> </ol>
<form v-on:submit.prevent> <form v-on:submit.prevent>
@ -42,5 +44,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
ol { ol {
border: 1px solid grey; border: 1px solid grey;
width: 100%;
padding-right: 20px;
}
li {
text-align: left;
button {
width: 20px;
height: 20px;
padding: 2px 0 0 0px;
border: 0;
border-radius: 50%;
}
}
.itemtext {
display: flex;
align-items: center;
}
p {
flex: 1;
}
button:focus {
outline: 0;
} }
</style> </style>

7
src/scss/base/_base.scss
View File

@ -1,7 +1,7 @@
html { html {
font-size: $bodysize; font-size: $bodysize;
font-family: $body; font-family: $body;
color: $dark; color: $white;
} }
body { body {
@ -11,6 +11,11 @@ body {
text-align: center; text-align: center;
} }
h1 {
line-height: 1.4em;
color: $red;
}
.site { .site {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;

32
src/scss/settings/_variables.scss
View File

@ -2,36 +2,34 @@
Colours Colours
========================================================================== */ ========================================================================== */
$black: #000000; $black: #1c1c1e;
$white: #ffffff; $white: #e9eade;
$link-active: #7393a7; $link-active: #7393a7;
$dark: #4b4b4b; $dark: #67696e;
$dark: #575656;
$med-dark-grey: #b3b2b2; $med-dark-grey: #b3b2b2;
$med-grey: #464646; $med-grey: #adadad;
$med-grey-1: #d2d2d2;
$light-grey-1: #adadad;
$light-grey: #ebebeb; $light-grey: #ebebeb;
$white-grey-1: #f1f1f1; $white-grey: #f5f5f5;
$white-grey: #f8f8f8;
$pipa-navy: #030f1f; $red: #d63939;
$pipa-teal: #00aab7; $orange: #ed8d44;
$blue: #545eea;
$bg: $white-grey; $bg: $black;
/* ========================================================================== /* ==========================================================================
Typography Typography
========================================================================== */ ========================================================================== */
$small: 12px; $small: 16px;
$medium: 18px; $medium: 14px;
$bodysize: $medium; $bodysize: $small;
$bodyline: 1.222; $bodyline: 1.5em;
$body: "Roboto", sans-serif; $body: "Work Sans", "Arial", sans-serif;
$title: "Roboto Slab", serif;
/* ========================================================================== /* ==========================================================================
Media Queries Media Queries

2
src/svg/playbutton.svg
View File

@ -5,5 +5,5 @@
<style type="text/css"> <style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;} .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style> </style>
<path class="st0" d="M5,3L1,6V0L5,3z"/> <path class="st0" d="M6,3L2,6V0L6,3z"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 478 B

After

Width:  |  Height:  |  Size: 478 B