'+ title +'
'+ json.view_all_badges_link +'
'); + + brevidy.hide_video_ajax_spinner(video_id); + }, + error: function (response) { + brevidy.hide_video_ajax_spinner(video_id); + brevidy.handle_ajax_error("badge", response); + } + }); + + return false; + }); + + // Handles removing badges + $('.unbadge').live('click', function() { + var $that = $(this); + var unbadge_path = $that.attr('href'); + var idTypeBadge = 'data-badge-id'; + var idBadge = $that.attr(idTypeBadge); + var video_id = $(this).attr('data-video-id'); + + brevidy.show_video_ajax_spinner(video_id); + + $.ajax({ + data: { '_method': 'DELETE',}, + dataType: 'json', + type: 'POST', + url: unbadge_path + '/' + idBadge, + success: function (json) { + var idTypeUser = 'data-user-id'; + var idTypeVideo = 'data-video-id'; + var idVideo = json.video_id; + var idType = 'data-badge-type'; + var id = $that.attr(idType); + + // Remove old tooltip + $('.twipsy').remove(); + + // Fade out the icon and replace the tooltip class + $that.fadeOut(1, function() { + $(this).after(json.give_a_badge); + $(this).remove(); + }); + + // Update badge counts across page + $('.show-badges['+idTypeVideo+'='+idVideo+'] li['+idType+'='+id+'] span').text(json.this_badge_count); + + + // If its the last one of it's kind, remove it + if (json.this_badge_count == 0) { + $('.show-badges['+idTypeVideo+'='+idVideo+'] li['+idType+'='+id+']').fadeOut('fast', function() { + $(this).remove(); + }); + } + + if (json.total_video_badges == 0) { + // If its the last badge, after we unbadged it, show a message stating that + $('.show-badges['+idTypeVideo+'='+idVideo+'] .badges, p.view-all-badges['+idTypeVideo+'='+idVideo+']').fadeOut('fast', function() { + $(this).remove(); + $('.show-badges['+idTypeVideo+'='+idVideo+']').html('No badges given yet. Give one!
'); + }); + } else { + // If there are still more badges showing, add the correct 'View All Badges' link + $('p.view-all-badges['+idTypeVideo+'='+idVideo+']').remove(); + $('.show-badges['+idTypeVideo+'='+idVideo+'] .badges').after(''+ json.view_all_badges_link +'
'); + } + + brevidy.hide_video_ajax_spinner(video_id); + }, + error: function (response) { + brevidy.hide_video_ajax_spinner(video_id); + brevidy.handle_ajax_error("badge", response); + } + }); + + return false; + }); + + +// ---------------- +// CHANNEL HANDLING +// ---------------- + + // Setup ajax spinner for updating channel name + $('#update-channel-name input[type=submit]').live('click', function() { + $(this).parent().siblings('.ajax-animation').fadeIn('fast'); + }); + $('#update-channel-name').live('ajax:success', function(data, json, response) { + $(this).siblings('.ajax-animation').hide(); + $(this).siblings('.green-checkmark').fadeIn('slow').fadeOut('1000'); + }); + $('#update-channel-name').live('ajax:error', function(data, xhr, response){ + $(this).siblings('.ajax-animation').hide(); + brevidy.handle_ajax_error("channel", xhr); + }); + + // Toggles button classes for privacy settings + $('#toggle-channel-privacy').live('ajax:success', function(data, json, response) { + console.log($(this).attr('href')); + var $that = $(this); + if ($that.hasClass('success')) { + console.log('turning off privacy'); + $that.attr('href', json.new_link).removeClass('success').text('No'); + $('.private-channel-link').fadeOut('fast'); + } else { + console.log('turning on privacy'); + $that.attr('href', json.new_link).addClass('success').text('Yes'); + $('.private-channel-link').fadeIn('fast'); + } + }); + + // Handles AJAX errors + $('#toggle-channel-privacy').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("channel", xhr); + }); + + $('.subscribe').live('ajax:success', function(data, json, response) { + if (json.requesting_permission) { + brevidy.dialog("Requesting Access", "We have sent an email on your behalf requesting access to this channel. Please be patient while they respond to this request.", "message"); + } else { + if ($(this).hasClass('small')) { + $(this).closest('.pull-right').html(json.button); + } else { + $(this).closest('.button-area').html(json.button); + } + } + }); + $('.unsubscribe').live('ajax:success', function(data, json, response) { + if ($(this).hasClass('small')) { + $(this).closest('.pull-right').html(json.button); + } else { + var button_area = $(this).closest('.button-area'); + button_area.html(json.button); + if (json.is_private) { + button_area.siblings('.channel-thumbnail-area').fadeOut('fast', function() { + $(this).before(json.private_area_message); + $(this).remove(); + }); + } + } + }); + $('.subscribe, .unsubscribe').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("channel", xhr); + }); + + // Shows handle delete area + $('.delete-channel-area .show-delete-area').click(function() { + $(this).remove(); + $('.alert-message').slideDown('fast'); + return false; + }); + + // Handles deleting a channel + $('.delete-channel').live('click', function() { + var channel_path = $(this).attr('href'); + + brevidy.confirmation_dialog('You are about to delete this channel which will also delete all videos, comments, badges, and subscribers associated with this channel. This cannot be undone.', 'Delete', + function() { + $.ajax({ + data: { '_method': 'DELETE' }, + type: 'POST', + url: channel_path, + error: function (response) { + brevidy.handle_ajax_error('channel', response); + } + }); + }); + + return false; + }); + + // Removes a subscriber + $('.remove-subscriber').live('click', function() { + var $that = $(this); + var removal_path = $that.attr('href'); + + brevidy.confirmation_dialog('You are about to remove this person from your subscribers.', 'Remove', + function() { + $.ajax({ + data: { '_method': 'DELETE' }, + type: 'POST', + url: removal_path, + success: function (json) { + $that.closest('li.zebra-striped').fadeOut('fast', function() { + $(this).remove(); + }); + }, + error: function (response) { + brevidy.handle_ajax_error("subscriber", xhr); + } + }); + }); + + return false; + }); + + // Handles blocking a user + $('.block-user').live('click', function() { + var $that = $(this); + var block_path = $that.attr('href'); + + brevidy.confirmation_dialog('You are about to block this user which will unsubscribe them from all of your channels and prevent them from viewing your content in the future.', 'Block', + function() { + $.ajax({ + data: { '_method': 'DELETE' }, + type: 'POST', + url: block_path, + success: function (json) { + $that.closest('li.zebra-striped').fadeOut('fast', function() { + $(this).remove(); + }); + }, + error: function (response) { + brevidy.handle_ajax_error("user", xhr); + } + }); + }); + + return false; + }); + + +// ---------------- +// COMMENT HANDLING +// ---------------- + + // Expands the comment textarea on focus + $('.comment-box textarea').live('focus', function() { + var idType = 'data-video-id'; + var id = $(this).attr(idType); + + $(this).animate({'height': '35px',}, 'fast' ); + $('.comment-box .button-wrapper['+idType+'='+id+']').slideDown('fast'); + }); + + // Allows user to submit the comment using the enter key + $('.comment-box textarea').live('keydown', function(event) { + if(event.keyCode == '13') { + comment_button = $(this).siblings('.button-wrapper').children('.btn'); + comment_button.submit(); + brevidy.setup_video_ajax_spinner($(this)); + + return false; + } + }); + + // Show ajax spinner when comment button is pressed + $('.comment-box input.btn').live('click', function() { + brevidy.setup_video_ajax_spinner($(this)); + }); + + // Description: Shows all comments when user wants to expand them + $('a.show-all-comments').live('click', function() { + var $that = $(this); + var idType = 'data-video-id'; + var id = $that.attr(idType); + + $that.parent().fadeOut('fast', function() { + $('li.hidden-comment['+idType+'='+id+']').fadeIn("fast"); + $that.remove(); + }); + + return false; + }); + + // Append a comment to the end of the comments section for a particular video post + $('.post-new-comment').live('ajax:success', function(data, json, response) { + var idType = 'data-video-id'; + var id = json.video_id; + var $that = $(this); + + // fade in the new comment + var comments_list = $('.comments-area['+idType+'='+id+'] ul.comments-list'); + comments_list.append(json.html); + comments_list.children('li:last').hide().fadeIn(250); + + // update the comments count (if there is one) + $('li.show-all-comments a['+idType+'='+id+']').text('Show all ' + json.comments_count + ' comments'); + + // clear the text area and blur it + $('.comment-box textarea['+idType+'='+id+']').val('').blur(); + }); + + // Shows the delete icon if applicable + $('.comments-list li').live('mouseenter mouseleave', function(event) { + if (event.type == 'mouseenter') { + $(this).children('.delete-comment').show(); + } else { + $(this).children('.delete-comment').hide(); + } + }); + + // Changes opacity on icon during hover + $('.delete-comment').live('mouseenter mouseleave', function(event) { + if (event.type == 'mouseenter') { + $(this).css('opacity', '1.0'); + } else { + $(this).css('opacity', '0.5'); + } + }); + + // Removes comments after deletion + $('.delete-comment').live('ajax:success', function(data, json, response) { + $('.twipsy').remove(); + $(this).closest('li').fadeOut('fast', function() { + $(this).remove(); + }); + }); + + // Handles AJAX errors + $('.post-new-comment, .delete-comment').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("comment", xhr); + }); + + +// -------------- +// SHARE HANDLING +// -------------- + + // Shows the social sharing options for a video + $('a.share-socially').live('click', function() { + $(this).addClass('lighten-to-blue').siblings().filter('.lighten-to-blue').removeClass('lighten-to-blue'); + + $(this).siblings('.public-link, .embed-code, .email-form').filter(':visible').fadeOut('fast', function() { + $(this).siblings('.social-sharing').fadeIn('fast'); + }); + + return false; + }); + + // Shows the public link to a video + $('a.link-to-video').live('click', function() { + $(this).addClass('lighten-to-blue').siblings().filter('.lighten-to-blue').removeClass('lighten-to-blue'); + + $(this).siblings('.social-sharing, .embed-code, .email-form').filter(':visible').fadeOut('fast', function() { + $(this).siblings('.public-link').fadeIn('fast').children('input[type=text]').select(); + }); + + return false; + }); + + // Shows the embed code for a video + $('a.embed-video').live('click', function() { + $(this).addClass('lighten-to-blue').siblings().filter('.lighten-to-blue').removeClass('lighten-to-blue'); + + $(this).siblings('.social-sharing, .public-link, .email-form').filter(':visible').fadeOut('fast', function() { + $(this).siblings('.embed-code').fadeIn('fast').children('textarea').select(); + }); + + return false; + }); + + // Shows the form to email out a video + $('a.email-video').live('click', function() { + $(this).addClass('lighten-to-blue').siblings().filter('.lighten-to-blue').removeClass('lighten-to-blue'); + + $(this).siblings('.social-sharing, .public-link, .embed-code').filter(':visible').fadeOut('fast', function() { + $(this).siblings('.email-form').fadeIn('fast').children('input[type=text]').select(); + }); + + return false; + }); + + // Handle ajax errors or success for sharing a video via email + $('.share-via-email').live('ajax:success', function(data, json, response) { + brevidy.dialog('Yay!!!', json.message, 'message'); + $(this).children('input[name="recipient_email"], textarea[name="personal_message"]').val(''); + }); + $('.share-via-email').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error('invitation', xhr); + }); + + +// ------------- +// TAGS HANDLING +// ------------- + + // Handles the removal of tags + $('a.remove-tag').live('ajax:success', function(data, json, response) { + $that = $(this); + var idType = 'data-video-id'; + var id = json.video_id; + + $('.twipsy').remove(); + + $that.parent().fadeOut("fast", function() { + $that.parent().remove(); + if (json.tags_count == 0) { + $('.tags-area['+idType+'='+id+']').html('There are currently no tags organizing this video.
'); + } + }); + }); + $('a.remove-tag').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("tag", xhr); + }); + +// --------------------------- +// VIDEO PLAYER CLICK HANDLING +// --------------------------- + + // Handles fade effects for expanding/collapsing a video post + $('.thumbnail-and-badges .thumbnail').live('click', function() { + var idType = 'data-video-id'; + var id = $(this).attr(idType); + var video_path = $(this).attr('data-video-path'); + + if (video_path.length != 0) { + $.ajax({ + dataType: 'json', + type: 'GET', + url: video_path, + success: function(json) { + // place the embed code + $('#brevidy-player-'+id).html(json.html) + + // fade in the player + $('.thumbnail['+idType+'='+id+']').fadeOut(150, function() { + $('.player-area['+idType+'='+id+']').fadeIn(100, function () { + + // Scroll the player into view + $.smoothScroll({ + offset: -50, + scrollTarget: '.video-post['+idType+'='+id+']', + speed: 500 + }); + + }); + }); + + // close all the other open players + var open_players = $('.player-area').filter(':visible').not('.player-area['+idType+'='+id+']'); + $.each(open_players, function (index, open_player) { + brevidy.collapse_player($(this).attr('data-video-id')); + }); + }, + error: function(response) { + brevidy.handle_ajax_error('video', response); + } + }); + } else { + brevidy.hide_video_ajax_spinner(id); + } + + return false; + }); + + // Collapses the video player upon click + $('.collapse-player-controls a').live('click', function() { + // collapse the player + brevidy.collapse_player($(this).attr('data-video-id')); + return false; + }); + + // Collapses a given video player after the user is done with it + brevidy.collapse_player = function(video_id) { + var idType = 'data-video-id'; + $('.player-area['+idType+'='+video_id+']').fadeOut(5, function() { + // reset it if it's a brevidy player + if (jwplayer('brevidy-player-'+video_id)) { jwplayer('brevidy-player-'+video_id).remove(); } + + // remove the player from the DOM + $('#brevidy-player-'+video_id).html(''); + + // fade in description + $('.thumbnail['+idType+'='+video_id+']').fadeIn(5); + }); + }; + + +// -------- +// PROFILES +// -------- + + // An array with class names for objects to edit + brevidy.profileCategories = ['website', 'bio','interests','favorite_music','favorite_movies','favorite_books', + 'favorite_foods','favorite_people','things_i_could_live_without', + 'one_thing_i_would_change_in_the_world','quotes_to_live_by']; + + // Parses current profile information and populates editing fields + $('#edit-profile').click(function () { + $(this).hide(); + $('#save-profile').show(); + $('#cancel-profile').show(); + + // iterate through categories, set the textarea text and show/hide + $.each(brevidy.profileCategories, function (index, value) { + if ($('.profile-content div.' + value).text().trim().toLowerCase() == 'none') { + $('.profile-content textarea.' + value).val(''); + } + $('.profile-content div.' + value).hide(); + $('.profile-content textarea.' + value).show(); + }); + + return false; + }); + + // set up ajax spinner + $('#save-profile') + .ajaxStart(function() { + $('.profile-buttons .ajax-animation').show(); + }) + .ajaxStop(function() { + $('.profile-buttons .ajax-animation').hide(); + }); + + // Grabs editing fields and validates/saves the information to their profile + $('#save-profile').click(function () { + var $that = $(this); + var profile = {}; + var profile_path = $that.attr('href'); + + $.each(brevidy.profileCategories, function (index, value) { + // iterate through all of the text areas and save it to an object + profile[value] = $('.profile-content textarea.' + value).val().trim(); + }); + + $.ajax({ + data: { 'profile':profile }, + type: 'PUT', + url: profile_path, + success: function (json) { + // hide edit button, show save button + $that.hide(); + $('#cancel-profile').hide(); + $('#edit-profile').show(); + + // iterate through categories, set the textarea text and show/hide + $.each(brevidy.profileCategories, function (index, value) { + // check if the returned string is empty or not + if (!json.text[value]) { + if (value == 'website') { + $('.user-info-section p.website').html(''); + } + + // string is empty + $('div.' + value).html('None
'); + // set the textarea contents + $('.profile-content textarea.' + value).val('None'); + } else { + if (value == 'website') { + $('.user-info-section p.website').html(json.html[value]); + $('.user-info-section p.website p').replaceWith(function() { return $(this).contents(); }); + } + + // string is not empty + $('div.' + value).html(json.html[value]); + // set the textarea contents + $('.profile-content textarea.' + value).val(json.text[value]); + } + $('.profile-content textarea.' + value).hide(); + $('.profile-content div.' + value).show(); + }); + + }, + error: function (response) { + brevidy.handle_ajax_error("profile", response); + } + }); + + return false; + }); + + // if the user cancels, do nothing and set the data back how it was before + $('#cancel-profile').click(function () { + // iterate through categories and show/hide them w/o changes + $.each(brevidy.profileCategories, function (index, value) { + $('.profile-content textarea.' + value).hide(); + $('.profile-content div.' + value).show(); + }); + + $(this).hide(); + $('#save-profile').hide(); + $('#edit-profile').show(); + + return false; + }); + + +// --------------------------- +// VIDEO UPLOAD / SHARE / EDIT +// --------------------------- + + // Change selection based on which thumbnail was pressed + $('.choose-a-thumbnail li').click(function() { + var thumb_number = $(this).attr('data-thumb-number'); + + $('li.selected-thumbnail').removeClass('selected-thumbnail'); + $(this).addClass('selected-thumbnail'); + + // set new value + $('input.selected-thumbnail').val(thumb_number); + }); + + +// -------------- +// ADD TO CHANNEL +// -------------- + + // Shows the add to channel area if the user clicked the button for one of their own videos + $('.show-add-video-meta-area').live('click', function(e) { + e.preventDefault(); + $('.add-to-channel-warning').remove(); + $('#add-to-channel, .add-video-meta-area').fadeIn('fast'); + }); + + // Handles AJAX error + $('.add-to-channel-link').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("channel", xhr); + }); + + +// ------------------- +// EDIT FEATURED VIDEO +// ------------------- + + // Colors the first 4 featured videos and adds a "FEATURED" tag to them + brevidy.update_featured_videos = function() { + // Reset outdated ones + $('.featured-video-post').css('background-color', '#ededed').children('.featured-video-meta-area').children('span.label.important').hide(); + + // Highlight the first 4 featured videos + $.each($('.featured-video-post').slice(0,4), function(index, featured_video) { + $(this).css('background-color', '#dcf5dc'); + $(this).children('.featured-video-meta-area').children('span.label.important').show(); + }); + + // Reset the up arrows on all video posts and remove the up arrow from the top one + $('.featured-video-post').children('.update-position-area').children('.move-to-top').show(); + $('.featured-video-post').eq(0).children('.update-position-area').children('.move-to-top').hide(); + } + + // Run this upon page load + brevidy.update_featured_videos(); + + // Moves videos upon successful ajax call + $('a.move-video-to-top').live('ajax:success', function(data, json, response) { + var idType = 'data-video-id'; + var id = $(this).attr(idType); + var featured_video = $(this).closest('.featured-video-post'); + var new_featured_video = featured_video.clone(); + var top_featured_video = $('.featured-video-post').eq(0); + + // Replace the top featured video object + featured_video.fadeOut('fast', function () { + $(this).remove(); + top_featured_video.before(new_featured_video).hide().fadeIn('fast'); + + // Update the featured videos highlighting + brevidy.update_featured_videos(); + }); + + // Update the featured video section of the page + var featured_video_object = $('.featured-video-object['+idType+'='+id+']'); + if (featured_video_object.length) { + // It's already showing so just replace it + featured_video_object.fadeOut('fast', function() { + $(this).remove(); + $('#featured-videos .featured-video-object').eq(0).before(json.featured_video).hide().fadeIn('fast'); + }); + } else { + // It's not showing on the screen + $('#featured-videos .featured-video-object').eq(3).fadeOut('fast', function() { + $(this).remove(); + $('#featured-videos .featured-video-object').eq(0).before(json.featured_video).hide().fadeIn('fast'); + }); + } + + }); + + // Handles AJAX error + $('a.move-video-to-top').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error("featured video", xhr); + }); + + +// ---------------- +// INVITATIONS PAGE +// ---------------- + + // Handle ajax errors or success + $('.send-invites').live('ajax:success', function(data, json, response) { + brevidy.dialog('Yay!!!', json.message, 'message'); + $('textarea#recipient_email, textarea#personal_message').val(''); + }); + $('.send-invites').live('ajax:error', function(data, xhr, response) { + brevidy.handle_ajax_error('invitation', xhr); + }); + + +// ------------ +// ACCOUNT PAGE +// ------------ + + // Update text field and check if username available + var usernameChanged = false; + var username_field = $('#user_username, #signupUsername'); + $('#user_username, #signupUsername').keyup(function() { + $(this).siblings('span').text('http://brevidy.com/' + $(this).val().trim()); + usernameChanged = true; + }); + + // Set up an interval to check for username change + var checkUsernameInterval = setInterval(function () { + if (usernameChanged && username_field.val().trim().length != 0) { + usernameChanged = false; + username = username_field.val().trim(); + availability_path = username_field.attr('data-path'); + + // kick off ajax to check username availability + $.ajax({ + data: { 'username':username }, + type: 'GET', + url: availability_path, + success: function (json) { + span_sib = username_field.siblings('span'); + span_sib.text('http://brevidy.com/' + username + ' is ' + json.availability_text); + (json.availability_text == 'available') ? span_sib.removeClass('red').addClass('green') : span_sib.removeClass('green').addClass('red') + }, + error: function (response) { + brevidy.dialog('Error', 'There was an error checking the availability of that username. Please try again later.', 'error'); + } + }); + } else { + if (username_field.val().trim().length == 0) { username_field.siblings('span').removeClass('red green'); } + } + }, 1000); + + // Cancel the setInterval if we couldn't find the username field + if (!username_field.length) { clearInterval(checkUsernameInterval); } + + // Handle AJAX requests + $('#update-user-info input[type=submit], #update-notifications input[type=submit], #update-password input[type=submit]').live('click', function() { + $(this).siblings('.ajax-animation').fadeIn('fast'); + }); + $('#update-user-info, #update-notifications, #update-password').live('ajax:success', function(data, json, response) { + $(this).children('.button-area').children('.ajax-animation').hide(); + $(this).children('.button-area').children('.green-checkmark').fadeIn('slow').fadeOut('1000'); + + $('#old_password, #new_password, #confirm_new_password').val(''); + }); + $('#update-user-info, #update-notifications, #update-password, .unblock-user').live('ajax:error', function(data, xhr, response){ + $(this).children('.button-area').children('.ajax-animation').hide(); + brevidy.handle_ajax_error("user", xhr); + }); + $('.unblock-user').live('ajax:success', function(data, json, response) { + $(this).parent().slideUp('fast', function() { + $(this).remove(); + }); + }); + + // Handles setting the new background image + $('.set-new-background-image').live('ajax:success', function(data, json, response) { + if (json.background_image_id == 0) { + $('body').removeClass('dark').addClass('light'); + } else if (json.background_image_id == 1) { + $('body').removeClass('light').addClass('dark'); + } + }); + // Handles banner image error + $('.set-new-background-image').live('ajax:error', function(data, xhr, response){ + brevidy.handle_ajax_error("background image", xhr); + }); + + + +// ---------------- +// EDIT BANNER PAGE +// ---------------- + + // Handles setting the new banner image + $('.set-new-banner-image').live('ajax:success', function(data, json, response) { + $('.top-banner img').attr('src', json.image_path); + $.smoothScroll({ + scrollTarget: '#top', + speed: 1000 + }); + }); + // Handles banner image error + $('.set-new-banner-image').live('ajax:error', function(data, xhr, response){ + brevidy.handle_ajax_error("banner image", xhr); + }); + + +}); // end of document ready \ No newline at end of file diff --git a/assets/stylesheets/bootstrap.scss b/assets/stylesheets/bootstrap.scss new file mode 100755 index 0000000..d9f705b --- /dev/null +++ b/assets/stylesheets/bootstrap.scss @@ -0,0 +1,29 @@ +/*! + * Bootstrap v1.3.0 + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + * + * Converted to Sass by @johnwlong. + * + * Date: @DATE + */ + +// CSS Reset +@import "reset.scss"; + +// Core +@import "variables.scss"; +@import "mixins.scss"; + +// Grid system and page structure +@import "scaffolding.scss"; + +// Styled patterns and elements +@import "type.scss"; +@import "forms.scss"; +@import "tables.scss"; +@import "patterns.scss"; diff --git a/assets/stylesheets/forms.scss b/assets/stylesheets/forms.scss new file mode 100755 index 0000000..83ea18f --- /dev/null +++ b/assets/stylesheets/forms.scss @@ -0,0 +1,481 @@ +/* Forms.scss + * Base styles for various input types, form layouts, and states + * ------------------------------------------------------------- */ + + +// FORM STYLES +// ----------- + +form { + margin-bottom: 2px; +} + +// Groups of fields with labels on top (legends) +fieldset { + margin-bottom: $baseline; + padding-top: $baseline; + legend { + display: block; + padding-left: 150px; + font-size: $basefont * 1.5; + line-height: 1; + color: $grayDark; + *padding: 0 0 5px 145px; /* IE6-7 */ + *line-height: 1.5; /* IE6-7 */ + } +} + +// Parent element that clears floats and wraps labels and fields together +form .clearfix { + margin-bottom: $baseline; + @include clearfix(); +} + +// Set font for forms +label, +input, +select, +textarea { + @include sans-serif-font(normal,13px,normal); +} + +// Float labels left +label { + padding-top: 6px; + margin-right: 10px; + font-size: $basefont; + line-height: $baseline; + float: left; + text-align: right; + color: $grayDark; +} + +// Shift over the inside div to align all label's relevant content +form .input { + margin-left: 125px; + margin-bottom: 10px; +} + +// Checkboxs and radio buttons +input[type=checkbox], +input[type=radio] { + cursor: pointer; +} + +// Inputs, Textareas, Selects +input, +textarea, +select, +.uneditable-input { + display: inline-block; + width: 210px; + height: $baseline; + padding: 4px; + font-size: $basefont; + line-height: $baseline; + color: $grayDark; + border: 1px solid #cfcfcf; + @include border-radius(3px); +} + +// remove padding from select +select { + padding: initial; +} + +// mini reset for non-html5 file types +input[type=checkbox], +input[type=radio] { + width: auto; + height: auto; + padding: 0; + margin: 3px 0; + *margin-top: 0; /* IE6-7 */ + line-height: normal; + border: none; +} + +input[type=file] { + background-color: $white; + padding: initial; + border: initial; + line-height: initial; + @include box-shadow(none); +} + +input[type=button], +input[type=reset], +input[type=submit] { + width: auto; + height: auto; +} + +select, +input[type=file] { + height: 28px; // In IE7, the height of the select element cannot be changed by height, only font-size + *height: auto; // Reset for IE7 + line-height: 28px; + *margin-top: 4px; /* For IE7, add top margin to align select with labels */ +} + +// Make multiple select elements height not fixed +select[multiple] { + height: inherit; + background-color: $white; // Fixes Chromium bug of unreadable items +} + +textarea { + resize: none; + height: auto; + width: 100%; +} + +// For text that needs to appear as an input but should not be an input +.uneditable-input { + background-color: $white; + display: block; + border-color: #eee; + @include box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + cursor: not-allowed; +} + +// Placeholder text gets special styles; can't be bundled together though for some reason +:-moz-placeholder { + color: $grayLight; +} +::-webkit-input-placeholder { + color: $grayLight; +} + +// Focus states +input, +textarea { + $transition: border linear .2s, box-shadow linear .2s; + @include transition($transition); + @include box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); +} +input:focus, +textarea:focus { + outline: 0; + border-color: #afafaf; + $shadow: inset 0 0px 5px rgba(0,0,0,0.4); + @include box-shadow($shadow); +} +input[type=file]:focus, +input[type=checkbox]:focus, +select:focus { + @include box-shadow(none); // override for file inputs + outline: 1px dotted #666; // Select elements don't get box-shadow styles, so instead we do outline +} + +// FORM FIELD FEEDBACK STATES +// -------------------------- + +// Mixin for form field states +@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) { + // Set the text color + > label, + .help-block, + .help-inline { + color: $textColor; + } + // Style inputs accordingly + input, + textarea { + color: $textColor; + border-color: $borderColor; + &:focus { + border-color: darken($borderColor, 10%); + @include box-shadow(0 0 6px lighten($borderColor, 20%)); + } + } + // Give a small background color for input-prepend/-append + .input-prepend .add-on, + .input-append .add-on { + color: $textColor; + background-color: $backgroundColor; + border-color: $textColor; + } +} +// Error +form .clearfix.error { + @include formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); +} +// Warning +form .clearfix.warning { + @include formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); +} +// Success +form .clearfix.success { + @include formFieldState(#468847, #57a957, lighten(#57a957, 30%)); +} + + +// Form element sizes +// TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes +.input-mini, +input.mini, +textarea.mini, +select.mini { + width: 60px; +} +.input-small, +input.small, +textarea.small, +select.small { + width: 90px; +} +.input-medium, +input.medium, +textarea.medium, +select.medium { + width: 150px; +} +.input-large, +input.large, +textarea.large, +select.large { + width: 210px; +} +.input-xlarge, +input.xlarge, +textarea.xlarge, +select.xlarge { + width: 270px; +} +.input-xxlarge, +input.xxlarge, +textarea.xxlarge, +select.xxlarge { + width: 530px; +} +textarea.xxlarge { + overflow-y: auto; +} + +// Grid style input sizes +// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border +@mixin formColumns($columnSpan: 1 ) { + display: inline-block; + float: none; + width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 10; + margin-left: 0; + +} +input, +textarea { + // Default columns + &.span1 { @include formColumns(1); } + &.span2 { @include formColumns(2); } + &.span3 { @include formColumns(3); } + &.span4 { @include formColumns(4); } + &.span5 { @include formColumns(5); } + &.span6 { @include formColumns(6); } + &.span7 { @include formColumns(7); } + &.span8 { @include formColumns(8); } + &.span9 { @include formColumns(9); } + &.span10 { @include formColumns(10); } + &.span11 { @include formColumns(11); } + &.span12 { @include formColumns(12); } + &.span13 { @include formColumns(13); } + &.span14 { @include formColumns(14); } + &.span15 { @include formColumns(15); } + &.span16 { @include formColumns(16); } +} + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + background-color: #f5f5f5; + border-color: #ddd; + cursor: text; +} + +// Actions (the buttons) +.actions { + background: #f5f5f5; + margin-top: $baseline; + margin-bottom: $baseline; + padding: ($baseline - 1) 20px $baseline 150px; + border-top: 1px solid #ddd; + @include border-radius(0 0 3px 3px); + .secondary-action { + float: right; + a { + line-height: 30px; + &:hover { + text-decoration: underline; + } + } + } +} + +// Help Text +.help-inline, +.help-block { + font-size: $basefont; + line-height: $baseline; + color: $grayLight; +} +.help-inline { + padding-left: 5px; + *position: relative; /* IE6-7 */ + *top: -5px; /* IE6-7 */ +} + +// Big blocks of help text +.help-block { + display: block; + max-width: 600px; +} + +// Inline Fields (input fields that appear as inline objects +.inline-inputs { + color: $gray; + span { + padding: 0 2px 0 1px; + } +} + +// Allow us to put symbols and text within the input field for a cleaner look +.input-prepend, +.input-append { + input { + @include border-radius(0 3px 3px 0); + } + .add-on { + position: relative; + background: #f5f5f5; + border: 1px solid #ccc; + z-index: 2; + float: left; + display: block; + width: auto; + min-width: 16px; + height: 18px; + padding: 4px 4px 4px 5px; + margin-right: -1px; + font-weight: normal; + line-height: 18px; + color: $grayLight; + text-align: center; + text-shadow: 0 1px 0 $white; + @include border-radius(3px 0 0 3px); + } + .active { + background: lighten($green, 30); + border-color: $green; + } +} +.input-prepend { + .add-on { + *margin-top: 1px; /* IE6-7 */ + } +} +.input-append { + input { + float: left; + @include border-radius(3px 0 0 3px); + } + .add-on { + @include border-radius(0 3px 3px 0); + margin-right: 0; + margin-left: -1px; + } +} + +// Stacked options for forms (radio buttons or checkboxes) +.inputs-list { + margin: 0 0 5px; + width: 100%; + li { + display: block; + padding: 0; + width: 100%; + } + label { + display: block; + float: none; + width: auto; + padding: 0; + margin-left: 20px; + line-height: $baseline; + text-align: left; + white-space: normal; + strong { + color: $gray; + } + small { + font-size: $basefont - 2; + font-weight: normal; + } + } + .inputs-list { + margin-left: 25px; + margin-bottom: 10px; + padding-top: 0; + } + &:first-child { + padding-top: 5px; + } + li + li { + padding-top: 2px; + } + input[type=radio], + input[type=checkbox] { + margin-bottom: 0; + margin-left: -20px; + float: left; + } +} + +// Stacked forms +.form-stacked { + padding-left: 20px; + fieldset { + padding-top: $baseline / 2; + } + legend { + margin-left: 0; + } + label { + display: block; + float: none; + width: auto; + font-weight: bold; + text-align: left; + line-height: 20px; + padding-top: 0; + } + .clearfix { + margin-bottom: $baseline / 2; + div.input { + margin-left: 0; + } + } + .inputs-list { + margin-bottom: 0; + li { + padding-top: 0; + label { + font-weight: normal; + padding-top: 0; + } + } + } + div.clearfix.error { + padding-top: 10px; + padding-bottom: 10px; + padding-left: 10px; + margin-top: 0; + margin-left: -10px; + } + .actions { + margin-left: -20px; + padding-left: 20px; + } +} \ No newline at end of file diff --git a/assets/stylesheets/foundation.scss b/assets/stylesheets/foundation.scss new file mode 100755 index 0000000..48a36ea --- /dev/null +++ b/assets/stylesheets/foundation.scss @@ -0,0 +1,110 @@ +/* foundation.scss + * Foundational elements and styles + * ------------------------------------------------------------------ */ + +.centered { + text-align: center; +} + +// BADGES +// ------ + +.badgeBeautiful, .badgeClever, .badgeCreative, .badgeCreepy, .badgeCute, .badgeDislikeIt, .badgeEpic, .badgeEvil, .badgeFail, .badgeGifted, .badgeHilarious, .badgeHot, .badgeHuh, .badgeInspirational, .badgeLikeIt, .badgeLoveIt, .badgeNaughty, .badgeOriginal, .badgeSad, .badgeScary, .badgeTrendy, .badgeWise, .badgeWow, .badgeYummy { + background-image: url("sprite_badges-1.0.0.png"); + background-repeat: no-repeat; + background-position: 0 0; + display: block; + margin: 2px 0px 3px 8px; + height: 25px; + width: 25px; +} + +.badgeBeautiful_Large, .badgeClever_Large, .badgeCreative_Large, .badgeCreepy_Large, .badgeCute_Large, .badgeDislikeIt_Large, .badgeEpic_Large, .badgeEvil_Large, .badgeFail_Large, .badgeGifted_Large, .badgeHilarious_Large, .badgeHot_Large, .badgeHuh_Large, .badgeInspirational_Large, .badgeLikeIt_Large, .badgeLoveIt_Large, .badgeNaughty_Large, .badgeOriginal_Large, .badgeSad_Large, .badgeScary_Large, .badgeTrendy_Large, .badgeWise_Large, .badgeWow_Large, .badgeYummy_Large { + background-image: url("sprite_badges-1.0.0.png"); + background-repeat: no-repeat; + background-position: 0 -35px; + display: inline-block; + float: left; + margin: 0px 3px; + height: 40px; + width: 40px; +} + +.badgeBeautiful_Preview, .badgeClever_Preview, .badgeCreative_Preview, .badgeCreepy_Preview, .badgeCute_Preview, .badgeDislikeIt_Preview, .badgeEpic_Preview, .badgeEvil_Preview, .badgeFail_Preview, .badgeGifted_Preview, .badgeHilarious_Preview, .badgeHot_Preview, .badgeHuh_Preview, .badgeInspirational_Preview, .badgeLikeIt_Preview, .badgeLoveIt_Preview, .badgeNaughty_Preview, .badgeOriginal_Preview, .badgeSad_Preview, .badgeScary_Preview, .badgeTrendy_Preview, .badgeWise_Preview, .badgeWow_Preview, .badgeYummy_Preview { + background-image: url("sprite_badges-1.0.0.png"); + background-repeat: no-repeat; + background-position: 0 -85px; + display: inline-block; + height: 50px; + width: 50px; +} + +.badgeClever{ background-position: 0 -145px; width: 25px; height: 25px; } +.badgeClever_Large{ background-position: 0 -180px; width: 40px; height: 40px; } +.badgeClever_Preview{ background-position: 0 -230px; width: 50px; height: 50px; } +.badgeCreative{ background-position: 0 -290px; width: 25px; height: 25px; } +.badgeCreative_Large{ background-position: 0 -325px; width: 40px; height: 40px; } +.badgeCreative_Preview{ background-position: 0 -375px; width: 50px; height: 50px; } +.badgeCreepy{ background-position: 0 -435px; width: 25px; height: 25px; } +.badgeCreepy_Large{ background-position: 0 -470px; width: 40px; height: 40px; } +.badgeCreepy_Preview{ background-position: 0 -520px; width: 50px; height: 50px; } +.badgeCute{ background-position: 0 -580px; width: 25px; height: 25px; } +.badgeCute_Large{ background-position: 0 -615px; width: 40px; height: 40px; } +.badgeCute_Preview{ background-position: 0 -665px; width: 50px; height: 50px; } +.badgeDislikeIt{ background-position: 0 -725px; width: 25px; height: 25px; } +.badgeDislikeIt_Large{ background-position: 0 -760px; width: 40px; height: 40px; } +.badgeDislikeIt_Preview{ background-position: 0 -810px; width: 50px; height: 50px; } +.badgeEpic{ background-position: 0 -870px; width: 25px; height: 25px; } +.badgeEpic_Large{ background-position: 0 -905px; width: 40px; height: 40px; } +.badgeEpic_Preview{ background-position: 0 -955px; width: 50px; height: 50px; } +.badgeEvil{ background-position: 0 -1015px; width: 25px; height: 25px; } +.badgeEvil_Large{ background-position: 0 -1050px; width: 40px; height: 40px; } +.badgeEvil_Preview{ background-position: 0 -1100px; width: 50px; height: 50px; } +.badgeFail{ background-position: 0 -1160px; width: 25px; height: 25px; } +.badgeFail_Large{ background-position: 0 -1195px; width: 40px; height: 40px; } +.badgeFail_Preview{ background-position: 0 -1245px; width: 50px; height: 50px; } +.badgeGifted{ background-position: 0 -1305px; width: 25px; height: 25px; } +.badgeGifted_Large{ background-position: 0 -1340px; width: 40px; height: 40px; } +.badgeGifted_Preview{ background-position: 0 -1390px; width: 50px; height: 50px; } +.badgeHilarious{ background-position: 0 -1450px; width: 25px; height: 25px; } +.badgeHilarious_Large{ background-position: 0 -1485px; width: 40px; height: 40px; } +.badgeHilarious_Preview{ background-position: 0 -1535px; width: 50px; height: 50px; } +.badgeHot{ background-position: 0 -1595px; width: 25px; height: 25px; } +.badgeHot_Large{ background-position: 0 -1630px; width: 40px; height: 40px; } +.badgeHot_Preview{ background-position: 0 -1680px; width: 50px; height: 50px; } +.badgeHuh{ background-position: 0 -1740px; width: 25px; height: 25px; } +.badgeHuh_Large{ background-position: 0 -1775px; width: 40px; height: 40px; } +.badgeHuh_Preview{ background-position: 0 -1825px; width: 50px; height: 50px; } +.badgeInspirational{ background-position: 0 -1885px; width: 25px; height: 25px; } +.badgeInspirational_Large{ background-position: 0 -1920px; width: 40px; height: 40px; } +.badgeInspirational_Preview{ background-position: 0 -1970px; width: 50px; height: 50px; } +.badgeLikeIt{ background-position: -60px 0; width: 25px; height: 25px; } +.badgeLikeIt_Large{ background-position: -60px -35px; width: 40px; height: 40px; } +.badgeLikeIt_Preview{ background-position: -60px -85px; width: 50px; height: 50px; } +.badgeLoveIt{ background-position: -60px -145px; width: 25px; height: 25px; } +.badgeLoveIt_Large{ background-position: -60px -180px; width: 40px; height: 40px; } +.badgeLoveIt_Preview{ background-position: -60px -230px; width: 50px; height: 50px; } +.badgeNaughty{ background-position: -60px -290px; width: 25px; height: 25px; } +.badgeNaughty_Large{ background-position: -60px -325px; width: 40px; height: 40px; } +.badgeNaughty_Preview{ background-position: -60px -375px; width: 50px; height: 50px; } +.badgeOriginal{ background-position: -60px -435px; width: 25px; height: 25px; } +.badgeOriginal_Large{ background-position: -60px -470px; width: 40px; height: 40px; } +.badgeOriginal_Preview{ background-position: -60px -520px; width: 50px; height: 50px; } +.badgeSad{ background-position: -60px -580px; width: 25px; height: 25px; } +.badgeSad_Large{ background-position: -60px -615px; width: 40px; height: 40px; } +.badgeSad_Preview{ background-position: -60px -665px; width: 50px; height: 50px; } +.badgeScary{ background-position: -60px -725px; width: 25px; height: 25px; } +.badgeScary_Large{ background-position: -60px -760px; width: 40px; height: 40px; } +.badgeScary_Preview{ background-position: -60px -810px; width: 50px; height: 50px; } +.badgeTrendy{ background-position: -60px -870px; width: 25px; height: 25px; } +.badgeTrendy_Large{ background-position: -60px -905px; width: 40px; height: 40px; } +.badgeTrendy_Preview{ background-position: -60px -955px; width: 50px; height: 50px; } +.badgeWise{ background-position: -60px -1015px; width: 25px; height: 25px; } +.badgeWise_Large{ background-position: -60px -1050px; width: 40px; height: 40px; } +.badgeWise_Preview{ background-position: -60px -1100px; width: 50px; height: 50px; } +.badgeWow{ background-position: -60px -1160px; width: 25px; height: 25px; } +.badgeWow_Large{ background-position: -60px -1195px; width: 40px; height: 40px; } +.badgeWow_Preview{ background-position: -60px -1245px; width: 50px; height: 50px; } +.badgeYummy{ background-position: -60px -1305px; width: 25px; height: 25px; } +.badgeYummy_Large{ background-position: -60px -1340px; width: 40px; height: 40px; } +.badgeYummy_Preview{ background-position: -60px -1390px; width: 50px; height: 50px; } diff --git a/assets/stylesheets/i_love_lamp.scss b/assets/stylesheets/i_love_lamp.scss new file mode 100755 index 0000000..582f400 --- /dev/null +++ b/assets/stylesheets/i_love_lamp.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; +/*! + * + * Portions of this file were adapted from Bootstrap v1.4.0, Copyright 2012 Twitter, Inc + * + * Copyright 2012 Brevidy LLC + * + */ + +// CSS Reset +@import "reset.scss"; + +// Foundation +@import "foundation.scss"; + +// Core +@import "variables.scss"; +@import "mixins.scss"; + +// Grid system and page structure +@import "scaffolding.scss"; + +// Styled patterns and elements +@import "type.scss"; +@import "forms.scss"; +@import "tables.scss"; +@import "patterns.scss"; diff --git a/assets/stylesheets/mixins.scss b/assets/stylesheets/mixins.scss new file mode 100755 index 0000000..7e03d84 --- /dev/null +++ b/assets/stylesheets/mixins.scss @@ -0,0 +1,269 @@ +/* Mixins.scss + * Snippets of reusable CSS to develop faster and keep code readable + * ----------------------------------------------------------------- */ + +// Clearfix for clearing floats like a boss h5bp.com/q +@mixin clearfix { + zoom: 1; + &:before, + &:after { + display: table; + content: ""; + zoom: 1; + } + &:after { + clear: both; + } +} +.clearfix { @include clearfix; } + +// Center-align a block level element +@mixin center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Sizing shortcuts +@mixin size($height: 5px, $width: 5px) { + height: $height; + width: $width; +} +@mixin square($size: 5px) { + @include size($size, $size); +} + +// Input placeholder text +@mixin placeholder($color: $grayLight) { + :-moz-placeholder { + color: $color; + } + ::-webkit-input-placeholder { + color: $color; + } +} + +// Font Stacks +@mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) { + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} +@mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} +@mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) { + font-family: "Georgia", Times New Roman, Times, serif; + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} +@mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) { + font-family: "Monaco", Courier New, monospace; + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} + +// Grid System +@mixin fixed-container { + width: $siteWidth; + margin-left: auto; + margin-right: auto; + @include clearfix(); +} +.fixed-container { @include fixed-container; } +@mixin columns($columnSpan: 1) { + width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)); +} +@mixin offset($columnOffset: 1) { + margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace; +} +// Necessary grid styles for every column to make them appear next to each other horizontally +@mixin gridColumn() { + display: inline; + float: left; +} +// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something +@mixin makeColumn($columnSpan: 1) { + @include gridColumn(); + @include columns($columnSpan); +} + +// Border Radius +@mixin border-radius($radius: 5px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} +@mixin border-radius-bottom($radius: 5px) { + -webkit-border-bottom-left-radius: $radius; + -webkit-border-bottom-right-radius: $radius; + -moz-border-radius-bottomleft: $radius; + -moz-border-radius-bottomright: $radius; + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; +} +@mixin border-radius-top($radius: 5px) { + -webkit-border-top-left-radius: $radius; + -webkit-border-top-right-radius: $radius; + -moz-border-radius-topleft: $radius; + -moz-border-radius-topright: $radius; + border-top-left-radius: $radius; + border-top-right-radius: $radius; +} +@mixin border-radius-left($radius: 5px) { + -webkit-border-top-left-radius: $radius; +-webkit-border-bottom-left-radius: $radius; + -moz-border-radius-topleft: $radius; + -moz-border-radius-bottomleft: $radius; + border-top-left-radius: $radius; + border-bottom-left-radius: $radius; +} +@mixin border-radius-right($radius: 5px) { + -webkit-border-top-right-radius: $radius; +-webkit-border-bottom-right-radius: $radius; + -moz-border-radius-topright: $radius; + -moz-border-radius-bottomright: $radius; + border-top-right-radius: $radius; + border-bottom-right-radius: $radius; +} + +// Drop shadows +@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + box-shadow: $shadow; +} + +// Transitions +@mixin transition($transition) { + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +// Background clipping +@mixin background-clip($clip) { + -webkit-background-clip: $clip; + -moz-background-clip: $clip; + background-clip: $clip; +} + +// CSS3 Content Columns +@mixin content-columns($columnCount, $columnGap: 20px) { + -webkit-column-count: $columnCount; + -moz-column-count: $columnCount; + column-count: $columnCount; + -webkit-column-gap: $columnGap; + -moz-column-gap: $columnGap; + column-gap: $columnGap; +} + +// Make any element resizable for prototyping +@mixin resizable($direction: both) { + resize: $direction; // Options are horizontal, vertical, both + overflow: auto; // Safari fix +} + +// Add an alphatransparency value to any background or border color (via Elyse Holladay) +@mixin translucent-background($color: $white, $alpha: 1) { + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); +} +@mixin translucent-border($color: $white, $alpha: 1) { + border-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + background-clip: padding-box; +} + +// Gradients +@mixin horizontal-gradient ($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror + background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10 + background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(left, $startColor, $endColor); // Le standard + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down +} + +@mixin vertical-gradient ($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror + background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient(top, $startColor, $endColor); // The standard + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down +} + +@mixin directional-gradient ($startColor: #555, $endColor: #333, $deg: 45deg) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+ + background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10 + background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10 + background-image: linear-gradient($deg, $startColor, $endColor); // The standard +} + +@mixin vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: $endColor; + background-repeat: no-repeat; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)); + background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: -moz-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor); + background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down, gets no color-stop at all the proper fallback +} + +// Gradient Bar Colors for buttons and allerts +@mixin gradientBar($primaryColor, $secondaryColor) { + @include vertical-gradient($primaryColor, $secondaryColor); + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) opacify(rgba(0,0,0,.1), .15); +} + +// Reset filters for IE +@mixin reset-filter() { + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); +} + +// Opacity +@mixin opacity($opacity: 100) { + filter: alpha(opacity=$opacity); + -khtml-opacity: $opacity / 100; + -moz-opacity: $opacity / 100; + opacity: $opacity / 100; +} + +// Thumbnails +@mixin thumbnail-padding { + background-color: #f2f2f2; + background-color: rgba(242, 242, 242, 1); + float: left; + padding: 4px; + margin: 5px 10px; + border: 1px solid #bbb; + @include border-radius(4px); + @include box-shadow(0 1px 1px rgba(0,0,0,.075)); + img { + display: block; + } + &:hover { + @include box-shadow(0 1px 4px rgba(0,0,0,.4)); + } +} diff --git a/assets/stylesheets/patterns.scss b/assets/stylesheets/patterns.scss new file mode 100755 index 0000000..160a7d5 --- /dev/null +++ b/assets/stylesheets/patterns.scss @@ -0,0 +1,2685 @@ +/* Patterns.scss + * Repeatable UI elements outside the base styles provided from the scaffolding + * ---------------------------------------------------------------------------- */ + + +// TOPBAR +// ------ + +// Topbar for Branding and Nav +.topbar { + border-bottom: 1px solid #444; + height: 41px; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; + overflow: visible; + $shadow: #000 0px 2px 5px; + @include box-shadow($shadow); + + .vertical-divider { + border-left: 1px solid #040404; + border-right: 1px solid #2F2F2F; + height: 26px; + display: inline-block; + margin: 6px 3px 1px 3px; + } + + // Segregates top bar link area + .container .static-links { + float: left; + } + .container .dynamic-links { + position: absolute; + right: 8px; + top: 0px; + } + + // Links get text shadow + a { + color: $grayLight; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } + + // Hover and active states + // h3 for backwards compatibility + h3 a:hover, + .brand:hover, + ul .active > a { + background-color: #333; + background-color: rgba(255,255,255,.05); + color: $white; + text-decoration: none; + } + + // Website name + // h3 left for backwards compatibility + h3 { + position: relative; + } + h3 a, + .brand { + float: left; + display: block; + padding: 2px 20px; + margin: 0px 5px 0px -20px; // negative indent to left-align the text down the page + color: $white; + font-size: 20px; + font-weight: 200; + line-height: 1; + } + + // Plain text in topbar + p { + margin: 0; + line-height: 40px; + a:hover { + background-color: transparent; + color: $white; + } + } + + // Search Form + form { + float: left; + margin: 5px 0 0 0; + position: relative; + @include opacity(100); + + span.search { + display: block; + position: absolute; + cursor: pointer; + display: block; + right: 0; + top: 0; + padding: 7px 8px 5px 8px; + } + + span.search button { + background-color: #b5b5b5; + background-color: rgba(181, 181, 181, 1); + background-image: url(new_images/search.png); + background-position: 0px 0px; + width: 14px; + height: 14px; + display: block; + font-size: 0; + } + } + // Todo: remove from v2.0 when ready, added for legacy + form.pull-right { + float: right; + } + input { + background-color: #b5b5b5; + background-color: rgba(181, 181, 181, 1); + @include sans-serif-font(13px, normal, 1); + padding: 4px 25px 4px 5px; + color: $black; + color: rgba(0,0,0,1); + border: 1px solid #111; + @include border-radius(4px); + $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + @include box-shadow($shadow); + @include transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: $gray; + } + &::-webkit-input-placeholder { + color: $gray; + } + } +} + +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +// For backwards compatibility, include .topbar .fill +.topbar-inner, +.topbar .fill { + background-color: #222; + @include vertical-gradient(#333332, #222221); + $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + @include box-shadow($shadow); +} + + +// SECONDARY DYNAMIC NAV LINKS +// --------------------------- + +// Sets container to relative position for secondary nav absolute positioning +.topbar .container { + position: relative; +} +// Small user image in top nav bar +#user-image img { + display: inline-block; + width: 20px; + height: 20px; + vertical-align: top; + margin-right: 6px; + border: none; + cursor: pointer; +} +// Username dropdown area in top nav bar +#username { + cursor: pointer; + font-weight: normal; + display: inline-block; + max-width: 175px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + + +// NAVIGATION +// ---------- + +// Topbar Nav +// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity +// For backwards compatibility, leave in .topbar div > ul +.topbar div > ul, +.nav { + display: block; + float: left; + margin: 0 10px 0 10px; + position: relative; + left: 0; + > li { + display: block; + float: left; + } + a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + text-decoration: none; + &:hover { + color: $white; + text-decoration: none; + } + } + .active > a { + background-color: #222; + background-color: rgba(0,0,0,.5); + } + + // Secondary (floated right) nav in topbar + &.secondary-nav { + float: right; + margin-right: 10px; + margin-left: 0px; + // backwards compatibility + .menu-dropdown, + .dropdown-menu { + right: 0; + border: 0; + } + } + a.menu:after, .dropdown-toggle:after { + border-top: 4px solid $white; + @include opacity(50); + } +} + +// Dropdown Menus +// Use the .menu class on any+ Oops, something went wrong. +
+
+ We are still working out the kinks and have been notified about this. Thanks for being patient with us!
+
+ Here's a picture of a puppy to make it up to you.
+
+
'+f+"
'+l.view_all_badges_link+"
");brevidy.hide_video_ajax_spinner(e)},error:function(j){brevidy.hide_video_ajax_spinner(e);brevidy.handle_ajax_error("badge",j)}});return false});$(".unbadge").live("click",function(){var f=$(this);var i=f.attr("href");var g="data-badge-id";var h=f.attr(g);var e=$(this).attr("data-video-id");brevidy.show_video_ajax_spinner(e);$.ajax({data:{_method:"DELETE",},dataType:"json",type:"POST",url:i+"/"+h,success:function(l){var n="data-user-id";var m="data-video-id";var j=l.video_id;var k="data-badge-type";var o=f.attr(k);$(".twipsy").remove();f.fadeOut(1,function(){$(this).after(l.give_a_badge);$(this).remove()});$(".show-badges["+m+"="+j+"] li["+k+"="+o+"] span").text(l.this_badge_count);if(l.this_badge_count==0){$(".show-badges["+m+"="+j+"] li["+k+"="+o+"]").fadeOut("fast",function(){$(this).remove()})}if(l.total_video_badges==0){$(".show-badges["+m+"="+j+"] .badges, p.view-all-badges["+m+"="+j+"]").fadeOut("fast",function(){$(this).remove();$(".show-badges["+m+"="+j+"]").html('No badges given yet. Give one!
')})}else{$("p.view-all-badges["+m+"="+j+"]").remove();$(".show-badges["+m+"="+j+"] .badges").after(''+l.view_all_badges_link+"
")}brevidy.hide_video_ajax_spinner(e)},error:function(j){brevidy.hide_video_ajax_spinner(e);brevidy.handle_ajax_error("badge",j)}});return false});$("#update-channel-name input[type=submit]").live("click",function(){$(this).parent().siblings(".ajax-animation").fadeIn("fast")});$("#update-channel-name").live("ajax:success",function(g,f,e){$(this).siblings(".ajax-animation").hide();$(this).siblings(".green-checkmark").fadeIn("slow").fadeOut("1000")});$("#update-channel-name").live("ajax:error",function(f,g,e){$(this).siblings(".ajax-animation").hide();brevidy.handle_ajax_error("channel",g)});$("#toggle-channel-privacy").live("ajax:success",function(h,g,f){console.log($(this).attr("href"));var e=$(this);if(e.hasClass("success")){console.log("turning off privacy");e.attr("href",g.new_link).removeClass("success").text("No");$(".private-channel-link").fadeOut("fast")}else{console.log("turning on privacy");e.attr("href",g.new_link).addClass("success").text("Yes");$(".private-channel-link").fadeIn("fast")}});$("#toggle-channel-privacy").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("channel",g)});$(".subscribe").live("ajax:success",function(g,f,e){if(f.requesting_permission){brevidy.dialog("Requesting Access","We have sent an email on your behalf requesting access to this channel. Please be patient while they respond to this request.","message")}else{if($(this).hasClass("small")){$(this).closest(".pull-right").html(f.button)}else{$(this).closest(".button-area").html(f.button)}}});$(".unsubscribe").live("ajax:success",function(h,g,e){if($(this).hasClass("small")){$(this).closest(".pull-right").html(g.button)}else{var f=$(this).closest(".button-area");f.html(g.button);if(g.is_private){f.siblings(".channel-thumbnail-area").fadeOut("fast",function(){$(this).before(g.private_area_message);$(this).remove()})}}});$(".subscribe, .unsubscribe").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("channel",g)});$(".delete-channel-area .show-delete-area").click(function(){$(this).remove();$(".alert-message").slideDown("fast");return false});$(".delete-channel").live("click",function(){var e=$(this).attr("href");brevidy.confirmation_dialog("You are about to delete this channel which will also delete all videos, comments, badges, and subscribers associated with this channel. This cannot be undone.","Delete",function(){$.ajax({data:{_method:"DELETE"},type:"POST",url:e,error:function(f){brevidy.handle_ajax_error("channel",f)}})});return false});$(".remove-subscriber").live("click",function(){var e=$(this);var f=e.attr("href");brevidy.confirmation_dialog("You are about to remove this person from your subscribers.","Remove",function(){$.ajax({data:{_method:"DELETE"},type:"POST",url:f,success:function(g){e.closest("li.zebra-striped").fadeOut("fast",function(){$(this).remove()})},error:function(g){brevidy.handle_ajax_error("subscriber",xhr)}})});return false});$(".block-user").live("click",function(){var f=$(this);var e=f.attr("href");brevidy.confirmation_dialog("You are about to block this user which will unsubscribe them from all of your channels and prevent them from viewing your content in the future.","Block",function(){$.ajax({data:{_method:"DELETE"},type:"POST",url:e,success:function(g){f.closest("li.zebra-striped").fadeOut("fast",function(){$(this).remove()})},error:function(g){brevidy.handle_ajax_error("user",xhr)}})});return false});$(".comment-box textarea").live("focus",function(){var e="data-video-id";var f=$(this).attr(e);$(this).animate({height:"35px",},"fast");$(".comment-box .button-wrapper["+e+"="+f+"]").slideDown("fast")});$(".comment-box textarea").live("keydown",function(e){if(e.keyCode=="13"){comment_button=$(this).siblings(".button-wrapper").children(".btn");comment_button.submit();brevidy.setup_video_ajax_spinner($(this));return false}});$(".comment-box input.btn").live("click",function(){brevidy.setup_video_ajax_spinner($(this))});$("a.show-all-comments").live("click",function(){var e=$(this);var f="data-video-id";var g=e.attr(f);e.parent().fadeOut("fast",function(){$("li.hidden-comment["+f+"="+g+"]").fadeIn("fast");e.remove()});return false});$(".post-new-comment").live("ajax:success",function(j,i,g){var h="data-video-id";var k=i.video_id;var f=$(this);var e=$(".comments-area["+h+"="+k+"] ul.comments-list");e.append(i.html);e.children("li:last").hide().fadeIn(250);$("li.show-all-comments a["+h+"="+k+"]").text("Show all "+i.comments_count+" comments");$(".comment-box textarea["+h+"="+k+"]").val("").blur()});$(".comments-list li").live("mouseenter mouseleave",function(e){if(e.type=="mouseenter"){$(this).children(".delete-comment").show()}else{$(this).children(".delete-comment").hide()}});$(".delete-comment").live("mouseenter mouseleave",function(e){if(e.type=="mouseenter"){$(this).css("opacity","1.0")}else{$(this).css("opacity","0.5")}});$(".delete-comment").live("ajax:success",function(g,f,e){$(".twipsy").remove();$(this).closest("li").fadeOut("fast",function(){$(this).remove()})});$(".post-new-comment, .delete-comment").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("comment",g)});$("a.share-socially").live("click",function(){$(this).addClass("lighten-to-blue").siblings().filter(".lighten-to-blue").removeClass("lighten-to-blue");$(this).siblings(".public-link, .embed-code, .email-form").filter(":visible").fadeOut("fast",function(){$(this).siblings(".social-sharing").fadeIn("fast")});return false});$("a.link-to-video").live("click",function(){$(this).addClass("lighten-to-blue").siblings().filter(".lighten-to-blue").removeClass("lighten-to-blue");$(this).siblings(".social-sharing, .embed-code, .email-form").filter(":visible").fadeOut("fast",function(){$(this).siblings(".public-link").fadeIn("fast").children("input[type=text]").select()});return false});$("a.embed-video").live("click",function(){$(this).addClass("lighten-to-blue").siblings().filter(".lighten-to-blue").removeClass("lighten-to-blue");$(this).siblings(".social-sharing, .public-link, .email-form").filter(":visible").fadeOut("fast",function(){$(this).siblings(".embed-code").fadeIn("fast").children("textarea").select()});return false});$("a.email-video").live("click",function(){$(this).addClass("lighten-to-blue").siblings().filter(".lighten-to-blue").removeClass("lighten-to-blue");$(this).siblings(".social-sharing, .public-link, .embed-code").filter(":visible").fadeOut("fast",function(){$(this).siblings(".email-form").fadeIn("fast").children("input[type=text]").select()});return false});$(".share-via-email").live("ajax:success",function(g,f,e){brevidy.dialog("Yay!!!",f.message,"message");$(this).children('input[name="recipient_email"], textarea[name="personal_message"]').val("")});$(".share-via-email").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("invitation",g)});$("a.remove-tag").live("ajax:success",function(h,g,e){$that=$(this);var f="data-video-id";var i=g.video_id;$(".twipsy").remove();$that.parent().fadeOut("fast",function(){$that.parent().remove();if(g.tags_count==0){$(".tags-area["+f+"="+i+"]").html('There are currently no tags organizing this video.
')}})});$("a.remove-tag").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("tag",g)});$(".thumbnail-and-badges .thumbnail").live("click",function(){var e="data-video-id";var g=$(this).attr(e);var f=$(this).attr("data-video-path");if(f.length!=0){$.ajax({dataType:"json",type:"GET",url:f,success:function(i){$("#brevidy-player-"+g).html(i.html);$(".thumbnail["+e+"="+g+"]").fadeOut(150,function(){$(".player-area["+e+"="+g+"]").fadeIn(100,function(){$.smoothScroll({offset:-50,scrollTarget:".video-post["+e+"="+g+"]",speed:500})})});var h=$(".player-area").filter(":visible").not(".player-area["+e+"="+g+"]");$.each(h,function(j,k){brevidy.collapse_player($(this).attr("data-video-id"))})},error:function(h){brevidy.handle_ajax_error("video",h)}})}else{brevidy.hide_video_ajax_spinner(g)}return false});$(".collapse-player-controls a").live("click",function(){brevidy.collapse_player($(this).attr("data-video-id"));return false});brevidy.collapse_player=function(e){var f="data-video-id";$(".player-area["+f+"="+e+"]").fadeOut(5,function(){if(jwplayer("brevidy-player-"+e)){jwplayer("brevidy-player-"+e).remove()}$("#brevidy-player-"+e).html("");$(".thumbnail["+f+"="+e+"]").fadeIn(5)})};brevidy.profileCategories=["website","bio","interests","favorite_music","favorite_movies","favorite_books","favorite_foods","favorite_people","things_i_could_live_without","one_thing_i_would_change_in_the_world","quotes_to_live_by"];$("#edit-profile").click(function(){$(this).hide();$("#save-profile").show();$("#cancel-profile").show();$.each(brevidy.profileCategories,function(e,f){if($(".profile-content div."+f).text().trim().toLowerCase()=="none"){$(".profile-content textarea."+f).val("")}$(".profile-content div."+f).hide();$(".profile-content textarea."+f).show()});return false});$("#save-profile").ajaxStart(function(){$(".profile-buttons .ajax-animation").show()}).ajaxStop(function(){$(".profile-buttons .ajax-animation").hide()});$("#save-profile").click(function(){var f=$(this);var g={};var e=f.attr("href");$.each(brevidy.profileCategories,function(h,i){g[i]=$(".profile-content textarea."+i).val().trim()});$.ajax({data:{profile:g},type:"PUT",url:e,success:function(h){f.hide();$("#cancel-profile").hide();$("#edit-profile").show();$.each(brevidy.profileCategories,function(i,j){if(!h.text[j]){if(j=="website"){$(".user-info-section p.website").html("")}$("div."+j).html("None
");$(".profile-content textarea."+j).val("None")}else{if(j=="website"){$(".user-info-section p.website").html(h.html[j]);$(".user-info-section p.website p").replaceWith(function(){return $(this).contents()})}$("div."+j).html(h.html[j]);$(".profile-content textarea."+j).val(h.text[j])}$(".profile-content textarea."+j).hide();$(".profile-content div."+j).show()})},error:function(h){brevidy.handle_ajax_error("profile",h)}});return false});$("#cancel-profile").click(function(){$.each(brevidy.profileCategories,function(e,f){$(".profile-content textarea."+f).hide();$(".profile-content div."+f).show()});$(this).hide();$("#save-profile").hide();$("#edit-profile").show();return false});$(".choose-a-thumbnail li").click(function(){var e=$(this).attr("data-thumb-number");$("li.selected-thumbnail").removeClass("selected-thumbnail");$(this).addClass("selected-thumbnail");$("input.selected-thumbnail").val(e)});$(".show-add-video-meta-area").live("click",function(f){f.preventDefault();$(".add-to-channel-warning").remove();$("#add-to-channel, .add-video-meta-area").fadeIn("fast")});$(".add-to-channel-link").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("channel",g)});brevidy.update_featured_videos=function(){$(".featured-video-post").css("background-color","#ededed").children(".featured-video-meta-area").children("span.label.important").hide();$.each($(".featured-video-post").slice(0,4),function(e,f){$(this).css("background-color","#dcf5dc");$(this).children(".featured-video-meta-area").children("span.label.important").show()});$(".featured-video-post").children(".update-position-area").children(".move-to-top").show();$(".featured-video-post").eq(0).children(".update-position-area").children(".move-to-top").hide()};brevidy.update_featured_videos();$("a.move-video-to-top").live("ajax:success",function(i,m,h){var l="data-video-id";var f=$(this).attr(l);var j=$(this).closest(".featured-video-post");var e=j.clone();var k=$(".featured-video-post").eq(0);j.fadeOut("fast",function(){$(this).remove();k.before(e).hide().fadeIn("fast");brevidy.update_featured_videos()});var g=$(".featured-video-object["+l+"="+f+"]");if(g.length){g.fadeOut("fast",function(){$(this).remove();$("#featured-videos .featured-video-object").eq(0).before(m.featured_video).hide().fadeIn("fast")})}else{$("#featured-videos .featured-video-object").eq(3).fadeOut("fast",function(){$(this).remove();$("#featured-videos .featured-video-object").eq(0).before(m.featured_video).hide().fadeIn("fast")})}});$("a.move-video-to-top").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("featured video",g)});$(".send-invites").live("ajax:success",function(g,f,e){brevidy.dialog("Yay!!!",f.message,"message");$("textarea#recipient_email, textarea#personal_message").val("")});$(".send-invites").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("invitation",g)});var b=false;var c=$("#user_username, #signupUsername");$("#user_username, #signupUsername").keyup(function(){$(this).siblings("span").text("http://brevidy.com/"+$(this).val().trim());b=true});var a=setInterval(function(){if(b&&c.val().trim().length!=0){b=false;username=c.val().trim();availability_path=c.attr("data-path");$.ajax({data:{username:username},type:"GET",url:availability_path,success:function(e){span_sib=c.siblings("span");span_sib.text("http://brevidy.com/"+username+" is "+e.availability_text);(e.availability_text=="available")?span_sib.removeClass("red").addClass("green"):span_sib.removeClass("green").addClass("red")},error:function(e){brevidy.dialog("Error","There was an error checking the availability of that username. Please try again later.","error")}})}else{if(c.val().trim().length==0){c.siblings("span").removeClass("red green")}}},1000);if(!c.length){clearInterval(a)}$("#update-user-info input[type=submit], #update-notifications input[type=submit], #update-password input[type=submit]").live("click",function(){$(this).siblings(".ajax-animation").fadeIn("fast")});$("#update-user-info, #update-notifications, #update-password").live("ajax:success",function(g,f,e){$(this).children(".button-area").children(".ajax-animation").hide();$(this).children(".button-area").children(".green-checkmark").fadeIn("slow").fadeOut("1000");$("#old_password, #new_password, #confirm_new_password").val("")});$("#update-user-info, #update-notifications, #update-password, .unblock-user").live("ajax:error",function(f,g,e){$(this).children(".button-area").children(".ajax-animation").hide();brevidy.handle_ajax_error("user",g)});$(".unblock-user").live("ajax:success",function(g,f,e){$(this).parent().slideUp("fast",function(){$(this).remove()})});$(".set-new-background-image").live("ajax:success",function(g,f,e){if(f.background_image_id==0){$("body").removeClass("dark").addClass("light")}else{if(f.background_image_id==1){$("body").removeClass("light").addClass("dark")}}});$(".set-new-background-image").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("background image",g)});$(".set-new-banner-image").live("ajax:success",function(g,f,e){$(".top-banner img").attr("src",f.image_path);$.smoothScroll({scrollTarget:"#top",speed:1000})});$(".set-new-banner-image").live("ajax:error",function(f,g,e){brevidy.handle_ajax_error("banner image",g)})}); \ No newline at end of file diff --git a/public/javascripts/jquery-1.7.1.min.js b/public/javascripts/jquery-1.7.1.min.js new file mode 100755 index 0000000..198b3ff --- /dev/null +++ b/public/javascripts/jquery-1.7.1.min.js @@ -0,0 +1,4 @@ +/*! jQuery v1.7.1 jquery.com | jquery.org/license */ +(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"":"")+""),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;gt |