Skip to content
This repository has been archived by the owner on Mar 15, 2018. It is now read-only.

Commit

Permalink
more flexible feed tiles
Browse files Browse the repository at this point in the history
  • Loading branch information
@spasovski
spasovski committed Aug 14, 2014
1 parent 9f8ba7e commit 3844441
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 35 deletions.
48 changes: 19 additions & 29 deletions src/media/css/feed.styl
View file
Expand Up @@ -496,27 +496,29 @@ $vertical-tile-margin = 10px; // Vertical space between feed tiles.
.feed-item {
background-size: cover;
border-radius: 5px;
height: 142px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: $mobile-tile-width;

.curve,
.alt-curve {
border-radius: 50%;
height: 400px;
left: -350px;
border-radius: 50% 50% 0 0;
height: 53px;
left: -50px;
position: absolute;
top: 30px;
width: 1000px;
width: 400px;
z-index: 10;
}
.alt-curve {
margin-top: -10px;
position: relative;
top: 0;
}
.info {
padding: 0 10px;
position: absolute;
top: 85px;
z-index: 15;
margin-top: 83px;
padding: 0 10px 20px;

.name,
.author {
Expand Down Expand Up @@ -564,33 +566,22 @@ $vertical-tile-margin = 10px; // Vertical space between feed tiles.
}
}
&.mega {
min-height: 175px;

.curve {
top: 15px;
}
.alt-curve {
top: 85px;
}
.info {
top: 33px;
}
.desc {
color: #fff;
font-size: 15px;
padding: 0 10px;
position: absolute;
top: 100px;
margin-top: -30px;
padding: 0 10px 15px;
position: relative;
width: 300px;
z-index: 15;
z-index: 20;
}
&.full {
min-height: 239px;

.has-background& {
min-height: 175px;
}

.curve {
top: 30px;
}
Expand All @@ -602,15 +593,11 @@ $vertical-tile-margin = 10px; // Vertical space between feed tiles.
}
}
.alt-curve {
top: 135px;

.has-background& {
top: 85px;
}
}
.desc {
top: 154px;

.has-background& {
top: 97px;
}
Expand All @@ -627,7 +614,9 @@ $vertical-tile-margin = 10px; // Vertical space between feed tiles.
top: 50px;
}
.info {
top: 60px;
position: relative;
margin-top: 60px;
z-index: 15;
}
.desc, .author {
display: none;
Expand All @@ -638,6 +627,7 @@ $vertical-tile-margin = 10px; // Vertical space between feed tiles.
height: 150px;

.curve {
height: 70px;
top: 80px;
}
.info {
Expand Down
11 changes: 5 additions & 6 deletions src/templates/_macros/feed_item.html
View file
Expand Up @@ -47,12 +47,11 @@ <h2 class="app-name elliflow">{{ app.name|translate(app) }}</h2>
feed_app.app.name|translate(feed_app.app)) }}</li>
</ul>
{% endif %}
<div class="curve" style="background-color: {{ color|hex2rgba('.6') }}"></div>
<div class="info">
<div class="curve" style="background-color: {{ color|hex2rgba('.8') }}"></div>
<div class="info" style="background-color: {{ color|hex2rgba('.8') }}">
<h1 class="name">{{ feed_app.app.name|translate(feed_app) }}</h1>
<p class="author">{{ feed_app.app.author }}</p>
</div>
<div class="alt-curve" style="background-color: {{ color|hex2rgba('.8') }}"></div>
</section>
{% else %}
{{ market_tile(feed_app.app,
Expand Down Expand Up @@ -126,12 +125,12 @@ <h1 class="feed-tile-header" data-brand-color="{{ color }}">
</ul>
{% endif %}
<div class="curve" style="background-color: {{ color|hex2rgba('.6') }}"></div>
<div class="info">
<div class="info" style="background-color: {{ color|hex2rgba('.6') }}">
<h1 class="name">{{ coll.name|translate(coll)|safe }}</h1>
</div>
{% if not landing %}
<div class="alt-curve" style="background-color: {{ color|hex2rgba('.8') }}"></div>
<div class="desc">{{ desc|safe }}</div>
<div class="alt-curve" style="background-color: {{ color }}"></div>
<div class="desc" style="background-color: {{ color }}">{{ desc|safe }}</div>
{% endif %}
</section>
</a>
Expand Down

0 comments on commit 3844441

Please sign in to comment.