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

Frontend ui refactor

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