Skip to content
This repository
Browse code

DG RY; moved actions to the bottom of the show pages; fixed arrows

  • Loading branch information...
commit ead286bf9933a79f552dc9457e8b8703d439c0fc 1 parent 653e93f
Daniel Grippi danielgrippi authored
42 app/views/posts/show.html.haml
@@ -14,46 +14,30 @@
14 14 = person_image_link @post.author
15 15 .bd
16 16 = person_link(@post.author, :class => 'author-name')
17   -
18 17 .post-time
19 18 %i.icon-time
20 19 = time_ago_in_words(@post.created_at) + ' ago'
21 20
22   - .post-vitals
23   - %span
24   - %i.icon-heart
25   - = @post.likes.size
26   -
27   - %span
28   - %i.icon-plus
29   - = @post.participations.size
30   -
31   - %span
32   - %i.icon-retweet
33   - = @post.reshares.size
34   -
35   - %span
36   - %i.icon-comment
37   - = @post.comments.size
38 21
  22 +#post-content
39 23
40   - - if current_user
41   - #user-controls
42   - = link_to "#", :class => "label" do
43   - %i.icon-heart.icon-white
  24 +- if current_user
  25 + #user-controls
  26 + = link_to "#", :class => "label", do
  27 + %i.icon-user.icon-white
44 28
45   - = link_to "#", :class => "label" do
46   - %i.icon-plus.icon-white
  29 + = link_to "#", :class => "label" do
  30 + %i.icon-heart.icon-white
47 31
48   - = link_to "#", :class => "label" do
49   - %i.icon-retweet.icon-white
  32 + = link_to "#", :class => "label" do
  33 + %i.icon-plus.icon-white
50 34
51   - = link_to "#", :class => "label", do
52   - %i.icon-comment.icon-white
  35 + = link_to "#", :class => "label" do
  36 + %i.icon-retweet.icon-white
53 37
54   - = link_to person_image_tag(current_user.person), root_path
  38 + = link_to "#", :class => "label", do
  39 + %i.icon-comment.icon-white
55 40
56   -#post-content
57 41
58 42 = link_to image_tag('arrow-left.png'), '#', :class => 'nav-arrow left', :id => 'back'
59 43 = link_to image_tag('arrow-right.png'), '#', :class => 'nav-arrow right', :id => 'forward'
892 graphics/arrow.ai
892 additions, 0 deletions not shown
BIN  public/images/arrow-left.png
BIN  public/images/arrow-right.png
67 public/stylesheets/sass/new-templates.scss
@@ -38,6 +38,13 @@ $light-grey: #999;
38 38 opacity: $val;
39 39 }
40 40
  41 +@mixin transition($type, $speed) {
  42 + -o-transition: $type $speed;
  43 + -moz-transition: $type $speed;
  44 + -webkit-transition: $type $speed;
  45 + transition: $type $speed;
  46 +}
  47 +
41 48 /* styles */
42 49
43 50 .multi-photo {
@@ -117,7 +124,6 @@ $light-grey: #999;
117 124
118 125 .rich-media {
119 126 text-align: center;
120   -
121 127 background-color: #333;
122 128
123 129 h3 {
@@ -133,23 +139,36 @@ $light-grey: #999;
133 139 }
134 140
135 141 .nav-arrow {
136   - @include opacity(0.2);
137   -
138   - -o-transition: opacity 0.3s;
139   - -moz-transition: opacity 0.3s;
140   - -webkit-transition: opacity 0.3s;
141   - transition: opacity 0.3s;
  142 + @include opacity(0.8);
  143 + @include transition(background-color, 0.3s);
  144 + @include center();
142 145
143 146 position: fixed;
  147 + height: 100%;
144 148 z-index: 3;
  149 + top: 0;
  150 + padding: 0 13px;
  151 + background-color: rgba(0,0,0,0);
145 152
146   - top: 45%;
  153 + img {
  154 + @include opacity(0.5);
  155 +
  156 + height: 30px;
  157 + width: 30px;
  158 + }
147 159
148   - &.left { left: 0; }
149   - &.right { right: 0; }
  160 + &.left {
  161 + left: 0;
  162 + padding-right: 19px;
  163 + }
  164 +
  165 + &.right {
  166 + right: 0;
  167 + padding-left: 19px;
  168 + }
150 169
151 170 &:hover {
152   - @include opacity(0.6);
  171 + background-color: rgba(0,0,0,0.1)
153 172 }
154 173 }
155 174
@@ -169,13 +188,9 @@ $light-grey: #999;
169 188 float: left;
170 189 margin: 0;
171 190
172   - background-color: rgba(255,255,255,0.8);
173   -
174   - max-height: 52px;
175   -
176 191 .avatar {
177   - height: 52px;
178   - width: 52px;
  192 + height: 35px;
  193 + width: 35px;
179 194 }
180 195
181 196 .author-name {
@@ -196,7 +211,12 @@ $light-grey: #999;
196 211 }
197 212
198 213 #user-controls {
199   - float: right;
  214 + position: fixed;
  215 + height: 30px;
  216 + width: 100%;
  217 + bottom: 0;
  218 + left: 0;
  219 + text-align: center;
200 220
201 221 .avatar {
202 222 vertical-align: top;
@@ -205,7 +225,11 @@ $light-grey: #999;
205 225 }
206 226
207 227 .label {
208   - @include opacity(0.5);
  228 + @include opacity(0.6);
  229 + @include transition(opacity, 0.3s);
  230 +
  231 + box-shadow: 0 0 2px rgba(255,255,255,0.9);
  232 +
209 233 padding: 5px;
210 234 margin-right: 5px;
211 235 line-height: 24px;
@@ -221,6 +245,11 @@ $light-grey: #999;
221 245 background-color: #000;
222 246 color: #fff;
223 247
  248 + &:last-child {
  249 + padding-right: 5px;
  250 + margin-right: 0;
  251 + }
  252 +
224 253 &:hover {
225 254 @include opacity(1);
226 255 text-decoration: none;

0 comments on commit ead286b

Please sign in to comment.
Something went wrong with that request. Please try again.