From cc2241f71ab1023abdb4cbe508b686a455d62c57 Mon Sep 17 00:00:00 2001
From: Peder Bergebakken Sundt <pbsds@hotmail.com>
Date: Tue, 14 Aug 2018 02:53:11 +0200
Subject: [PATCH] Make the project info page mobile friendly

---
 www/css/projects.css  | 44 ++++++++++++++++++++++++++++++++++++-------
 www/prosjekt/info.php | 28 ++++++++++++++-------------
 2 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/www/css/projects.css b/www/css/projects.css
index d612bbe..374d584 100644
--- a/www/css/projects.css
+++ b/www/css/projects.css
@@ -51,7 +51,7 @@ a.nostyle {
 	text-align: right;
 	font-style: italic;
 	opacity: 0.5;
-	padding: 0.1em 0.4em; 
+	padding: 0.1em 0.4em;
 }
 
 .projects-container {
@@ -69,22 +69,52 @@ a.nostyle {
 	}
 }
 
+@media screen and (min-width: 50rem) {
+	.contentsplit {
+		display: grid;
+		grid-template-columns: 17em 2.7fr;
+		grid-template-areas: "left right";
+		grid-column-gap: 0.9em;
+	}
+}
+@media screen and (max-width: 50rem) {
+	.contentsplit {
+		display: grid;
+		grid-template-rows: auto auto;
+		grid-template-areas: "right"
+		                     "left";
+	}
+	.projectmember-container {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: auto auto;
+		grid-template-areas: "organizers members"
+		                     "join join";
 
-.contentsplit {
-	display: grid;
-	grid-template-columns: 1.3fr 2.7fr;
-	grid-template-areas: "left right";
+	}
 }
 
 .gridl {
-	padding: 0 1em 0 1em;
-	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
 	grid-area: left;
 }
 
+.projectmember-container {
+	padding: 0.1em 1em;
+	box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
+}
+.projectmember-container h2 {
+	text-align: center;
+}
+.projectmember-container >form {
+	text-align: center;
+	grid-area: join;
+}
+
 .gridr {
 	border-left: 0;
 	grid-area: right;
+	padding:0;
+	margin:0;
 }
 
 .projectmember {
diff --git a/www/prosjekt/info.php b/www/prosjekt/info.php
index 235b9ba..1c888af 100644
--- a/www/prosjekt/info.php
+++ b/www/prosjekt/info.php
@@ -44,7 +44,6 @@ if ($attrs){
 <link rel="shortcut icon" href="favicon.ico">
 <link rel="stylesheet" href="../../css/normalize.css">
 <link rel="stylesheet" href="../../css/style.css">
-<link rel="stylesheet" href="../../css/events.css">
 <link rel="stylesheet" href="../../css/projects.css">
 <title>Prosjektverkstedet</title>
 
@@ -67,14 +66,16 @@ if ($attrs){
 		</div>
 
 		<div class="gridl">
+			<div class="projectmember-container">
+
 			<div class="projectlead">
 				<h2>Prosjektledelsen</h2>
 				<div class="projectmember">
-					<?php foreach($members as $i => $data){ 
+					<?php foreach($members as $i => $data){
 							if($data['lead']){
 					?>
-							<p><?= $data['role'] ?></p>
-							<p class="membername"><?= $data['name']; ?></p>
+							<p><?= $data['name']; ?></p>
+							<p class="memberrole"><?= $data['role'] ?></p>
 							<p class="memberuname"><?= $data['uname']; ?></p>
 							<p class="memberemail"><?= $data['mail']; ?></p>
 					<?php }
@@ -88,19 +89,20 @@ if ($attrs){
 					if($data['lead']){ continue; }
 				?>
 					<div class="projectmember" style="border-color: #6a0;">
-						<p><?= $data['role'] ? $data['role'] : 'Deltaker' ?></p>
-						<p class="membername"><?= $data['name']; ?></p>
+						<p><?= $data['name']; ?></p>
+						<p class="memberrole"><?= $data['role'] ? $data['role'] : 'Deltaker' ?></p>
 						<p class="memberuname"><?= $data['uname']; ?></p>
 						<p class="memberemail"><?= $data['mail']; ?></p>
 					</div>
 				<?php } ?>
-				<p><form action="update.php", method="post">
-					<input type="hidden" name="title" value="derp"/>
-					<input type="hidden" name="desc" value="derp"/>
-					<input type="hidden" name="active" value="derp"/>
-					<input type="hidden" name="id" value="<?= $projectID ?>"/>
-					<input type="submit" class="btn" name="join_or_leave" value="<?= ($is_member ? 'Forlat' : 'Bli med!') ?>"></input>
-				</form></p>
+			</div>
+			<form action="update.php", method="post"><p>
+				<input type="hidden" name="title" value="derp"/>
+				<input type="hidden" name="desc" value="derp"/>
+				<input type="hidden" name="active" value="derp"/>
+				<input type="hidden" name="id" value="<?= $projectID ?>"/>
+				<input type="submit" class="btn" name="join_or_leave" value="<?= ($is_member ? 'Forlat' : 'Bli med!') ?>"></input>
+			</p></form>
 			</div>
 		</div>
 	</main>