added a way to toggle quests on mobile

src/client/css/main.less

@@ -29,12 +29,18 @@ body {
 	}
 
 	&.mobile {
-		.uiQuests, .uiEvents, .uiTooltipInfo {
+		.uiEvents, .uiTooltipInfo {
 			display: none !important;
 		}
 	} 
 }
 
+.mobile .right {
+	top: 0px;
+	right: 0px;
+	z-index: 2;
+}
+
 * {
 	box-sizing: border-box;
 	font-family: bitty;

src/client/js/components/spellbook.js

@@ -174,7 +174,7 @@ define([
 					this.groundTargetSpell = null;
 
 					events.emit('onGetAnnouncement', {
-						msg: `Cancelled castingn ${spell.name}`
+						msg: `Cancelled casting ${spell.name}`
 					});
 
 					return;

src/client/ui/templates/messages/styles.less

@@ -252,7 +252,7 @@
 
 	&:not(.typing) {
 		right: 10px;
-		top: 80px;
+		top: 79px;
 		left: auto;
 		bottom: auto;
 		width: @btnSize;

src/client/ui/templates/quests/quests.js

@@ -18,6 +18,11 @@ define([
 		container: '.right',
 
 		postRender: function () {
+			if (isMobile) {
+				this.el.on('click', this.toggleButtons.bind(this));
+				this.find('.btnCollapse').on('click', this.toggleButtons.bind(this));
+			}
+
 			this.onEvent('onRezone', this.onRezone.bind(this));
 
 			this.onEvent('onObtainQuest', this.onObtainQuest.bind(this));
@@ -91,6 +96,12 @@ define([
 			if (quest.isReady) {
 				q.el.removeClass('disabled');
 				q.el.addClass('ready');
+
+				if (isMobile) {
+					events.emit('onGetAnnouncement', {
+						msg: 'Quest ready for turn-in'
+					});
+				}
 			}
 		},
 
@@ -102,6 +113,11 @@ define([
 
 			q.el.remove();
 			this.quests.spliceWhere(f => f.id === id);
+		},
+
+		toggleButtons: function (e) {
+			this.el.toggleClass('active');
+			e.stopPropagation();
 		}
 	};
 });

src/client/ui/templates/quests/styles.less

@@ -1,5 +1,7 @@
 @import "../../../css/colors.less";
 
+@btnSize: 64px;
+
 .uiQuests {
 	width: 320px;
 
@@ -79,4 +81,54 @@
 			}
 		}
 	}
+
+	.btn {
+		display: none;
+	}
+}
+
+.mobile .uiQuests {
+	background-color: fade(@darkGray, 90%);
+
+	&:not(.active) {
+		position: absolute;
+		top: 148px;
+		right: 10px;
+		width: @btnSize;
+		height: @btnSize;
+
+		&:after {
+			content: '';
+			position: absolute;
+			left: 0px;
+			top: 0px;
+			background: url('../../../images/uiIcons.png');
+			background-position: -64px -128px;
+			width: @btnSize;
+			height: @btnSize;
+		}
+
+		> * {
+			display: none;
+		}
+	}
+
+	&.active {
+		.btn {
+			display: block;
+			position: absolute;
+			right: calc(100% + 10px);
+			top: 50%;
+			transform: translateY(-50%);
+			background-color: fade(@darkGray, 90%);
+			width: @btnSize;
+			height: @btnSize;
+
+			.icon {
+				width: 100%;
+				height: 100%;
+				background: url('../../../images/uiIcons.png') -448px 0px;
+			}
+		}
+	}
 }

src/client/ui/templates/quests/template.html

@@ -1,4 +1,7 @@
 <div class="uiQuests">
 	<div class="heading">Quests</div>
 	<div class="list"></div>
-</div>
+	<div class="btn btnCollapse">
+		<div class="icon"></div>
+	</div>
+</div>