Merge pull request #63 from clpetersonucf/issue/55-improved-widget-draggability

clpetersonucf · web-flow · commit 1ef862ba4459 · 2024-10-03T15:17:11.000-04:00
Improves card dragging at the bottom of the playable area
diff --git a/src/player.html b/src/player.html
@@ -21,7 +21,9 @@
 		<!-- MAIN WIDGET SCRIPT -->
 		<script src="player.js"></script>
 	</head>
-	<body ng-app="SortItOutEngine" ng-controller="SortItOutEngineCtrl" ng-cloak ng-style="{'background-image': 'url(' + backgroundImage + ')'}">
+	<body id="app-body" ng-app="SortItOutEngine" ng-controller="SortItOutEngineCtrl" ng-cloak ng-style="{
+			'background-image': 'linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 100%), url('+ backgroundImage + ')'
+		}">
 		<div id="content"
 			hm-panmove="panMove(standardizeEvent($event), false)"
 			hm-panend="mouseUp(standardizeEvent($event), false)"
@@ -175,7 +177,6 @@ <h1 id="title">{{title}}</h1>
 			</div>
 
 			<div id="dock-main" class="dock" tabindex="-1">
-				<div id="dock-main-background" class="dock" ng-click="hideFolderPreview()" tabindex="-1"></div>
 				<div class="folder"
 					ng-class="{opened: folderPreviewIndex == $index}"
 					ng-repeat="folder in folders"
diff --git a/src/player.scss b/src/player.scss
@@ -7,6 +7,8 @@ body {
 	background-position: center center;
 	height: 100vh;
 	font-family: "Lato";
+
+	overflow: hidden;
 }
 
 .screenreader-assist {
@@ -283,7 +285,7 @@ button.cancel-submit-button {
 .dock {
 	position: absolute;
 	height: 125px;
-	bottom: 0;
+	bottom: -125px;
 	left: 0;
 	right: 0;
 	display: flex;
@@ -294,6 +296,7 @@ button.cancel-submit-button {
 	}
 
 	.folder {
+		top: -125px;
 		height: 100%;
 		width: 150px;
 		position: relative;
