Skip to content

Commit

Permalink
Update show tweet view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgraham
dgraham committed Jun 24, 2012
1 parent 9aad60f commit 448765d
Show file tree
Hide file tree
Showing 5 changed files with 173 additions and 103 deletions.
187 changes: 123 additions & 64 deletions app/assets/stylesheets/main.css.scss
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -17,19 +17,7 @@ body {
font-family: "Helvetica Neue", sans-serif; font-family: "Helvetica Neue", sans-serif;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
width: 700px; height: 100%;
margin: 0 auto;
position: relative;
}

body.narrow {
width: 600px;
}

h1 {
font-weight: 100;
width: 750px;
margin: 10px auto;
} }


h2 { h2 {
Expand Down Expand Up @@ -70,37 +58,69 @@ textarea {
} }


#content { #content {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
min-height: 200px; min-height: 200px;
background-color: #fff; width: 700px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.1);
} }


nav ul { .narrow {
position: absolute; width: 540px !important;
right: 0; }
top: 0;
background-color: #fff;
border-radius: 5px;
padding: 7px;


li { header#top {
display: inline-block; background: -webkit-linear-gradient(#222, #444);
margin-right: 10px; border-bottom: 1px solid #fff;
box-shadow: inset 0 0 10px #000, 0 0 5px rgba(0, 0, 0, 0.3);
height: 50px;
margin-bottom: 20px;

img {
height: 40px;
position: relative;
top: 5px;
} }


li:last-child { section {
margin-right: 0; width: 700px;
margin: 0 auto;
position: relative;
}

nav ul {
position: absolute;
right: 10px;
top: 10px;
padding: 7px;

li {
display: inline-block;
margin-right: 10px;

a {
text-shadow: 0 1px 1px #000;
}
}

li:last-child {
margin-right: 0;
}
} }
} }


#footer { footer#bottom {
margin: 20px auto; margin: 20px auto;
padding: 5px; width: 700px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.1);

p {
padding: 12px;
}
} }


#sidebar { #sidebar {
Expand Down Expand Up @@ -131,12 +151,12 @@ nav ul {
padding-left: 70px; padding-left: 70px;
} }


li:hover { li:last-child {
background-color: #f5f5f5; border: none;
} }


a { li:hover {

background-color: #f5f5f5;
} }


li.tweet, li.user { li.tweet, li.user {
Expand Down Expand Up @@ -185,19 +205,18 @@ li.user {
margin-bottom: 20px; margin-bottom: 20px;


textarea { textarea {
width: 475px;
height: 50px;
margin: 0 0 5px 12px;
display: block;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
padding: 6px 8px 5px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 #fff;
display: block;
font-family: "Helvetica Neue", sans-serif; font-family: "Helvetica Neue", sans-serif;
font-size: 13px; font-size: 13px;
width: 475px;
height: 19px;
line-height: 18px; line-height: 18px;
margin: 0 0 5px 12px;
padding: 6px 8px 5px;
outline: none; outline: none;
height: 19px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 #fff;
} }


input[type="submit"] { input[type="submit"] {
Expand Down Expand Up @@ -272,36 +291,76 @@ li.user {
margin-bottom: 3px; margin-bottom: 3px;
} }


#tweet-text { #tweet-content {
font-size: 200%; padding: 20px 60px 0;
font-family: Georgia, serif;
}


#tweet-date { header {
font-size: 11px; margin: 0 0 20px 60px;
border-bottom: 1px solid #ddd; position: relative;
padding-bottom: 10px;
margin: 10px 0; .fullname {
} color: #333;
display: block;
font-size: 18px;
}

.username {
font-size: 14px;
color: #999;
}

.avatar {
border-radius: 5px;
width: 48px;
height: 48px;
position: absolute;
top: 0;
left: -58px;
}

a {
display: block;
font-size: 24px;
}
}

#tweet-text {
font-family: Georgia, serif;
font-size: 22px;
line-height: 28px;
}


#tweet-author a { footer {
display: block; #tweet-date {
font-size: 24px; font-size: 11px;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin: 10px 0;
}
}
} }


#login-form { #login-form {
width: 50%; width: 50%;
margin: 50px auto; margin: 50px auto;
}


#login-form input[type="text"], input[type="text"],
#login-form input[type="password"] { input[type="password"] {
width: 98%; border: 1px solid #aaa;
display: block; border-radius: 4px;
margin-bottom: 10px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 #fff;
padding: 3px; display: block;
} font-family: "Helvetica Neue", sans-serif;
font-size: 13px;
width: 98%;
height: 19px;
line-height: 18px;
margin: 0 0 5px 0;
padding: 6px 8px 5px;
outline: none;
}


#login-form input[type="submit"] { input[type="submit"] {
float: right; float: right;
}
} }
8 changes: 8 additions & 0 deletions app/helpers/application_helper.rb
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -48,4 +48,12 @@ def favorite_count
def user_id def user_id
user.id user.id
end end

def user_name
user.name
end

def user_gravatar
gravatar_for(user.email)
end
end end
45 changes: 24 additions & 21 deletions app/templates/layouts/application.mustache
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -6,23 +6,25 @@
{{ javascripts }} {{ javascripts }}
{{ csrf_meta_tags }} {{ csrf_meta_tags }}
</head> </head>
<body {{ body_class }}> <body>
<header> <header id="top">
<h1>{{ link_to_logo }}</h1> <section>
<nav> <h1>{{ link_to_logo }}</h1>
<ul> <nav>
<li>{{ link_to_home }}</li> <ul>
{{#current_user}} <li>{{ link_to_home }}</li>
<li>{{ link_to_profile }}</li> {{#current_user}}
<li>{{ link_to_logout }}</li> <li>{{ link_to_profile }}</li>
{{/current_user}} <li>{{ link_to_logout }}</li>
{{^current_user}} {{/current_user}}
<li>{{ link_to_login }}</li> {{^current_user}}
{{/current_user}} <li>{{ link_to_login }}</li>
</ul> {{/current_user}}
</nav> </ul>
</nav>
</section>
</header> </header>
<div id="content"> <div id="content" {{ body_class }}>
{{ yield }} {{ yield }}
{{#sidebar}} {{#sidebar}}
<div id="sidebar"> <div id="sidebar">
Expand All @@ -32,12 +34,13 @@
</div> </div>
{{/sidebar}} {{/sidebar}}
</div> </div>
<div id="footer"> <footer id="bottom" {{ body_class }}>
<p> <p>
An example <a href="https://couchdb.apache.org/">Apache CouchDB</a> app, An example <a href="http://rubyonrails.org/">Rails</a>
using <a href="https://twitter.com/">Twitter</a>'s data model. app using <a href="https://couchdb.apache.org/">CouchDB</a>
Source code is available at <a href="https://github.com/dgraham/couchtweet">GitHub</a>. and <a href="https://twitter.com/">Twitter</a>'s data model.
Source code is available at <a href="https://github.com/dgraham/couchtweet">GitHub</a>.
</p> </p>
</div> </footer>
</body> </body>
</html> </html>
28 changes: 18 additions & 10 deletions app/templates/status/show.mustache
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,12 +1,20 @@
<p id="tweet-text">{{ tweet.text }}</p> <div id="tweet-content">
<p id="tweet-date"> <header>
{{ created_at }} <a href="{{ profile_path }}">
{{#liked}} <img class="avatar" src="{{ user_gravatar }}" alt="{{ user_name }}"/>
({{ pluralized_favorites }} liked this) <strong class="fullname">{{ user_name }}</strong>
{{/liked}} <span class="username">@{{ user_id }}</span>
</p> </a>
</header>


<div id="tweet-author"> <p id="tweet-text">{{ tweet.text }}</p>
{{ link_to_author }}
{{ author_name }} <footer>
<p id="tweet-date">
{{ created_at }}
{{#liked}}
({{ pluralized_favorites }} liked this)
{{/liked}}
</p>
</footer>
</div> </div>
8 changes: 0 additions & 8 deletions app/views/status/show.rb
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -25,14 +25,6 @@ def liked
def pluralized_favorites def pluralized_favorites
pluralize(tweet.favorites.count, 'person', 'people') pluralize(tweet.favorites.count, 'person', 'people')
end end

def link_to_author
link_to(user.id, profile_path)
end

def author_name
user.name
end
end end
end end
end end

0 comments on commit 448765d

Please sign in to comment.