Redo app form page

public/css/app.css

@@ -799,6 +799,26 @@ body {
           align-items: center;
 }
 
+.module-actions .input {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+  line-height: 1;
+  font-size: 9px;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #ababab;
+  padding: 0 10px;
+}
+
+.module-actions .input label {
+  margin-top: 3px;
+}
+
 .module-actions .button {
   font-size: 18px;
   color: #515564;
@@ -1142,15 +1162,15 @@ a.settinglink {
 }
 
 #appimage img {
-  max-width: 150px;
+  max-width: 95px;
 }
 
-#sapconfig {
+#sapconfig, .newblock {
   display: none;
   width: 100%;
 }
 
-#sapconfig h2 {
+#sapconfig h2, .newblock h2 {
   background: #f2f3f6;
   padding: 18px 25px;
   margin-left: -15px;
@@ -1163,7 +1183,7 @@ a.settinglink {
   font-weight: 500;
 }
 
-#sapconfig .items {
+#sapconfig .items, .newblock .items {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/css/app.css": "/css/app.css?id=24e9bb4fa993b66f0572",
+    "/css/app.css": "/css/app.css?id=d60b65455c61760b1750",
     "/js/app.js": "/js/app.js?id=f18d23b8fc7a094a2c66"
 }

resources/assets/sass/_app.scss

@@ -452,6 +452,20 @@ body {
     justify-content:space-between;
 	align-items: center;
 	
+	.input {
+		display: flex;
+		flex-direction: column-reverse;
+		line-height: 1;
+		font-size: 9px;
+		font-weight: 400;
+		text-transform: uppercase;
+		color: #ababab;
+        padding: 0 10px;  
+		label {
+			margin-top: 3px;
+		}
+	}
+
     .button {
         font-size: 18px;
         color: lighten($app-text, 15%);
@@ -755,11 +769,11 @@ div.create {
 
 #appimage {
 	img {
-		max-width: 150px;
+		max-width: 95px;
 	}
 }
 
-#sapconfig {
+#sapconfig, .newblock {
 	display: none;
 	width: 100%;
 	h2 {

resources/lang/en/app.php

@@ -73,6 +73,7 @@ return [
     'apps.tag_name' => 'Tag name',
     'apps.tags' => 'Tags',
     'apps.override' => 'If different to main url',
+    'apps.preview' => 'Preview',
 
     'user.user_list' => 'Users',
     'user.add_user' => 'Add user',

resources/views/items/form.blade.php

@@ -2,20 +2,7 @@
         <header>
             <div class="section-title">{{ __('app.apps.add_application') }}</div>
             <div class="module-actions">
-                <button type="submit"class="button"><i class="fa fa-save"></i><span>{{ __('app.buttons.save') }}</span></button>
-                <a href="{{ route('items.index', [], false) }}" class="button"><i class="fa fa-ban"></i><span>{{ __('app.buttons.cancel') }}</span></a>
-            </div>
-        </header>
-        <div id="create" class="create">
-            {!! csrf_field() !!}
-            {!! Form::hidden('class', '') !!}
             <div class="input">
-                <label>{{ __('app.apps.application_name') }} *</label>
-                {!! Form::text('title', null, array('placeholder' => __('app.apps.title'), 'id' => 'appname', 'class' => 'form-control')) !!}
-                <hr />
-                <label>{{ strtoupper(__('app.url')) }}</label>
-                {!! Form::text('url', null, array('placeholder' => __('app.url'), 'id' => 'appurl', 'class' => 'form-control')) !!}
-                <hr />
                 <label>{{ __('app.apps.pinned') }}</label>
                 {!! Form::hidden('pinned', '0') !!}
                 <label class="switch">
@@ -27,20 +14,40 @@
                     <input type="checkbox" name="pinned" value="1"<?php echo $set_checked;?> />
                     <span class="slider round"></span>
                 </label>
+            </div>
 
+                <button type="submit"class="button"><i class="fa fa-save"></i><span>{{ __('app.buttons.save') }}</span></button>
+                <a href="{{ route('items.index', [], false) }}" class="button"><i class="fa fa-ban"></i><span>{{ __('app.buttons.cancel') }}</span></a>
+            </div>
+        </header>
+        <div id="create" class="create">
+            {!! csrf_field() !!}
+            {!! Form::hidden('class', '') !!}
+            <div class="input">
+                <label>{{ __('app.apps.application_name') }} *</label>
+                {!! Form::text('title', null, array('placeholder' => __('app.apps.title'), 'id' => 'appname', 'class' => 'form-control')) !!}
             </div>
             <div class="input">
                 <label>{{ __('app.apps.apptype') }} *</label>
                 {!! Form::select('class', App\Application::applist(), null, array('class' => 'form-control')) !!}
-                <hr />
+            </div>
+
+            <div class="input">
                 <label>{{ __('app.apps.colour') }} *</label>
                 {!! Form::text('colour', null, array('placeholder' => __('app.apps.hex'),'class' => 'form-control color-picker')) !!}
-                <hr />
+            </div>
+
+            <div class="input">
+                <label>{{ strtoupper(__('app.url')) }}</label>
+                {!! Form::text('url', null, array('placeholder' => __('app.url'), 'id' => 'appurl', 'class' => 'form-control')) !!}
+            </div>
+
+            <div class="input">
                 <label>{{ __('app.apps.tags') }} ({{ __('app.optional') }})</label>
                 {!! Form::select('tags[]', $tags, $current_tags, ['class' => 'tags', 'multiple']) !!}
             </div>
+
             <div class="input">
-                <label>{{ __('app.apps.icon') }}</label>
                 <div class="icon-container">
                     <div id="appimage">
                     @if(isset($item->icon) && !empty($item->icon) || old('icon'))
@@ -61,6 +68,20 @@
                 </div>
             </div>
 
+
+
+            <div class="newblock" style="display: block;">
+                <h2>Preview</h2>
+            </div>
+
+
+            <div class="input">
+                @include('items.preview')
+            </div>
+
+
+
+            
             @if(isset($item) && $item->enhanced())
             <div id="sapconfig" style="display: block;">
                 @if(isset($item))

resources/views/items/preview.blade.php

@@ -0,0 +1,21 @@
+                    <?php
+                    $item = $item ?? new App\Item;
+                    ?>
+                    <section class="item-container" data-id="">
+                        <div class="item" style="background-color: {{ $item->colour ?? '#222' }}">
+                            @if(isset($item->icon) && !empty($item->icon))
+                            <img class="app-icon" src="{{ asset('/storage/'.$item->icon) }}" />
+                            @else
+                            <img class="app-icon" src="{{ asset('/img/heimdall-icon-small.png') }}" />
+                            @endif
+                            <div class="details">
+                                <div class="title{{ title_color($item->colour) ?? 'white' }}">{{ $item->title ?? '' }}</div>
+                                @if($item->enhanced())
+                                <div data-id="{{ $item->id }}" data-dataonly="{{ $item->getconfig()->dataonly ?? '0' }}" class="livestats-container"></div>
+                                @endif
+                            </div>
+                            <a class="link{{ title_color($item->colour) }}"{!! $item->link_target !!} href="{{ $item->link }}"><i class="fas {{ $item->link_icon }}"></i></a>
+                        </div>
+                        <a class="item-edit" href="{{ route($item->link_type.'.edit', [ $item->id ], false) }}"><i class="fas fa-pencil"></i></a>
+                        
+                    </section>