Make list of projects look nice. Added Drift and Styret on the top

This commit is contained in:
Peder Bergebakken Sundt 2018-08-09 00:41:54 +02:00
parent 4445f659a7
commit 6601ec041e
4 changed files with 99 additions and 102 deletions

View File

@ -1,14 +1,19 @@
.project-card {
position: relative;
display: inline-block;
vertical-align: top;
border-radius: 4px;
width: 18em;
height: 8em;
padding: 0;
margin: 0 1em 1em 0;
border: 1px solid #002244;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
border-radius: 0.3em;
border: 0 solid #048;
border-left-width: 0.7em;
box-shadow: 0.1em 0.2em 0.5em 0em rgba(0,0,0,0.3);
overflow: hidden;
top:0;
min-height: 6em;
margin:0;
height: 100%;
}
.project-card:hover {
box-shadow: 0.1em 0.2em 0.5em 0em rgba(0,0,0,0.5);
}
.project-title {
@ -19,50 +24,61 @@
.card-content {
display: block;
overflow: hidden;
margin: 0;
padding: .6em;
height: 4.3em;
margin: .6em;
margin-bottom: 0;
}
.card-content p {
height: 2.5em;
overflow: hidden;
line-height: 1.25em;
}
.project-organizer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: .3em .6em;
border-top: 1px solid #002244;
font-size: .8em;
}
.card-content * {
margin-top: 0;
}
.projects-divider {
border: 0;
margin-bottom: 2em;
.project-organizer {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
font-size: .8em;
text-align: right;
font-style: italic;
opacity: 0.5;
padding: 0.1em 0.4em;
}
.projects-container {
margin-top: 2em;
margin-bottom: 3em;
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0.5em;
grid-row-gap: 1.3em;
}
@media screen and (min-width: 60em) {
.projects-container {
grid-template-columns: 1fr 1fr;
}
}
.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;
}
.gridr {
border-left: 0;
grid-area: right;
}
.projectmember {

View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="no">
<title>Driftverkstedet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/splash.css">
<header>Drift&shy;verk&shy;stedet</header>
<main>
<article>
<h2>Drift</h2>
<p>
Hei
<p>
</article>
</main>
<nav><ul>
<li><a href="../">hjem</a></li>
<li class="active"><a href="../prosjekt/">prosjekter</a></li>
<li><a href="../kalender/">kalender</a></li>
<li><a href="../aktiviteter/">aktiviteter</a></li>
<li><a href="../kontakt/">kontakt</a></li>
<li><a href="../pvv/">wiki</a></li>
</nav>

View File

@ -5,7 +5,6 @@ $translation = ['i dag', 'i morgen', 'denne uka', 'neste uke', 'denne måneden',
$projectManager = new \pvv\side\ProjectManager($pdo);
$projects = $projectManager->getAll();
?>
<!DOCTYPE html>
<html lang="no">
<head>
@ -26,21 +25,60 @@ $projects = $projectManager->getAll();
</nav>
<main>
<h2>Prosjekter</h2>
<h2>Projekter</h2>
<p>
PVV er et kult miljø der du kan bli med mye rart.
denne siden har vi en liten oversikt over forskjellige prosjekter og organer i PVV.
</p>
<br>
<br>
<h2>Faste poster</h2>
<div class="projects-container">
<a class="nostyle" href="../styret/"><div class="project-card" style="border-color:#b93;">
<div class="card-content">
<h4 class="project-title">Styret</h4>
<p>
Styret har ansvaret for den daglige driften av PVV, og har myndighet som gitt i PVVs lover.
Lederen for PVV velges om høsten og sitter i et år. Resten av styret velges for et halvår om
gangen, selv om praksis er at bare mindre justeringer gjøres i vårsemesteret.
</p>
<p class="project-organizer">Organisert av Styreleder</p>
</div>
</div></a>
<a class="nostyle" href="../drift/"><div class="project-card" style="border-color:#184;">
<div class="card-content">
<h4 class="project-title">Drift</h4>
<p>
Drift har ansvaret for å drive maskinene PVV.
Driftsgruppen har ingen strenge krav til aktivitet eller erfaring for å bli medlem,
selv om du er ny i virket går det fint an å bare observere og absorbere i begynnelsen.
Vi vil gjøre vårt beste for å gi god hjelp og service til våre brukere.
</p>
<p class="project-organizer">Organisert av Driftskordinator</p>
</div>
</div></a>
<?php /*Her kan vi legge til PR og TriKom hvis det er ønskelig*/ ?>
</div>
<h2>Medlems-prosjekter</h2>
<?php
if(count($projects) == 0){
?>
<p>PVV har for øyeblikket ingen aktive prosjekter. Tenker du at noe bør gjøres? Har du en kul ide for noe PVV kan samarbeide om? Sett opp et prosjekt!</p>
<br>
<center>
<a class="btn" href="edit.php?new=1">Lag prosjekt</a>
<a class="btn" href="mine.php">Mine prosjekter</a>
</center>
<br>
<?php
}else{
?>
<p>Lyst til å gjøre noe kult? Her er et utvalg av de prosjektene som PVVere har laget. Mangler det noe, eller brenner du for noe annet? Sett opp et eget prosjekt!</p>
<a class="btn" href="edit.php?new=1">Lag prosjekt</a>
<a class="btn" href="mine.php">Mine prosjekter</a>
<hr class="projects-divider">
<p>
Lyst til å gjøre noe kult? Her er et utvalg av de prosjektene som PVVere har holder med. Mangler det noe, eller brenner du for noe annet?<br>
Sett opp et eget prosjekt da vel!
</p>
<div class="projects-container">
<?php
$randProjects = array_rand($projects, min(6, count($projects)));
@ -55,11 +93,16 @@ $projects = $projectManager->getAll();
<div class="project-card">
<div class="card-content">
<h4 class="project-title"><?= $project->getName(); ?></h4>
<p><?= $project->getDescription()[0]; ?></p>
<p><?= implode('<br>',array_slice($project->getDescription(), 0, 2)); ?></p>
</div>
<p class="project-organizer">Organisert av<br><?= $owner['name']; ?></p>
<p class="project-organizer">Organisert av <?= $owner['name']; ?></p>
</div>
<?php } ?>
</div>
<center>
<a class="btn" href="edit.php?new=1">Lag prosjekt</a>
<a class="btn" href="mine.php">Mine prosjekter</a>
</center>
<?php
}
?>

View File

@ -1,31 +0,0 @@
<!DOCTYPE html>
<html lang="no">
<title>Styreverkstedet</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/splash.css">
<header>Styre&shy;verk&shy;stedet</header>
<main>
<article>
<h2>Styret</h2>
<p>
Hei
<p>
</article>
</main>
<nav><ul>
<li><a href="../">hjem</a></li>
<li class="active"><a href="../prosjekt/">prosjekter</a></li>
<li><a href="../kalender/">kalender</a></li>
<li><a href="../aktiviteter/">aktiviteter</a></li>
<li><a href="../kontakt/">kontakt</a></li>
<li><a href="../pvv/">wiki</a></li>
</nav>