Add mobile version to menu-tooltip

frontend/src/components/MenuButton.vue

@@ -1,5 +1,10 @@
 <template>
-	<menu-tooltip v-model='menuOpen' top='0' width='10rem'>
+	<menu-tooltip
+		v-model='menuOpen'
+		top='0'
+		width='10rem'
+		touch-disabled='true'
+	>
 		<div class='menu_button__icon' @click='menuOpen = true' slot='button'>
 			<slot></slot>
 		</div>

frontend/src/components/MenuTooltip.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class='menu_tooltip'>
+	<div
+		class='menu_tooltip'
+		:class='{"menu_tooltip--touch": !touchDisabled}'
+	>
 		<div
 			class='menu_tooltip__overlay'
 			:class='{ "menu_tooltip__overlay--show": value }'
@@ -23,7 +26,7 @@
 <script>
 	export default {
 		name: 'MenuTooltip',
-		props: ['value', 'top', 'width']
+		props: ['value', 'top', 'width', 'touch-disabled']
 	}
 </script>
 
@@ -53,7 +56,6 @@
 			border: 1.5px solid $color__gray--darker;
 			border-radius: 0.25rem;
 			box-shadow: 0 0.25rem 1rem rgba(#000, 0.125);
-			max-height: 10rem;
 			opacity: 0;
 			overflow-y: hidden;
 			position: absolute;
@@ -78,4 +80,55 @@
 			}
 		}
 	}
+
+		@media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
+		.menu_tooltip__menu {
+				width: 60%;
+				left: 20%;
+		}
+	}
+
+	@media (max-width: $breakpoint--phone) {
+		.menu_tooltip__menu {
+			width: 100%;
+			left: 0;
+		}
+	}
+
+	@media (max-width: $breakpoint--tablet) {
+		.menu_tooltip--touch {
+			.menu_tooltip {
+				@at-root #{&}__overlay {
+					transition: all 0.2s;
+
+					@at-root #{&}--show {
+						background-color: hsla(213, 35%, 5%, 0.5);
+					}
+				}
+
+				@at-root #{&}__menu {
+					background-color: rgba(255, 255, 255, 0.97);
+					border-radius: 0.25rem 0.25rem 0 0;
+					font-size: 1.125rem;
+					max-height: 20rem;
+					opacity: 0;
+					overflow-y: auto;
+					position: fixed;
+					top: unset;
+					bottom: -100%;
+					transition: opacity 0.2s, bottom 0.2s;
+
+					@at-root #{&}__inner {
+						max-height: 100%;
+					}
+
+					@at-root #{&}--show {
+						bottom: 0;
+						opacity: 1;
+					} 
+
+				}
+			}
+		}
+	}
 </style>

frontend/src/components/SelectButton.vue

@@ -1,19 +1,24 @@
 <template>
-	<div class='select_button' :class='{"select_button--touch": !touchDisabled}'>
-		<div
-			class='select_button__overlay'
-			:class='{ "select_button__overlay--show": !hideMenu }'
-			@click='toggleMenu'
-		></div>
-		<div class='button button--thin_text' @click='toggleMenu' v-if='options.length'>
-			{{options[selectedIndex].name}}
-			<span class='button__icon fa fa-fw' :class='[hideMenu ? "fa-caret-down" : "fa-caret-up"]'></span>
-		</div>
-		<div class='button' v-else>
-			No options
-		</div>
-
-		<div class='select_button__options' :class='{"select_button__options--hidden": hideMenu}'>
+	<menu-tooltip
+		v-model='menuOpen'
+		:class='{"select_button--touch": !touchDisabled}'
+	>
+		<template slot='button'>
+			<div
+				class='button button--thin_text'
+				@click='menuOpen = true'
+				v-if='options.length'
+			>
+				{{options[selectedIndex].name}}
+				<span class='button__icon select_button__icon fa fa-fw fa-chevron-down'></span>
+			</div>
+
+			<div class='button' v-else>
+				No options
+			</div>
+		</template>
+
+		<template slot='menu'>
 			<div
 				v-for='(option, index) in options'
 				@click='select(index, option.disabled)'
@@ -22,23 +27,25 @@
 			>
 				{{option.name}}
 			</div>
-		</div>
-	</div>
+		</template>
+	</menu-tooltip>
 </template>
 
 <script>
+	import MenuTooltip from './MenuTooltip';
+
 	export default {
 		name: 'SelectButton',
 		props: ['options', 'value', 'name', 'touch-disabled'],
+		components: {
+			MenuTooltip
+		},
 		methods: {
-			toggleMenu () {
-				this.hideMenu = !this.hideMenu;
-			},
 			select (index, disabled) {
 				if(disabled) return;
 
 				this.selectedIndex = index;
-				this.hideMenu = true;
+				this.menuOpen = false;
 
 				this.$emit('input', this.options[index].value);
 			},
@@ -60,7 +67,7 @@
 		data () {
 			return {
 				selectedIndex: this.getIndexFromValue(),
-				hideMenu: true
+				menuOpen: false
 			}
 		},
 		watch: {
@@ -74,55 +81,23 @@
 <style lang='scss' scoped>
 	@import '../assets/scss/variables.scss';
 	.select_button {
-		display: inline-block;
-
-		@at-root #{&}__overlay {
-			position: fixed;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			z-index: 2;
-			pointer-events: none;
-
-			@at-root #{&}--show {
-				pointer-events: all;
-			}
-		}
-
-		@at-root #{&}__options {
-			position: absolute;
-			z-index: 3;
-			overflow: hidden;
-			background-color: #fff;
-			width: 15rem;
-			border: 1px solid $color__gray--darker;
-			margin-top: 0.125rem;
-			max-height: 20rem;
-			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.12);
-			transition: max-height 0.4s ease-out;
-			border-radius: 0.2rem;			
-			@include user-select(none);
-
-			@at-root #{&}--hidden {
-				max-height: 0;
-				box-shadow: none;
-				border-color: transparent;
-				background-color: transparent;
-				transition: max-height 0.2s ease-out, box-shadow 0.2s, border-color 0s ease-in 0.19s, background-color 0s ease-in 0.19s;
-			}
+		@at-root #{&}__icon {
+			font-size: 0.8rem;
+			position: relative;
+			top: -0.1rem;
 		}
 
 		@at-root #{&}__option {
-			padding: 0.25rem 0.5rem;
-			transition: background-color 0.2s;
+			background-color: #fff;
+			border-radius: 0.25rem;
 			cursor: default;
+			font-size: 0.9rem;
+			padding: 0.25rem 0.25rem;
+			user-select: none;
+			transition: background-color 0.2s;
 
 			&:hover {
-				background-color: $color__lightgray--primary;
-			}
-			&:active {
-				background-color: darken($color__lightgray--primary, 2%);
+				background-color: $color__lightgray--darker;
 			}
 
 			@at-root #{&}--disabled {
@@ -133,20 +108,6 @@
 
 	}
 
-	@media (max-width: $breakpoint--tablet) and (min-width: $breakpoint--phone) {
-		.select_button__options {
-				width: 60%;
-				left: 20%;
-		}
-	}
-
-	@media (max-width: $breakpoint--phone) {
-		.select_button__options {
-			width: 100%;
-			left: 0;
-		}
-	}
-
 	@media (max-width: $breakpoint--tablet) {
 		.select_button__option {
 			font-size: 1.125rem;
@@ -155,31 +116,6 @@
 
 		.select_button--touch {
 			.select_button {
-				@at-root #{&}__overlay {
-					transition: all 0.2s;
-
-					@at-root #{&}--show {
-						background-color: hsla(213, 35%, 5%, 0.5);
-					}
-				}
-
-				@at-root #{&}__options {
-					bottom: 0;
-					position: fixed;
-					font-size: 1.125rem;
-					opacity: 1;
-					border-radius: 0.25rem 0.25rem 0 0;
-					transition: opacity 0.2s, bottom 0.2s;
-					background-color: rgba(255, 255, 255, 0.97);
-					max-height: calc(100% - 5rem);
-					overflow-y: auto;
-
-					@at-root #{&}--hidden {
-						bottom: -100%;
-						opacity: 0;
-					} 
-
-				}
 				@at-root #{&}__option {
 					padding: 0.75rem;
 				}

frontend/src/components/SelectFilter.vue

@@ -154,4 +154,12 @@
 			}
 		}
 	}
+
+
+	@media (max-width: $breakpoint--tablet) {
+		.select_filter__item {
+			font-size: 1.125rem;
+			padding: 0.5rem 0.75rem;
+		}
+	}
 </style>