revision history ui

app/javascript/styles/application.scss

@@ -32,6 +32,7 @@
 @import 'gabsocial/components/group-form';
 @import 'gabsocial/components/group-sidebar-panel';
 @import 'gabsocial/components/sidebar-menu';
+@import 'gabsocial/components/status-revisions';
 
 @import 'gabsocial/polls';
 @import 'gabsocial/introduction';

app/javascript/styles/gabsocial/components/status-revisions.scss

@@ -0,0 +1,72 @@
+.status-revisions {
+	padding: 8px 0 0;
+	overflow: hidden;
+	background-color: $classic-base-color;
+	border-radius: 6px;
+
+	@media screen and (max-width: 960px) {
+		height: 90vh;
+	}
+
+	&__header {
+		display: block;
+		position: relative;
+		border-bottom: 1px solid lighten($classic-base-color, 8%);
+		border-radius: 6px 6px 0 0;
+		padding-top: 12px;
+		padding-bottom: 12px;
+
+		&__title {
+			display: block;
+			width: 80%;
+			margin: 0 auto;
+			font-size: 18px;
+			font-weight: bold;
+			line-height: 24px;
+			color: $primary-text-color;
+			text-align: center;
+		}
+	}
+
+	&__close {
+		position: absolute;
+		right: 10px;
+		top: 10px;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: row;
+		width: 500px;
+		flex-direction: column;
+		overflow: hidden;
+		overflow-y: scroll;
+		height: calc(100% - 80px);
+		-webkit-overflow-scrolling: touch;
+		widows: 90%;
+	}
+
+	&-list {
+		width: 100%;
+
+		&__error {
+			padding: 15px;
+			text-align: center;
+			font-weight: bold;
+		}
+
+		&__item {
+			padding: 15px;
+			border-bottom: 1px solid lighten($classic-base-color, 8%);
+
+			&__timestamp {
+				opacity: 0.5;
+				font-size: 13px;
+			}
+
+			&__text {
+				font-size: 15px;
+			}
+		}
+	}
+}