github/reddit
1
1
Fork 0
mirror of https://github.com/reddit-archive/reddit.git synced 2026-01-25 06:48:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Options expandos on links, cleaned up old parts of CSS, added icons

Browse Source
This commit is contained in:
Paradox
2011-07-14 13:31:51 -07:00
committed by Max Goodman
parent 40eedd012d
commit b7e6aa008a
12 changed files with 258 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
r2/r2/public/static/compact/domain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 937 B

BIN
r2/r2/public/static/compact/email.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 B

BIN
r2/r2/public/static/compact/options-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
r2/r2/public/static/compact/options.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
r2/r2/public/static/compact/report.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 779 B

BIN
r2/r2/public/static/compact/save.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 B

BIN
r2/r2/public/static/compact/selftext-active.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
r2/r2/public/static/compact/selftext.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
r2/r2/public/static/compact/unsave.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 730 B

297
r2/r2/public/static/css/compact.scss
View File

@@ -1,29 +1,13 @@
//Requires Compass and Sass to compile properly
//gem install haml
//gem install compass
/* mixins */
@mixin rounded($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-khtml-border-radius: $radius;
}
@import "compass/css3";
@mixin vertical_gradient($from, $to) {
@mixin vertical_gradient($from, $to) {
background-color: ($from + $to) / 2;
background: -moz-linear-gradient(-90deg, $from, $to);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
background: -khtml-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
}
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
}
@mixin border_box {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
@include background(linear-gradient(top, $from, $to));
}
/* meat */
@@ -50,7 +34,7 @@ textarea {
}
/*UI stuff*/
.button, .button:visited {
@include rounded(6px);
@include border-radius(6px);
@include vertical_gradient(#BFD0E0, #80A2C4);
height: 30px; line-height: 30px;
@@ -66,7 +50,7 @@ textarea {
text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4);
background-color: #80A2C4;
border: 1px solid #517191;
@include box-shadow( "0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1)" );
@include box-shadow(inset 0px 1px 0px hsla(0,0%,100%,.75), 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) );
}
.button:active, .button[selected], .button.active,
/*Vote toolbar styles*/.button.upmod, .button.downmod
@@ -87,7 +71,7 @@ button.button {
}
.small_button, .small_button:visited {
@include rounded(6px);
@include border-radius(6px);
@include vertical_gradient(#BFD0E0, #80A2C4);
line-height: 20px;
@@ -110,7 +94,7 @@ button.button {
.group_button {
@include rounded(0);
@include border-radius(0);
border-left: 1px solid hsl(211, 40%, 75%);
border-right: 1px solid hsl(211, 28%, 37%);
}
@@ -133,29 +117,26 @@ button.button {
border-right: 1px solid hsl(210, 28%, 44%);
}
/*Options triangle popups*/
.triangle_link {
/*Options popups*/
.options_link {
font-size: x-small;
margin: none;
display: block;
float: right;
clear: left;
margin: 2px 0px 0px 10px;
}
.triangle_link.button {
color: white;
margin-bottom: 2px;
padding: 3px;
line-height: normal;
height: auto;
display: inline-block;
width: 30px; height: 30px;
position: absolute;
bottom: 2px;
right: 2px;
top: 35px;
right: 10px;
background: url('/static/compact/options.png') no-repeat;
&.active {
background: url('/static/compact/options-active.png');
}
}
.message .triangle_link, .comment .triangle_link {
.message .options_link, .comment .options_link {
border-bottom-left-radius: 8px 8px;
border-bottom-right-radius: 0px 0px;
border-top-left-radius: 0px 0px;
@@ -169,8 +150,8 @@ button.button {
top: -1px;
}
.message .triangle_link .button_contents,
.comment .triangle_link .button_contents {
.message .options_link .button_contents,
.comment .options_link .button_contents {
background: url(/static/compact/mobilesprite2.png) no-repeat -51px -2px;
display: inline-block;
height: 16px;
@@ -178,102 +159,62 @@ button.button {
width: 16px;
}
.options_triangle_parent {
position: relative;
}
.options_triangle {
margin: 15px -5px 5px 0px;
position: absolute;
top: -3px;
z-index: 1000;
right: 0;
/*Options expando*/
}
.options_triangle:before {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:-2;
top:-29px;
right:15px;
width:0;
height:0;
border-width:15px 10px;
border-style:solid;
border-color:transparent transparent hsl(0, 0%, 60%);
}
.options_triangle:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
z-index:1001;
top:-28px;
right:15px;
width:0;
height:0;
border-width:15px 10px;
border-style:solid;
border-color:transparent transparent hsl(235,1%,94%);
}
.options_triangle.left-side:before {
left:15px;
}
.options_triangle.left-side:after {
left:15px;
}
.options_triangle.hidden {
.link .options_expando {
background: hsl(210,35%,20%);
margin: 5px -5px -1px;
border-top: 1px solid hsl(210,35%,10%);
display: none;
padding: 10px;
@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;
font-size: 11px;
padding: {
left: 5px;
right: 5px;
}
}
&.expanded {
@include display-box;
}
}
.options_triangle.left-side {
left: 0px;
right: auto;
.email-icon, .report-icon, .save-icon, .unsave-icon, .domain-icon {
display: block;
width: 24px;
height: 24px;
margin: {
left: auto;
right: auto;
bottom: 5px;
}
}
.email-icon {
background: url('/static/compact/email.png') no-repeat;
}
.report-icon {
background: url('/static/compact/report.png') no-repeat;
}
.save-icon {
background: url('/static/compact/save.png') no-repeat;
}
.unsave-icon {
background: url('/static/compact/unsave.png') no-repeat;
}
.domain-icon {
background: url('/static/compact/domain.png') no-repeat;
}
.message .options_triangle,
.comment .options_triangle {
width: auto;
right: -3px;
top: -3px;
}
.message .options_triangle:before {
right: 7px;
}
.comment .options_triangle:before {
right: 7px;
}
.message .options_triangle:after {
right: 7px;
}
.comment .options_triangle:after {
right: 7px;
}
/* Triangle buttons */
.options_triangle .button {
@include vertical_gradient(hsl(235,1%,94%), hsl(236,2%,85%));
color: hsl(0,0%,30%);
text-shadow: hsla(0,0%,100%,.6) 0px 1px 0px;
border: 1px solid hsl(0,0%,60%);
border-left: 1px solid hsl(0, 0%, 85%);
border-right: 1px solid hsl(0, 0%, 50%);
}
.options_triangle .button:hover, .options_triangle .button:active, .options_triangle .button:focus {
@include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%));
border-left: 1px solid hsl(211, 40%, 75%);
border-right: 1px solid hsl(212, 28%, 37%);
color: white;
text-shadow: hsla(0, 100%, 100%, 0.0976563) 0px 1px 1px, hsla(0, 0%, 0%, 0.398438) 0px -1px 1px;
}
.options_triangle .button:first-child {
border-left: 1px solid hsl(0,0%,60%);
}
.options_triangle .button:last-child {
border-right: 1px solid hsl(0,0%,60%);
}
/*Toolbar*/
#topbar {
height: 45px;
@@ -281,7 +222,7 @@ button.button {
background-color: #A8C4E0;
@include vertical_gradient(#CEE3F8, #A8C4E0);
border-bottom: 1px solid #7599BD; border-top: 1px solid #DCEAF7;
@include border_box;
@include box-sizing(border-box);
padding: 0px 10px 10px;
}
#topbar > h1 {
@@ -378,7 +319,7 @@ body[orient="landscape"] > #topbar > h1 {
/*Subtoolbar (eg hot)*/
.subtoolbar {
@include border_box;
@include box-sizing(border-box);
height: 32px;
@include vertical_gradient(white, #ccc);
border-bottom: 1px solid #bbb;
@@ -409,7 +350,7 @@ body[orient="landscape"] > #topbar > h1 {
@include vertical_gradient(#ddd, #aaa);
/* no color-stop outside of webkit */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(.4,#ddd), to(#aaa));
@include rounded(8px);
@include border-radius(8px);
border: 1px solid #aaa;
padding-top: 2px;
padding-bottom: 1px;
@@ -438,12 +379,12 @@ body[orient="landscape"] > #topbar > h1 {
}
/*Links*/
.link {
min-height: 60px;
min-height: 70px;
border-bottom: 1px solid #999;
border-top: 1px solid #ddd;
padding: 5px 5px;
padding-bottom: 0px;
@include border_box;
@include box-sizing(border-box);
background: rgba(255,255,255,.6);
position: relative;
}
@@ -577,16 +518,18 @@ body[orient="landscape"] > #topbar > h1 {
/*Expando*/
.link .expando-button {
float: left;
display: block;
height: auto; line-height: inherit;
margin: 3px 5px 2px 0;
color: white;
}
.link > .expando-button.video {
font-size: 15px;
}
.link > .expando-button.expanded {
@include vertical_gradient(#7E8994, #80A2C4);
width: 30px;
height: 30px;
background: url('/static/compact/selftext.png');
&.expanded {
background: url('/static/compact/selftext-active.png');
}
}
.link > .expando {
clear: both;
margin: 5px 0;
@@ -594,7 +537,7 @@ body[orient="landscape"] > #topbar > h1 {
border: 1px solid #999;
@include vertical_gradient(#ddd, #aaa);
padding: 5px;
@include rounded(8px);
@include border-radius(8px);
font-size: 11px;
}
@@ -612,7 +555,7 @@ body[orient="landscape"] > #topbar > h1 {
/* Comment count */
.commentcount {
float: right;
margin: 5px 1px 5px 5px;
margin: 5px 1px 45px 5px;
width: 45px;
text-align: right;
}
@@ -622,7 +565,7 @@ body[orient="landscape"] > #topbar > h1 {
margin: 0; padding: 3px 10px;
text-decoration: none;
text-shadow: 0px 1px 1px rgba(255,255,255,.1), 0px -1px 1px rgba(0,0,0,.4);
@include rounded(10px);
@include border-radius(10px);
@include vertical_gradient(#BFD0E0, #80A2C4);
border: 1px solid #517191;
@include box-shadow( " 0px 1px 1px rgba(255,255,255,.6), 0px -1px 1px rgba(0,0,0,.1) ");
@@ -652,15 +595,15 @@ body[orient="landscape"] > #topbar > h1 {
background: white;
margin: 0 10px 5px;
border: 1px solid rgb(217,217,217);
@include rounded(8px)
@include border-radius(8px)
}
.commentarea > .usertext textarea {
margin: 0; padding: 5px;
width: 100%;
height: 100px;
border: none;
@include border_box;
@include rounded(8px);
@include box-sizing(border-box);
@include border-radius(8px);
border-bottom: 1px solid rgb(217,217,217);
}
@@ -735,8 +678,8 @@ padding: 5px;
border: 1px solid rgb(217,217,217);
width: 100%;
min-height: 100px;
@include rounded(5px);
@include border_box;
@include border-radius(5px);
@include box-sizing(border-box);
}
.child form.usertext.cloneable {
margin: 5px;
@@ -747,7 +690,7 @@ padding: 5px;
background: white;
border: 1px solid rgb(217,217,217);
margin: 10px;
@include rounded(8px)
@include border-radius(8px)
}
.comment > .midcol {
float: left;
@@ -796,7 +739,7 @@ padding: 5px;
position: relative;
border: 1px solid rgb(217,217,217);
margin: 10px;
@include rounded(8px)
@include border-radius(8px)
}
.message > .midcol {
float: left;
@@ -813,7 +756,7 @@ padding: 5px;
/* TODO */
margin-right: 10px;
padding: 2px 5px;
@include rounded(15px);
@include border-radius(15px);
}
.message .correspondent a {
text-decoration: none;
@@ -870,7 +813,7 @@ padding: 5px;
.subreddit {
background-color: white;
@include rounded(5px);
@include border-radius(5px);
margin: 5px;
}
@@ -968,9 +911,9 @@ padding: 5px;
font-weight: bold;
}
#compose-message input[type="text"] {
@include border_box;
@include box-sizing(border-box);
border: 1px solid rgb(117,117,117);
@include rounded(5px);
@include border-radius(5px);
margin-bottom: 5px;
padding: 5px;
width: 100%;
@@ -999,7 +942,7 @@ padding: 5px;
border: rgb(81, 113, 145) 2px solid;
background: white;
@include box-shadow( 0px 0px 5px rgba(81, 113, 145,.6));
@include rounded(5px);
@include border-radius(5px);
font-size: 1.5em; font-weight: bold
}
.thing_suboption_popup {
@@ -1010,7 +953,7 @@ padding: 5px;
border: rgb(81, 113, 145) 2px solid;
background: white;
@include box-shadow( 0px 0px 8px rgba(81, 113, 145,.6));
@include rounded(5px);
@include border-radius(5px);
}
.thing_options_popup a {
display: block;
@@ -1095,11 +1038,11 @@ padding: 5px;
#login_login input[type="text"], #login_login input[type="password"], #login_reg input[type="text"], #login_reg input[type="password"] {
width: 100%;
margin: 0 0 5px;
@include rounded(5px);
@include border-radius(5px);
border: 1px solid rgb(117,117,117); /*It was the coins fault!*/
font-size:17px;
padding: 5px;
@include border_box;
@include box-sizing(border-box);
}
#login_login > div > ul li input[type="checkbox"] + label, #login_reg > div > ul li input[type="checkbox"] + label {
display: inline;
@@ -1151,9 +1094,9 @@ body.toolbar {
}
/*Close toolbar button*/
.toolbar .close {
@include border_box;
@include box-sizing(border-box);
@include vertical_gradient(hsl(3, 68%, 77%), hsl(4, 33%, 48%));
@include rounded(30px);
@include border-radius(30px);
border: 1px solid hsl(4, 33%, 40%) ;
bottom: -13px;
@@ -1201,7 +1144,7 @@ body.toolbar {
position: absolute;
top: 75px;
left: 0;
@include rounded(30px);
@include border-radius(30px);
background-color: white;
text-align: left;
z-index: 1001;
@@ -1250,7 +1193,7 @@ body.toolbar {
}
#newlink .tabmenu li a {
width: 100%; height: 100%;
@include border_box;
@include box-sizing(border-box);
display: block;
padding: 5px;
color: hsl(0, 0%, 30%);
@@ -1289,16 +1232,16 @@ body.toolbar {
padding: 0px 5px;
}
#newlink .roundfield-content textarea {
@include border_box;
@include box-sizing(border-box);
width: 100%;
height: 5em;
@include rounded(5px);
@include border-radius(5px);
}
#newlink .roundfield-content input[type="text"], #newlink .roundfield-content input[type="url"] {
@include border_box;
@include box-sizing(border-box);
width: 100%;
height: 2em;
@include rounded(5px);
@include border-radius(5px);
}
#newlink .title {
font-weight: bold;
@@ -1320,14 +1263,14 @@ body.toolbar {
background: hsl(0, 0%, 90%);
border: 1px solid hsl(0, 0%, 50%);
padding: 8px;
@include rounded(8px);
@include border-radius(8px);
}
#suggested-reddits ul li {
display: inline;
}
#suggested-reddits ul li a {
@include vertical_gradient(hsl(210, 35%, 81%), hsl(210, 37%, 64%));
@include rounded(10px);
@include border-radius(10px);
display: inline-block;
margin: 5px;
padding: 3px 7px;
@@ -1401,7 +1344,7 @@ body.toolbar {
background-color: white;
padding: 10px;
margin: 10px;
@include rounded(10px);
@include border-radius(10px);
}
.instructions h1 {
@@ -1417,7 +1360,7 @@ body.toolbar {
.instructions img {
width: 290px;
margin-left: 15px;
@include rounded(10px);
@include border-radius(10px);
border: 1px solid #888;
}
@@ -1432,7 +1375,7 @@ body.toolbar {
max-width: 280px;
padding: 10px;
background-color: white;
@include rounded(10px);
@include border-radius(10px);
margin: 10px auto;
}

194
r2/r2/public/static/js/compact.js
View File

@@ -1,5 +1,12 @@
/*This hides the url bar on mobile*/
(function($) {
/*
Creates an element on the body that works to create a modal box
The callback function runs when the cover is clicked
Use it, for example, to hide your modal box.
It is kind of tricky to use on mobile platforms, subject to many odd bugs, likely caused by the way mobile platforms handle z-index
*/
function tool_cover(callback) {
var toolcover = $("#toolcover");
if (toolcover.length == 0) {
@@ -7,149 +14,149 @@
toolcover = $("#toolcover");
}
toolcover.css("height", $(document).height())
.show().one("click", function() {
$(this).hide();
if (callback) callback();
return false;
});
};
.show().one("click", function() {
$(this).hide();
if (callback) callback();
return false;
});
}
;
$.fn.show_toolbar = function() {
var tb = this;
tool_cover(function() { $(tb).hide(); });
$(this).show();
};
$.fn.hide_toolbar = function() {
$("#toolcover").click();
};
$.unsafe_orig = $.unsafe;
$.unsafe = function(text) {
/* inverts websafe filtering of reddit app. */
text = $.unsafe_orig(text);
if(typeof(text) == "string") {
if (typeof(text) == "string") {
/* space compress the result */
text = text.replace(/[\s]+/g, " ")
.replace(/> +/g, ">")
.replace(/ +</g, "<");
.replace(/> +/g, ">")
.replace(/ +</g, "<");
}
return (text || "");
}
})(jQuery);
$(function() {
if($(window).scrollTop() == 0) {
if ($(window).scrollTop() == 0) {
$(window).scrollTop(1);
};
}
;
/* Top menu dropdown*/
$('#topmenu_toggle').click ( function() {
$('#topmenu_toggle').click(function() {
$(this).toggleClass("active");
$('#top_menu').toggle();
return false;
});
//Self text expando
$('.expando-button').live('click', function() {
$(this).toggleClass("expanded");
$(this).thing().find(".expando").toggle();
return false;
});
//Help expando
$('.help-toggle').live('click', function() {
$(this).toggleClass("expanded");
$(this).parent().siblings(".markhelp-parent").toggle();
return false;
});
/*Options dropdown for each comment */
$('.thing_options_link').live('click', function() {
$(this).toggleClass("active");
$(this).siblings(".thing_options_popup_container")
.toggleClass("hidden");
$(this).siblings(".thing_options_popup_container")
.find(".thing_suboption_popup_container").addClass("hidden");
return false;
});
/*Sub-menus. This can be replicated infinitely.*/
$('.thing_suboption_link').live('click', function() {
$(this).prev(".thing_suboption_popup_container").toggleClass("hidden");
return false;
});
/*Collapse menu on click of .option_close*/
$('.thing_option_close').live('click', function() {
$(this).parents(".thing_options_popup_container,.thing_suboption_popup_container").addClass("hidden");
return false;
});
/*Added expansion to text-area (like facebook/Buzz/Twitter)*/
/*$('.usertext textarea').autoResize({
animate: false,
extraSpace : 20
});*/
$(".options_triangle .button").live("click", function(evt) {
$(this).parents(".options_triangle").hide_toolbar();
});
$('.triangle_link').live('click', function(evt) {
$(this).siblings(".options_triangle_parent")
.children(".options_triangle").show_toolbar();
return false;
});
/* the iphone doesn't play nice with live() unless there is already a registered click function. That's sad */
$(".thing").click(function() {});
//Options expando
$('.options_link').live('click', function(evt) {
$(".link").live("click", function(evt) {
if(evt && evt.target && $(evt.target).hasClass("thing")) {
$(this).find(".triangle_link").click();
return false;
}
});
if (! $(this).siblings(".options_expando").hasClass('expanded')) {
$('.options_expando.expanded').each(function() { //Collapse any other open ones
$(this).removeClass('expanded');
});
$('.options_link.active').each(function() {
$(this).removeClass('active');
});
$(this).siblings(".options_expando").addClass('expanded'); //Expand this one
$(this).addClass('active');
} else {
$(this).siblings(".options_expando").removeClass('expanded'); //Just collapse this one
$(this).removeClass('active');
}
return false;
});
//Save button state transition
$(".save-button").live("click", function() {
$(this).toggle();
$(this).siblings(".unsave-button").toggle();
});
$(".unsave-button").live("click", function() {
$(this).toggle();
$(this).siblings(".save-button").toggle();
});
/* the iphone doesn't play nice with live() unless there is already a registered click function. That's sad */
$(".thing").click(function() {
});
$(".link").live("click", function(evt) {
if (evt && evt.target && $(evt.target).hasClass("thing")) {
$(this).find(".options_link").click();
return false;
}
});
//Comment options
$(".comment > .entry, .message > .entry").live("click", function(evt) {
var foo = (evt) ? $(evt.target) : null;
var thing = $(this).parent();
if(thing.hasClass("active")) {
if (thing.hasClass("active")) {
thing.removeClass("active");
return false;
}
}
/* collapsed messages/comments should uncolapse */
else if(thing.hasClass("collapsed")) {
else if (thing.hasClass("collapsed")) {
thing.removeClass("collapsed");
return false;
}
}
/* unread messages should be marked read */
else if(thing.hasClass("unread") || thing.hasClass("new")) {
else if (thing.hasClass("unread") || thing.hasClass("new")) {
read_thing(thing);
return false;
}
/* otherwise, fire a menu */
else if(foo &&
foo.filter("a").length == 0 &&
!foo.hasClass("arrow") &&
!foo.hasClass("button") &&
else if (foo &&
foo.filter("a").length == 0 &&
!foo.hasClass("arrow") &&
!foo.hasClass("button") &&
foo.filter("textarea").length == 0) {
thing.find(".triangle_link:first").click();
thing.find(".options_link:first").click();
return false;
}
});
/*Finally*/
$('a[href=#]').live('click', function() { return false; } );
});
/*Finally*/
$('a[href=#]').live('click', function() {
return false;
});
});
$(function() {
var eut = edit_usertext;
edit_user_text = function(what) {
$(what).parent().parent().toggleClass('hidden');
return eut(what);
};
var eut = edit_usertext;
edit_user_text = function(what) {
$(what).parent().parent().toggleClass('hidden');
return eut(what);
};
});
});
function showcover() {
$.request("new_captcha");
$(".login-popup:first").fadeIn()
.find(".popup").css("top", $(window).scrollTop() + 75).end()
.find(".cover").css("height", $(document).height()).end()
.find("form input[name=reason]").val(reason || "");
.find(".popup").css("top", $(window).scrollTop() + 75).end()
.find(".cover").css("height", $(document).height()).end()
.find("form input[name=reason]").attr("value", (reason || ""));
return false;
}
function hidecover(where) {
$(where).parents(".cover-overlay").fadeOut();
return false;
};
}
function show_edit_usertext(form) {
var edit = form.find(".usertext-edit");
@@ -160,8 +167,8 @@ function show_edit_usertext(form) {
edit.show();
form
.find(".cancel, .save").show().end()
.find(".help-toggle").show().end();
.find(".cancel, .save").show().end()
.find(".help-toggle").show().end();
textarea.focus();
}
@@ -172,33 +179,34 @@ function fetch_more() {
var o = document.location;
var path = o.pathname.split(".");
if (path[path.length-1].indexOf('/') == -1) {
if (path[path.length - 1].indexOf('/') == -1) {
path = path.slice(0, -1).join('.');
} else {
path = o.pathname;
}
var apath = o.protocol + "//" + o.host + path + ".json-compact" + o.search;
var last = $("#siteTable").find(".thing:last");
apath += ((document.location.search) ? "&" : "?") +
"after=" + last.thing_id();
apath += ((document.location.search) ? "&" : "?") +
"after=" + last.thing_id();
if (last.find(".rank").length)
"&count=" + parseInt(last.find(".rank").html())
$.getJSON(apath, function(res) {
$.insert_things(res.data, true);
$(".thing").click(function() {});
/* remove the loading image */
$("#siteTable").next(".loading").remove();
if (res && res.data.length == 0) {
$(window).unbind("scroll");
}
$.insert_things(res.data, true);
$(".thing").click(function() {
});
/* remove the loading image */
$("#siteTable").next(".loading").remove();
if (res && res.data.length == 0) {
$(window).unbind("scroll");
}
});
}
function toggle_collapse(elem) {
$(elem).thing().addClass("collapsed").addClass("active")
.find('.thing_option_close:first').click();
return false;
.find('.thing_option_close:first').click();
return false;
}

52
r2/r2/templates/link.compact
View File

@@ -23,12 +23,12 @@
from r2.lib.template_helpers import add_sr
import urllib
from r2.lib.filters import _force_unicode, _force_utf8
from r2.lib.template_helpers import add_sr
%>
<%namespace file="printable.compact" import="delete_report_buttons"/>
<%namespace file="printable.html" import="arrow, score"/>
<%namespace file="link.html" import="tagline"/>
<%namespace file="utils.html" import="plain_link" />
<%namespace file="printablebuttons.html" import="state_button" />
<div class="thing link id-${thing._fullname}">
<span class="rank" style="width:${thing.numcolmargin};">
@@ -68,16 +68,14 @@
<a href="${url}">${thing.title}</a>
</p>
%if thing.link_child and not c.permalink_page and thing.link_child.css_style.strip(' ') != 'video':
<a href="javascript:void(0)" class="expando-button collapsed button
${thing.link_child.css_style}">
Aa
</a>
<a href="javascript:void(0)" class="expando-button collapsed
${thing.link_child.css_style}"></a>
%endif
<div class="tagline">
${tagline()}
</div>
</div>
<a href="javascript:void(0)" class="triangle_link button">Options</a>
<a href="javascript:void(0)" class="options_link"></a>
<%
expand = thing.link_child and thing.link_child.expand
%>
@@ -86,7 +84,7 @@
${thing.link_child.content()}
%endif
</div>
<div class="clear options_triangle_parent">
<div class="clear options_expando hidden">
<%
subject = "[reddit] I wanted to share this link with you"
body = """%(user)s shared a link with you from reddit (http://www.reddit.com/):
@@ -106,16 +104,40 @@ there's also a discussion going on here:
title = _force_unicode(thing.title)
tweet = "%s %s" % (title[0:(139-len(url))], url)
%>
<div class="options_triangle hidden">
<a href="mailto:?subject=${urllib.quote(_force_utf8(subject))}&body=${urllib.quote(_force_utf8(body))}" class="group_button button">Email</a>
<a href="http://twitter.com/home?status=${tweet}" class="group_button button">Tweet</a>
<a href="javascript:void(0)" onclick="return change_state(this, 'report', hide_thing)" class="group_button button">Report</a>
<a href="mailto:?subject=${urllib.quote(_force_utf8(subject))}&body=${urllib.quote(_force_utf8(body))}" ><div class="email-icon"></div>Email</a>
<a href="javascript:void(0)" onclick="return change_state(this, 'report', hide_thing)" ><div class="report-icon"></div>Report</a>
${self.save_button()}
%if not thing.is_self:
<span class="button group_button">
${plain_link(thing.domain, thing.domain_path, _sr_path = False)}
</span>
<a href="${thing.domain_path}"><div class="domain-icon"></div>${thing.domain}</a>
%endif
</div>
</div>
</div>
<%def name="save_button()">
%if c.user_is_loggedin:
%if thing.saved:
<a href="#" class="unsave-button" onclick="change_state(this, 'unsave', unsave_thing, true)"><div class="unsave-icon"></div>Unsave</a>
<a href="#" class="save-button" style="display: none;" onclick="change_state(this, 'save', save_thing, true)"><div class="save-icon"></div>Save</a>
%else:
<a href="#" class="unsave-button" style="display: none" onclick="change_state(this, 'unsave', unsave_thing, true)"><div class="unsave-icon"></div>Unsave</a>
<a href="#" class="save-button" onclick="change_state(this, 'save', save_thing, true)"><div class="save-icon"></div>Save</a>
%endif
%endif
<%doc>
%if thing.is_loggedin:
%if thing.saved:
${printablebuttons.state_button("unsave", _("unsave"), \
"return change_state(this, 'unsave', unsave_thing);", _("unsaved"))}
%else:
${printablebuttons.state_button("save", _("save"), \
"return change_state(this, 'save', save_thing);", _("saved"))}
%endif
%endif
</%doc>
</%def>