Mobile version / minor improvements

Author: BurntimeX

files/style/conversation.scss

@@ -28,20 +28,33 @@
 .conversationList {
 	display: flex;
 	flex-direction: column;
-	gap: 20px;
 }
 
 .conversationList__item {
-	background-color: var(--wcfContentBackground);
-	border-radius: var(--wcfBorderRadius);
-	box-shadow: var(--wcfBoxShadowCard);
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
-	padding: 20px;
 	position: relative;
 }
 
+.conversationList__item:not(:last-child) {
+	border-bottom: 1px solid var(--wcfContentBorderInner);
+}
+
+@include screen-sm-down {
+	.conversationList__item:not(:last-child) {
+		padding-bottom: 15px;
+		margin-bottom: 15px;
+	}
+}
+
+@include screen-md-up {
+	.conversationList__item:not(:last-child) {
+		padding-bottom: 20px;
+		margin-bottom: 20px;
+	}
+}
+
 html[data-color-scheme="dark"] {
 	.conversationList__item {
 		border: 1px solid var(--wcfContentBorderInner);
@@ -56,6 +69,7 @@ html[data-color-scheme="dark"] {
 }
 
 .conversationList__item__meta {
+	align-items: center;
 	display: flex;
 	gap: 10px;
 
@@ -70,28 +84,46 @@ html[data-color-scheme="dark"] {
 
 .conversationList__item__meta__content {
 	display: flex;
-	flex-direction: column;
 }
 
-.conversationList__item:not(:hover) .conversationList__item__toolbar {
-	grid-template-columns: min-content fit-content(0);
-	column-gap: 0;
+@include screen-xs {
+	.conversationList__item__meta {
+		gap: 5px;
+	}
+
+	.conversationList__item__meta__avatar img {
+		height: 24px;
+		width: 24px;
+	}
+
+	.conversationList__item__meta__content {
+		align-items: center;
+	}
+
+	.conversationList__item__meta__time {
+		display: flex;
+	}
+
+	.conversationList__item__meta__time::before {
+		content: "•";
+		margin: 0 3px;
+	}
+}
+
+@include screen-sm-up {
+	.conversationList__item__meta__content {
+		flex-direction: column;
+	}
 }
 
 .conversationList__item__toolbar {
 	align-items: center;
 	display: grid;
-	column-gap: 5px;
+	column-gap: 10px;
 	grid-template-areas: "status interactions";
 	grid-template-columns: auto fit-content(200px);
-	transition:
-		grid-template-columns 0.24s ease-in-out 0.12s,
-		column-gap 0.24s ease-in-out 0.12s;
-	z-index: 1;
-}
 
-.conversationList__item:not(:hover) .conversationList__item__interactions {
-	opacity: 0;
+	z-index: 1;
 }
 
 .conversationList__item__status {
@@ -102,15 +134,34 @@ html[data-color-scheme="dark"] {
 
 .conversationList__item__interactions {
 	display: flex;
-	gap: 5px;
 	grid-area: interactions;
 	opacity: 1;
-	transition: opacity 0.24s ease-in-out 0.12s;
 }
 
-/* todo: handle touch */
-.conversationList__item:hover .conversationList__item__interactions {
-	display: flex;
+@media (hover: hover) {
+	.conversationList__item:not(:hover) .conversationList__item__toolbar {
+		grid-template-columns: min-content fit-content(0);
+		column-gap: 0;
+	}
+
+	.conversationList__item__toolbar {
+		transition:
+			grid-template-columns 0.24s ease-in-out 0.12s,
+			column-gap 0.24s ease-in-out 0.12s;
+	}
+
+	.conversationList__item:not(:hover) .conversationList__item__interactions {
+		opacity: 0;
+	}
+
+	.conversationList__item__interactions {
+		transition: opacity 0.24s ease-in-out 0.12s;
+	}
+}
+
+.conversationList__item__interactions .button:not(:hover) {
+	background-color: transparent;
+	color: inherit;
 }
 
 .conversationList__item__interactions .dropdown {
@@ -121,11 +172,10 @@ html[data-color-scheme="dark"] {
 	display: grid;
 	grid-template-areas:
 		"markAsRead title image"
-		"labels labels image"
-		"teaser teaser image";
+		"teaser teaser image"
+		"labels labels image";
 	grid-template-columns: min-content 1fr min-content;
 	grid-template-rows: min-content min-content 1fr;
-	row-gap: 5px;
 }
 
 .conversationList__item__markAsRead {
@@ -150,34 +200,50 @@ html[data-color-scheme="dark"] {
 }
 
 .conversationList__item__title {
-	color: var(--wcfContentHeadlineLink);
 	grid-area: title;
 
 	@include wcfFontHeadline;
 	@include wcfFontBold;
+}
 
-	&:hover {
-		color: var(--wcfContentHeadlineLinkActive);
+@include screen-xs {
+	.conversationList__item__title {
+		font-size: 14px;
 	}
 }
 
 .conversationList__item__labels {
 	grid-area: labels;
+	margin-top: 5px;
 }
 
 .conversationList__item__teaser {
 	display: -webkit-box;
 	grid-area: teaser;
 	overflow: hidden;
+	margin-top: 5px;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 }
 
+@include screen-xs {
+	.conversationList__item__teaser {
+		font-size: 12px;
+	}
+}
+
 .conversationList__item__image {
 	grid-area: image;
 	width: 160px;
 	overflow: hidden;
 	border-radius: var(--wcfBorderRadius);
+	margin-left: 10px;
+}
+
+@include screen-xs {
+	.conversationList__item__image {
+		display: none;
+	}
 }
 
 .conversationList__item__image img {
@@ -199,6 +265,12 @@ html[data-color-scheme="dark"] {
 	&:hover,
 	&:focus {
 		color: inherit;
+	}
+}
+
+@media (hover: hover) {
+	.conversationList__item__link:hover,
+	.conversationList__item__link:focus {
 		text-decoration: underline;
 		text-underline-offset: 0.2em;
 	}
@@ -237,6 +309,12 @@ html[data-color-scheme="dark"] {
 	&:hover,
 	&:focus {
 		color: inherit;
+	}
+}
+
+@media (hover: hover) {
+	.conversationList__item__lastPost__link:hover,
+	.conversationList__item__lastPost__link:focus {
 		text-decoration: underline;
 		text-underline-offset: 0.2em;
 	}
@@ -250,6 +328,12 @@ html[data-color-scheme="dark"] {
 	align-items: center;
 }
 
+@include screen-xs {
+	.conversationList__item__participants {
+		display: none;
+	}
+}
+
 .conversationList__item__participant {
 	transform: translateX(10px);
 	width: 16px;
@@ -266,3 +350,9 @@ html[data-color-scheme="dark"] {
 	display: flex;
 	gap: 3px;
 }
+
+@include screen-xs {
+	.conversationList__item__lastPost__author {
+		display: none;
+	}
+}

templates/conversationListItems.tpl

@@ -36,7 +36,7 @@
 
 				<div class="conversationList__item__interactions">
 					{if $view->hasBulkInteractions()}
-						<label class="button small jsTooltip" title="{lang}wcf.clipboard.item.mark{/lang}">
+						<label class="listView__selectItem__label jsTooltip" title="{lang}wcf.clipboard.item.mark{/lang}">
 							<input type="checkbox" class="listView__selectItem" aria-label="{lang}wcf.clipboard.item.mark{/lang}">
 						</label>
 					{/if}
@@ -62,6 +62,10 @@
 				<a href="{if $conversation->isNew()}{link controller='Conversation' object=$conversation action='firstNew'}{/link}{else}{$conversation->getLink()}{/if}" class="conversationList__item__link">{$conversation->subject}</a>
 			</h2>
 
+			<div class="conversationList__item__teaser">
+				{$conversation->getTeaser()}
+			</div>
+
 			{hascontent}
 				<div class="conversationList__item__labels">
 					<ul class="labelList">
@@ -74,10 +78,6 @@
 				</div>
 			{/hascontent}
 
-			<div class="conversationList__item__teaser">
-				{$conversation->getTeaser()}
-			</div>
-
 			{if $conversation->getTeaserImage()}
 				<div class="conversationList__item__image">
 					{unsafe:$conversation->getTeaserImage()->toHtml()}