MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Merge branch 'kevin-prototype' into 'master'

Browse Source 
Kevin prototype

See merge request !20
This commit was merged in pull request #24.
This commit is contained in:
Marijn Jansen
2017-01-12 11:40:22 +01:00
parent f377491dde fffc418f4c
commit 903badfe6a
3 changed files with 81 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
website/styles/profile.css
View File

@@ -1,7 +1,3 @@
.profile-box, .item-box, .item-box-full-width, .post-box {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.profile-box {
min-height: 150px;
padding: 25px;
@@ -28,24 +24,53 @@
width: calc(50% - 60px);
}
@media only screen and (max-width: 900px) {
.item-box {
width: calc(100% - 50px);
}
}
.item-box-full-width {
width: calc(100% - 50px);
}
.posts {
z-index: -1;
margin-right: 0;
width: calc(100% + 15px);
}
.post-box {
display: inline-flex;
width: 250px;
margin: 20px 20px 0 0;
margin: 20px 15px 0 0;
padding: 25px;
background-color: #FFFFFF;
}
/* fullscreen */
.post-box {
width: calc(25% - 68px);
}
@media only screen and (max-width: 1500px) {
.post-box {
width: calc(50% - 67px);
}
}
/* mobile */
@media only screen and (max-width: 1000px) {
.post-box {
width: calc(100% - 65px);
}
}
.post {
width: 100%;
}
.post img {
width: 250px;
width: 100%;
}
.post .post-date {

24
website/views/group.php
View File

@@ -1,5 +1,5 @@
<div class="content">
<div class="profile-box">
<div class="profile-box platform">
<img class="left group-picture" src="http://i.imgur.com/afjEUx2.jpg">
<div class="profile-button">
<p><img src="../website/img/leave-group.png"> Groep verlaten</p>
@@ -8,7 +8,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
</div>
<div class="item-box-full-width">
<div class="item-box-full-width platform">
<h2>Leden</h2>
<p>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
@@ -42,7 +42,7 @@
</div>
<div class="posts">
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -50,7 +50,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -58,7 +58,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -66,7 +66,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p>
@@ -74,7 +74,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -82,7 +82,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -90,7 +90,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -98,7 +98,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
@@ -106,7 +106,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
@@ -116,7 +116,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>

50
website/views/profile.php
View File

@@ -1,5 +1,5 @@
<div class="content">
<div class="profile-box">
<div class="profile-box platform">
<img class="left profile-picture" src="http://i.imgur.com/afjEUx2.jpg">
<div class="profile-button">
<p><img src="../website/img/add-friend.png"> Als vriend toevoegen</p>
@@ -8,7 +8,7 @@
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
</div>
<div class="item-box left">
<div class="item-box left platform">
<h2>Vrienden</h2>
<p>
<a href="#" data-title="[gebruikersnaam]"><img class="profile-picture" src="http://i.imgur.com/afjEUx2.jpg" alt="[gebruikersnaam]'s profielfoto"></a>
@@ -20,7 +20,7 @@
</p>
</div>
<div class="item-box right">
<div class="item-box right platform">
<h2>Groepen</h2>
<p>
<a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
@@ -33,7 +33,7 @@
</div>
<div class="posts">
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -41,7 +41,15 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Glitterzz :3</h2>
<img src="https://s-media-cache-ak0.pinimg.com/originals/5d/ab/86/5dab8634abeded269f4c456b3b7a6a90.gif" alt="Foto van [gebruikersnaam]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -49,7 +57,23 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>woooow</h2>
<img src="http://31.media.tumblr.com/5227ca92d5d028bae64060d3f32315c2/tumblr_myt7mjJahV1qimzy6o3_250.gif" alt="Foto van [gebruikersnaam]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>0.0</h2>
<img src="https://68.media.tumblr.com/7b2da43b98c43016261831c240381fba/tumblr_o6ol996fHJ1tcu68no1_400.gif" alt="Foto van [gebruikersnaam]">
<p class="post-date">Enkele minuten geleden geplaatst</p>
</div>
</div>
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -57,7 +81,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla.</p>
@@ -65,7 +89,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -73,7 +97,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum turpis quam, eu ultrices sapien hendrerit tincidunt. Nunc aliquam neque turpis, id porta quam iaculis id. Sed suscipit, nisl a fermentum congue, nunc augue finibus lectus, id varius nunc purus nec dolor. Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -81,7 +105,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Tekst</h2>
<p>Integer laoreet tellus sit amet sapien auctor congue. Mauris laoreet eu elit vel rhoncus. Nam et tortor arcu. Maecenas sit amet leo quis tellus varius gravida. Sed quis fermentum odio, sed dictum nulla. Donec aliquam rutrum orci cursus tempus. Quisque sit amet ipsum eget velit aliquam facilisis ultricies quis ligula. Nunc nisi lacus, luctus non bibendum quis, sagittis sit amet odio.</p>
@@ -89,7 +113,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
@@ -97,7 +121,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<video width="250" controls>
@@ -107,7 +131,7 @@
</div>
</div>
<div class="post-box">
<div class="post-box platform">
<div class="post">
<h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p>