Ver Fonte

Use normmal select-button for this page due to css issues

sbkwgh há 8 anos atrás
pai
commit
40eb8e16ab
2 ficheiros alterados com 34 adições e 27 exclusões
  1. 1 1
      src/components/ReportPostModal.vue
  2. 33 26
      src/components/SelectButton.vue

+ 1 - 1
src/components/ReportPostModal.vue

@@ -12,7 +12,7 @@
 			<div class='report_post_modal__modal'>
 				<h3>Report this post</h3>
 				<div class='report_post_modal--margin'>Select a reason for reporting this post below:</div>
-				<select-button :options='reportOptions' v-model='selectedOption' class='report_post_modal--margin'></select-button>
+				<select-button :options='reportOptions' v-model='selectedOption' class='report_post_modal--margin' :touch-disabled='true'></select-button>
 				<div >
 					<button class='button button--modal' @click.stop='setShowModal(false)'>Cancel</button>
 					<button class='button button--modal' @click.stop='submitReport'>Submit</button>

+ 33 - 26
src/components/SelectButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class='select_button'>
+	<div class='select_button' :class='{"select_button--touch": !touchDisabled}'>
 		<div
 			class='select_button__overlay'
 			:class='{ "select_button__overlay--show": !hideMenu }'
@@ -29,7 +29,7 @@
 <script>
 	export default {
 		name: 'SelectButton',
-		props: ['options', 'value', 'name'],
+		props: ['options', 'value', 'name', 'touch-disabled'],
 		methods: {
 			toggleMenu () {
 				this.hideMenu = !this.hideMenu;
@@ -134,34 +134,41 @@
 	}
 
 	@media (max-width: 425px) {
-		.select_button {
-			@at-root #{&}__overlay {
-				transition: all 0.2s;
+		.select_button__option {
+			font-size: 1.125rem;
+			padding: 0.5rem 0.75rem;
+		}
+
+		.select_button--touch {
+			.select_button {
+				#{&}__overlay {
+					transition: all 0.2s;
 
-				@at-root #{&}--show {
-					background-color: hsla(213, 35%, 5%, 0.5);
+					@at-root #{&}--show {
+						background-color: hsla(213, 35%, 5%, 0.5);
+					}
 				}
-			}
 
-			@at-root #{&}__options {
-				width: 100%;
-				left: 0;
-				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);
-
-				@at-root #{&}--hidden {
-					bottom: -100%;
-					opacity: 0;
-				} 
+				@at-root #{&}__options {
+					width: 100%;
+					left: 0;
+					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);
+
+					@at-root #{&}--hidden {
+						bottom: -100%;
+						opacity: 0;
+					} 
 
-			}
-			@at-root #{&}__option {
-				padding: 0.75rem;
+				}
+				@at-root #{&}__option {
+					padding: 0.75rem;
+				}
 			}
 		}
 	}