Permalink
Browse files

Update show tweet view.

  • Loading branch information...
1 parent 9aad60f commit 448765d0f9e165513efb294061e1ad421a09b739 @dgraham committed Jun 24, 2012
@@ -17,19 +17,7 @@ body {
font-family: "Helvetica Neue", sans-serif;
font-size: 14px;
line-height: 18px;
- width: 700px;
- margin: 0 auto;
- position: relative;
-}
-
-body.narrow {
- width: 600px;
-}
-
-h1 {
- font-weight: 100;
- width: 750px;
- margin: 10px auto;
+ height: 100%;
}
h2 {
@@ -70,37 +58,69 @@ textarea {
}
#content {
+ background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
margin: 0 auto;
position: relative;
min-height: 200px;
- background-color: #fff;
- border-radius: 5px;
- border: 1px solid rgba(0,0,0,0.1);
+ width: 700px;
}
-nav ul {
- position: absolute;
- right: 0;
- top: 0;
- background-color: #fff;
- border-radius: 5px;
- padding: 7px;
+.narrow {
+ width: 540px !important;
+}
- li {
- display: inline-block;
- margin-right: 10px;
+header#top {
+ background: -webkit-linear-gradient(#222, #444);
+ 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 {
- margin-right: 0;
+ section {
+ 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;
- padding: 5px;
+ width: 700px;
background-color: #fff;
border-radius: 5px;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+
+ p {
+ padding: 12px;
+ }
}
#sidebar {
@@ -131,12 +151,12 @@ nav ul {
padding-left: 70px;
}
- li:hover {
- background-color: #f5f5f5;
+ li:last-child {
+ border: none;
}
- a {
-
+ li:hover {
+ background-color: #f5f5f5;
}
li.tweet, li.user {
@@ -185,19 +205,18 @@ li.user {
margin-bottom: 20px;
textarea {
- width: 475px;
- height: 50px;
- margin: 0 0 5px 12px;
- display: block;
border: 1px solid #aaa;
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-size: 13px;
+ width: 475px;
+ height: 19px;
line-height: 18px;
+ margin: 0 0 5px 12px;
+ padding: 6px 8px 5px;
outline: none;
- height: 19px;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 #fff;
}
input[type="submit"] {
@@ -272,36 +291,76 @@ li.user {
margin-bottom: 3px;
}
-#tweet-text {
- font-size: 200%;
- font-family: Georgia, serif;
-}
+#tweet-content {
+ padding: 20px 60px 0;
-#tweet-date {
- font-size: 11px;
- border-bottom: 1px solid #ddd;
- padding-bottom: 10px;
- margin: 10px 0;
-}
+ header {
+ margin: 0 0 20px 60px;
+ position: relative;
+
+ .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 {
- display: block;
- font-size: 24px;
+ footer {
+ #tweet-date {
+ font-size: 11px;
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 10px;
+ margin: 10px 0;
+ }
+ }
}
#login-form {
width: 50%;
margin: 50px auto;
-}
-#login-form input[type="text"],
-#login-form input[type="password"] {
- width: 98%;
- display: block;
- margin-bottom: 10px;
- padding: 3px;
-}
+ input[type="text"],
+ input[type="password"] {
+ border: 1px solid #aaa;
+ border-radius: 4px;
+ 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-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"] {
- float: right;
+ input[type="submit"] {
+ float: right;
+ }
}
@@ -48,4 +48,12 @@ def favorite_count
def user_id
user.id
end
+
+ def user_name
+ user.name
+ end
+
+ def user_gravatar
+ gravatar_for(user.email)
+ end
end
@@ -6,23 +6,25 @@
{{ javascripts }}
{{ csrf_meta_tags }}
</head>
-<body {{ body_class }}>
- <header>
- <h1>{{ link_to_logo }}</h1>
- <nav>
- <ul>
- <li>{{ link_to_home }}</li>
- {{#current_user}}
- <li>{{ link_to_profile }}</li>
- <li>{{ link_to_logout }}</li>
- {{/current_user}}
- {{^current_user}}
- <li>{{ link_to_login }}</li>
- {{/current_user}}
- </ul>
- </nav>
+<body>
+ <header id="top">
+ <section>
+ <h1>{{ link_to_logo }}</h1>
+ <nav>
+ <ul>
+ <li>{{ link_to_home }}</li>
+ {{#current_user}}
+ <li>{{ link_to_profile }}</li>
+ <li>{{ link_to_logout }}</li>
+ {{/current_user}}
+ {{^current_user}}
+ <li>{{ link_to_login }}</li>
+ {{/current_user}}
+ </ul>
+ </nav>
+ </section>
</header>
- <div id="content">
+ <div id="content" {{ body_class }}>
{{ yield }}
{{#sidebar}}
<div id="sidebar">
@@ -32,12 +34,13 @@
</div>
{{/sidebar}}
</div>
- <div id="footer">
+ <footer id="bottom" {{ body_class }}>
<p>
- An example <a href="https://couchdb.apache.org/">Apache CouchDB</a> app,
- using <a href="https://twitter.com/">Twitter</a>'s data model.
- Source code is available at <a href="https://github.com/dgraham/couchtweet">GitHub</a>.
+ An example <a href="http://rubyonrails.org/">Rails</a>
+ app using <a href="https://couchdb.apache.org/">CouchDB</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>
- </div>
+ </footer>
</body>
</html>
@@ -1,12 +1,20 @@
-<p id="tweet-text">{{ tweet.text }}</p>
-<p id="tweet-date">
-{{ created_at }}
-{{#liked}}
- ({{ pluralized_favorites }} liked this)
-{{/liked}}
-</p>
+<div id="tweet-content">
+ <header>
+ <a href="{{ profile_path }}">
+ <img class="avatar" src="{{ user_gravatar }}" alt="{{ user_name }}"/>
+ <strong class="fullname">{{ user_name }}</strong>
+ <span class="username">@{{ user_id }}</span>
+ </a>
+ </header>
-<div id="tweet-author">
- {{ link_to_author }}
- {{ author_name }}
+ <p id="tweet-text">{{ tweet.text }}</p>
+
+ <footer>
+ <p id="tweet-date">
+ {{ created_at }}
+ {{#liked}}
+ ({{ pluralized_favorites }} liked this)
+ {{/liked}}
+ </p>
+ </footer>
</div>
View
@@ -25,14 +25,6 @@ def liked
def pluralized_favorites
pluralize(tweet.favorites.count, 'person', 'people')
end
-
- def link_to_author
- link_to(user.id, profile_path)
- end
-
- def author_name
- user.name
- end
end
end
end

0 comments on commit 448765d

Please sign in to comment.