Initial vue commit

This commit is contained in:
Joel Collins 2019-01-28 09:53:22 +00:00
parent b561513c4f
commit 859ffc2496
21 changed files with 11115 additions and 651 deletions

43
src/App.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div id="app">
<IpInput msg="Is your name good or bad?."/>
<img alt="Vue logo" src="./assets/images/logo.png">
<IpDisplay/>
</div>
</template>
<script>
// Import axios for HTTP requests
import axios from 'axios'
// Import basic UIkit
import UIkit from 'uikit';
// Import UIkit icon set
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);
// Import components
import IpInput from './components/IpInput.vue'
import IpDisplay from './components/IpDisplay'
// Export main app
export default {
name: 'app',
components: {
IpInput,
IpDisplay
}
}
</script>
<style lang="less">
// Basic UIkit CSS
@import "../node_modules/uikit/src/less/uikit.less";
// Custom UIkit CSS modifications
@import "./assets/less/theme.less";
#app {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
</style>

BIN
src/assets/images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

View file

@ -0,0 +1,51 @@
/*
* UIkit Theme for Highlight.js
*/
.hljs {
display: block;
color: #333;
}
.hljs-comment,
.hljs-meta { color: #969896; }
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote { color: @global-danger-background; }
.hljs-keyword,
.hljs-selector-tag,
.hljs-type { color: #1f34aa; }
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute { color: #0086b3; }
.hljs-section,
.hljs-name { color: #63a35c; }
.hljs-tag { color: #333; }
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo { color: #795da3; }
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link { text-decoration: underline; }

507
src/assets/less/theme.less Normal file
View file

@ -0,0 +1,507 @@
// UIkit Core
@import "../../../node_modules/uikit/src/less/uikit.theme.less";
// Highlight.js
@import "./highlight.less";
// UIkit
// ========================================================================
@global-font-family: ProximaNova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@global-font-size: 15px;
@global-xxlarge-font-size: 38px;
@global-xlarge-font-size: 30px;
@global-large-font-size: 24px;
@global-medium-font-size: 20px;
@global-small-font-size: 14px;
@global-emphasis-color: #222;
//
// Base
//
@base-code-font-family: 'Roboto Mono', monospace;
@base-code-font-size: 12px;
@base-heading-font-weight: 300;
@base-pre-font-size: 12px;
@base-pre-padding: 25px;
@base-pre-background: @global-muted-background;
@base-pre-border-width: 0;
@base-pre-border-radius: 0;
.hook-base-body() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
//
// Container
//
@container-max-width: 1380px;
@container-small-max-width: 650px;
//
// Navbar
//
@inverse-navbar-nav-item-color: @inverse-global-color;
@inverse-navbar-nav-item-hover-color: @inverse-global-emphasis-color;
//
// Nav
//
@nav-header-font-size: 12px;
//
// Subnav
//
@inverse-subnav-item-color: @inverse-global-color;
@inverse-subnav-item-hover-color: @inverse-global-emphasis-color;
//
// Tab
//
@tab-item-padding-horizontal: 20px;
@tab-item-padding-vertical: 9px;
@tab-item-border-width: 2px;
@tab-item-font-size: 12px;
.hook-tab-item() { line-height: 20px; }
//
// Table
//
@table-header-cell-font-size: 12px;
//
// Label
//
@label-font-size: 12px;
//
// Text
//
.hook-text-lead() { font-weight: 300; }
.hook-text-large() { font-weight: 300; }
//
// Utility
//
@inverse-logo-color: @inverse-global-emphasis-color;
@inverse-logo-hover-color: @inverse-global-emphasis-color;
//
// Off-canvas
//
@offcanvas-bar-background: #fff;
@offcanvas-bar-color-mode: dark;
//
// Inverse
//
@inverse-global-color: fade(@global-inverse-color, 80%);
@inverse-global-muted-color: fade(@global-inverse-color, 60%);
/* ========================================================================
Theme
========================================================================== */
@sidebar-left-width: 240px;
@sidebar-left-width-xl: 300px;
@sidebar-right-width: 200px;
@sidebar-right-left: 0px;
@sidebar-right-left-xl: 60px;
/* HTML
========================================================================== */
/*
* Force vertical scrollbar
* 1. `overflow-x` has to be on the `body` element for Safari to prevent horizontal scrolling on touch
This causes a random bug showing a vertical scrollbar in combination with some fonts like `Poppins`
This is why `overflow-y` must also be set to `hidden`
*/
html { overflow-y: scroll; }
/* 1 */
body { overflow: hidden; }
/* Documentation Sidebars
========================================================================== */
/*
* Sidebar Left
*/
.tm-sidebar-left {
position: fixed;
top: @navbar-nav-item-height;
bottom: 0;
box-sizing: border-box;
width: @sidebar-left-width !important;
padding: 40px 40px 60px 40px;
border-right: 1px @global-border solid;
overflow: auto;
}
/*
* Sidebar Right
*/
.tm-sidebar-right {
position: absolute;
top: 0;
left: ~'calc(100% + @{sidebar-right-left})';
width: @sidebar-right-width;
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left})'; }
.tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width - (@sidebar-right-width + @sidebar-right-left); }
}
/* Large screen and bigger */
@media (min-width: 1400px) {
.tm-sidebar-left {
width: @sidebar-left-width-xl !important;
padding: 45px 45px 60px 45px;
}
.tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left-xl})'; }
.tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width-xl - (@sidebar-right-width + @sidebar-right-left-xl); }
}
/* UIkit modifier
========================================================================== */
/*
* Navbar
*/
.tm-navbar-container:not(.uk-navbar-transparent) {
background: linear-gradient(to left, #28a5f5, @global-primary-background);
}
.tm-navbar-container .uk-navbar-nav > li > a,
.tm-navbar-container .uk-navbar-item:not(.uk-logo),
.tm-navbar-container .uk-navbar-toggle {
height: 70px;
font-size: 13px;
}
// Color Mode
.tm-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) {}
// Line Mode
@navbar-nav-item-line-margin-vertical: 20px;
@navbar-nav-item-line-margin-horizontal: @navbar-nav-item-padding-horizontal;
@navbar-nav-item-line-height: 1px;
@navbar-nav-item-line-background: currentColor;
@navbar-nav-item-line-transition-duration: 0.3s;
.tm-navbar-container .uk-navbar-nav > li > a {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
left: @navbar-nav-item-line-margin-horizontal;
right: ~'calc(102% - @{navbar-nav-item-line-margin-horizontal})';
bottom: @navbar-nav-item-line-margin-vertical;
height: @navbar-nav-item-line-height;
background-color: @navbar-nav-item-line-background;
transition: @navbar-nav-item-line-transition-duration ease-in-out;
transition-property: right;
}
}
.tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; }
/*
* Nav
*/
.tm-nav > li.uk-active > a { position: relative; }
.tm-nav > li.uk-active > a:before {
content: "";
position: absolute;
top: 15px;
left: -25px;
width: 15px;
border-top: 1px solid @global-primary-background;
}
.tm-nav .uk-nav-header {
padding: 8px 0;
border-bottom: 1px solid @global-border;
}
/*
* Subnav
*/
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.tm-subnav { margin-left: -50px; }
.tm-subnav > * { padding-left: 50px; }
}
.tm-subnav > * > :first-child { text-transform: capitalize; }
/*
* Label (Changelog()
*/
.tm-label-changelog {
width: 80px;
margin-top: 3px;
}
/*
* Button
*/
.tm-button-default,
.tm-button-primary { border-radius: 500px; }
.tm-button-default {}
.tm-button-large { line-height: 48px; }
.tm-button-primary {}
.hook-inverse() {
.tm-button-default {
color: @inverse-global-color;
border-color: @inverse-global-muted-color;
}
.tm-button-primary {
background: #fff !important;
color: @global-primary-background !important;
}
.tm-button-primary:hover { box-shadow: 0 10px 40px rgba(30,135,240,1); }
}
/*
* Section
*/
.tm-section-primary {
background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
}
.tm-section-intro {
background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat,
#fff;
background-size: 100% 75%;
}
/*
* Heading
*/
.tm-h4,
.tm-h5,
.tm-h6 {
font-family: Montserrat;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: @global-muted-color;
}
.tm-h4 { font-size: 14px; }
.tm-h5 { font-size: 12px; }
.tm-h6 { font-size: 11px; }
.hook-inverse() {
.tm-h4,
.tm-h5,
.tm-h6 { color: rgba(255, 255, 255, 0.7); }
}
/*
* Text
*/
.tm-text-large { font-size: 18px; }
/*
* Box shadow
*/
.tm-box-shadow-medium {
box-shadow: 2px 12px 35px rgba(0,0,0,0.1),
0 1px 6px rgba(0,0,0,0.05);
}
.tm-box-shadow-large {
box-shadow: -40px 40px 160px 0 rgba(0,0,0,0.08),
-8px 8px 15px 0 rgba(120,120,120,0.04),
3px 3px 30px 0 rgba(0,0,0,0.04);
}
.tm-box-shadow-modal { box-shadow: 3px 3px 40px 0 rgba(0,0,0,0.06); }
/*
* Overlay
*/
.tm-overlay-default { background: fade(@global-background, 50%); }
/*
* Modal
*/
.tm-modal-dialog { background: @global-muted-background; }
.tm-modal-header { padding: 20px 30px; }
.tm-modal-body { padding: 0; }
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.tm-modal-header { padding: 25px 50px; }
.tm-modal-body { padding: 0 50px; }
}
/* Desktop and bigger */
@media (min-width: @breakpoint-xlarge) {
.tm-modal-header { padding: 50px 120px; }
.tm-modal-body { padding: 0 120px; }
}
.tm-modal-close-full {
background: transparent;
padding: 30px;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.tm-modal-close-full { padding: @global-medium-margin; }
}
/* Utilities
========================================================================== */
/*
* Heading fragment
*/
.tm-heading-fragment > a {
color: inherit;
text-decoration: none;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
h2.tm-heading-fragment > a:before {
content: "#";
position: absolute;
width: 25px;
margin-left: -25px;
color: @global-muted-color;
}
}
/* Reset container for docs
========================================================================== */
.tm-main .uk-container {
padding-left: @container-padding-horizontal;
padding-right: @container-padding-horizontal;
}
/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {
.tm-main .uk-container {
padding-left: @container-padding-horizontal-s;
padding-right: @container-padding-horizontal-s;
}
}
/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {
.tm-main .uk-container {
padding-left: @container-padding-horizontal-m;
padding-right: @container-padding-horizontal-m;
}
}
/* Pro
========================================================================== */
/* Desktop and bigger */
@media (min-width: @breakpoint-large) {
.tm-intro-text { margin-top: 30px; }
}
/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {
.tm-intro-text { margin-top: 90px; }
.tm-intro-image { margin-right: -75px; }
}

View file

@ -0,0 +1,5 @@
<template>
<div>
<p>Current hostname is: {{ $store.getters.host }}</p>
</div>
</template>

View file

@ -0,0 +1,67 @@
<template>
<div class="hello">
{{ msg }}
<div class="uk-margin">
<form @submit.prevent="handleSubmit">
<div class="uk-inline">
<span class="uk-form-icon" uk-icon="icon: server"></span>
<input @input="IpChanged" v-bind:class="IpFormClasses" class="uk-input uk-form-width-medium uk-form-small" type="text" name="flavor" placeholder="localhost">
</div>
<button class="uk-button uk-button-default uk-form-small">Connect</button>
</form>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
IpChanged: function(event) {
if (!(event.target.value == this.$store.getters.host)) {
this.hostname = event.target.value
}
},
handleSubmit: function(event) {
if (this.hostname != "badhost") {
this.$store.commit('changeHost', this.hostname)
alert(`Connecting to ${this.$store.getters.host}`)
this.$store.commit('changeConnected', true)
}
else {
alert("I won't connect to a bad host!")
this.$store.commit('changeConnected', false)
this.$store.commit('changeAvailable', false)
}
}
},
data: function () {
return {
hostname: "localhost"
}
},
computed: {
IpFormClasses: function () {
return {
'uk-form-danger': !this.$store.getters.available,
'uk-form-success': this.$store.getters.connected
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>

10
src/main.js Normal file
View file

@ -0,0 +1,10 @@
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')

35
src/store.js Normal file
View file

@ -0,0 +1,35 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
host: '',
connected: '',
available: ''
},
mutations: {
changeHost(state, host) {
state.host = host
},
changeConnected(state, connected) {
state.connected = connected
},
changeAvailable(state, available) {
state.available = available
}
},
getters: {
host: state => state.host,
connected: state => state.connected,
available: state => state.available
},
actions: {
}
})