adding media querry to the rest of the page

BrigitteLPB · Jan 26, 2023 · 08b9e19 · 08b9e19
1 parent 95f163e
commit 08b9e19
Show file tree

Hide file tree

Showing 5 changed files with 266 additions and 22 deletions.
diff --git a/TODO b/TODO
@@ -0,0 +1,9 @@
+Tablette
+- Filter
+- Activity
+- Popular accomodation
+- footer
+
+Mobile
+- Activity
+- footer
diff --git a/css/accommodation.css b/css/accommodation.css
@@ -4,6 +4,7 @@
 	justify-content: stretch;
 }
 
+/* Notification */
 .booki-accommodation .accommodation-notif {
 	display: flex;
 	flex-direction: row;
@@ -28,6 +29,12 @@
 	margin-inline-end: 1em;
 }
 
+.booki-accommodation .accommodation-notif .accommodation-icon::before {
+	margin: 1em;
+}
+
+
+/* Accommodation */
 .booki-accommodation .accommodation-container {
 	display: flex;
 	flex-direction: row;
@@ -36,27 +43,13 @@
 	height: 100%;
 }
 
-.booki-accommodation .accommodation-container .all-accommodation, .booki-accommodation .accommodation-container .popular-accommodation {
-	background-color: var(--color-tertiary);
-	border-radius: var(--medium-border-radius);
-	padding: 2em;
-}
-
-.booki-accommodation .accommodation-container .all-accommodation {
-	width: 75%;
-}
-
 .booki-accommodation .title-container {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	width: 100%;
 }
 
-.accommodation-space-div {
-	display: flex;
-	flex: 1 0 2em;
-}
 
 /* Accommodation Card */
 .accommodation-card-container {
@@ -131,12 +124,12 @@
 
     box-shadow: 5px 5px 10px 2px rgba(0,0,0,.2);
 	background-color: var(--color-contrast-white);
-	
+
     display: flex;
     flex-direction: row;
-	
+
     border-radius: var(--medium-border-radius);
-	
+
     max-width: 30em;
     aspect-ratio: 3;
 }
@@ -164,4 +157,193 @@
     display: flex;
 	flex-direction: row;
 	justify-content: flex-start;
-}
+}
+
+@media (min-width: 992px) {	/* Ordinateur */
+	.booki-accommodation .accommodation-container .all-accommodation {
+		width: 75%;
+	}
+}
+
+@media (min-width: 768px) {	/* Ordinateur & tablette */
+	.booki-accommodation .accommodation-container .all-accommodation, .booki-accommodation .accommodation-container .popular-accommodation {
+		background-color: var(--color-tertiary);
+		border-radius: var(--medium-border-radius);
+		padding: 2em;
+	}
+
+	.accommodation-space-div {
+		display: flex;
+		flex: 1 0 2em;
+	}
+
+	/* All Accommodation */
+}
+
+@media (max-width: 991px) and (min-width: 768px) {	/* Tablette */
+	.booki-accommodation {
+		width: 100%;
+		align-items: center;
+	}
+
+	.accommodation-space-div {
+		display: none;
+	}
+
+	.booki-accommodation .accommodation-notif {
+		width: 95%;
+	}
+
+	/* Accommodation */
+	.booki-accommodation .accommodation-container {
+		width: 100%;
+
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.booki-accommodation .accommodation-container .all-accommodation, .booki-accommodation .accommodation-container .popular-accommodation {
+		padding: 2em;
+		width: 85%;
+		margin-bottom: 2em;
+	}
+
+	/* All accommodation */
+	.accommodation-container .all-accommodation {
+		background-color: var(--color-contrast-white);
+
+		width: 95%;
+		padding: 2em;
+
+		margin: 2em 0 0 0;
+	}
+
+
+	.all-accommodation .accommodation-card .info-container {
+		margin: 0 1em 0 1em;
+	}
+
+	.all-accommodation .accommodation-card .info-container > * {
+		margin-bottom: .5em;
+	}
+
+	/* Popular card container */
+	.accommodation-container .popular-accommodation {
+		border-radius: 0;
+	}
+
+	.popular-card-container {
+		margin-bottom: 0;
+		flex-direction: row;
+	}
+
+	.popular-card-container .accommodation-card {
+		margin: 1em 0 1em 0;
+		aspect-ratio: 2;
+		width: 32%;
+	}
+
+	.popular-card-container .accommodation-card .info-container {
+		margin: 1em 1em 1em 0.5em;
+	}
+}
+
+@media (max-width: 767px) {	/* Mobile */
+	.booki-accommodation {
+		width: 100%;
+		align-items: center;
+	}
+
+	.accommodation-space-div {
+		display: none;
+	}
+
+	.booki-accommodation .accommodation-notif {
+		width: 95%;
+	}
+
+	/* Accommodation */
+	.booki-accommodation .accommodation-container {
+		width: 100%;
+
+		flex-direction: column-reverse;
+		align-items: center;
+	}
+
+	.booki-accommodation .accommodation-container .all-accommodation, .booki-accommodation .accommodation-container .popular-accommodation {
+		border-radius: 0;
+		padding: 2em;
+	}
+
+	.booki-accommodation .accommodation-container .all-accommodation {
+		width: 90%;
+		padding: 0;
+
+		margin: 2em 0 0 0;
+	}
+
+	.booki-accommodation .accommodation-container .popular-accommodation {
+		background-color: var(--color-tertiary);
+	}
+
+
+	/* All accommodation */
+	.accommodation-container .all-accommodation {
+		background-color: var(--color-contrast-white);
+
+	}
+
+	.all-accommodation .accommodation-card-container {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		margin-top: 1em;
+		margin-bottom: 1em;
+		justify-content: flex-start;
+		align-items: center;
+
+	}
+
+	.all-accommodation .accommodation-card {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		width: 95%;
+		margin: 0 0 2em 0;
+		padding: 0;
+		height: auto;
+		aspect-ratio: 2/1;
+
+		border-color: var(--color-contrast-white);
+		border-width: 0.5em;
+		border-style: solid;
+	}
+
+	.all-accommodation .accommodation-card img {
+		width: 100%;
+		align-self: center;
+
+		aspect-ratio: 18/9;
+	}
+
+	.all-accommodation .accommodation-card .info-container {
+		margin: 0 1em 0 1em;
+	}
+
+	.all-accommodation .accommodation-card .info-container > * {
+		margin-bottom: .5em;
+	}
+
+	/* Popular card container */
+	.accommodation-container .popular-accommodation {
+		border-radius: 0;
+	}
+
+	.popular-card-container {
+		margin-bottom: 0;
+	}
+
+	.popular-card-container .accommodation-card {
+		margin: 1em 0 1em 0;
+	}
+}
diff --git a/css/activity.css b/css/activity.css
@@ -36,4 +36,28 @@
 
 .activity .activity-card .activity-title {
     margin: .5em 1em .5em 1em;
-}
+}
+
+@media (min-width: 768px) {	/* Ordinateur & tablette */
+
+}
+
+@media (max-width: 991px) and (min-width: 768px) {	/* Tablette */
+
+}
+
+@media (max-width: 767px) {	/* Mobile */
+    .activity .activity-card-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+    }
+
+    .activity .activity-card {
+        width: 100%;
+        margin-bottom: 1em;
+        aspect-ratio: 2;
+    }
+}
diff --git a/css/filter.css b/css/filter.css
@@ -36,7 +36,9 @@
 }
 
 @media (max-width: 991px) and (min-width: 768px) {	/* Tablette */
-
+	.booki-filters-container {
+		width: 100%;
+	}
 }
 
 @media (max-width: 767px) {	/* Mobile */

diff --git a/css/footer.css b/css/footer.css
@@ -1,6 +1,6 @@
 .footer {
     background-color: var(--color-tertiary);
-    
+
     display: flex;
     flex-direction: row;
     justify-content: space-around;
@@ -28,4 +28,31 @@
 .footer .footer-column a {
     text-decoration: none;
     margin: .5em 0 .5em 0;
-}
+}
+
+@media (min-width: 768px) {	/* Ordinateur & tablette */
+
+}
+
+@media (max-width: 991px) and (min-width: 768px) {	/* Tablette */
+
+}
+
+@media (max-width: 767px) {	/* Mobile */
+    .footer {
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+        padding-bottom: 2em;
+        border-radius: 0;
+    }
+
+    .footer .footer-column {
+        width: 90%;
+        margin : 2em 0 0 0;
+    }
+
+    .footer .footer-column .footer-title {
+        margin: .5em 0 .5em 0;
+    }
+}