Skip to content

Commit

Permalink
Polished Thread view CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@bnvk
bnvk committed Jan 6, 2014
1 parent 38ad8e3 commit a920088
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 70 deletions.
63 changes: 43 additions & 20 deletions static/default/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6523,7 +6523,8 @@ a.compose-show-field {
}
/* Thread Title */
#thread-title {
padding: 10px 15px;
text-align: center;
padding: 10px 0;
background: #f2f2f2;
border-bottom: 1px solid #b3b3b3;
}
Expand All @@ -6533,6 +6534,10 @@ a.compose-show-field {
font-size: 24px;
font-weight: bold;
}
#thread-title ul {
display: inline-block;
margin: 0 auto;
}
#thread-title ul li {
margin-right: 15px;
}
Expand All @@ -6546,70 +6551,88 @@ a.compose-show-field {
color: #4d4d4d;
}
/* Thread Items */
.thread-item {
.thread-snippet {
border-bottom: 1px solid #b3b3b3;
}
.thread-snippet:hover {
background: #f2f2f2;
cursor: pointer;
}
.thread-snippet:hover .feedback-expand {
display: block;
}
.thread-item-metadata {
width: 100%;
display: table;
}
.thread-item-from {
margin-top: 10px;
margin-left: 15px;
display: inline-block;
min-width: 175px;
max-width: 200px;
display: table-cell;
padding-top: 15px;
padding-left: 15px;
}
.thread-item-from a.avatar {
float: left;
margin-right: 5px;
margin-right: 7px;
}
.thread-item-from a.avatar img {
width: 48px;
}
.thread-item-from a.name {
display: block;
margin-top: 0px;
margin-bottom: 5px;
color: #4d4d4d;
font-size: 18px;
font-weight: bold;
line-height: 21px;
line-height: 18px;
}
.thread-item-from span.icon {
float: left;
font-size: 14px;
}
.thread-item-details {
margin-top: 10px;
margin-right: 15px;
width: 200px;
display: table-cell;
vertical-align: top;
text-align: right;
padding-top: 15px;
padding-right: 15px;
}
.thread-item-details span.datetime {
display: block;
margin-bottom: 5px;
text-align: right;
font-size: 14px;
font-weight: bold;
color: #b3b3b3;
line-height: 21px;
line-height: 14px;
}
.thread-item-details span.datetime.message {
color: #4d4d4d;
}
.thread-item-details a.thread-show-message {
display: block;
margin-top: 3px;
text-align: right;
.feedback-expand {
display: none;
color: #b3b3b3;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 14px;
}
.thread-item-details a.thread-show-message:hover {
color: #4d4d4d;
line-height: 12px;
}
.thread-item-text {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
}
#thread-message {
border-bottom: 1px solid #b3b3b3;
}
.thread-item-encrypted-data {
.thread-item-data-encrypted {
margin-bottom: 10px;
font-size: 11px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
Expand Down
67 changes: 40 additions & 27 deletions static/default/html/page/thread/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,73 +21,79 @@ <h1>Yo, duder dude face. Where are ya & what's crackin?</h1>
</div>

<div id="thread-messages">
<div class="thread-item">
<div class="clearfix">
<div class="thread-item-from left">

<div class="thread-snippet" data-mid="E3W">
<div class="thread-item-metadata clearfix">
<div class="thread-item-from">
<a href="" class="avatar"><img src="/static/img/avatar-default.png"></a>
<a href="" class="name">You</a>
<span class="icon icon-encrypted"></span>
</div>
<div class="thread-item-details right">
<div class="thread-item-details">
<span class="datetime">Nov 8, 2012</span>
<a class="thread-show-message" href="#">Show <span class="icon-eye"></span></a>
<span class="feedback-expand">Expand Message</span>
</div>
</div>
<div class="thread-item-text">
Yo buddy. I’m doing pretty good- just living it up here in Iceland, ya know mi pitchfork Austin Pinterest forage put a bird on it. Etsy small batch beard cred. Fingerstache YOLO swag, mixtape McSweeney's pirate ship book shop...
</div>
</div>
<div class="thread-item">
<div class="clearfix">
<div class="thread-item-from left">

<div class="thread-line-subject"></div>

<div class="thread-snippet" data-mid="E34">
<div class="thread-item-metadata clearfix">
<div class="thread-item-from">
<a href="" class="avatar"><img src="/static/img/avatar-default.png"></a>
<a href="" class="name">Ian Nelson</a>
<span class="icon icon-encrypted"></span>
</div>
<div class="thread-item-details right">
<div class="thread-item-details">
<span class="datetime">Nov 8, 2012</span>
<a class="thread-show-message" href="#">Show <span class="icon-eye"></span></a>
<span class="feedback-expand">Expand Message</span>
</div>
</div>
<div class="thread-item-text">
Yo buddy. I’m doing pretty good- just living it up here in Iceland, ya know mi pitchfork Austin Pinterest forage put a bird on it. Etsy small batch beard cred. Fingerstache YOLO swag, mixtape McSweeney's pirate ship book shop...
</div>
</div>
</div>

</div>

<div id="thread-message">
<div class="clearfix">
<div class="thread-item-from left">
<div class="thread-item-metadata clearfix">
<div class="thread-item-from">
<a href="" class="avatar"><img src="/static/img/avatar-default.png"></a>
<a href="" class="name">Johnny B. Goode</a>
<span class="icon icon-unencrypted"></span>
</div>
<div class="thread-item-details right">
<div class="thread-item-details">
<span class="datetime">Nov 8, 2012</span>
</div>
</div>

<!-- Non Encrypted Text -->
<div class="thread-item-text">
<!-- Non Encrypted Text -->
<p>Hey, buddy How’s it going over there in Ice-o-land? Are you ever planning on coming back to the USA? I hope so as I am missing ya quite fierce amigo. Sustainable church-key Schlitz Godard. Flannel ennui master cleanse +1 Pinterest. Farm-to-table Portland +1, Echo Park fingerstache ennui tousled photo booth single-origin coffee hella 8-bit. Odd Future next level hoodie keffiyeh, art party meh stumptown. Organic jean shorts street art, semiotics polaroid Wes Anderson forage bicycle rights. Lo-fi fashion axe kitsch, selfies pitchfork PBR direct trade Banksy kale chips blog asymmetrical twee actually blue bottle. Blue bottle yr selfies tousled, tofu mixtape helvetica authentic typewriter wolf YOLO gastropub sartorial thundercats narwhal.</p>

<!-- Encrypted Text -->
<div class="thread-item-encrypted-data"><span class="icon-encrypted"></span> Encrypted</div>
Hey, buddy How’s it going over there in Ice-o-land? Are you ever planning on coming back to the USA? I hope so as I am missing ya quite fierce amigo. Sustainable church-key Schlitz Godard. Flannel ennui master cleanse +1 Pinterest. Farm-to-table Portland +1, Echo Park fingerstache ennui tousled photo booth single-origin coffee hella 8-bit. Odd Future next level hoodie keffiyeh, art party meh stumptown. Organic jean shorts street art, semiotics polaroid Wes Anderson forage bicycle rights. Lo-fi fashion axe kitsch, selfies pitchfork PBR direct trade Banksy kale chips blog asymmetrical twee actually blue bottle. Blue bottle yr selfies tousled, tofu mixtape helvetica authentic typewriter wolf YOLO gastropub sartorial thundercats narwhal.
</div>
<!-- Encrypted Text -->
<div class="thread-item-text">
<div class="thread-item-data-encrypted">
<span class="icon-encrypted"></span> Encrypted
</div>
<p>Pop-up Cosby sweater Marfa, put a bird on it sriracha asymmetrical Truffaut. Vice keffiyeh intelligentsia Odd Future, wolf PBR occupy 90's vinyl banh mi pitchfork Austin Pinterest forage put a bird on it. Etsy small batch beard cred. Fingerstache YOLO swag, mixtape McSweeney's leggings single-origin coffee retro banh mi synth wayfarers yr ennui. High Life occupy hoodie tattooed. Lomo jean shorts cliche, intelligentsia disrupt organic four loko kitsch cred ethical sartorial 90's Vice. Street art bicycle rights cray photo booth 90's mlkshk, mustache!</p>
</div>

</div>

<div id="thread-message-actions" class="bulk-actions clearfix">
<div id="thread-message-actions" class="bulk-actions clearfix" data-mid="E36">
<ul class="horizontal left">
<li><a href="#"><span class="icon-checkmark"></span> To Do</a></li>
<li><a href="#"><span class="icon-forward"></span> Forward</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="thread-message-move" href="#"><span class="icon-move"></span> Move</a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="thread-message-move">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Move to Inbox</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Move to Trash</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove from Thread</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><span class="icon-inbox"></span> Move to Inbox</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><span class="icon-trash"></span> Move to Trash</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"><span class="icon-circle-x"></span> Remove from Thread</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"></a></li>
</ul>
</li>
Expand Down Expand Up @@ -176,17 +182,24 @@ <h1>Yo, duder dude face. Where are ya & what's crackin?</h1>
<script src="/static/js/libraries/bootstrap-dropdown.js"></script>
<script>

/* Expand Snippet */
$(document).on('click', '.thread-snippet', function() {

alert('FIXME: Will load full message with mid: ' + $(this).data('mid'));

});


/* Might Move to Global Location / Abstraction */
$(document).on('click', '.dropdown-toggle', function() {
console.log('toggle da bizzle');
$(this).find('.icon-arrow-right').removeClass('icon-arrow-right').addClass('icon-arrow-down');
});


/* Pick Send Date */
$(document).on('click', '.pick-send-datetime', function(e) {

console.log($(this).data('datetime'));

if ($(this).data('datetime') == 'immediately') {
$('#reply-datetime-display').html($(this).html());
}
Expand Down

0 comments on commit a920088

Please sign in to comment.