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

Frontend ui refactor

public/mix-manifest.json

@@ -1,14 +1,14 @@
 {
     "/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
     "/js/app.js": "/js/app.js?id=3cd2f5b91d50cb028347",
-    "/css/app.css": "/css/app.css?id=74d8a4ede8e2fb2de6cb",
-    "/css/appdark.css": "/css/appdark.css?id=9b6627072c6c5de39494",
-    "/css/landing.css": "/css/landing.css?id=876ebeefc3f7dc522464",
+    "/css/app.css": "/css/app.css?id=dc78da2a3292050711db",
+    "/css/appdark.css": "/css/appdark.css?id=63fd724c34ce97cf2b3a",
+    "/css/landing.css": "/css/landing.css?id=8c1010ee51f792193274",
     "/js/components.js": "/js/components.js?id=7e2c0820d0ca5af5aeaa",
     "/js/compose.js": "/js/compose.js?id=4d8c53b4575f463214f2",
     "/js/developers.js": "/js/developers.js?id=1359f11c7349301903f8",
     "/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
-    "/js/profile.js": "/js/profile.js?id=0bb23e4365ea2cd8516c",
+    "/js/profile.js": "/js/profile.js?id=b267c34e3f9168a8b307",
     "/js/search.js": "/js/search.js?id=0d3d080dc05f4f49b204",
     "/js/status.js": "/js/status.js?id=bf48fe9060a74d1180f2",
     "/js/timeline.js": "/js/timeline.js?id=dcff289e9d726e50b0e6"

resources/assets/js/components/Profile.vue

@@ -358,7 +358,7 @@
 					<div class="card-columns" v-if="mode == 'grid'">
 						<div class="p-sm-2 p-md-3" v-for="(s, index) in timeline">
 							<a class="card info-overlay card-md-border-0" :href="s.url">
-								<img :src="previewUrl(s)" class="img-fluid">
+								<img :src="previewUrl(s)" class="img-fluid w-100">
 							</a>
 						</div>
 					</div>

resources/assets/sass/custom.scss

@@ -124,6 +124,14 @@ body, button, input, textarea {
 
 .info-overlay:hover .info-overlay-text {
     display: flex;
+    h5 {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .info-overlay-text {
@@ -503,6 +511,10 @@ details summary::-webkit-details-marker {
     box-sizing: content-box;
 }
 
+.media-drawer-filters img {
+    object-fit: contain;
+}
+
 .reply-container {
     .post-thumbnail {
         object-fit: cover;
@@ -540,3 +552,7 @@ details summary::-webkit-details-marker {
 .tooltip-notification .tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
     border-top-color: #dc3545; 
 }
+
+.carousel-control-prev-icon, .carousel-control-next-icon {
+    filter: drop-shadow(0px 0px 1px black);
+}