Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
New photo page layout.
  • Loading branch information
harrislapiroff committed Mar 2, 2014
1 parent b827091 commit bc3d97a
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 34 deletions.
43 changes: 42 additions & 1 deletion clickclick/compass/sass/screen.sass
Expand Up @@ -4,6 +4,7 @@
$base-font-size: 15px
$base-line-height: 1.33
$computed-line-height: floor($base-font-size*$base-line-height)
$header-height: 50px

@function white($a)
@return rgba(255, 255, 255, $a)
Expand All @@ -17,6 +18,12 @@ body
font-size: $base-font-size
line-height: $base-line-height

.margin-trailer
margin-bottom: $computed-line-height

.margin-leader
margin-top: $computed-line-height

.cc-navbar
margin: 0

Expand Down Expand Up @@ -48,4 +55,38 @@ body
float: left
font-size: $base-font-size * 2
> .page-header-actions
float: right
float: right

// Photo Detail Page
// -----------------
.photo-stage
position: absolute
top: $header-height
left: 0
bottom: 0
right: 25%
background: #0C0C0C
// All of the following is a photo centering trick
text-align: center
font-size: 0 // collapses white-space b/w inline blocks
> *
font-size: $base-font-size // bump the font-size back up
&::after
content: " "
display: inline-block
height: 100%
vertical-align: middle
> img
max-width: 100%
max-height: 100%
display: inline-block
vertical-align: middle

.photo-meta
position: absolute
top: $header-height
right: 0
left: 75%
bottom: 0
overflow: auto
2 changes: 1 addition & 1 deletion clickclick/static/clickclick/stylesheets/screen.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

74 changes: 42 additions & 32 deletions clickclick/templates/clickclick/photo.html
Expand Up @@ -5,42 +5,52 @@

{% block content %}
{% with photo.photoset as photoset %}
<header class="page-header">
<h1 class="page-title">{% if photo.title %}{{ photo.title }}{% else %}&nbsp;{% endif %}</h1>
{% if photo.owner == user %}
<section class="page-header-actions">
<a class="btn" href="{% url 'clickclick.edit_photo' photoset.slug photo.slug %}"><i class="glyphicon glyphicon-pencil"></i> Edit Photo</a>
<a class="btn btn-danger" href="{% url 'clickclick.delete_photo' photoset.slug photo.slug %}"><i class="glyphicon glyphicon-trash"></i> Delete Photo</a>
</section>
{% endif %}
</header>
<div class="container-fluid">
<div class="row">
<section class="col-md-8">
{% adjust photo.image "fit" width=880 height=770 as im %}
<div class="photo-stage">
<img src="{{ im }}" />
{% adjust photo.image "fit" width=880 height=770 as im %}
<div class="photo-stage">
<img src="{{ im }}" />
</div>{# /.photo-stage#}

<aside class="photo-meta">
<header class="page-header">
<h1 class="page-title">{% if photo.title %}{{ photo.title }}{% else %}&nbsp;{% endif %}</h1>
</header>
<div class="container-fluid">
<div class="photo-from-set text-muted margin-trailer">from <a href="{{ photoset.get_absolute_url }}">{{ photoset.title }}</a></div>

{% if photo.caption %}
<div class="photo-caption">
{{ photo.caption|linebreaks }}
</div>
{% if photo.caption %}
<div class="photo-caption">
{{ photo.caption }}
</div>
{% endif %}
</section>{# /.photo-stage.col-md-8 #}
<aside class="photo-meta col-md-4">
<ul class="pagination">
<li {% if not previous %} class="disabled"{% endif %}>
<a href="{% firstof previous.get_absolute_url "#" %}" data-keycut="LEFT">&#171;</a>
{% endif %}

{% if photo.owner == user %}
<section class="page-header-actions">
<a class="btn btn-xs btn-default" href="{% url 'clickclick.edit_photo' photoset.slug photo.slug %}"><i class="glyphicon glyphicon-pencil"></i> Edit Photo</a>
<a class="btn btn-xs btn-danger" href="{% url 'clickclick.delete_photo' photoset.slug photo.slug %}"><i class="glyphicon glyphicon-trash"></i> Delete Photo</a>
</section>
{% endif %}

<ul class="pagination">
{% if previous %}
<li>
<a href="{{ previous.get_absolute_url }}" data-keycut="LEFT">&#171;</a>
</li>
{% else %}
<li class="disabled">
<span>&#171;</span>
</li>
{% endif %}
{% if next %}
<li>
<a href="{{ photoset.get_absolute_url }}">{{ photoset.title }}</a>
<a href="{{ next.get_absolute_url }}" data-keycut="RIGHT">&#187;</a>
</li>
<li{% if not next %} class="disabled"{% endif %}>
<a href="{% firstof next.get_absolute_url "#" %}" data-keycut="RIGHT">&#187;</a>
{% else %}
<li class="disabled">
<span>&#171;</span>
</li>
</ul>
</aside>{# /.photo-meta.col-md-4 #}
</div>{# /.row #}
</div>{# /.container-fluid #}
{% endif %}
</ul>
</div>
</aside>{# /.photo-meta #}
{% endwith %}
{% endblock %}

0 comments on commit bc3d97a

Please sign in to comment.