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; font-family: 'Titillium Web', sans-serif;
} }
body.inner {
background: url(../img/inner-bg.jpg) center top no-repeat;
background-size: cover;
}
::-moz-selection { ::-moz-selection {
background: rgba($main, .99); background: rgba($main, .99);
color: #fff; color: #fff;

View File

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

View File

@ -24,4 +24,16 @@ $main: #d96f1f;
@mixin transition($type: all) { @mixin transition($type: all) {
transition: $type .3s ease-in-out 0s; 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) { elixir(function(mix) {
mix.sass('app.scss'); mix.sass('app.scss');
mix.browserify('../../app/app.js');
}); });

View File

@ -3,5 +3,10 @@
"devDependencies": { "devDependencies": {
"gulp": "^3.8.8", "gulp": "^3.8.8",
"laravel-elixir": "^2.0.0" "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> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="csrf-token" class="token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gwent Online</title> <title>Gwent Online</title>
@ -11,16 +12,12 @@
<link href="{{ url('assets/css/app.css') }}" rel="stylesheet"> <link href="{{ url('assets/css/app.css') }}" rel="stylesheet">
</head> </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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="{{ url('assets/js/app.js') }}"></script> <script src="{{ url('assets/js/bundle.js') }}"></script>
<script>
$('.container-form-landing').addClass('active');
</script>
</body> </body>
</html> </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

@ -1,20 +1,20 @@
<?php <?php
namespace Gwent\Exceptions; namespace Gwent\Exceptions;
use Exception; use Exception;
use Symfony\Component\HttpKernel\Exception\HttpException; use Symfony\Component\HttpKernel\Exception\HttpException;
use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler; 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. * A list of the exception types that should not be reported.
* *
* @var array * @var array
*/ */
protected $dontReport = [ protected $dontReport = [
HttpException::class, HttpException::class,
]; ];
/** /**
@ -22,23 +22,29 @@ class Handler extends ExceptionHandler
* *
* This is a great spot to send exceptions to Sentry, Bugsnag, etc. * This is a great spot to send exceptions to Sentry, Bugsnag, etc.
* *
* @param \Exception $e * @param \Exception $e
*
* @return void * @return void
*/ */
public function report(Exception $e) public function report(Exception $e)
{ {
return parent::report($e); return parent::report($e);
} }
/** /**
* Render an exception into an HTTP response. * Render an exception into an HTTP response.
* *
* @param \Illuminate\Http\Request $request * @param \Illuminate\Http\Request $request
* @param \Exception $e * @param \Exception $e
*
* @return \Illuminate\Http\Response * @return \Illuminate\Http\Response
*/ */
public function render($request, Exception $e) public function render($request, Exception $e)
{ {
return parent::render($request, $e); if($e instanceof NotFoundHttpException) {
//return redirect('/');
}
return parent::render($request, $e);
} }
} }

View File

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