Refining context menu and dropdown for mobile

jaedb · Jan 4, 2024 · b594414 · b594414
1 parent 7ac717f
commit b594414
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/src/js/components/ContextMenu/ContextMenu.js b/src/js/components/ContextMenu/ContextMenu.js
@@ -49,7 +49,7 @@ const Title = ({
     );
   }
 
-  if (item) {
+  if (item?.added_from) {
     return (
       <div className="context-menu__title">
         <AddedFrom
@@ -62,9 +62,7 @@ const Title = ({
     );
   }
 
-  if (type === 'custom') {
-    if (!title) return null;
-
+  if (title && type === 'custom') {
     return (
       <div className="context-menu__title">
         <div className="context-menu__title__text">

diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
@@ -187,7 +187,7 @@
 	}
 
 	@include responsive($bp_medium){
-		@include fadein(0.2s, 40px);
+		@include fadein(0.1s, '100px');
 		top: 0 !important;
 		right: 0 !important;
 		bottom: 0 !important;
@@ -196,7 +196,7 @@
 		text-align: center;
 
 		&--closing {
-			@include fadeout(0.2s, 40px);
+			@include fadeout(0.2s, '100px');
 		}
 
 		&__background {
@@ -205,11 +205,24 @@
 			right: 0;
 			bottom: 0;
 			left: 0;
-			background-image: linear-gradient(rgba(24,24,24,0) 0%, rgba(24,24,24,1) 20%);
 			z-index: 1;
 
-			@include theme('light') {
-				background-image: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%);
+			&::after {
+				@include fadein(0.1s, '100px');
+				display: block;
+				content: '';
+				position: absolute;
+				top: calc(20% - 20px);
+				left: 5%;
+				right: 5%;
+				bottom: 0;
+				border-top-left-radius: 20px;
+				border-top-right-radius: 20px;
+				background: colour('white');
+
+				@include theme('dark') {
+					background: colour('grey');
+				}
 			}
 		}
 

diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss
@@ -129,11 +129,12 @@
 		}
 
 		&__label {
-			padding: 0 0 3px 0;
+			padding: 0 0 12px 0;
 			opacity: 0.5;
 			font-size: 1rem;
 			display: block;
 			cursor: default;
+			text-transform: uppercase;
 
 			&__value {
 				display: none;
@@ -156,6 +157,8 @@
 		&__options {
 			display: block;
 			position: static;
+			width: 50%;
+			margin: 0 auto;
 			background: transparent;
 			border-radius: 0;
 			border: 0;
@@ -182,6 +185,7 @@
 			}
 
 			&__item {
+				@include click_feedback();
 				display: block;
 				padding: 3px 5px;
 				border-radius: 0;
@@ -197,8 +201,8 @@
 
 				.icon {
 					display: inline-block;
-					position: static;
-					padding-right: 2px;
+					position: absolute;
+					left: 0;
 					padding-bottom: 3px;
 					font-size: 0.9em;
 				}