Skip to content

Commit

Permalink
Switch homepage to flexbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@roidelapluie
roidelapluie committed Dec 20, 2015
1 parent 06935ee commit f290d0b
Show file tree
Hide file tree
Showing 6 changed files with 81 additions and 57 deletions.
46 changes: 40 additions & 6 deletions app/static/css/lexpage/_blog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@

// Behavior for small thumbnails
&.post-item-small {
margin: $padding-small-vertical 0px 2 * $padding-small-vertical 0px;
padding: $padding-small-vertical $padding-small-horizontal;

.post-tags, .post-comment, .post-next, .post-date, .post-icon-bg {
Expand Down Expand Up @@ -157,7 +156,6 @@

// Behavior for large thumbnails
&.post-item-large {
margin: $padding-base-vertical 0px 2 * $padding-base-vertical 0px;
padding: $padding-base-vertical $padding-base-horizontal;

.post-embed {
Expand All @@ -179,9 +177,13 @@

.post-icon-bg {
display: block;
position: absolute;
top: - $padding-base-vertical;
right: $padding-base-horizontal * 3;
position: relative;
span {
overflow: hidden;
}
top: 0;
left: $padding-base-horizontal * 2;
margin-bottom: -1.45em;
font-size: 10em;
color: rgba(0, 0, 0, 0.1);
z-index: 1;
Expand Down Expand Up @@ -257,4 +259,36 @@
}

}
}
}

.post-list-flat {
display: flex;
flex-wrap: wrap;

.recent-posts {
flex: 2 0 59%;
}
.vertical-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;

.horizontal-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;

div {
flex: 1 0 40%;
}
}
}
.old-posts {
flex: 1 0 30%;
}
.post-item-flex{
margin: $padding-base-horizontal;
}
}

1 change: 0 additions & 1 deletion app/static/css/lexpage/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,3 @@ h2 .btn {
@extend .btn-default;
}


2 changes: 1 addition & 1 deletion app/static/css/style.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/static/css/style_nowel.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/templates/blog/_post_inlist_flat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@
</div>
</div>
</div>
{% endif %}
{% endif %}
85 changes: 38 additions & 47 deletions app/templates/homepage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,74 +58,65 @@ <h2>{{ edito.title }}</h2>
</div></h2>


<div class="container-fluid post-list-flat">
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="row">

<div class="col-sm-12 col-md-12">
{% include 'blog/_post_inlist_flat.html' with post=post_list.0 style="post-item-large" embed=True %}
</div>
<div class="clearfix visible-block-md"></div>
<div class="col-sm-12 col-md-6">
{% include 'blog/_post_inlist_flat.html' with post=post_list.1 style="post-item-large" %}
</div>
<div class="col-sm-12 col-md-6">
{% include 'blog/_post_inlist_flat.html' with post=post_list.2 style="post-item-large" %}
</div>

<div class="post-list-flat">
<div class="recent-posts">
<div class="vertical-flex">
{% include 'blog/_post_inlist_flat.html' with post=post_list.0 style="post-item-flex post-item-emphasis post-item-large" embed=True %}
<div class="horizontal-flex">
{% include 'blog/_post_inlist_flat.html' with post=post_list.1 style="post-item-flex post-item-large" %}
{% include 'blog/_post_inlist_flat.html' with post=post_list.2 style="post-item-flex post-item-large" %}
</div>
</div>

<div class="hidden-xs col-sm-4">
</div>
<div class="old-posts">
<div class="vertical-list">
{% for post in post_list|slice:"3:6" %}
{% ifchanged post.date_published|naturalday:'l' %}
<div class="post-date-divider">{{ post.date_published|naturalday:'l'|capfirst }}</div>
{% endifchanged %}
{% include 'blog/_post_inlist_flat.html' with post=post style="post-item-small" %}
{% ifchanged post.date_published|naturalday:'l' %}
<div class="post-date-divider">{{ post.date_published|naturalday:'l'|capfirst }}</div>
{% endifchanged %}
{% include 'blog/_post_inlist_flat.html' with post=post style="post-item-flex post-item-small" %}
{% endfor %}

</div>
</div>
</div>


<a name="board"></a><h2>Discussions récentes
<div class="pull-right">
{% if user.is_authenticated %}
<div class="pull-right">
{% if user.is_authenticated %}
<a class="btn"
href="{% url 'board_create' %}"
data-toggle="tooltip"
data-placement="top"
title="Nouvelle discussion">
<span class="fa fa-pencil"></span></a>
{% endif %}
<a class="btn"
href="{% url 'board_archives' %}"
data-toggle="tooltip"
data-placement="top"
title="Liste des discussions">
<span class="fa fa-list"></span></a>
<a class="btn"
href="{% url 'board_rss' %}"
data-toggle="tooltip"
data-placement="top"
title="Flux RSS">
<span class="fa fa-rss"></span></a>
<span class="fa fa-pencil"></span></a>
{% endif %}
<a class="btn"
href="{% url 'board_archives' %}"
data-toggle="tooltip"
data-placement="top"
title="Liste des discussions">
<span class="fa fa-list"></span></a>
<a class="btn"
href="{% url 'board_rss' %}"
data-toggle="tooltip"
data-placement="top"
title="Flux RSS">
<span class="fa fa-rss"></span></a>
</div></h2>

{% if thread_list %}
{% for thread in thread_list %}
{% include "board/_thread_inlist.html" with thread=thread action=False %}
{% endfor %}
{% for thread in thread_list %}
{% include "board/_thread_inlist.html" with thread=thread action=False %}
{% endfor %}
{% else %}
<em>Aucun discussion récente.</em>
<em>Aucun discussion récente.</em>
{% endif %}

{% endblock page %}
{% endblock page %}

{% block sidebar_context %}
<!-- <div class="panel panel-primary">
{% block sidebar_context %}
<!-- <div class="panel panel-primary">
<div class="panel-body">
Défilement rapide
<ul>
Expand All @@ -134,4 +125,4 @@ <h2>{{ edito.title }}</h2>
</ul>
</div>
</div> -->
{% endblock %}
{% endblock %}

0 comments on commit f290d0b

Please sign in to comment.