Merge pull request #644 from pixelfed/frontend-ui-refactor

Frontend ui refactor

config/pixelfed.php

@@ -23,7 +23,7 @@ return [
     | This value is the version of your PixelFed instance.
     |
     */
-    'version' => '0.5.5',
+    'version' => '0.5.6',
 
     /*
     |--------------------------------------------------------------------------

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/components.js": "/js/components.js?id=f7eff1b7304c561d5f8c",
+    "/js/components.js": "/js/components.js?id=94aa594e1104382b038d",
     "/js/app.js": "/js/app.js?id=763d01bb175be69c8ad3",
     "/css/app.css": "/css/app.css?id=986cee6cfca852babf8e",
     "/js/timeline.js": "/js/timeline.js?id=415bfde862ab8c5b4548",

resources/assets/js/components/PostComponent.vue

@@ -11,9 +11,11 @@
   background: #fff;
 }
 
-.postPresenterContainer {
-  background: #000;
-  min-height: 600px;
+@media(min-width: 720px) {
+  .postPresenterContainer {
+    background: #000;
+    min-height: 600px;
+  }
 }
 </style>
 <template>
@@ -51,7 +53,7 @@
           </div>
         </div>
        </div>
-        <div class="col-12 col-md-8 status-photo px-0 mx-0">
+        <div class="col-12 col-md-8 px-0 mx-0">
             <div class="postPresenterLoader text-center">
               <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
             </div>
@@ -222,6 +224,7 @@ pixelfed.presenter = {
       let el = $('<img>');
       el.attr('src', media[0]['url']);
       el.attr('title', media[0]['description']);
+      el.addClass('img-fluid');
       wrapper.append(el);
       if(status.sensitive == true) {
         let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';

resources/assets/js/components/Timeline.vue

@@ -346,7 +346,11 @@
 		display: flex;
 		align-items: center;
 		background: #000;
-		min-height: 600px;
+	}
+	@media(min-width: 720px) {
+		.postPresenterContainer {
+			min-height: 600px;
+		}
 	}
 	.cursor-pointer {
 		cursor: pointer;