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:
parent
c29e398eb7
commit
9d7f473e76
24
site/client/app/app.js
Normal file
24
site/client/app/app.js
Normal 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);
|
11
site/client/app/components/landing.js
Normal file
11
site/client/app/components/landing.js
Normal file
@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../views/landing.html'),
|
||||
|
||||
ready: function() {
|
||||
setTimeout(function() {
|
||||
$('.container-form-landing').addClass('active')
|
||||
}, 400);
|
||||
}
|
||||
|
||||
};
|
5
site/client/app/components/lobby.js
Normal file
5
site/client/app/components/lobby.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
|
||||
template: require('../views/lobby.html')
|
||||
|
||||
};
|
28
site/client/app/routes.js
Normal file
28
site/client/app/routes.js
Normal 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('/')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
29
site/client/app/views/landing.html
Normal file
29
site/client/app/views/landing.html
Normal 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>
|
1
site/client/app/views/lobby.html
Normal file
1
site/client/app/views/lobby.html
Normal file
@ -0,0 +1 @@
|
||||
LOBBY HIER BLA BLA
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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; }
|
||||
}
|
||||
}
|
@ -9,4 +9,5 @@ elixir.config.publicDir = '../public/';
|
||||
|
||||
elixir(function(mix) {
|
||||
mix.sass('app.scss');
|
||||
mix.browserify('../../app/app.js');
|
||||
});
|
||||
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
@ -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
|
BIN
site/public/assets/img/inner-bg.jpg
Normal file
BIN
site/public/assets/img/inner-bg.jpg
Normal file
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 |
@ -1,7 +0,0 @@
|
||||
$('.register-btn').on('click', function() {
|
||||
$('.icon-load').show();
|
||||
});
|
||||
|
||||
$('.btn-login').on('click', function() {
|
||||
$('.overlay').addClass('active');
|
||||
});
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,5 @@
|
||||
<?php
|
||||
|
||||
get('/', function() {
|
||||
return view('tpl.landing')
|
||||
->withSection('landing');
|
||||
return view('app');
|
||||
});
|
Loading…
Reference in New Issue
Block a user