Merge pull request #3 from stan-donarise/main

fix card hiding
mpds-io · Jul 7, 2024 · a13dd10 · a13dd10
2 parents 26081c9 + 2eb1b6b
commit a13dd10
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 63 deletions.
diff --git a/app/app.view.css.ts b/app/app.view.css.ts
@@ -85,7 +85,7 @@ namespace $.$$ {
 			},
 		},
 
-		Param_symbol_html: {
+		Param_symbol: {
 			flex: {
 				direction: 'row',
 			},

diff --git a/app/app.view.tree b/app/app.view.tree
@@ -33,22 +33,23 @@ $optimade_tmdne_app $mol_view
 				<= Param* $mol_view
 					sub /
 						<= Param_name* $mol_paragraph
-							minimal_height 24
 							title <= param_name* \
-						<= Param_symbol_html* $optimade_tmdne_html_view
+						<= Param_symbol* $mol_html_view
+							minimal_height <= param_min_height 24
 							html <= param_symbol* \
 						\=
 						<= Param_value* $mol_view
-							minimal_height 24
 							sub /
 								<= param_value* \
-								<= Param_unit* $optimade_tmdne_html_view
+								<= Param_unit* $mol_html_view
+									minimal_height <= param_min_height
 									html <= param_unit* \
 								<= Param_mae* $mol_view
 									sub /
 										\(±
 										<= param_mae* \
-										<= Param_mae_unit* $optimade_tmdne_html_view
+										<= Param_mae_unit* $mol_html_view
+											minimal_height <= param_min_height
 											html <= param_unit* \
 										\)
 		<= Foot $mol_view

diff --git a/card/card.view.css.ts b/card/card.view.css.ts
@@ -28,12 +28,11 @@ namespace $.$$ {
 			background: {
 				color: $mol_theme.back,
 			},
-			bottom: '-10rem',
-			position: 'relative',
-			transition: 'bottom 0.7s',
+			transform: 'translateY(110%)',
+			transition: 'transform 0.7s',
 			'[loaded]': {
 				'true': {
-					bottom: 0,
+					transform: 'none',
 				},
 			},
 			border: {

diff --git a/card/card.view.tree b/card/card.view.tree
@@ -8,7 +8,8 @@ $optimade_tmdne_card $optimade_tmdne_swipe
 				attr *
 					card_position <= card_position \
 				sub /
-					<= Name $optimade_tmdne_html_view
+					<= Name $mol_html_view
+						minimal_height 24
 						html <= name \
 					<= Question $mol_paragraph
 						title \Do you think it's synthesizable?

diff --git a/html/html.view.css.ts b/html/html.view.css.ts
diff --git a/html/html.view.tree b/html/html.view.tree
diff --git a/html/html.view.ts b/html/html.view.ts
diff --git a/swipe/swipe.view.tree b/swipe/swipe.view.tree
@@ -7,6 +7,8 @@ $optimade_tmdne_swipe $mol_view
 	speed_threshold 1
 	right_threshold <= threshold 60
 	left_threshold <= threshold
+	swipe_distance 300
+	transition_smooth \left 0.5s
 	passed \
 	swiped_to? \
 	swipe_to_right null
@@ -19,6 +21,7 @@ $optimade_tmdne_swipe $mol_view
 			style *
 				left <= left \0px
 				transition <= transition? \
+
 	pointer_holding? false
 	event *
 		^

diff --git a/swipe/swipe.view.ts b/swipe/swipe.view.ts
@@ -36,21 +36,21 @@ namespace $.$$ {
 		}
 
 		move_to_middle() {
-			this.transition( 'left 0.5s' )
+			this.transition( this.transition_smooth() )
 			this.swiped_to('')
 			this.x( 0 )
 		}
 
 		swipe_to_right() {
-			this.transition( 'left 0.5s' )
+			this.transition( this.transition_smooth() )
 			this.swiped_to( 'right' )
-			this.x( 300 )
+			this.x( this.swipe_distance() )
 		}
 
 		swipe_to_left() {
-			this.transition( 'left 0.5s' )
+			this.transition( this.transition_smooth() )
 			this.swiped_to( 'left' )
-			this.x( -300 )
+			this.x( - this.swipe_distance() )
 		}
 
 		@ $mol_mem