Merge pull request #2371 from devlinjunker/mobile-friendly-styles

[Vue Rewrite] Basic Mobile accessible interface

4 files changed, 55 insertions, 14 deletions

diff --git a/src/App.vue b/src/App.vue
index 9f877a6c5..c78609414 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -104,19 +104,18 @@ export default Vue.extend({
 		display: flex;
 	}
 
-	#content-display {
-		display: flex;
-		flex-direction: row;
+	.route-container {
 		height: 100%;
 	}
 
-	#content-display.playing {
-		height: calc(100vh - 98px)
+	#content-display {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-height: 0;
 	}
 
 	.podcast {
-		position: absolute;
-		bottom: 0px;
 		height: 40px;
 		display: flex;
 		background-color: #474747;
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index 8cc23f085..244bf7919 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -274,6 +274,10 @@ export default Vue.extend({
     font-size: 17px;
 	}
 
+	.article table {
+		white-space: unset;
+	}
+
 	.action-bar {
 		padding: 0px 20px 0px 20px;
 
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 44e4b070a..aac045e02 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -181,9 +181,10 @@ export default Vue.extend({
 
 <style scoped>
 	.feed-item-display-list {
-		height: 100%;
 		display: flex;
 		flex-direction: column;
+		overflow-y: hidden;
+		height: 100%;
 	}
 
 	.virtual-scroll {
@@ -194,12 +195,41 @@ export default Vue.extend({
 	.feed-item-display-container {
 		display: flex;
 		height: 100%;
+		overflow-y: hidden;
+	}
+
+	@media only screen and (min-width: 320px) {
+		.virtual-scroll {
+			flex: 1 1.2 auto;
+		}
+
+		.feed-item-display-container {
+			flex-direction: column;
+		}
+
+		.feed-item-container {
+			flex: 1 1 1000px;
+			max-height: calc(100vh - 200px)
+		}
+	}
+
+	@media only screen and (min-width: 768px) {
+		.feed-item-display-container {
+			flex-direction: row;
+		}
+
+		.feed-item-container {
+			width: 50%;
+			max-height: unset;
+		}
 	}
 
 	.feed-item-container {
-		max-width: 50%;
 		overflow-y: hidden;
-		height: calc(100vh - 50px - 50px - 10px)
+		-webkit-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
+		-moz-box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
+		box-shadow: 1px -1px 5px 0px rgba(0,0,0,0.75);
+		border-top: 1px solid var(--color-border);
 	}
 
 	.header {
diff --git a/src/components/feed-display/FeedItemRow.vue b/src/components/feed-display/FeedItemRow.vue
index 45b9f34ae..8742dff6a 100644
--- a/src/components/feed-display/FeedItemRow.vue
+++ b/src/components/feed-display/FeedItemRow.vue
@@ -152,10 +152,6 @@ export default Vue.extend({
 </script>
 
 <style>
-	.feed-item-container {
-		border-bottom: 1px solid #222;
-	}
-
 	.feed-item-row {
 		display: flex; padding: 5px 10px;
 	}
@@ -195,6 +191,18 @@ export default Vue.extend({
     margin-left: 20px;
 	}
 
+	@media only screen and (min-width: 320px) {
+		.feed-item-row .date-container {
+			font-size: small;
+		}
+	}
+
+	@media only screen and (min-width: 768px) {
+		.feed-item-row .date-container {
+			font-size: medium;
+		}
+	}
+
 	.feed-item-row .date-container {
 		color: var(--color-text-lighter);
 		padding-left: 4px;