item changes

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');
     }
 
     /**

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('colour')->nullable();
-            $table->string('icon');
+            $table->string('icon')->nullable();
             $table->string('url');
-            $table->text('description');
+            $table->text('description')->nullable();
             $table->boolean('pinned')->default(false);
             $table->timestamps();
         });

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;
+}
+

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"
 }

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;
-}
+}
+.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;
+		}
+	}
+}

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;

resources/views/items/create.blade.php

@@ -0,0 +1,31 @@
+@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>
+@endsection

resources/views/items/list.blade.php

@@ -1,7 +1,13 @@
 @extends('app')
 
 @section('content')
-
+        <section class="module-container">
+            <header>
+                <div class="section-title">Application list</div>
+                <div class="module-actions">
+                    <a href="{{ route('items.create') }}" title="" class="button"><i class="fa fa-plus"></i><span>Add</span></a>
+                </div>
+            </header>
 
             <table class="table table-hover">
                 <thead>
@@ -14,36 +20,30 @@
                     </tr>
                 </thead>
                 <tbody>
-                <?php /*
                     @if($apps->first())
                         @foreach($apps as $app)
                             <tr>
                                 <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->name !!}"><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></a></td>
                                 <td class="text-center">
-                                        <a href="{!! route('items.delete', $app->id) !!}" title="Delete {!! $app->name !!}" 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></a>
                                 </td>
                             </tr>
                         @endforeach
                     @else
                         <tr>
-                            <td colspan="6" class="form-error text-center">
+                            <td colspan="5" class="form-error text-center">
                                 <strong>No items found</strong>
                             </td>
                         </tr>
                     @endif
 
                 
-                @if($apps->lastPage() > 1)
-                    <tr>
-                        <td colspan="10" class="text-center">{!! $apps->links() !!}</td>
-                    </tr>
-                @endif
-                */ ?>
                 </tbody>
             </table>
+        </section>
 
 
 @endsection