Thread views on the web (#207)

* Webviews for status threads

* fix up templates

* add ForkAwesome and gotosocial-styling into repo

* clean up gotosocial-styling, old styling

* update CONTRIBUTING with new css building, and nodemon recommendation

* update Dockerfile with new css bundling

* those weren't supposed to make it in

* upgrade gotosocial-styling deps

* update authorize template with main wrapper

* update css pipeline

* abstract status from thread to avoid copy-pasting

* basic CW implementation

* fix PR review suggestions

* fix no-image-desc icon alignment

* remove template loading println

* remove println

* remove changes to testmodels

* reset changes to testmodels

1 files changed, 227 insertions, 0 deletions

diff --git a/web/gotosocial-styling/templates/status.css b/web/gotosocial-styling/templates/status.css
new file mode 100644
index 000000000..b71a7c9f7
--- /dev/null
+++ b/web/gotosocial-styling/templates/status.css
@@ -0,0 +1,227 @@
+main {
+	background: transparent;
+	grid-auto-rows: auto;
+}
+
+.thread {
+	display: flex;
+	flex-direction: column;
+}
+
+.toot {
+	position: relative;
+	background: color($bg lightness(-3%));
+	padding: 2rem;
+	/* padding-bottom: 0; */
+	display: grid;
+	grid-template-columns: 3.2rem auto 1fr;
+	column-gap: 0.5rem;
+	margin-bottom: 0.2rem;
+
+	a {
+		position: relative;
+		z-index: 1;
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.avatar {
+		grid-row: span 2;
+
+		img {
+			height: 3.2rem;
+			width: 3.2rem;
+			object-fit: cover;
+		}
+	}
+
+	.displayname {
+		font-weight: bold;
+		font-size: 1.2rem;
+		align-self: start;
+	}
+
+	.username {
+		color: $fg_dark;
+		justify-self: start;
+	}
+
+	input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+	.spoiler {
+		label {
+			background: $acc1;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+
+	.text {
+		margin: 0;
+		grid-column: span 2;
+
+		a {
+			color: $acc1;
+			text-decoration: underline;
+		}
+	}
+
+	.media {
+		margin-top: 0.6rem;
+		border-radius: 0.2rem;
+		grid-column: span 3;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		grid-auto-rows: 10rem;
+		overflow: hidden;
+		gap: 0.3rem;
+
+		a {
+			position: relative;
+		}
+
+		.no-image-desc {
+			display: flex;
+			position: absolute;
+			bottom: 0.1rem;
+			right: 0.4rem;
+			color: white;
+			background: $blue;
+			padding: 0.2rem 0.4rem;
+			border-radius: 100%;
+			z-index: 3;
+
+			i.fa {
+				display: block;
+				line-height: 1.3rem;
+			}
+
+			span {
+				margin-left: 0.3rem;
+				display: none;
+			}
+
+			&:hover {
+				span {
+					display: block;
+				}
+				border-radius: 0.2rem;
+			}
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		&.single a {
+			grid-column: span 2;
+		}
+
+		&.odd a:first-child, &.double a {
+			grid-row: span 2;
+		}
+	}
+
+	.info {
+		display: none;
+
+		div {
+			position: relative;
+			padding-right: 1.3rem;
+		}
+
+		.stats {
+			display: flex;
+		}
+
+		color: #b0b0b5;
+		grid-column: span 3;
+		margin-top: 0.5rem;
+		flex-wrap: wrap;
+
+		div.stats::after {
+			display: none;
+		}
+
+		div::after {
+			$size: 0.25rem;
+			display: block;
+			background: $fg_dark;
+			height: $size;
+			width: $size;
+			content: "";
+			position: absolute;
+			top: calc((1.5rem - $size) / 2);
+			right: 0.55rem;
+			border-radius: 1rem;
+		}
+
+		div:last-child {
+			&::after {
+				display: none;
+			}
+			margin-right: 0;
+		}
+	}
+
+	.toot-link {
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		text-indent: 100%;
+		white-space: nowrap;
+
+		position: absolute;
+		z-index: 0;
+	}
+
+	$border-radius: 0.3rem;
+	&:first-child {
+		/* top left, top right */
+		border-radius: $border-radius $border-radius 0 0;
+	}
+
+	&:last-child {
+		/* bottom left, bottom right */
+		border-radius: 0 0 $border-radius $border-radius;
+		padding-bottom: 1.5rem;
+	}
+
+	&.expanded {
+		background: $bg;
+		padding-bottom: 1.5rem;
+
+		.displayname {
+			grid-column: span 2;
+		}
+
+		.text {
+			grid-column: span 3;
+			grid-row: span 1;
+			margin-top: 0.3rem;
+		}
+
+		.info {
+			display: flex;
+		}
+
+		.media {
+			grid-auto-rows: 1fr;
+			max-height: 120rem;
+		}
+	}
+}
+
+footer + div { /* something weird from the devstack.. */
+	display: none;
+}
\ No newline at end of file