[RESPONSIVE] Hiding the button on the left home on mobile

JustalK · Jan 11, 2021 · b2df1e0 · b2df1e0
1 parent 995da18
commit b2df1e0
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/src/assets/less/introduction_link.less b/src/assets/less/introduction_link.less
@@ -62,7 +62,7 @@
 
 #HOME {
 	&.mounted .links-open-door {
-		top: 75%;
+		top: 80%;
 	}
 }
 

diff --git a/src/assets/less/socials.less b/src/assets/less/socials.less
@@ -16,7 +16,8 @@
 		font-size: 35px;
 		text-align: center;
 		background: @text-color-dark;
-		transition: transform 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.25s, background 0.25s cubic-bezier(0.8, 0, 0.25, 1), color 0.25s cubic-bezier(0.8, 0, 0.25, 1);
+		box-shadow: 10px 10px #000;
+		transition: transform 0.25s cubic-bezier(0.8, 0, 0.25, 1) 0.25s, background 0.25s cubic-bezier(0.8, 0, 0.25, 1), color 0.25s cubic-bezier(0.8, 0, 0.25, 1), box-shadow 0.25s cubic-bezier(0.8, 0, 0.25, 1), padding-left 0.25s cubic-bezier(0.8, 0, 0.25, 1);
 
 		&.invisible {
 			transform: translateX(-150%);
@@ -25,6 +26,14 @@
 		&:hover {
 			background: @background-bloc-1;
 			color: @text-color-white;
+			box-shadow: 0 0 transparent;
+			padding-left: 25px;
 		}
 	}
 }
+
+@media screen and (max-width: @PHONE_MQ) {
+	#SOCIALS {
+		display: none;
+	}
+}
diff --git a/src/components/socials.vue b/src/components/socials.vue
@@ -3,7 +3,7 @@
 		id="SOCIALS">
 		<a
 			:class="{invisible: invisible}"
-			:href="url"><font-awesome-icon :icon="['fab', 'google-play']" /></a>
+			:href="props_introduction.android_url"><font-awesome-icon :icon="['fab', 'google-play']" /></a>
 	</div>
 </template>
 <script>
@@ -14,8 +14,8 @@ export default {
 			type: Boolean,
 			required: true
 		},
-		url: {
-			type: String,
+		props_introduction: {
+			type: Object,
 			required: true
 		}
 	}

diff --git a/src/pages/home.vue b/src/pages/home.vue
@@ -13,6 +13,7 @@
 				@zoom="zoom">
 				<components_socials
 					:invisible="invisible"
+					:props_introduction="props_introduction"
 					url="http://localhost:8082/" />
 			</components_introduction_side>
 			<components_introduction_side
@@ -73,10 +74,10 @@ export default {
 		async get_my_identity() {
 			const my_identity = await api.get_my_identity();
 			const image_path = my_identity.image !== null ? my_identity.image.path : null;
-			this.update_introduction(my_identity.fullname, my_identity.email, image_path);
+			this.update_introduction(my_identity.fullname, my_identity.email, image_path, my_identity.android_url);
 		},
-		update_introduction(name, email, image) {
-			this.props_introduction = {name, email, image};
+		update_introduction(name, email, image, android_url) {
+			this.props_introduction = {name, email, image, android_url};
 		}
 	}
 };