This commit is contained in:
Chris 2018-02-01 14:45:59 +00:00
parent 185a2798e8
commit 93a7728ec2
24 changed files with 825 additions and 43760 deletions

View file

@ -7,6 +7,18 @@ use App\Item;
class ItemController extends Controller
{
/**
* Display a listing of the resource on the dashboard.
*
* @return \Illuminate\Http\Response
*/
public function dash()
{
$data['apps'] = Item::all();
return view('welcome', $data);
}
/**
* Display a listing of the resource.
*
@ -45,15 +57,10 @@ class ItemController extends Controller
'url' => 'required',
]);
$item = new Item;
Item::create($request->all());
$item->title = $request->title;
$item->colour = $request->colour;
$item->url = $request->url;
$item->save();
return redirect()->route('items.index');
return redirect()->route('items.index')
->with('success','Item created successfully');
}
/**
@ -75,7 +82,12 @@ class ItemController extends Controller
*/
public function edit($id)
{
//
// Get the item
$item = Item::find($id);
// show the edit form and pass the nerd
return view('items.edit')
->with('item', $item);
}
/**
@ -87,7 +99,15 @@ class ItemController extends Controller
*/
public function update(Request $request, $id)
{
//
$validatedData = $request->validate([
'title' => 'required|max:255',
'url' => 'required',
]);
Item::find($id)->update($request->all());
return redirect()->route('items.index')
->with('success','Item updated successfully');
}
/**
@ -99,5 +119,8 @@ class ItemController extends Controller
public function destroy($id)
{
//
Item::find($id)->delete();
return redirect()->route('items.index')
->with('success','Item deleted successfully');
}
}

View file

@ -7,4 +7,7 @@ use Illuminate\Database\Eloquent\Model;
class Item extends Model
{
//
protected $fillable = [
'title', 'url', 'colour', 'icon', 'description', 'pinned'
];
}

View file

@ -8,7 +8,8 @@
"php": ">=7.0.0",
"fideloper/proxy": "~3.3",
"laravel/framework": "5.5.*",
"laravel/tinker": "~1.0"
"laravel/tinker": "~1.0",
"laravelcollective/html": "^5.5"
},
"require-dev": {
"filp/whoops": "~2.0",

69
composer.lock generated
View file

@ -4,8 +4,8 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
"This file is @generated automatically"
],
"hash": "7f1915ec708986f5c88e22e683d74275",
"content-hash": "b7904d07d1e1765a0a199aa11d6301a3",
"hash": "850bc78e9043df3a1a293a403c9d5838",
"content-hash": "2e42f992455e9f27258038e27b67f5a6",
"packages": [
{
"name": "dnoegel/php-xdg-base-dir",
@ -604,6 +604,71 @@
],
"time": "2017-12-18 16:25:11"
},
{
"name": "laravelcollective/html",
"version": "v5.5.1",
"source": {
"type": "git",
"url": "https://github.com/LaravelCollective/html.git",
"reference": "2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/LaravelCollective/html/zipball/2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6",
"reference": "2f6dc39ab3655724a615fe8a652d8b7f04fc9ac6",
"shasum": ""
},
"require": {
"illuminate/http": "5.5.*",
"illuminate/routing": "5.5.*",
"illuminate/session": "5.5.*",
"illuminate/support": "5.5.*",
"illuminate/view": "5.5.*",
"php": ">=7.0.0"
},
"require-dev": {
"illuminate/database": "5.5.*",
"mockery/mockery": "~0.9.4",
"phpunit/phpunit": "~5.4"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Collective\\Html\\HtmlServiceProvider"
],
"aliases": {
"Form": "Collective\\Html\\FormFacade",
"Html": "Collective\\Html\\HtmlFacade"
}
}
},
"autoload": {
"psr-4": {
"Collective\\Html\\": "src/"
},
"files": [
"src/helpers.php"
]
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Taylor Otwell",
"email": "taylorotwell@gmail.com"
},
{
"name": "Adam Engebretson",
"email": "adam@laravelcollective.com"
}
],
"description": "HTML and Form Builders for the Laravel Framework",
"homepage": "http://laravelcollective.com",
"time": "2017-08-31 14:46:03"
},
{
"name": "league/flysystem",
"version": "1.0.41",

View file

@ -167,7 +167,7 @@ return [
/*
* Package Service Providers...
*/
Collective\Html\HtmlServiceProvider::class,
/*
* Application Service Providers...
*/
@ -206,8 +206,10 @@ return [
'Eloquent' => Illuminate\Database\Eloquent\Model::class,
'Event' => Illuminate\Support\Facades\Event::class,
'File' => Illuminate\Support\Facades\File::class,
'Form' => Collective\Html\FormFacade::class,
'Gate' => Illuminate\Support\Facades\Gate::class,
'Hash' => Illuminate\Support\Facades\Hash::class,
'Html' => Collective\Html\HtmlFacade::class,
'Lang' => Illuminate\Support\Facades\Lang::class,
'Log' => Illuminate\Support\Facades\Log::class,
'Mail' => Illuminate\Support\Facades\Mail::class,

825
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -17,5 +17,8 @@
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.5.7"
},
"dependencies": {
"node-sass": "^4.7.2"
}
}

159
public/css/app.css vendored
View file

@ -220,6 +220,18 @@ th {
padding: 0;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body {
background: #cfd2d4;
}
@ -287,11 +299,31 @@ body {
.item {
width: 300px;
height: 200px;
height: 130px;
margin: 20px;
background: #76b8bf;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
border-radius: 6px;
padding: 20px;
-webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
color: white;
overflow: hidden;
position: relative;
}
.item:after {
content: "";
position: absolute;
width: 130px;
height: 134px;
border-radius: 50%;
position: absolute;
right: -78px;
top: -2px;
background: rgba(255, 255, 255, 0.1);
-webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2);
}
.module-container {
@ -330,6 +362,8 @@ body {
.module-container .table {
width: 100%;
margin: 0;
background: #fff;
}
.module-container .table thead th {
@ -342,11 +376,34 @@ body {
padding: 15px 25px;
}
.module-container .table td.form-error {
.module-container .table tbody tr:hover {
background: #fefbf2;
}
.module-container .table tbody tr:hover td:first-child {
position: relative;
}
.module-container .table tbody tr:hover td:first-child:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
background: #0eb584;
}
.module-container .table tbody td {
padding: 20px 25px;
font-size: 13px;
color: #2f313a;
}
.module-container .table tbody td.form-error {
background: #e69191;
color: white;
text-align: center;
padding: 20px;
}
.module-actions {
@ -441,3 +498,97 @@ div.create .input input {
border-radius: 6px;
}
/*! Huebee v2.0.0
http://huebee.buzz
---------------------------------------------- */
.huebee {
position: absolute;
z-index: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
transition: opacity 0.15s, -webkit-transform 0.15s;
transition: opacity 0.15s, transform 0.15s;
transition: opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
}
.huebee.is-hidden {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.huebee.is-static-open {
position: relative;
z-index: auto;
}
.huebee__container {
position: absolute;
left: 0;
top: 5px;
padding: 10px;
background: #EEE;
border-radius: 5px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.huebee.is-static-open .huebee__container {
position: relative;
display: inline-block;
left: auto;
top: auto;
-webkit-box-shadow: none;
box-shadow: none;
}
.huebee__canvas {
display: block;
cursor: pointer;
}
.huebee__cursor {
width: 15px;
height: 15px;
position: absolute;
left: 0px;
top: 0px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 3px solid white;
border-radius: 5px;
pointer-events: none;
}
.huebee__cursor.is-hidden {
opacity: 0;
}
.huebee__close-button {
display: block;
position: absolute;
width: 24px;
height: 24px;
top: -9px;
right: -9px;
border-radius: 12px;
background: #222;
}
.huebee__close-button__x {
stroke: white;
stroke-width: 3;
stroke-linecap: round;
}
.huebee__close-button:hover {
background: white;
cursor: pointer;
}
.huebee__close-button:hover .huebee__close-button__x {
stroke: #222;
}

43178
public/js/app.js vendored

File diff suppressed because one or more lines are too long

2
public/js/jquery-3.3.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,4 +1,4 @@
{
"/js/app.js": "/js/app.js?id=068e51303377c8c7b893",
"/css/app.css": "/css/app.css?id=e2a8c3c0352639070f5c"
"/css/app.css": "/css/app.css?id=b9e76574bf93ad55c746",
"/js/app.js": "/js/app.js?id=b9bd881783c66c420371"
}

View file

@ -1,22 +1,7 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
$.when( $.ready ).then(function() {
$('.color-picker').each( function( i, elem ) {
var hueb = new Huebee( elem, {
// options
});
});
});

9
resources/assets/js/huebee.js vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,9 @@
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: $body-bg;
}
@ -38,11 +44,28 @@ body {
.item {
width: 300px;
height: 200px;
height: 130px;
margin: 20px;
background: #76b8bf;
background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25));
border-radius: 6px;
padding: 20px;
//border: 2px solid rgba(0,0,0,0.4);
box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
color: white;
overflow: hidden;
position: relative;
&:after {
content: "";
position: absolute;
width: 130px;
height: 134px;
border-radius: 50%;
position: absolute;
right: -78px;
top: -2px;
background: rgba(255,255,255,0.1);
box-shadow: 0 0 40px 0px rgba(0,0,0,0.2);
}
}
.module-container {
box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4);
@ -69,6 +92,9 @@ body {
}
.table {
width: 100%;
margin:0;
background:#fff;
thead {
th {
background: #f2f3f6;
@ -80,12 +106,34 @@ body {
padding: 15px 25px;
}
}
tbody {
tr {
&:hover {
background: #fefbf2;
td:first-child {
position: relative;
&:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
background: $app-green;
}
}
}
}
td {
padding: 20px 25px;
font-size: 13px;
color: $app-text;
&.form-error {
background: #e69191;
color: white;
text-align: center;
padding: 20px;
}
}
}
}

83
resources/assets/sass/_huebee.scss vendored Normal file
View file

@ -0,0 +1,83 @@
/*! Huebee v2.0.0
http://huebee.buzz
---------------------------------------------- */
.huebee {
position: absolute;
z-index: 1;
transform: translateY(0px);
transition: opacity 0.15s, transform 0.15s;
}
.huebee.is-hidden {
opacity: 0;
transform: translateY(10px);
}
.huebee.is-static-open {
position: relative;
z-index: auto;
}
.huebee__container {
position: absolute;
left: 0;
top: 5px;
padding: 10px;
background: #EEE;
border-radius: 5px;
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
}
.huebee.is-static-open .huebee__container {
position: relative;
display: inline-block;
left: auto;
top: auto;
box-shadow: none;
}
.huebee__canvas {
display: block;
cursor: pointer;
}
.huebee__cursor {
width: 15px;
height: 15px;
position: absolute;
left: 0px;
top: 0px;
box-sizing: content-box;
border: 3px solid white;
border-radius: 5px;
pointer-events: none;
}
.huebee__cursor.is-hidden { opacity: 0; }
.huebee__close-button {
display: block;
position: absolute;
width: 24px;
height: 24px;
top: -9px;
right: -9px;
border-radius: 12px;
background: #222;
}
.huebee__close-button__x {
stroke: white;
stroke-width: 3;
stroke-linecap: round;
}
.huebee__close-button:hover {
background: white;
cursor: pointer;
}
.huebee__close-button:hover .huebee__close-button__x {
stroke: #222;
}

View file

@ -10,3 +10,6 @@
// Bootstrap
@import "app";
// Huebee
@import "huebee";

View file

@ -24,6 +24,21 @@
test
</header>
<main>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
@if (count($errors) < 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@yield('content')
</main>
@ -32,5 +47,8 @@
</footer>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="/js/app.js"></script>
</body>
</html>

View file

@ -1,31 +1,9 @@
@extends('app')
@section('content')
<form action="{{ route('items.store') }}" class="create" method="post" />
<section class="module-container">
<header>
<div class="section-title">Add application</div>
<div class="module-actions">
<button type="submit"class="button"><i class="fa fa-plus"></i><span>Save</span></button>
</div>
</header>
<div class="create">
{!! csrf_field() !!}
<div class="input">
<label>Application name</label>
<input type="text" name="title" value="{{ old('title') }}" />
</div>
<div class="input">
<label>Colour</label>
<input type="text" name="colour" value="{{ old('colour') }}" />
</div>
<div class="input">
<label>URL</label>
<input type="text" name="url" value="{{ old('url') }}" />
</div>
</div>
</section>
{!! Form::open(array('route' => 'items.store','method'=>'POST')) !!}
@include('items.form')
{!! Form::close() !!}
</form>
@endsection

View file

@ -0,0 +1,9 @@
@extends('app')
@section('content')
{!! Form::model($item, ['method' => 'PATCH','route' => ['items.update', $item->id]]) !!}
@include('items.form')
{!! Form::close() !!}
@endsection

View file

@ -0,0 +1,24 @@
<section class="module-container">
<header>
<div class="section-title">Add application</div>
<div class="module-actions">
<button type="submit"class="button"><i class="fa fa-plus"></i><span>Save</span></button>
</div>
</header>
<div class="create">
{!! csrf_field() !!}
<div class="input">
<label>Application name</label>
{!! Form::text('title', null, array('placeholder' => 'Title','class' => 'form-control')) !!}
</div>
<div class="input">
<label>Colour</label>
{!! Form::text('colour', null, array('placeholder' => 'Hex Colour','class' => 'form-control color-picker')) !!}
</div>
<div class="input">
<label>URL</label>
{!! Form::text('url', null, array('placeholder' => 'Url','class' => 'form-control')) !!}
</div>
</div>
</section>

View file

@ -26,9 +26,9 @@
<td>{{ $app->title }}</td>
<td>{{ $app->description }}</td>
<td>{{ $app->url }}</td>
<td class="text-center"><a href="{!! route('items.edit', $app->id) !!}" title="Edit {!! $app->title !!}"><i class="fa fa-pencil"></i></a></td>
<td class="text-center"><a href="{!! route('items.edit', $app->id) !!}" title="Edit {!! $app->title !!}"><i class="fa fa-pencil"></i>Edit</a></td>
<td class="text-center">
<a href="{!! route('items.destroy', $app->id) !!}" title="Delete {!! $app->title !!}" class="confirm-delete"><i class="fa fa-trash-o"></i></a>
<a href="{!! route('items.destroy', $app->id) !!}" title="Delete {!! $app->title !!}" class="confirm-delete"><i class="fa fa-trash-o"></i>Delete</a>
</td>
</tr>
@endforeach

View file

@ -1,10 +1,16 @@
@extends('app')
@section('content')
<section class="item">
@if($apps->first())
@foreach($apps as $app)
<section class="item" style="background-color: {{ $app->colour }}">
{{ $app->title }}
Item
</section>
@endforeach
@else
There are currently no Applications, add one here
@endif
@endsection

View file

@ -11,9 +11,7 @@
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::get('/', 'ItemController@dash');
Route::resources([
'items' => 'ItemController',

5
webpack.mix.js vendored
View file

@ -11,5 +11,8 @@ let mix = require('laravel-mix');
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
mix.scripts([
'resources/assets/js/huebee.js',
'resources/assets/js/app.js'
], 'public/js/app.js')
.sass('resources/assets/sass/app.scss', 'public/css').version();