Style collapsibles

public/main.js

@@ -1,11 +1,8 @@
-const Counter = {
-	  data() { return { counter: 0 } }
+var cols = document.querySelectorAll(".collapsible button");
+var i;
+for (i = 0; i < cols.length; i++) {
+  cols[i].addEventListener("click", function() {
+    this.parentElement.classList.toggle("active");
+  });
 }
-
-Vue.createApp(Counter).mount('#counter')
-
-const AttributeBindingApp = {
-	data() { return {
-		message: 'You loaded this page on ' + new Date().toLocaleString()}}}
-
-Vue.createApp(AttributeBindingApp).mount('#bind-attribute')
+//# sourceMappingURL=main.js.map

resources/build.sh

@@ -5,7 +5,12 @@ project=$HOME/projects/trendplays
 watch() {
 	npx browser-sync start --proxy 'trendplays.test' -w --files $project/resources/views $project/resources/scss &
 	pid=$!
-	sass --load-path=sass --watch --error-css $project/resources/scss/main.scss $project/public/main.css &
+	sass --load-path=sass --watch --error-css $project/resources/scss/main.scss\
+	$project/public/main.css &
+	pid="$pid $!"
+	trap "kill -TERM $pid" 0 1 2 15
+	find $project/resources/js -type f |
+		entr 'esbuild resources/js/main.js --sourcemap --outdir=public' &
 	pid="$pid $!"
 	trap "kill -TERM $pid" 0 1 2 15
 	wait

resources/js/main.js

@@ -0,0 +1,15 @@
+var cols = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < cols.length; i++) {
+	cols[i].addEventListener("click", function() {
+		this.classList.toggle("active");
+		// var content = this.nextElementSibling;
+		// if (content.style.display === "block") {
+		// content.style.display = "none";
+		// } else {
+		// content.style.display = "block";
+		// }
+	});
+}
+

resources/scss/_vars.scss

@@ -13,6 +13,7 @@ $theme-colors: (
 	"brand-orange": #f67602,
 	"grey": #e6ebf1,
 	"light-grey": #e9e9e9,
+	"dark-grey": #212121,
 	"faded-text": #425466,
 	"faded-text2": #6c757d,
 );

resources/scss/main.scss

@@ -26,6 +26,11 @@ section {
 	padding-bottom: 3em;
 	overflow: hidden;
 }
+
+button {
+	font-family: 'PatuaOne', 'Times New Roman';
+}
+
 h1 {
 	color: white;
 }
@@ -114,8 +119,17 @@ nav form input,label {
 	nav div label,input {
 		display: block;
 	}
-	nav .register-button {
-		margin: 8px 0;
+
+	.landing-hero div.hero-filter h2 {
+		top: 30%;
+	}
+
+	.landing-hero div.hero-filter p {
+		top: 45%;
+	}
+
+	.landing-hero div.hero-filter .register-btn {
+		top: 75%;
 	}
 }
 
@@ -324,6 +338,8 @@ div.info-cards {
 
 section.panel-infos {
 	height: 40em;
+	margin-top: 5em;
+	margin-bottom: 5em;
 }
 
 section.panel-infos img.panel-preview {
@@ -351,37 +367,72 @@ section.panel-infos img.panel-preview {
 
 section.benefits-info div {
 	margin: 1em auto;
-	padding: 1em auto;
+	padding: 1em 1em;
 	border-top: 2px solid vars.getColor("faded-text2");
 	border-bottom: 2px solid vars.getColor("faded-text2");
 	max-width: 40em;
 	color: vars.getColor("faded-text");
 }
 
+.benefits-info h2 {
+	margin-bottom: 2em;
+}
+
 section.faq-info {
 	margin-bottom: 6em;
 	margin-top: 3em;
-	// margin-left: auto;
-	// margin-right: auto;
 }
 
-section.faq-info .cards {
+.faq-info h2 {
+	margin-bottom: 2em;
+}
+
+section.faq-info .collapsibles {
 	display: flex;
 	flex-flow: wrap;
 	gap: 2em;
-	justify-content: center;
-	max-width: 60em;
+	justify-content: space-around;
+	max-width: 65em;
+	width: fit-content;
 	margin-left: auto;
 	margin-right: auto;
+	align-text: center;
+}
+
+.faq-info .collapsible {
+	text-align: center;
+	width: 25em;
+	&:not(.active) .content {
+		display: none;
+	}
+}
+
+.collapsible button {
+	width: 95%;
+	display: block;
+	margin-right: auto;
+	height: 2.5em;
+	border: 2px solid vars.getColor("brand-orange");
+	@include vars.button("light-grey");
+	font-size: 17px;
+	// font-weight: bold;
+}
+
+.collapsible .content {
+	// background-color: vars.getColor("faded-text2");
+	border: 2px solid black;
+	border-radius: 4px;
+	transition: all 0.2s;
+	height: 1px;
 }
 
-.faq-info .card {
-	max-width: 30em;
+.active.collapsible .content {
+	height: fit-content;
 }
 
 footer {
 	height: 6em;
-	background-color: #212121;
+	background-color: vars.getColor("dark-grey");
 	padding: 20px;
 	color: vars.getColor("faded-text2");
 }

resources/views/home.blade.php

@@ -132,13 +132,31 @@
 	</section>
 	<section class='faq-info'>
 		<h2>FAQ</h2>
-		<div class="cards">
-		<div class="card">Amet officiis obcaecati et porro!</div>
-		<div class="card">Dolor minus corporis labore error.</div>
-		<div class="card">Ipsum nesciunt facilis veniam eos.</div>
-		<div class="card">Ipsum adipisicing blanditiis magnam quasi sunt?</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
-		<div class="card">Sit quod nulla minima dignissimos itaque.</div>
+		<div class="collapsibles">
+		<div class="collapsible"><button>Adipisicing a placeat.</button>
+		<div class="content"><p>
+		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
+		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
+		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
+		</p></div></div>
+		<div class="collapsible"><button>Adipisicing a placeat.</button>
+		<div class="content"><p>
+		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
+		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
+		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
+		</p></div></div>
+		<div class="collapsible"><button>Adipisicing a placeat.</button>
+		<div class="content"><p>
+		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
+		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
+		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
+		</p></div></div>
+		<div class="collapsible"><button>Adipisicing a placeat.</button>
+		<div class="content"><p>
+		Consectetur numquam nobis consequatur cupiditate iste, nulla dolorum dolore
+		omnis? Recusandae aut rerum doloremque cupiditate nulla soluta? Deserunt illo
+		dicta fugit ducimus perferendis? At fuga vitae error cupiditate amet magnam.
+		</p></div></div>
 		</div>
 	</section>
 @endsection