Skip to content
Extraits de code Groupes Projets
Valider f23d1992 rédigé par danielvincent's avatar danielvincent
Parcourir les fichiers

added slider to getting started flow

parent b52afdd9
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
app/views/layouts/application.html.haml
+ 1
− 0
Voir le fichier @ f23d1992
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
= javascript_include_tag 'fileuploader' = javascript_include_tag 'fileuploader'
= javascript_include_tag 'view', 'image_picker', 'stream' = javascript_include_tag 'view', 'image_picker', 'stream'
= javascript_include_tag 'easySlider1.7'
= render 'js/websocket_js' = render 'js/websocket_js'
......
app/views/users/getting_started.html.haml
+ 81
− 81
Voir le fichier @ f23d1992
...@@ -10,84 +10,84 @@ ...@@ -10,84 +10,84 @@
.description .description
Do the stuff below to further complete some things. Do the stuff below to further complete some things.
%h2 #slider
%u %ul
Edit your profile %li
➔ %h2
Define your aspects ➔ %u
Find your friends Edit your profile
➔
Define your aspects ➔
%h3 Find your friends
Your Profile
.description
This info will be available to whomever you connect with on Diaspora. %h3
Your Profile
%h4 .description
Your name This info will be available to whomever you connect with on Diaspora.
= text_field_tag :first_name, nil, :placeholder => "First name"
= text_field_tag :last_name, nil, :placeholder => "Last name" %h4
Your name
%h4 = text_field_tag :first_name, nil, :placeholder => "First name"
Your birthday = text_field_tag :last_name, nil, :placeholder => "Last name"
%br
= select_date %h4
Your birthday
%h4 %br
Your bio = select_date
= text_area_tag :bio, nil, :placeholder => "Fill me out"
%h4
%h4 Your bio
Your photo = text_area_tag :bio, nil, :placeholder => "Fill me out"
%br
= file_field_tag :photo %h4
Your photo
%br
%br = file_field_tag :photo
%br
%br
%h2 %li
Edit your profile ➔ %h2
%u Edit your profile ➔
Define your aspects %u
➔ Define your aspects
Find your friends ➔
Find your friends
%h3
Your aspects %h3
.description Your aspects
These will be blah blah blah blah and some stuff. .description
These will be blah blah blah blah and some stuff.
%h4
Aspect name %h4
= text_field_tag :aspect_name, nil, :placeholder => "New aspect" Aspect name
= text_field_tag :aspect_name, nil, :placeholder => "New aspect"
%br
%br
%br %li
%h2 %h2
Edit your profile ➔ Edit your profile ➔
Define your aspects ➔ Define your aspects ➔
%u %u
Find your friends Find your friends
%h3 %h3
Your friends Your friends
.description .description
Find your friends on Diaspora, Facebook, or send them an invite via email. Find your friends on Diaspora, Facebook, or send them an invite via email.
.span-5 .span-5
%h4 %h4
On Diaspora On Diaspora
= text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle" = text_field_tag :diaspora_handle, nil, :placeholder => "Diaspora handle"
.span-5 .span-5
%h4 %h4
On Facebook On Facebook
= text_field_tag :facebook_handle, nil, :placeholder => "Name" = text_field_tag :facebook_handle, nil, :placeholder => "Name"
.span-5 .span-5
%h4 %h4
Invite Invite
= text_field_tag :email, nil, :placeholder => "Email", :type => "email" = text_field_tag :email, nil, :placeholder => "Email", :type => "email"
public/javascripts/easySlider1.7.js 0 → 100644
+ 226
− 0
Voir le fichier @ f23d1992
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function($) {
$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow","hidden");
var ts = s-1;
var t = 0;
$("ul", obj).css('width',s*w);
if(options.continuous){
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width',(s+1)*w);
};
if(!options.vertical) $("li", obj).css('float','left');
if(options.controlsShow){
var html = options.controlsBefore;
if(options.numeric){
html += '<ol id="'+ options.numericId +'"></ol>';
} else {
if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
};
html += options.controlsAfter;
$(obj).after(html);
};
if(options.numeric){
for(var i=0;i<s;i++){
$(document.createElement("li"))
.attr('id',options.numericId + (i+1))
.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
.appendTo($("#"+ options.numericId))
.click(function(){
animate($("a",$(this)).attr('rel'),true);
});
};
} else {
$("a","#"+options.nextId).click(function(){
animate("next",true);
});
$("a","#"+options.prevId).click(function(){
animate("prev",true);
});
$("a","#"+options.firstId).click(function(){
animate("first",true);
});
$("a","#"+options.lastId).click(function(){
animate("last",true);
});
};
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust(){
if(t>ts) t=0;
if(t<0) t=ts;
if(!options.vertical) {
$("ul",obj).css("margin-left",(t*w*-1));
} else {
$("ul",obj).css("margin-left",(t*h*-1));
}
clickable = true;
if(options.numeric) setCurrent(t);
};
function animate(dir,clicked){
if (clickable){
clickable = false;
var ot = t;
switch(dir){
case "next":
t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;
break;
case "prev":
t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot-t);
var speed = diff*options.speed;
if(!options.vertical) {
p = (t*w*-1);
$("ul",obj).animate(
{ marginLeft: p },
{ queue:false, duration:speed, complete:adjust }
);
} else {
p = (t*h*-1);
$("ul",obj).animate(
{ marginTop: p },
{ queue:false, duration:speed, complete:adjust }
);
};
if(!options.continuous && options.controlsFade){
if(t==ts){
$("a","#"+options.nextId).hide();
$("a","#"+options.lastId).hide();
} else {
$("a","#"+options.nextId).show();
$("a","#"+options.lastId).show();
};
if(t==0){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
} else {
$("a","#"+options.prevId).show();
$("a","#"+options.firstId).show();
};
};
if(clicked) clearTimeout(timeout);
if(options.auto && dir=="next" && !clicked){;
timeout = setTimeout(function(){
animate("next",false);
},diff*options.speed+options.pause);
};
};
};
// init
var timeout;
if(options.auto){;
timeout = setTimeout(function(){
animate("next",false);
},options.pause);
};
if(options.numeric) setCurrent(0);
if(!options.continuous && options.controlsFade){
$("a","#"+options.prevId).hide();
$("a","#"+options.firstId).hide();
};
});
};
})(jQuery);
public/javascripts/view.js
+ 10
− 0
Voir le fichier @ f23d1992
...@@ -73,6 +73,9 @@ $(document).ready(function(){ ...@@ -73,6 +73,9 @@ $(document).ready(function(){
$(".reshare_box").hide(); $(".reshare_box").hide();
}; };
}); });
$("#slider").easySlider({speed:400, numeric:true});
$("img", "#left_pane").tipsy({live:true}); $("img", "#left_pane").tipsy({live:true});
$(".add_aspect_button", "#aspect_nav").tipsy({gravity:'w'}); $(".add_aspect_button", "#aspect_nav").tipsy({gravity:'w'});
...@@ -133,3 +136,10 @@ $(".make_profile_photo").live("click", function(){ ...@@ -133,3 +136,10 @@ $(".make_profile_photo").live("click", function(){
}); });
}); });
$(".getting_started_box").live("click",function(evt){
$(this).animate({
left: parseInt($(this).css('left'),30) == 0 ?
-$(this).outerWidth() :
0
},function(evt){ $(this).css('left', '1000px')});
});
public/stylesheets/sass/application.sass
+ 9
− 0
Voir le fichier @ f23d1992
...@@ -1243,3 +1243,12 @@ ul#breadcrumb ...@@ -1243,3 +1243,12 @@ ul#breadcrumb
&:last-child &:last-child
&:after &:after
:content '' :content ''
#slider ul, #slider li
:margin 0
:padding 0
:list-style none
#slider, #slider li
:width 1000px
:overflow hidden
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter