1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-10-31 10:36:53 +00:00

prepare vue and little styling

This commit is contained in:
devfake 2015-06-21 13:09:29 +02:00
parent c29e398eb7
commit 9d7f473e76
18 changed files with 149 additions and 68 deletions

24
site/client/app/app.js Normal file
View File

@ -0,0 +1,24 @@
var Vue = require('vue');
var router = require('./routes');
Vue.use(require('vue-resource'));
Vue.http.headers.common['X-CSRF-TOKEN'] = $('.token').attr('content');
var app = new Vue({
el: 'body',
data: {
name: '',
view: '',
section: ''
},
components: {
'landing': require('./components/landing'),
'lobby': require('./components/lobby')
}
});
router.init(app);

View File

@ -0,0 +1,11 @@
module.exports = {
template: require('../views/landing.html'),
ready: function() {
setTimeout(function() {
$('.container-form-landing').addClass('active')
}, 400);
}
};

View File

@ -0,0 +1,5 @@
module.exports = {
template: require('../views/lobby.html')
};

28
site/client/app/routes.js Normal file
View File

@ -0,0 +1,28 @@
var Router = require('director').Router;
var router = new Router();
module.exports = {
init: function(app) {
router.on('/', function() {
app.view = 'landing';
app.section = 'landing';
});
router.on('/lobby', function() {
app.view = 'lobby';
app.section = 'inner';
});
this.configure();
router.init('/');
},
configure: function() {
router.configure({
notfound: function() {
router.setRoute('/')
}
})
}
}

View File

@ -0,0 +1,29 @@
<section class="container-landing" id="lol">
<div class="wrap-landing">
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
<p class="teaser-landing">
Play The Witcher Gwent Card-Game online!<br>
Play with randomly generated teams, or build your own!
</p>
<div class="container-form-landing">
<form class="form-session">
<input type="text" placeholder="Username" class="field-session" autofocus>
<input type="password" placeholder="Password" class="field-session">
<div class="wrap-btn-action btn-register-action">
<input type="submit" value="Register" class="btn-action">
<i class="icon-load"></i>
</div>
</form>
<span class="choose">or</span>
<a href="#/lobby" class="btn-second btn-guest">Play as guest</a>
<a href="#" class="btn-none btn-login">Login</a>
</div>
</div>
</section>

View File

@ -0,0 +1 @@
LOBBY HIER BLA BLA

View File

@ -13,6 +13,11 @@ body {
font-family: 'Titillium Web', sans-serif;
}
body.inner {
background: url(../img/inner-bg.jpg) center top no-repeat;
background-size: cover;
}
::-moz-selection {
background: rgba($main, .99);
color: #fff;

View File

@ -18,7 +18,9 @@ body.landing {
width: 100%;
margin: 12% 0 0 0;
//tablet: 9%
@include mq(medium) {
margin: 9% 0 0 0;
}
}
.teaser-landing {
@ -43,7 +45,7 @@ body.landing {
opacity: 0;
&.active {
transition: all .4s ease-in-out .2s;
transition: all .4s ease-in-out 0s;
margin: 60px 0;
opacity: 1;

View File

@ -25,3 +25,15 @@ $main: #d96f1f;
@mixin transition($type: all) {
transition: $type .3s ease-in-out 0s;
}
@mixin mq($point) {
@if $point == big {
@media (max-width: 1600px) { @content; }
}
@else if $point == medium {
@media (max-width: 1450px) { @content; }
}
@else if $point == small {
@media (max-width: 600px) { @content; }
}
}

View File

@ -9,4 +9,5 @@ elixir.config.publicDir = '../public/';
elixir(function(mix) {
mix.sass('app.scss');
mix.browserify('../../app/app.js');
});

View File

@ -3,5 +3,10 @@
"devDependencies": {
"gulp": "^3.8.8",
"laravel-elixir": "^2.0.0"
},
"dependencies": {
"director": "^1.2.8",
"vue": "^0.12.1",
"vue-resource": "^0.1.3"
}
}

View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="csrf-token" class="token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gwent Online</title>
@ -11,16 +12,12 @@
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
</head>
<body class="{{ $section }}">
<body class="@{{ section }}">
@yield('content')
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{{ url('assets/js/app.js') }}"></script>
<script>
$('.container-form-landing').addClass('active');
</script>
<script src="{{ url('assets/js/bundle.js') }}"></script>
</body>
</html>

View File

@ -1,37 +0,0 @@
@extends('app')
@section('content')
@include('partials.modals.login')
<section class="container-landing">
<div class="wrap-landing">
<img src="{{ url('assets/img/logo-big.png') }}" width="243" height="85" alt="Gwent" class="logo-big">
<p class="teaser-landing">
Play The Witcher Gwent Card-Game online!<br>
Play with randomly generated teams, or build your own!
</p>
<div class="container-form-landing">
<form class="form-session">
<input type="text" placeholder="Username" class="field-session" autofocus>
<input type="password" placeholder="Password" class="field-session">
<div class="wrap-btn-action btn-register-action">
<input type="submit" value="Register" class="btn-action">
<i class="icon-load"></i>
</div>
</form>
<span class="choose">or</span>
<a href="#" class="btn-second btn-guest">Play as guest</a>
<a href="#" class="btn-none btn-login">Login</a>
</div>
</div>
</section>
@stop

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 91 KiB

View File

@ -1,7 +0,0 @@
$('.register-btn').on('click', function() {
$('.icon-load').show();
});
$('.btn-login').on('click', function() {
$('.overlay').addClass('active');
});

View File

@ -6,8 +6,8 @@ use Exception;
use Symfony\Component\HttpKernel\Exception\HttpException;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
class Handler extends ExceptionHandler
{
class Handler extends ExceptionHandler {
/**
* A list of the exception types that should not be reported.
*
@ -23,6 +23,7 @@ class Handler extends ExceptionHandler
* This is a great spot to send exceptions to Sentry, Bugsnag, etc.
*
* @param \Exception $e
*
* @return void
*/
public function report(Exception $e)
@ -35,10 +36,15 @@ class Handler extends ExceptionHandler
*
* @param \Illuminate\Http\Request $request
* @param \Exception $e
*
* @return \Illuminate\Http\Response
*/
public function render($request, Exception $e)
{
if($e instanceof NotFoundHttpException) {
//return redirect('/');
}
return parent::render($request, $e);
}
}

View File

@ -1,6 +1,5 @@
<?php
get('/', function() {
return view('tpl.landing')
->withSection('landing');
return view('app');
});