mpds-io · blokhin · Jun 29, 2024 · Jun 29, 2024 · Jun 29, 2024 · Jun 29, 2024
diff --git a/app/app.view.css b/app/app.view.css
@@ -0,0 +1,3 @@
+@media all and (max-width: 900px) {
+	[optimade_tmdne_app_param_mae], [optimade_tmdne_app_param_name] { display: none; }
+}
diff --git a/app/app.view.css.ts b/app/app.view.css.ts
@@ -1,5 +1,5 @@
 namespace $.$$ {
-	
+
 	$mol_style_define( $optimade_tmdne_app, {
 
 		overflow: 'hidden',
@@ -38,6 +38,8 @@ namespace $.$$ {
 		Head_card: {
 			pointerEvents: 'auto',
 			margin: 'auto',
+			width: '35%',
+			textAlign: 'center',
 		},
 
 		Head_title: {
@@ -126,13 +128,15 @@ namespace $.$$ {
 		Hint_no: {
 			pointerEvents: 'auto',
 			color: '#ff6666',
+			zIndex: 10,
 		},
 
 		Hint_yes: {
 			pointerEvents: 'auto',
 			color: $mol_theme.current,
+			zIndex: 10,
 		},
 
 	} )
-	
+
 }
diff --git a/app/app.view.tree b/app/app.view.tree
@@ -1,10 +1,10 @@
 $optimade_tmdne_app $mol_view
-	title \This material does not exist
+	title \This Material Does Not Exist?
 	number? 1
 	plugins /
 		<= Theme $mol_theme_auto
 	auto /
-		<= update
+		<= update null
 	rotating? false
 	number_swiped? 0
 	number_prefetch? 0
@@ -33,13 +33,13 @@ $optimade_tmdne_app $mol_view
 				<= Param* $mol_view
 					sub /
 						<= Param_name* $mol_paragraph
-							minimal_height 16
+							minimal_height 24
 							title <= param_name* \
 						<= Param_symbol_html* $optimade_tmdne_html_view
 							html <= param_symbol* \
 						\=
 						<= Param_value* $mol_view
-							minimal_height 16
+							minimal_height 24
 							sub /
 								<= param_value* \
 								<= Param_unit* $optimade_tmdne_html_view
@@ -66,6 +66,6 @@ $optimade_tmdne_app $mol_view
 					loaded <= card_loaded* false
 					why? <=> why*? \
 					pointer_holding? <=> card_holding? false
-					on_swiped <= update null
+					swiped_to? <=> swiped_to*? \
 					swipe_to_right => swipe_to_right*
 					swipe_to_left => swipe_to_left*
diff --git a/app/app.view.ts b/app/app.view.ts
@@ -120,6 +120,29 @@ namespace $.$$ {
 		click_yes() {
 			this.swipe_to_right( this.number() )
 		}
+
+		@ $mol_mem_key
+		swiped_to( id: number, next?: string ) {
+
+			const vote = next == 'left' ? 0 : next == 'right' ? 1 : undefined
+			if( vote !== undefined ) {
+
+				this.update()
+
+				this.$.$mol_fetch.success( 'https://crus.absolidix.com', {
+					method: 'post',
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify( {
+						id, comment: this.why( id ), vote
+					} ),
+				} )
+
+			}
+
+			return next ?? ''
+		}
 
 	}
 

diff --git a/app/index.html b/app/index.html
@@ -6,7 +6,7 @@
 		<meta name="mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-capable" content="yes">
 	</head>
-	<body mol_view_root style="overflow: hidden;" >
+	<body mol_view_root>
 		<div mol_view_root="$optimade_tmdne_app"></div>
 		<script src="web.js" charset="utf-8"></script>
 	</body>

diff --git a/card/card.view.css.ts b/card/card.view.css.ts
@@ -1,7 +1,7 @@
 namespace $.$$ {
-	
+
 	$mol_style_define( $optimade_tmdne_card, {
-		
+
 		pointerEvents: 'auto',
 		width: 'max-content',
 		position: 'fixed',
@@ -101,13 +101,13 @@ namespace $.$$ {
 			gap: '0.5rem',
 		},
 
-		Why_optinal: {
+		Why_optional: {
 			color: $mol_theme.shade,
 			font: {
 				style: 'italic',
 			},
 		},
-		
+
 	} )
-	
+
 }
diff --git a/card/card.view.tree b/card/card.view.tree
@@ -16,7 +16,7 @@ $optimade_tmdne_card $optimade_tmdne_swipe
 						sub /
 							<= Why_title $mol_paragraph
 								title \Why?
-							<= Why_optinal $mol_paragraph
-								title \(optinal)
+							<= Why_optional $mol_paragraph
+								title \(optional)
 					<= Why $mol_textarea
 						value? <=> why? \
diff --git a/swipe/swipe.view.tree b/swipe/swipe.view.tree
@@ -8,13 +8,10 @@ $optimade_tmdne_swipe $mol_view
 	right_threshold <= threshold 60
 	left_threshold <= threshold
 	passed \
-	passed_left false
-	passed_right false
 	swiped_to? \
 	swipe_to_right null
 	swipe_to_left null
-	on_swiped null
-	reset null
+	move_to_middle null
 	x? 0
 	sub /
 		<= Float $mol_view

diff --git a/swipe/swipe.view.ts b/swipe/swipe.view.ts
@@ -28,14 +28,14 @@ namespace $.$$ {
 		pointerup( next?: any ) {
 			const speed = this.x() / ( (new $mol_time_moment).valueOf() - this.start_time! )
 
-			if( this.passed_right() || speed > this.speed_threshold() ) this.swipe_to_right()
-			else if( this.passed_left() || speed < ( - this.speed_threshold() ) ) this.swipe_to_left()
-			else this.reset()
+			if( (this.passed() == 'right') || speed > this.speed_threshold() ) this.swipe_to_right()
+			else if( (this.passed() == 'left') || speed < ( - this.speed_threshold() ) ) this.swipe_to_left()
+			else this.move_to_middle()
 
 			this.pointer_holding( false )
 		}
 
-		reset() {
+		move_to_middle() {
 			this.transition( 'left 0.5s' )
 			this.swiped_to('')
 			this.x( 0 )
@@ -44,33 +44,23 @@ namespace $.$$ {
 		swipe_to_right() {
 			this.transition( 'left 0.5s' )
 			this.swiped_to( 'right' )
-			this.on_swiped()
 			this.x( 300 )
 		}
 
 		swipe_to_left() {
 			this.transition( 'left 0.5s' )
 			this.swiped_to( 'left' )
-			this.on_swiped()
 			this.x( -300 )
 		}
 
-		reset_hard() {
-			this.transition( '' )
-			this.reset()
-		}
-
-		passed_left(): boolean {
-			return this.x() < ( - this.left_threshold() )
-		}
+		@ $mol_mem
+		passed(): string {
+			const x = this.x()
 
-		passed_right(): boolean {
-			return this.x() > this.right_threshold()
-		}
+			if( x < ( - this.left_threshold() ) ) return 'left'
+			if( x > this.right_threshold() ) return 'right'
 
-		passed(): string {
-			return this.passed_left() ? 'left' :
-				this.passed_right() ? 'right' : ''
+			return ''
 		}
 
 	}