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

We now use inline-flex for the post grid instead of float left.

Browse Source
This commit is contained in:
Kevin Nobel
2017-01-11 15:11:42 +01:00
parent b8e61e641a
commit b4c7bfb1ef
3 changed files with 78 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
website/profile.php
View File

@@ -13,6 +13,9 @@ include("views/main.php");
/* Add your view files here. */ /* Add your view files here. */
include("views/profile.php"); include("views/profile.php");
/* This adds the footer. */
include("views/footer.php");
?> ?>
</body> </body>
</html> </html>

11
website/styles/profile.css
View File

@@ -26,23 +26,22 @@
} }
.posts { .posts {
background-color: red; z-index: -1;
margin-top: 20px;
} }
.post-box { .post-box {
float: left; display: inline-flex;
width: 250px; width: 250px;
margin: 20px 20px 0 0; margin: 20px 20px 0 0;
padding: 25px; padding: 25px;
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.post-box img { .post img {
width: 250px; width: 250px;
} }
.post-box .post-date { .post .post-date {
float: right; float: right;
color: #aaaaaa; color: #aaaaaa;
font-size: 0.8em; font-size: 0.8em;
@@ -51,7 +50,7 @@
.friend-request { .friend-request {
float: right; float: right;
padding: 10px; padding: 10px;
border-radius: 3px; border-radius: 5px;
background-color: #845663; background-color: #845663;
color: #FFFFFF; color: #FFFFFF;
transition-duration: 250ms; transition-duration: 250ms;

30
website/views/profile.php
View File

@@ -23,76 +23,96 @@
<div class="item-box right"> <div class="item-box right">
<h2>Groepen</h2> <h2>Groepen</h2>
<p> <p>
<a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a> <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a> <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a> <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a> <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#" data-title="[groepsnaam]"><img class="profile-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a> <a href="#" data-title="[groepsnaam]"><img class="group-picture" src="http://i.imgur.com/ztYhYro.png" alt="[groepsnaam]'s logo"></a>
<a href="#groepen">...en nog 6 anderen!</a> <a href="#groepen">...en nog 6 anderen!</a>
</p> </p>
</div> </div>
<div class="posts"> <div class="posts">
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Tekst</h2> <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> <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>
<p class="post-date">Enkele minuten geleden geplaatst</p> <p class="post-date">Enkele minuten geleden geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Afbeelding</h2> <h2>Afbeelding</h2>
<img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]"> <img src="http://i.imgur.com/tr9amK8.png" alt="Foto van [gebruikersnaam]">
<p class="post-date">Gisteren geplaatst</p> <p class="post-date">Gisteren geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Post</h2> <h2>Post</h2>
<video width="250" controls> <video width="250" controls>
<source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4"> <source src="http://i.imgur.com/ujAO1Dl.mp4" type="video/mp4">
</video> </video>
<p class="post-date">Maandag geplaatst</p> <p class="post-date">Maandag geplaatst</p>
</div> </div>
</div>
<div class="post-box"> <div class="post-box">
<div class="post">
<h2>Post</h2> <h2>Post</h2>
<p class="post-date">4 Januari geplaatst</p> <p class="post-date">4 Januari geplaatst</p>
</div> </div>
</div> </div>
</div>
</div> </div>