X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;ds=sidebyside;f=view%2Fglobal.css;h=aab6e8d67d0e3011399a1cef4ad9fea9ac44a6ff;hb=2588ac1a164a48925b22bfc79d3ffa6ffa1490f1;hp=6bee34b8bc6f3b3391bc0d0a9f476c396af5df1c;hpb=fad760f46abb43d17271506f484dc8ccebfa05b4;p=friendica.git

diff --git a/view/global.css b/view/global.css
index 6bee34b8bc..aab6e8d67d 100644
--- a/view/global.css
+++ b/view/global.css
@@ -110,6 +110,12 @@ span.connector {
   margin: 0;
 }
 
+.wall-item-response {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .type-link blockquote, .type-video blockquote {
   margin-left: 0px;
   max-height: 160px;
@@ -685,29 +691,58 @@ audio {
 .imagegrid-row {
 	display: -ms-flexbox; /* IE10 */
 	display: flex;
-	/* Both the following values should be the same to ensure consistent margins between images in the grid */
+	margin-top: 1em;
 	column-gap: 5px;
-	margin-top: 5px;
 }
 
-/* This helps allocating space for image before they loaded, preventing content shifting once they are
+.imagegrid-column {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	flex-direction: column;
+	row-gap: 5px;
+}
+
+.imagegrid-column img {
+	-ms-flex: 50%; /* IE10 */
+	flex: 50%;
+}
+/**
+ * Image grid settings END
+ **/
+
+/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
  * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
  * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
- * In the image grid, this ratio isn't known in advance so no value is set in the stylesheet.
+ * This ratio is never known in advance so no value is set in the stylesheet.
  */
-.imagegrid-row figure {
+figure.img-allocated-height {
 	position: relative;
 	background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
+	margin: 0;
 }
-.imagegrid-row figure img{
+figure.img-allocated-height img{
 	position: absolute;
 	top: 0;
 	right: 0;
 	bottom: 0;
 	left: 0;
+	width: 100%;
 }
+
 /**
- * Image grid settings END
+ * Horizontal masonry settings START
+ **/
+.masonry-row {
+	display: -ms-flexbox; /* IE10 */
+	display: flex;
+	/* Both the following values should be the same to ensure consistent margins between images in the grid */
+	column-gap: 5px;
+	margin-top: 5px;
+}
+/**
+ * Horizontal masonry settings AND
  **/
 
 #contactblock .icon {