Update status form view 🎉

resources/views/timeline/partial/new-form.blade.php

@@ -1,35 +1,35 @@
     <div class="card card-md-rounded-0">
-      <div class="card-header font-weight-bold">New Post</div>
+      <div class="card-header bg-white font-weight-bold">
+        <div>{{__('Create New Post')}}</div>
+      </div>
       <div class="card-body" id="statusForm">
-        @if (session('error'))
+
-            <div class="alert alert-danger">
+        <form method="post" action="{{route('timeline.personal')}}" enctype="multipart/form-data">
-                {{ session('error') }}
-            </div>
-        @endif
-        <form method="post" action="/timeline" enctype="multipart/form-data">
           @csrf
           <input type="hidden" name="filter_name" value="">
           <input type="hidden" name="filter_class" value="">
           <div class="form-group">
-            <label class="font-weight-bold text-muted small">Upload Image</label>
+            <div class="custom-file">
-            <input type="file" class="form-control-file" id="fileInput" name="photo[]" accept="image/*" multiple="">
+              <input type="file" class="custom-file-input" id="fileInput" name="photo[]" accept="image/*" multiple="">
+              <label class="custom-file-label" for="fileInput">Upload Image(s)</label>
+            </div>
             <small class="form-text text-muted">
               Max Size: @maxFileSize(). Supported formats: jpeg, png, gif, bmp. Limited to {{config('pixelfed.max_album_length')}} photos per post.
             </small>
           </div>
           <div class="form-group">
-            <label class="font-weight-bold text-muted small">Caption</label>
+            <textarea class="form-control" name="caption" placeholder="Add a caption here" autocomplete="off" data-limit="{{config('pixelfed.max_caption_length')}}" rows="1"></textarea>
-            <input type="text" class="form-control" name="caption" placeholder="Add a caption here" autocomplete="off">
+            <p class="form-text text-muted small text-right">
-            <small class="form-text text-muted">
+              <span class="caption-counter">0</span>
-              Max length: {{config('pixelfed.max_caption_length')}} characters.
+              <span>/</span>
-            </small>
+              <span>{{config('pixelfed.max_caption_length')}}</span>
+            </p>
           </div>
           <div class="form-group">
-            <button class="btn btn-primary btn-sm px-3 py-1 font-weight-bold" type="button" data-toggle="collapse" data-target="#collapsePreview" aria-expanded="false" aria-controls="collapsePreview">
+            <button class="btn btn-outline-primary btn-sm px-3 py-1 font-weight-bold" type="button" data-toggle="collapse" data-target="#collapsePreview" aria-expanded="false" aria-controls="collapsePreview">
-              Options
+              Options &nbsp; <i class="fas fa-chevron-down"></i>
             </button>
             <div class="collapse" id="collapsePreview">
-
               <div class="form-group pt-3">
                 <label class="font-weight-bold text-muted small">CW/NSFW</label>
                 <div class="switch switch-sm">
@@ -41,17 +41,6 @@
                 </small>
               </div>
 
-{{--               <div class="form-group">
-                <label class="font-weight-bold text-muted small">Visibility</label>
-                <div class="switch switch-sm">
-                  <input type="checkbox" class="switch" id="visibility-switch" name="visibility">
-                  <label for="visibility-switch" class="small font-weight-bold">Public | Followers-only</label>
-                </div>
-                <small class="form-text text-muted">
-                  Toggle this to limit this post to your followers only.
-                </small>
-              </div> --}}
-
               <div class="form-group d-none form-preview">
                 <label class="font-weight-bold text-muted small">Photo Preview</label>
                 <figure class="filterContainer">
@@ -69,7 +58,7 @@
               </div>  
             </div>
           </div>  
-          <button type="submit" class="btn btn-outline-primary btn-block">Post</button>
+          <button type="submit" class="btn btn-outline-primary btn-block font-weight-bold">Create Post</button>
         </form>
       </div>  
     </div>