mirror of
https://github.com/reddit-archive/reddit.git
synced 2026-01-25 14:58:27 -05:00
Set up messages and inbox to use options-expandos
This commit is contained in:
Paradox
BIN
r2/r2/public/static/compact/unread.png
Normal file
BIN
r2/r2/public/static/compact/unread.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 970 B |
@@ -141,54 +141,56 @@ button.button {
|
||||
|
||||
/*Options expando*/
|
||||
|
||||
.link .options_expando, .comment .options_expando {
|
||||
background: hsl(210,35%,20%);
|
||||
margin: 35px -5px -1px;
|
||||
border-top: 1px solid hsl(210,35%,10%);
|
||||
display: none;
|
||||
@include box-orient(horizontal);
|
||||
@include box-align(center);
|
||||
@include box-pack(center);
|
||||
@include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
|
||||
text-shadow: 0px -1px 0px hsla(0,0%,0%,.8);
|
||||
.link, .comment, .message {
|
||||
.options_expando {
|
||||
background: hsl(210,35%,20%);
|
||||
margin: 35px -5px -1px;
|
||||
border-top: 1px solid hsl(210,35%,10%);
|
||||
display: none;
|
||||
@include box-orient(horizontal);
|
||||
@include box-align(center);
|
||||
@include box-pack(center);
|
||||
@include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
|
||||
text-shadow: 0px -1px 0px hsla(0,0%,0%,.8);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
padding: 10px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
border-right: 1px solid hsl(210,35%,10%);
|
||||
border-left: 1px solid hsl(210,35%,30%);
|
||||
@include transition(all, 100ms, ease-in);
|
||||
a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
padding: 10px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
border-right: 1px solid hsl(210,35%,10%);
|
||||
border-left: 1px solid hsl(210,35%,30%);
|
||||
@include transition(all, 100ms, ease-in);
|
||||
|
||||
&:active {
|
||||
background-color: hsl(210,35%,30%);
|
||||
border-left: 1px solid hsl(210,35%,40%);
|
||||
}
|
||||
&:active {
|
||||
background-color: hsl(210,35%,30%);
|
||||
border-left: 1px solid hsl(210,35%,40%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsl(210,25%,20%);
|
||||
@include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
|
||||
border-left: 1px solid hsl(210,35%,40%);
|
||||
padding: {
|
||||
top: 15px;
|
||||
bottom: 5px;
|
||||
&:hover {
|
||||
background-color: hsl(210,25%,20%);
|
||||
@include box-shadow(inset 0px 3px 8px hsla(0,0%,0%,.8));
|
||||
border-left: 1px solid hsl(210,35%,40%);
|
||||
padding: {
|
||||
top: 15px;
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
&.expanded {
|
||||
@include display-box;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded {
|
||||
@include display-box;
|
||||
}
|
||||
}
|
||||
.comment .options_expando {
|
||||
@@ -196,7 +198,7 @@ button.button {
|
||||
}
|
||||
|
||||
.email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon, .edit-icon, .reply-icon, .permalink-icon,
|
||||
.collapse-icon, .context-icon, .parent-icon {
|
||||
.collapse-icon, .context-icon, .parent-icon, .unread-icon {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -239,6 +241,9 @@ button.button {
|
||||
.parent-icon {
|
||||
background-image: url('/static/compact/context.png'); /* SPRITE */
|
||||
}
|
||||
.unread-icon {
|
||||
background-image: url('/static/compact/unread.png'); /* SPRITE */
|
||||
}
|
||||
|
||||
/*Toolbar*/
|
||||
#topbar {
|
||||
|
||||
@@ -70,36 +70,26 @@
|
||||
author = updated_author % dict(author = author, subreddit = subreddit)
|
||||
%>
|
||||
<div class="tagline">
|
||||
<div class="options_triangle_parent">
|
||||
<div class="options_triangle hidden">
|
||||
<%
|
||||
is_author = (c.user_is_loggedin and thing.author and
|
||||
c.user.name == thing.author.name)
|
||||
%>
|
||||
%if c.user_is_loggedin:
|
||||
<a href="javascript:void(0)" class="group_button button"
|
||||
onclick="return reply(this)">Reply</a>
|
||||
%endif
|
||||
${plain_link(_("permalink"), thing.permalink, _class = "group_button button")}
|
||||
%if thing.was_comment:
|
||||
${plain_link(_("context"), thing.permalink + "?context=3",
|
||||
_class = "button")}
|
||||
%endif
|
||||
<a href="javascript:void(0)" class="group_button button"
|
||||
onclick="change_state(this, 'unread_message', unread_thing, true)">
|
||||
mark unread
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="triangle_link button">
|
||||
<span class="button_contents"></span>
|
||||
</a>
|
||||
|
||||
${unsafe(taglinetext % dict(when = thing.timesince,
|
||||
author= u"<b>%s</b>" % author,
|
||||
dest = u"<b>%s</b>" % (thing.to.name if thing.to else "")))}
|
||||
</div>
|
||||
<a href="javascript:void(0)" class="options_link"></a>
|
||||
${unsafe(safemarkdown(thing.body))}
|
||||
<div class="clear options_expando hidden">
|
||||
<%
|
||||
is_author = (c.user_is_loggedin and thing.author and c.user.name == thing.author.name)
|
||||
%>
|
||||
%if c.user_is_loggedin:
|
||||
<a href="javascript:void(0);" onclick="return reply(this)"><div class="reply-icon"></div>Reply</a>
|
||||
%endif
|
||||
<a href="${thing.permalink}"><div class="permalink-icon"></div>Permalink</a>
|
||||
%if thing.was_comment:
|
||||
<a href="${thing.permalink}?context=3"><div class="context-icon"></div>Context</a>
|
||||
%endif
|
||||
<a href="javascript:void(0)" onclick="change_state(this, 'unread_message', unread_thing, true)"><div class="unread-icon"></div>mark unread</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="child">
|
||||
|
||||
Reference in New Issue
Block a user