diff --git a/app/Http/Controllers/ItemController.php b/app/Http/Controllers/ItemController.php index c29a0f87..bee81ff5 100644 --- a/app/Http/Controllers/ItemController.php +++ b/app/Http/Controllers/ItemController.php @@ -14,7 +14,7 @@ class ItemController extends Controller */ public function index() { - $data['apps'] = new Item; + $data['apps'] = Item::all(); return view('items.list', $data); } @@ -26,6 +26,9 @@ class ItemController extends Controller public function create() { // + $data = []; + return view('items.create', $data); + } /** @@ -37,6 +40,20 @@ class ItemController extends Controller public function store(Request $request) { // + $validatedData = $request->validate([ + 'title' => 'required|max:255', + 'url' => 'required', + ]); + + $item = new Item; + + $item->title = $request->title; + $item->colour = $request->colour; + $item->url = $request->url; + + $item->save(); + + return redirect()->route('items.index'); } /** diff --git a/database/migrations/2018_01_27_155922_create_items_table.php b/database/migrations/2018_01_27_155922_create_items_table.php index c9afdcd7..3d78e48b 100644 --- a/database/migrations/2018_01_27_155922_create_items_table.php +++ b/database/migrations/2018_01_27_155922_create_items_table.php @@ -16,10 +16,10 @@ class CreateItemsTable extends Migration Schema::create('items', function (Blueprint $table) { $table->increments('id'); $table->string('title'); - $table->string('colour'); - $table->string('icon'); + $table->string('colour')->nullable(); + $table->string('icon')->nullable(); $table->string('url'); - $table->text('description'); + $table->text('description')->nullable(); $table->boolean('pinned')->default(false); $table->timestamps(); }); diff --git a/public/css/app.css b/public/css/app.css index 8341a7ef..0e36976c 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -264,7 +264,7 @@ body { flex-direction: column; } -#app header { +#app .content > header { background: rgba(0, 0, 0, 0.4); padding: 20px; } @@ -294,3 +294,150 @@ body { padding: 20px; } +.module-container { + -webkit-box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); + box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); + border: 1px solid #cdced8; + background: #f9fafd; + max-width: 1000px; + width: 100%; + margin: 0 40px; +} + +.module-container header { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-top: 1px solid #fff; + background: #f2f3f6; + font-size: 16px; + border-bottom: 1px solid #dbdce3; + height: 60px; + position: relative; +} + +.module-container header .section-title { + font-size: 18px; + color: #5b5b5b; + margin-left: 25px; +} + +.module-container .table { + width: 100%; +} + +.module-container .table thead th { + background: #f2f3f6; + color: #767d94; + border-top: 1px solid #fff; + text-align: left; + font-size: 13px; + text-transform: uppercase; + padding: 15px 25px; +} + +.module-container .table td.form-error { + background: #e69191; + color: white; + text-align: center; + padding: 20px; +} + +.module-actions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.module-actions .button { + font-size: 18px; + color: #515564; + padding: 0 10px; + border: none; + border-left: 1px solid #cdced8; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + line-height: 1; + position: relative; + background: transparent; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + min-width: 65px; + height: 60px; + text-decoration: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +.module-actions .button:after { + position: absolute; + content: ""; + top: 0; + left: 0; + bottom: 0; + border-right: 1px solid #fff; +} + +.module-actions .button span { + display: inline-block; + line-height: 1; + font-size: 9px; + font-weight: 400; + text-transform: uppercase; + color: #ababab; + position: relative; + top: 4px; + margin: 0; +} + +div.create { + padding: 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +div.create .input { + width: 260px; + margin: 20px; +} + +div.create .input label { + width: 100%; + font-size: 13px; + color: #9094a5; + margin-bottom: 15px; + display: block; + font-weight: 300; +} + +div.create .input input { + width: 100%; + border: 1px solid #dedfe2; + padding: 10px; + border-radius: 6px; +} + diff --git a/public/mix-manifest.json b/public/mix-manifest.json index 0ced93a7..6135b847 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,4 +1,4 @@ { "/js/app.js": "/js/app.js?id=068e51303377c8c7b893", - "/css/app.css": "/css/app.css?id=34cd25f0407dd290e45c" + "/css/app.css": "/css/app.css?id=e2a8c3c0352639070f5c" } \ No newline at end of file diff --git a/resources/assets/sass/_app.scss b/resources/assets/sass/_app.scss index f7e1a65b..5ca3408d 100644 --- a/resources/assets/sass/_app.scss +++ b/resources/assets/sass/_app.scss @@ -21,11 +21,12 @@ body { flex-grow: 1; display: flex; flex-direction: column; - } - header { + > header { background: rgba(0,0,0, 0.4); padding: 20px; } + + } main { padding: 50px; display: flex; @@ -42,4 +43,116 @@ body { background: #76b8bf; border-radius: 6px; padding: 20px; -} \ No newline at end of file +} +.module-container { + box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); + border: 1px solid #cdced8; + background: #f9fafd; + max-width: 1000px; + width: 100%; + margin: 0 40px; + header { + display: flex; + justify-content: space-between; + align-items: center; + border-top: 1px solid #fff; + background: #f2f3f6; + font-size: 16px; + border-bottom: 1px solid #dbdce3; + height: 60px; + position: relative; + .section-title { + font-size: 18px; + color: #5b5b5b; + margin-left: 25px; + } + } + .table { + width: 100%; + thead { + th { + background: #f2f3f6; + color: #767d94; + border-top: 1px solid #fff; + text-align: left; + font-size: 13px; + text-transform: uppercase; + padding: 15px 25px; + } + } + td { + &.form-error { + background: #e69191; + color: white; + text-align: center; + padding: 20px; + } + } + } +} +.module-actions { + display: flex; + justify-content:space-between; + align-items: center; + + .button { + font-size: 18px; + color: lighten($app-text, 15%); + padding: 0 10px; + border: none; + border-left: 1px solid $table-line; + display: flex; + line-height: 1; + position:relative; + background: transparent; + flex-direction: column; + justify-content: center; + align-items: center; + min-width: 65px; + height: 60px; + text-decoration: none; + box-sizing: border-box; + &:after { + position: absolute; + content: ""; + top:0; + left:0; + bottom: 0; + border-right: 1px solid #fff; + } + span { + display: inline-block; + line-height: 1; + font-size: 9px; + font-weight: 400; + text-transform: uppercase; + color: #ababab; + position: relative; + top: 4px; + margin: 0; + } + } +} +div.create { + padding: 30px; + display: flex; + flex-wrap: wrap; + .input { + width: 260px; + margin: 20px; + label { + width: 100%; + font-size: 13px; + color: lighten($app-text, 40%); + margin-bottom: 15px; + display: block; + font-weight: 300; + } + input { + width: 100%; + border: 1px solid #dedfe2; + padding: 10px; + border-radius: 6px; + } + } +} diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss index 071b0ccc..937bda3f 100644 --- a/resources/assets/sass/_variables.scss +++ b/resources/assets/sass/_variables.scss @@ -3,3 +3,16 @@ $body-bg: #cfd2d4; +$app-text: #2f313a; + +$app-block-color: #b71234; +$app-light-color: #84764d; +$app-dark-color: #1d1d1b; + +$app-green: #0eb584; +$app-red: #d64d55; +$app-blue: #47a4e9; +$app-purple: #514a77; + +$table-heading: #f2f3f6; +$table-line: #cdced8; diff --git a/resources/views/items/create.blade.php b/resources/views/items/create.blade.php index e69de29b..801bea44 100644 --- a/resources/views/items/create.blade.php +++ b/resources/views/items/create.blade.php @@ -0,0 +1,31 @@ +@extends('app') + +@section('content') +
+
+
+
Add application
+
+ +
+
+
+ {!! csrf_field() !!} +
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+@endsection \ No newline at end of file diff --git a/resources/views/items/list.blade.php b/resources/views/items/list.blade.php index 20b1e184..daeeb368 100644 --- a/resources/views/items/list.blade.php +++ b/resources/views/items/list.blade.php @@ -1,7 +1,13 @@ @extends('app') @section('content') - +
+
+
Application list
+
+ Add +
+
@@ -14,36 +20,30 @@ - first()) @foreach($apps as $app) - + @endforeach @else - @endif - @if($apps->lastPage() > 1) - - - - @endif - */ ?>
{{ $app->title }} {{ $app->description }} {{ $app->url }} - +
+ No items found
{!! $apps->links() !!}
+
@endsection \ No newline at end of file