Commit 645af373 authored by danielgrippi's avatar danielgrippi

more touchup; added placeholder for reaction tabs on post show; added more...

more touchup; added placeholder for reaction tabs on post show; added more mobile boilerplate / compatability; apple splash page asset
parent 9e3ff733
......@@ -12,13 +12,30 @@
%meta{:name => "author", :content => "Diaspora, Inc."}
%meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
%meta{:name =>'viewport', :content => "width=device-width, minimum-scale=1, maximum-scale=1"}
/ Viewport scale
%meta{:name =>'viewport', :content => "width=device-width, initial-scale=1"}
%meta{:name => "HandheldFriendly", :content => "True"}
%meta{:name => "MobileOptimized", :content => "320"}
/ Force cleartype on WP7
%meta{'http-equiv' => "cleartype", :content => 'on'}
/ Home screen icon (sized for retina displays)
%link{:rel => 'apple-touch-icon', :href => '/apple-touch-icon.png'}
/ For Nokia devices
%link{:rel => 'shortcut icon', :href => '/apple-touch-icon.png'}
/ iOS mobile web app indicator
/%meta{:name => "apple-mobile-web-app-capable", :content => "yes"}
/%link{:rel => "apple-touch-startup-image", :href => "/images/apple-splash.png"}
/ Stylesheets
= include_stylesheets :mobile
%script{:src => "javascripts/vendor/mbp-modernizr-custom.js"}
/ Media Queries Polyfill https://github.com/shichuan/mobile-html5-boilerplate/wiki/Media-Queries-Polyfill
:javascript
Modernizr.mq('(min-width:0)') || document.write('<script src="javascripts/vendor/mbp-respond.min.js">\x3C/script>')
= csrf_meta_tag
- if rtl?
......@@ -35,15 +52,18 @@
- flash.each do |name, msg|
= content_tag :div, msg, :id => "flash_#{name}"
= yield
#main{:role => "main"}
= yield
/= render :partial =>'shared/footer' if user_signed_in?
- if user_signed_in?
= render :partial =>'shared/footer'
/ javascripts at the bottom
= include_javascripts :mobile
-if current_user
:javascript
Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
/-if current_user
/ :javascript
/ Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
-if AppConfig[:google_a_site]
:javascript
......@@ -56,7 +76,6 @@
:javascript
var pkBaseURL = (("https:" == document.location.protocol) ? "https://#{AppConfig[:piwik_url]}/" : "http://#{AppConfig[:piwik_url]}/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
:javascript
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", #{AppConfig[:piwik_id]});
piwikTracker.trackPageView();
......
......@@ -8,12 +8,10 @@
#author_info.profile
= person_image_tag @person, :thumb_medium
.content
%h2
= @person.name
- if user_signed_in? && current_user.person == @person
= link_to t('people.profile_sidebar.edit_my_profile'), edit_profile_path, :class => 'button creation'
%h2
= @person.name
- if user_signed_in? && current_user.person == @person
= link_to t('people.profile_sidebar.edit_my_profile'), edit_profile_path, :class => 'button creation'
- if user_signed_in? && !(@contact.persisted? || current_user.person == @person)
- if @incoming_request
......
......@@ -3,7 +3,8 @@
-# the COPYRIGHT file.
= render :partial => 'shared/stream_element',
:locals => {:post => @post, :commenting_disabled => defined?(@commenting_disabled)}
:locals => {:post => @post, :commenting_disabled => defined?(@commenting_disabled),
:expanded_info => true}
.stream.show{:data=>{:guid=>@post.id}}
= render "comments/comments", :post => @post, :comments => @post.comments, :comments_expanded => true
%footer
= link_to t('.logged_in_as', :name => current_user.name), current_user.person
= link_to current_user.name, current_user.person
= link_to t('layouts.application.toggle'), toggle_mobile_path
= link_to t('layouts.header.logout'), destroy_user_session_path
......@@ -8,15 +8,14 @@
- if post.is_a?(StatusMessage) && post.photos.size > 0
- photos = post.photos
.photo_attachments
.big_stream_photo
= link_to (image_tag photos.first.url(:thumb_large), :class => "stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link"
- if photos.size > 1
- if photos.size >= 8
- for photo in photos[1..8]
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
- else
- for photo in photos[1..photos.size]
= link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
= link_to (image_tag photos.first.url(:thumb_large), :class => "stream-photo big-stream-photo", 'data-small-photo' => photos.first.url(:thumb_medium), 'data-full-photo' => photos.first.url), photo_path(photos.first), :class => "stream-photo-link"
/- if photos.size > 1
/ - if photos.size >= 8
/ - for photo in photos[1..8]
/ = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
/ - else
/ - for photo in photos[1..photos.size]
/ = link_to (image_tag photo.url(:thumb_small), :class => 'stream-photo thumb_small', 'data-small-photo' => photo.url(:thumb_medium), 'data-full-photo' => photo.url), photo_path(photo), :class => 'stream-photo-link'
- elsif post.activity_streams?
= image_tag post.image_url
......@@ -38,14 +37,31 @@
= render 'status_messages/status_message', :post => post, :photos => post.photos
.bottom_bar
.floater
/= link_to "reshare"
= link_to '', post_path(post), :class => "image_link comment_action"
- if defined?(expanded_info) && expanded_info
#bottom_bar_tabs
.comment_count.tab
= post.comments.size
= link_to '', post_path(post), :class => "image_link comment_action"
.like_count.tab
= post.likes.size
- if current_user.liked?(post)
= link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
- else
= link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
.reshare_count.tab
= post.comments.size
= link_to '', post_path(post), :class => "image_link comment_action"
- else
.floater
= link_to '', post_path(post), :class => "image_link comment_action"
- if current_user.liked?(post)
= link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
- else
= link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
- if current_user.liked?(post)
= link_to '', '#', :class => "image_link like_action active", 'data-post-id' => post.id, 'data-like-id' => current_user.like_for(post).id
- else
= link_to '', '#', :class => "image_link like_action inactive", 'data-post-id' => post.id
= link_to "#{t('reactions', :count => (post.comments.length + post.likes_count))}", post_path(post), :class => 'comment_link'
= link_to "#{t('reactions', :count => (post.comments.length + post.likes_count))}", post_path(post), :class => 'comment_link'
......@@ -43,13 +43,14 @@ javascripts:
- public/javascripts/login.js
mobile:
- public/javascripts/vendor/jquery162.min.js
- public/javascripts/custom-mobile-scripting.js
#- public/javascripts/custom-mobile-scripting.js
#- public/javascripts/vendor/jquery.mobile-1.0b2.min.js
#- public/javascripts/jquery.infinitescroll-custom.js
- public/javascripts/diaspora.js
- public/javascripts/helpers/i18n.js
#- public/javascripts/diaspora.js
#- public/javascripts/helpers/i18n.js
#- public/javascripts/widgets/infinite-scroll.js
#- public/javascripts/rails.js
- public/javascripts/vendor/mbp-helper.js
mailchimp:
- public/javascripts/vendor/mailchimp/jquery.form.js
......
......@@ -339,7 +339,7 @@ en:
application:
powered_by: "POWERED BY DIASPORA*"
whats_new: "what's new?"
toggle: "toggle mobile site"
toggle: "toggle mobile"
public_feed: "Public Diaspora Feed for %{name}"
your_aspects: "your aspects"
......
/*
* MBP - Mobile boilerplate helper functions
*/
(function(document){
window.MBP = window.MBP || {};
// Fix for iPhone viewport scale bug
// http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/
MBP.viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]');
MBP.ua = navigator.userAgent;
MBP.scaleFix = function () {
if (MBP.viewportmeta && /iPhone|iPad/.test(MBP.ua) && !/Opera Mini/.test(MBP.ua)) {
MBP.viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
document.addEventListener("gesturestart", MBP.gestureStart, false);
}
};
MBP.gestureStart = function () {
MBP.viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
};
// Hide URL Bar for iOS and Android by Scott Jehl
// https://gist.github.com/1183357
MBP.hideUrlBar = function () {
var win = window,
doc = win.document;
// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash || !win.addEventListener ){
//scroll to 1
window.scrollTo( 0, 1 );
var scrollTop = 1,
//reset to 0 on bodyready, if needed
bodycheck = setInterval(function(){
if( doc.body ){
clearInterval( bodycheck );
scrollTop = "scrollTop" in doc.body ? doc.body.scrollTop : 1;
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}
}, 15 );
win.addEventListener( "load", function(){
setTimeout(function(){
//reset to hide addr bar at onload
win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
}, 0);
}, false );
}
};
// Fast Buttons - read wiki below before using
// https://github.com/shichuan/mobile-html5-boilerplate/wiki/JavaScript-Helper
MBP.fastButton = function (element, handler) {
this.element = element;
this.handler = handler;
if (element.addEventListener) {
element.addEventListener('touchstart', this, false);
element.addEventListener('click', this, false);
}
};
MBP.fastButton.prototype.handleEvent = function(event) {
switch (event.type) {
case 'touchstart': this.onTouchStart(event); break;
case 'touchmove': this.onTouchMove(event); break;
case 'touchend': this.onClick(event); break;
case 'click': this.onClick(event); break;
}
};
MBP.fastButton.prototype.onTouchStart = function(event) {
event.stopPropagation();
this.element.addEventListener('touchend', this, false);
document.body.addEventListener('touchmove', this, false);
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
this.element.style.backgroundColor = "rgba(0,0,0,.7)";
};
MBP.fastButton.prototype.onTouchMove = function(event) {
if(Math.abs(event.touches[0].clientX - this.startX) > 10 ||
Math.abs(event.touches[0].clientY - this.startY) > 10 ) {
this.reset();
}
};
MBP.fastButton.prototype.onClick = function(event) {
event.stopPropagation();
this.reset();
this.handler(event);
if(event.type == 'touchend') {
MBP.preventGhostClick(this.startX, this.startY);
}
this.element.style.backgroundColor = "";
};
MBP.fastButton.prototype.reset = function() {
this.element.removeEventListener('touchend', this, false);
document.body.removeEventListener('touchmove', this, false);
this.element.style.backgroundColor = "";
};
MBP.preventGhostClick = function (x, y) {
MBP.coords.push(x, y);
window.setTimeout(function (){
MBP.coords.splice(0, 2);
}, 2500);
};
MBP.ghostClickHandler = function (event) {
for(var i = 0, len = MBP.coords.length; i < len; i += 2) {
var x = MBP.coords[i];
var y = MBP.coords[i + 1];
if(Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
event.stopPropagation();
event.preventDefault();
}
}
};
if (document.addEventListener) {
document.addEventListener('click', MBP.ghostClickHandler, true);
}
MBP.coords = [];
// iOS Startup Image
// https://github.com/shichuan/mobile-html5-boilerplate/issues#issue/2
MBP.splash = function () {
var filename = navigator.platform === 'iPad' ? 'h/' : 'l/';
document.write('<link rel="apple-touch-startup-image" href="/img/' + filename + 'splash.png" />' );
};
// Autogrow
// http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html
MBP.autogrow = function (element, lh) {
function handler(e){
var newHeight = this.scrollHeight,
currentHeight = this.clientHeight;
if (newHeight > currentHeight) {
this.style.height = newHeight + 3 * textLineHeight + "px";
}
}
var setLineHeight = (lh) ? lh : 12,
textLineHeight = element.currentStyle ? element.currentStyle.lineHeight :
getComputedStyle(element, null).lineHeight;
textLineHeight = (textLineHeight.indexOf("px") == -1) ? setLineHeight :
parseInt(textLineHeight, 10);
element.style.overflow = "hidden";
element.addEventListener ? element.addEventListener('keyup', handler, false) :
element.attachEvent('onkeyup', handler);
};
})(document);
This diff is collapsed.
/*
* respond.js - A small and fast polyfill for min/max-width CSS3 Media Queries
* Copyright 2011, Scott Jehl, scottjehl.com
* Dual licensed under the MIT or GPL Version 2 licenses.
* Usage: Check out the readme file or github.com/scottjehl/respond
*/
(function(e,h){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=h;if(h){return}var u=e.document,r=u.documentElement,i=[],k=[],p=[],o={},g=30,f=u.getElementsByTagName("head")[0]||r,b=f.getElementsByTagName("link"),d=[],a=function(){var B=b,w=B.length;for(var z=0;z<w;z++){var y=B[z],x=y.href,A=y.media,v=y.rel&&y.rel.toLowerCase()==="stylesheet";if(!!x&&v&&!o[x]){if(!/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test(x)||x.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:x,media:A})}else{o[x]=true}}}t()},t=function(){if(d.length){var v=d.shift();n(v.href,function(w){m(w,v.href,v.media);o[v.href]=true;t()})}},m=function(G,v,x){var E=G.match(/@media ([^\{]+)\{([\S\s]+?)(?=\}[\s]*\/\*\/mediaquery\*\/)/gmi),H=E&&E.length||0,v=v.substring(0,v.lastIndexOf("/")),w=function(I){return I.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+v+"$2$3")},y=!H&&x;if(v.length){v+="/"}if(y){H=1}for(var B=0;B<H;B++){var C;if(y){C=x;k.push(w(G))}else{C=E[B].match(/@media ([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&w(RegExp.$2))}var z=C.split(","),F=z.length;for(var A=0;A<F;A++){var D=z[A];i.push({media:D.match(/(only\s+)?([a-zA-Z]+)(\sand)?/)&&RegExp.$2,rules:k.length-1,minw:D.match(/\(min\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1),maxw:D.match(/\(max\-width:[\s]*([\s]*[0-9]+)px[\s]*\)/)&&parseFloat(RegExp.$1)})}}j()},l,q,j=function(E){var v="clientWidth",x=r[v],D=u.compatMode==="CSS1Compat"&&x||u.body[v]||x,z={},C=u.createDocumentFragment(),B=b[b.length-1],w=(new Date()).getTime();if(E&&l&&w-l<g){clearTimeout(q);q=setTimeout(j,g);return}else{l=w}for(var y in i){var F=i[y];if(!F.minw&&!F.maxw||(!F.minw||F.minw&&D>=F.minw)&&(!F.maxw||F.maxw&&D<=F.maxw)){if(!z[F.media]){z[F.media]=[]}z[F.media].push(k[F.rules])}}for(var y in p){if(p[y]&&p[y].parentNode===f){f.removeChild(p[y])}}for(var y in z){var G=u.createElement("style"),A=z[y].join("\n");G.type="text/css";G.media=y;if(G.styleSheet){G.styleSheet.cssText=A}else{G.appendChild(u.createTextNode(A))}C.appendChild(G);p.push(G)}f.insertBefore(C,B.nextSibling)},n=function(v,x){var w=c();if(!w){return}w.open("GET",v,true);w.onreadystatechange=function(){if(w.readyState!=4||w.status!=200&&w.status!=304){return}x(w.responseText)};if(w.readyState==4){return}w.send()},c=(function(){var v=false,w=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml3.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new XMLHttpRequest()}],y=w.length;while(y--){try{v=w[y]()}catch(x){continue}break}return function(){return v}})();a();respond.update=a;function s(){j(true)}if(e.addEventListener){e.addEventListener("resize",s,false)}else{if(e.attachEvent){e.attachEvent("onresize",s)}}})(this,(function(f){if(f.matchMedia){return true}var e,i=document,c=i.documentElement,g=c.firstElementChild||c.firstChild,h=!i.body,d=i.body||i.createElement("body"),b=i.createElement("div"),a="only all";b.id="mq-test-1";b.style.cssText="position:absolute;top:-99em";d.appendChild(b);b.innerHTML='_<style media="'+a+'"> #mq-test-1 { width: 9px; }</style>';if(h){c.insertBefore(d,g)}b.removeChild(b.firstChild);e=b.offsetWidth==9;if(h){c.removeChild(d)}else{d.removeChild(b)}return e})(this));
\ No newline at end of file
......@@ -171,18 +171,28 @@ body {
top: -2px; }; }
#author_info.profile {
box-shadow: inset 0 -1px 3px #111;
h2 {
color: #ccc;
}
background: {
color: #eeeeee; };
color: #333; };
border: {
bottom: 1px solid black; };
height: 90px;
padding: 6px;
padding: 10px;
margin: {
bottom: 6px; };
img {
float: left;
height: 90px;
width: 90px; }
width: 90px;
margin: {
right: 10px;
}
}
.content {
padding: {
left: 100px; }; }
......@@ -197,28 +207,26 @@ body {
header {
@include linear-gradient(#444444, black);
padding: 12px 5px;
@include box-shadow(0,1px,1px,rgba(0,0,0,0.7));
border: {
bottom: 1px solid #444444; };
bottom: 1px solid #222;
}
padding: 12px 5px;
.right {
float: right; } }
footer {
background: {
color: #cccccc; };
font-size: larger;
text-align: center;
a,
a:visited {
color: #999;
}
padding: {
bottom: 10px;
}
}
.notification_day_header {
padding: 6px;
background: {
color: #eeeeee; };
border: {
top: 1px solid #dddddd;
bottom: 1px solid #cccccc; };
font: {
weight: bold; };
color: #666666; }
.bottom_bar {
@include border-radius(0, 0, 3px, 3px);
display: block;
......@@ -233,14 +241,41 @@ footer {
size: larger; };
a {
color: #999999 !important;
font-weight: bold !important; } }
font-weight: bold !important; }
#bottom_bar_tabs {
display: table;
width: 100%;
text: {
align: center;
}
font: {
size: 28px;
}
color: #ccc;
.tab {
display: table-cell;
border: {
right: 1px solid #ccc;
}
&:last-child {
border: none;
}
}
}
}
.floater {
float: right; }
.stream_element .photo_attachments {
img {
@include border-radius(3px, 3px, 0, 0); }
img.big-stream-photo {
@include border-radius(3px, 3px, 0, 0);
width: 100%;
}
a {
padding: 0; }
margin-top: 0; }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment