Updates MWDK. Fixes to some creator jank.

ucfopen · Nov 15, 2023 · 33274c0 · 33274c0
1 parent eab3ebd
commit 33274c0
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
   "dependencies": {
     "hammerjs": "2.0.6",
     "konami": "^1.6.2",
-    "materia-widget-development-kit": "~3.0.0",
+    "materia-widget-development-kit": "^3.0.1",
     "modernizr-webpack-plugin": "^1.0.7"
   },
   "license": "AGPL-3.0",

diff --git a/src/creator.html b/src/creator.html
@@ -16,7 +16,6 @@
 		<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js'></script>
 		<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.min.js'></script>
 		<script src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-sanitize.min.js'></script>
-		<script src="assets/js/modernizr.js"></script>
 
 		<!-- MAIN CREATOR SCRIPT -->
 		<script src="creator.js"></script>
@@ -52,16 +51,17 @@ <h3>Front</h3><h3>Back</h3>
 							focus-me="face == 'front' && lastAction == ACTION_CREATE_NEW_CARD"
 							ng-attr-tabindex='{{startingTabIndex + (face == "front" ? 0 : 2)}}'></textarea>
 						<div
+							class="asset-container"
 							import-asset
 							card-face="cardFace"
 							request-media-import="requestMediaImport"
 							media-import="mediaImport"
 							asset="cardFace.asset"
 							ng-attr-tabindex='{{startingTabIndex + (face == "front" ? 0 : 2)}}'></div>
 					</div>
-					<div id="alt-text-container"
+					<div class="alt-text-container"
 					ng-show="cardFace.asset">
-						<label for="alt-text-input">Media Alt Text </label>
+						<label for="alt-text-input">Media Alt Text: </label>
 						<input
 						type="text"
 						placeholder="Enter your alt text for the media here."
@@ -74,7 +74,7 @@ <h3>Front</h3><h3>Back</h3>
 						class="alert"
 						ng-class="{hide : cardFace.text.length < 51 || !cardFace.asset }">
 						<span class="icon-alert"></span>
-						Reduce your text to fit the card.
+						You may need to reduce your text to fit the card.
 					</div>
 				</span>
 

diff --git a/src/creator.scss b/src/creator.scss
@@ -58,7 +58,9 @@ button {
 	padding          : 8px;
 	width            : 120px;
 	border           : none;
-	&:hover .descript { opacity: 1; }
+	&:hover .descript {
+		opacity: 1;
+	}
 	.descript {
 		position   : absolute;
 		font-size  : 13px;
@@ -137,12 +139,8 @@ body {
 		perspective-origin : 50% 100%;
 		li {
 			margin : 0 0 15px 0;
-			height: 200px;
 			transform-style : preserve-3d;
 
-			&.tall {
-				height: 230px;
-			}
 
 			&.titles {
 				height : 60px;
@@ -159,6 +157,9 @@ body {
 				height: auto;
 			}
 			&.card {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
 				&.ng-enter,
 				&.ng-leave {
 					transition : .5s cubic-bezier(0.190, 1.000, 0.220, 1.000) all;
@@ -191,10 +192,12 @@ body {
 					}
 				}
 				.face {
-					position   : absolute;
+					display: block;
+					min-height: 200px;
 					width      : 400px;
 					overflow-y : auto;
 					overflow-x : hidden;
+					background : #fff;
 					&:nth-child(3) { right : 0; }
 					textarea, input {
 						font-family: 'verdana';
@@ -208,49 +211,86 @@ body {
 						}
 						&#alt-text-input {
 							width: 67%;
-							text-align: left;
+							margin: 5px 10px;
 							padding: 0px 5px;
-							margin-left: 10px;
+
+							text-align: left;
+							font-size: 0.8em;
 						}
 					}
-					textarea { height : 130px; }
-					input { height : 25px; }
+					.alt-text-container {
+						padding: 5px 10px;
+						color: #000;
+						font-size: 0.8em;
+					}
+
+					.center {
+						position: relative;
+						margin-bottom: 10px;
+						text-align: center;
+					}
+
+					.asset-container {
+						position: relative;
+
+						.del-asset {
+							margin: 0;
+							padding: 5px;
+						}
+					}
+
+					textarea {
+						height : 130px;
+					}
+					input {
+						height : 25px;
+						margin-bottom: 10px;
+					}
 					audio {
 						max-width  : 400px;
 						max-height : 110px;
 						margin-top: 50px;
 					}
 					button {
-						bottom     : 6px;
+						top        : 0px;
 						right      : 10px;
 						background : none;
 						color      : rgba(0,0,0,0.7);
 						font-size  : 22px;
 						width      : 30px;
 						transition : all 200ms;
+						cursor     : pointer;
 						&:hover {
 							color : #47303C;
 							.descript { color : #47303C; }
 						}
 						.descript {
 							top : 10px;
-							&.add { left : -125px; }
-							&.del { left : -105px; }
+							&.add {
+								right: 0;
+							}
+							&.del {
+								width: auto;
+								top: 30px;
+								right: 0;
+								text-align: right;
+							}
 						}
 					}
 					img {
 						max-width  : 400px;
 						max-height : 110px;
 					}
 					.alert {
-						position  : absolute;
-						color     : rgba(0,0,0,0.7);
+						display   : block;
 						font-size : 13px;
-						bottom    : 17px;
-						left      : 17px;
-						opacity   : 1;
+						margin: 5px 0 10px 0;
+						padding: 0 15px;
+						color: #000;
 						transition : all 200ms;
-						&.hide { opacity : 0; }
+						&.hide { 
+							display: none;
+						}
 						span {
 							padding   : 0 2px 0 0;
 							font-size : 15px;
@@ -264,8 +304,10 @@ body {
 					margin-top : 13px;
 					cursor: pointer;
 					.descript {
-						top   : 7px;
-						left  : 40px;
+						top   : 40px;
+						left  : 0px;
+						width : auto;
+						text-align: left;
 						color : rgba(255,255,255,0.6);
 					}
 
@@ -458,13 +500,6 @@ body {
 	}
 }
 
-.center {
-	text-align: center;
-	position: relative;
-	background : #FFF;
-	max-height: inherit;
-}
-
 .hidden {
 	visibility: hidden;
 }
diff --git a/yarn.lock b/yarn.lock
@@ -4739,10 +4739,10 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/materia-widget-dependencies/-/materia-widget-dependencies-0.2.0.tgz#ebec53a9c10991bacf8b8ea9d6dfba5cd40ed912"
   integrity sha512-eqab8DdPD0tzEicJWfgc/BJko/MSZarECmXENNwt4NUr757HCQJl7M+q70eXYO84Ssk3kHySTELgOTLES/FODg==
 
-materia-widget-development-kit@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/materia-widget-development-kit/-/materia-widget-development-kit-3.0.0.tgz#266e7f2e3d774845838e25d1d775c93cd3f418fb"
-  integrity sha512-sybUgRn7BGUIyiLHecTrwMumZrFUI2kW7f/2+D9v7GiNCbJDPLqNA04KL38hiy69ISNhGcEgL17TVXsYf6QD0Q==
+materia-widget-development-kit@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/materia-widget-development-kit/-/materia-widget-development-kit-3.0.1.tgz#16b48010d68c52a2382f117e628b714c5a2be47d"
+  integrity sha512-qVd9yzFPleu+FAYvboiA+EGvbP1e2GsVvhl4IG/YIxNXCvEtP7jZcCtpqXVY9p8piUPBAmxXY5E/NAS06iXRIw==
   dependencies:
     "@babel/core" "^7.22.17"
     "@babel/preset-env" "^7.20.2"