added html5 boilerplate meta tags to mobile; stripped functionality to add back
This commit is contained in:
danielgrippi
parent
78557c02e9
commit
8c586c4567
23 changed files with 1034 additions and 295 deletions
|
|
@ -21,6 +21,7 @@ class LikesController < ApplicationController
|
|||
format.js { render 'likes/update', :status => 201 }
|
||||
format.html { render :nothing => true, :status => 201 }
|
||||
format.mobile { redirect_to post_path(@like.post_id) }
|
||||
format.json { render :nothing => true, :status => 201 }
|
||||
end
|
||||
else
|
||||
render :nothing => true, :status => 422
|
||||
|
|
@ -34,13 +35,15 @@ class LikesController < ApplicationController
|
|||
if @like = Like.where(:id => params[:id], :author_id => current_user.person.id).first
|
||||
current_user.retract(@like)
|
||||
respond_to do |format|
|
||||
format.all { }
|
||||
format.any { }
|
||||
format.js { render 'likes/update' }
|
||||
format.json { render :nothing => true, :status => :ok}
|
||||
end
|
||||
else
|
||||
respond_to do |format|
|
||||
format.mobile { redirect_to :back }
|
||||
format.js { render :nothing => true, :status => 403 }
|
||||
format.json { render :nothing => true, :status => 403}
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -11,18 +11,21 @@ class StatusMessagesController < ApplicationController
|
|||
# Called when a user clicks "Mention" on a profile page
|
||||
# @option [Integer] person_id The id of the person to be mentioned
|
||||
def new
|
||||
@person = Person.find(params[:person_id])
|
||||
@aspect = :profile
|
||||
@contact = current_user.contact_for(@person)
|
||||
@aspects_with_person = []
|
||||
if @contact
|
||||
@aspects_with_person = @contact.aspects
|
||||
@aspect_ids = @aspects_with_person.map(&:id)
|
||||
@contacts_of_contact = @contact.contacts
|
||||
if params[:person_id] && @person = Person.where(params[:person_id]).first
|
||||
@aspect = :profile
|
||||
@contact = current_user.contact_for(@person)
|
||||
@aspects_with_person = []
|
||||
if @contact
|
||||
@aspects_with_person = @contact.aspects
|
||||
@aspect_ids = @aspects_with_person.map(&:id)
|
||||
@contacts_of_contact = @contact.contacts
|
||||
|
||||
render :layout => nil
|
||||
render :layout => nil
|
||||
end
|
||||
else
|
||||
redirect_to :back
|
||||
@aspect = :all
|
||||
@aspects = current_user.aspects
|
||||
@aspect_ids = @aspects.map{ |a| a.id }
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -2,19 +2,18 @@
|
|||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
#aspect_header
|
||||
%h2
|
||||
- if @stream.for_all_aspects?
|
||||
= t('all_aspects')
|
||||
- else
|
||||
= @stream.aspect
|
||||
= link_to t('.post_a_message'), '#publisher_page', :id => 'publisher_button'
|
||||
|
||||
= link_to 'Post', new_status_message_path, :id => 'publisher_button'
|
||||
|
||||
#main_stream.stream
|
||||
= render 'shared/stream', :posts => @stream.posts
|
||||
-if @stream.posts.length > 0
|
||||
#pagination
|
||||
%a.more-link.paginate{:href => next_page_path}
|
||||
%h2= t("more")
|
||||
- content_for :subpages do
|
||||
= render 'shared/publisher', :aspect_ids => @stream.aspect_ids, :selected_aspects => @stream.aspects, :aspect => @stream.aspect
|
||||
%h1
|
||||
= t("more")
|
||||
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@
|
|||
|
||||
%li.comment{:data=>{:guid=>comment.id}, :class => ("hidden" if(defined? hidden))}
|
||||
.right
|
||||
%span.time
|
||||
= comment.created_at ? time_ago_in_words(comment.created_at) : time_ago_in_words(Time.now)
|
||||
-#.controls
|
||||
-#= link_to image_tag('deletelabel.png'), comment, :confirm => t('are_you_sure'), :method => :delete, :class => "delete comment_delete", :title => t('delete')
|
||||
|
||||
|
||||
= person_image_link(comment.author)
|
||||
.content
|
||||
.from
|
||||
= person_image_link(comment.author)
|
||||
= person_link(comment.author)
|
||||
%div{ :class => direction_for(comment.text) }
|
||||
.info
|
||||
%span.time.timeago{:datetime => comment.created_at}
|
||||
= comment.created_at ? time_ago_in_words(comment.created_at) : time_ago_in_words(Time.now)
|
||||
|
||||
%div{:class => direction_for(comment.text)}
|
||||
= markdownify(comment, :youtube_maps => comment[:youtube_titles])
|
||||
|
||||
|
|
|
|||
|
|
@ -9,16 +9,19 @@
|
|||
DIASPORA*
|
||||
|
||||
%meta{"http-equiv"=>"Content-Type", :content=>"text/html; charset=utf-8"}/
|
||||
= include_javascripts :mobile
|
||||
%meta{'name' =>'viewport', 'content' => "width=device-width, minimum-scale=1, maximum-scale=1"}
|
||||
%meta{:name =>'viewport', :content => "width=device-width, minimum-scale=1, maximum-scale=1"}
|
||||
%meta{:name => "HandheldFriendly", :content => "True"}
|
||||
%meta{:name => "MobileOptimized", :content => "320"}
|
||||
%meta{'http-equiv' => "cleartype", :content => 'on'}
|
||||
|
||||
= include_javascripts :mobile
|
||||
-if current_user
|
||||
:javascript
|
||||
Diaspora.I18n.loadLocale(#{get_javascript_strings_for(current_user.language).to_json}, "#{current_user.language}");
|
||||
|
||||
=include_stylesheets :mobile
|
||||
= csrf_meta_tag
|
||||
|
||||
|
||||
- if rtl?
|
||||
= include_stylesheets :rtl, :media => 'all'
|
||||
|
||||
|
|
@ -26,15 +29,10 @@
|
|||
|
||||
-if AppConfig[:google_a_site]
|
||||
:javascript
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', '#{AppConfig[:google_a_site]}']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
var _gaq=[["_setAccount","#{AppConfig[:google_a_site]}"],["_trackPageview"]];
|
||||
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
|
||||
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
|
||||
s.parentNode.insertBefore(g,s)}(document,"script"));
|
||||
|
||||
-if AppConfig[:piwik_id]
|
||||
:javascript
|
||||
|
|
@ -49,64 +47,18 @@
|
|||
|
||||
|
||||
%body
|
||||
#content{:data => {:role => 'page', :theme => 'c'}}
|
||||
#header
|
||||
- if current_user
|
||||
.right
|
||||
= link_to(image_tag('icons/list_white.png'), '#menu', :id => "menu_button")
|
||||
= link_to(image_tag('icons/search_white.png'), people_path)
|
||||
= link_to(image_tag('white@2x.png', :height => 22, :width => 136, :id => 'header_title'), aspects_path)
|
||||
%header
|
||||
/- if current_user
|
||||
/ /= link_to(image_tag('icons/list_white.png'), '#menu', :id => "menu_button")
|
||||
/ /= link_to(image_tag('icons/search_white.png'), people_path, :class => "right")
|
||||
= link_to(image_tag('white@2x.png', :height => 22, :width => 136, :id => 'header_title'), aspects_path)
|
||||
|
||||
- if flash.present?
|
||||
%p
|
||||
- flash.each do |name, msg|
|
||||
= content_tag :div, msg, :id => "flash_#{name}"
|
||||
|
||||
= yield
|
||||
= yield
|
||||
|
||||
= render :partial =>'shared/footer' if user_signed_in?
|
||||
|
||||
-if current_user
|
||||
#menu{:data => {:role => 'page', :theme => 'c'}}
|
||||
#header
|
||||
.right
|
||||
= link_to(image_tag('icons/search_white.png'), people_path)
|
||||
= link_to(image_tag('white.png'), aspects_path)
|
||||
|
||||
#content{:data => {:role => 'content'}}
|
||||
|
||||
%h2
|
||||
= current_user.name
|
||||
|
||||
%ul{:data => {:role => 'listview', :inset => 'true'}}
|
||||
%li
|
||||
= link_to t('notifications.index.notifications'), notifications_path
|
||||
.ui-li-count
|
||||
= @notification_count
|
||||
%li
|
||||
= link_to t('conversations.index.message_inbox'), conversations_path
|
||||
.ui-li-count
|
||||
= @unread_message_count
|
||||
|
||||
|
||||
|
||||
- if AppConfig[:open_invitations]
|
||||
%h4
|
||||
= t('shared.invitations.invite_your_friends')
|
||||
%ul{:data => {:role => 'listview', :inset => 'true'}}
|
||||
%li
|
||||
= link_to t('.by_email'), new_user_invitation_path
|
||||
|
||||
%h4
|
||||
= t('.your_aspects')
|
||||
|
||||
%ul{:data => {:role => 'listview', :inset => 'true'}}
|
||||
%li
|
||||
= link_to t('all_aspects'), aspects_path
|
||||
- for aspect in all_aspects
|
||||
%li
|
||||
= link_to aspect, aspects_path('a_ids[]' => aspect.id)
|
||||
|
||||
|
||||
= render :partial =>'shared/footer'
|
||||
|
||||
= yield :subpages
|
||||
/= render :partial =>'shared/footer' if user_signed_in?
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
= person_image_tag @person, :thumb_medium
|
||||
|
||||
.content
|
||||
%h3
|
||||
%h2
|
||||
= @person.name
|
||||
.description
|
||||
= @person.diaspora_handle
|
||||
- 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
|
||||
|
|
|
|||
|
|
@ -2,30 +2,8 @@
|
|||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
#show_content{:data=>{:guid=>@post.id}}
|
||||
= render 'shared/author_info', :person => @post.author, :post => @post
|
||||
|
||||
- if @post.activity_streams?
|
||||
= image_tag @post.image_url
|
||||
- elsif reshare?(@post)
|
||||
= render 'reshares/reshare', :reshare => @post, :post => @post.root
|
||||
- else
|
||||
%p
|
||||
= markdownify(@post, :youtube_maps => @post[:youtube_titles])
|
||||
|
||||
- for photo in @post.photos
|
||||
= link_to (image_tag photo.url(:thumb_small), :class => 'thumb_small'), photo.url(:thumb_medium)
|
||||
|
||||
.info
|
||||
%span.time
|
||||
= t('ago', :time => time_ago_in_words(@post.created_at))
|
||||
|
||||
%br
|
||||
- if user_signed_in?
|
||||
- if current_user.owns? @post
|
||||
= link_to t('delete'), post_path(@post), :confirm => t('are_you_sure'), :method => :delete
|
||||
- else
|
||||
= link_to t('hide'), post_visibility_path(:id => "42", :post_id => @post.id), :confirm => t('are_you_sure'), :method => :put, :remote => true
|
||||
= render :partial => 'shared/stream_element',
|
||||
:locals => {:post => @post, :commenting_disabled => defined?(@commenting_disabled)}
|
||||
|
||||
.stream.show{:data=>{:guid=>@post.id}}
|
||||
= render "comments/comments", :post => @post, :comments => @post.comments, :comments_expanded => true
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
.content
|
||||
.from
|
||||
= person_link(post.author, :class => "hovercardable")
|
||||
|
||||
|
||||
- if post.activity_streams?
|
||||
= link_to image_tag(post.image_url, 'data-small-photo' => post.image_url, 'data-full-photo' => post.image_url, :class => 'stream-photo'), post.object_url, :class => "stream-photo-link"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,4 @@
|
|||
#footer{:data => {:role => 'footer'}}
|
||||
|
||||
.inset
|
||||
%b= t('.your_aspects')
|
||||
%div{:data => {:role => 'controlgroup', :type => 'horizontal'}}
|
||||
- for aspect in all_aspects
|
||||
= link_to aspect, aspects_path('a_ids[]' => aspect.id)
|
||||
|
|
||||
.ui-bar
|
||||
= link_to t('.logged_in_as', :name => 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
|
||||
%footer
|
||||
= link_to t('.logged_in_as', :name => 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
|
||||
|
|
|
|||
|
|
@ -2,52 +2,26 @@
|
|||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
:javascript
|
||||
$(document).ready(function(){
|
||||
$("#status_message_text").bind("focus", function(){
|
||||
$("#publisher fieldset:first").removeClass('hidden');
|
||||
});
|
||||
});
|
||||
= form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
|
||||
= status.text_area :text, :placeholder => t('.whats_on_your_mind'), :style => "width:300px", :rows => 4
|
||||
|
||||
#publisher_page{:data => {:role => 'page', :theme => 'c'}}
|
||||
#header
|
||||
- if current_user
|
||||
.left
|
||||
= link_to(image_tag('icons/list_white.png'), '/aspects/#menu', :id => "menu_button")
|
||||
- for aspect_id in aspect_ids
|
||||
= hidden_field_tag 'aspect_ids[]', aspect_id.to_s
|
||||
|
||||
.right
|
||||
= link_to(image_tag('icons/search_white.png'), people_path)
|
||||
= link_to(image_tag('white.png'), aspects_path)
|
||||
%div{:data => {:role => 'content'}}
|
||||
= form_for StatusMessage.new, {:data => {:ajax => false}} do |status|
|
||||
#publisher_text
|
||||
= t('.whats_on_your_mind')
|
||||
%fieldset
|
||||
- unless aspect == :all
|
||||
%input{:type => 'checkbox', :name => 'status_message[public]', :id => 'public', :class => 'custom', :value => 'true'}
|
||||
%label{:for => 'public'}
|
||||
= t('.make_public')
|
||||
- unless current_user.services.empty?
|
||||
%div{:data => {:role => 'fieldcontain'}}
|
||||
%label{:for => 'services', :class => 'select'}
|
||||
choose services
|
||||
|
||||
= status.text_area :text
|
||||
- current_user.services.each do |service|
|
||||
%input{:type => 'checkbox', :name => "services[]", :id => "#{service.provider}", :class => 'custom', :value => "#{service.provider}"}
|
||||
%label{:for => "#{service.provider}"}
|
||||
= "#{service.provider}"
|
||||
|
||||
- for aspect_id in aspect_ids
|
||||
= hidden_field_tag 'aspect_ids[]', aspect_id.to_s
|
||||
|
||||
|
||||
%fieldset
|
||||
- unless aspect_ids
|
||||
%input{:type => 'checkbox', :name => 'status_message[public]', :id => 'public', :class => 'custom', :value => 'true'}
|
||||
%label{:for => 'public'}
|
||||
= t('.make_public')
|
||||
- unless current_user.services.empty?
|
||||
%div{:data => {:role => 'fieldcontain'}}
|
||||
%label{:for => 'services', :class => 'select'}
|
||||
choose services
|
||||
|
||||
- current_user.services.each do |service|
|
||||
%input{:type => 'checkbox', :name => "services[]", :id => "#{service.provider}", :class => 'custom', :value => "#{service.provider}"}
|
||||
%label{:for => "#{service.provider}"}
|
||||
= "#{service.provider}"
|
||||
-#%select{:name => 'services', :multiple => 'multiple', :id => "services"}
|
||||
-#%option
|
||||
-#Choose a Service
|
||||
-#- current_user.services.each do |service|
|
||||
-#%option{:value => "#{service.provider}"}
|
||||
-#= service.provider.titleize
|
||||
= status.submit t('.share'), 'data-theme' => 'c'
|
||||
= status.submit t('.share')
|
||||
|
||||
|
|
|
|||
|
|
@ -3,27 +3,49 @@
|
|||
-# the COPYRIGHT file.
|
||||
|
||||
.stream_element{:data=>{:guid=>post.id}}
|
||||
= person_image_link(post.author, :size => :thumb_small)
|
||||
|
||||
.photo_area
|
||||
- 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'
|
||||
- elsif post.activity_streams?
|
||||
= image_tag post.image_url
|
||||
|
||||
|
||||
.content
|
||||
.from
|
||||
= person_image_link(post.author, :size => :thumb_small)
|
||||
= person_link(post.author)
|
||||
.info
|
||||
%span.time{:integer => post.created_at.to_i}
|
||||
= t('ago', :time => time_ago_in_words(post.created_at))
|
||||
%span.via
|
||||
- if post.activity_streams?
|
||||
= t('.via', :link => link_to("#{post.provider_display_name}", post.actor_url)).html_safe
|
||||
|
||||
- if post.activity_streams?
|
||||
= image_tag post.image_url
|
||||
- elsif reshare?(post)
|
||||
- if reshare?(post)
|
||||
= render 'reshares/reshare', :reshare => post, :post => post.root
|
||||
- else
|
||||
- elsif post.is_a?(StatusMessage)
|
||||
= render 'status_messages/status_message', :post => post, :photos => post.photos
|
||||
|
||||
.info
|
||||
%span.time{:integer => post.created_at.to_i}
|
||||
= t('ago', :time => time_ago_in_words(post.created_at))
|
||||
%span.via
|
||||
- if post.activity_streams?
|
||||
= t('.via', :link => link_to("#{post.provider_display_name}", post.actor_url)).html_safe
|
||||
.bottom_bar
|
||||
.floater
|
||||
/= link_to "reshare"
|
||||
= link_to '', post_path(post), :class => "image_link comment_action"
|
||||
|
||||
= link_to "#{t('comments', :count => post.comments.length)} →", post_path(post), :class => 'comment_link right'
|
||||
- if post.activity_streams?
|
||||
%br
|
||||
- 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('comments', :count => post.comments.length)}", post_path(post), :class => 'comment_link'
|
||||
|
||||
|
|
|
|||
19
app/views/status_messages/_status_message.html.haml
Normal file
19
app/views/status_messages/_status_message.html.haml
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
|
||||
- if photos.size > 0
|
||||
.photo_attachments
|
||||
.big_stream_photo
|
||||
= link_to (image_tag photos.first.url(:scaled_full), :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'
|
||||
|
||||
%div{:class => direction_for(post.text)}
|
||||
!= markdownify(post, :youtube_maps => post[:youtube_titles])
|
||||
7
app/views/status_messages/_status_message.mobile.haml
Normal file
7
app/views/status_messages/_status_message.mobile.haml
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
|
||||
%div{:class => direction_for(post.text)}
|
||||
!= markdownify(post, :youtube_maps => post[:youtube_titles])
|
||||
5
app/views/status_messages/new.mobile.haml
Normal file
5
app/views/status_messages/new.mobile.haml
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
-# Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
= render :partial => 'shared/publisher', :locals => {:aspect => @aspects.first, :for_all_aspects => true, :aspect_ids => @aspect_ids, :selected_aspects => @aspects}
|
||||
|
|
@ -44,12 +44,12 @@ javascripts:
|
|||
mobile:
|
||||
- public/javascripts/vendor/jquery162.min.js
|
||||
- public/javascripts/custom-mobile-scripting.js
|
||||
- public/javascripts/vendor/jquery.mobile-1.0b2.min.js
|
||||
- public/javascripts/jquery.infinitescroll-custom.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/widgets/infinite-scroll.js
|
||||
- public/javascripts/rails.js
|
||||
#- public/javascripts/widgets/infinite-scroll.js
|
||||
#- public/javascripts/rails.js
|
||||
|
||||
mailchimp:
|
||||
- public/javascripts/vendor/mailchimp/jquery.form.js
|
||||
|
|
@ -89,6 +89,7 @@ stylesheets:
|
|||
- public/stylesheets/rtl.css
|
||||
|
||||
mobile:
|
||||
- public/stylesheets/vendor/jquery.mobile-1.0b2.min.css
|
||||
#- public/stylesheets/vendor/jquery.mobile-1.0b2.min.css
|
||||
- public/stylesheets/vendor/html5-boilerplate-mobile.css
|
||||
- public/stylesheets/mobile.css
|
||||
|
||||
|
||||
|
|
|
|||
BIN
public/images/icons/comment_mobile_grey.png
Normal file
BIN
public/images/icons/comment_mobile_grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 B |
BIN
public/images/icons/heart_mobile_grey.png
Normal file
BIN
public/images/icons/heart_mobile_grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/images/icons/heart_mobile_red.png
Normal file
BIN
public/images/icons/heart_mobile_red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/images/icons/pencil_mobile_grey.png
Normal file
BIN
public/images/icons/pencil_mobile_grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -3,6 +3,7 @@
|
|||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
|
||||
$(document).bind("mobileinit", function() {
|
||||
$.extend($.mobile, {
|
||||
ajaxLinksEnabled: false,
|
||||
|
|
@ -12,3 +13,40 @@ $(document).bind("mobileinit", function() {
|
|||
});
|
||||
$.mobile.selectmenu.prototype.options.nativeMenu = false;
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$(".like_action.inactive").bind('tap', function(evt){
|
||||
evt.preventDefault();
|
||||
var target = $(this),
|
||||
postId = target.data('post-id');
|
||||
|
||||
$.ajax({
|
||||
url: '/posts/'+postId+'/likes.json',
|
||||
type: 'POST',
|
||||
complete: function(data){
|
||||
target.addClass('inactive')
|
||||
.removeClass('active')
|
||||
.data('post-id', postId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".like_action.active").bind('tap', function(evt){
|
||||
evt.preventDefault();
|
||||
var target = $(this),
|
||||
postId = $(this).data('post-id'),
|
||||
likeId = $(this).data('like-id');
|
||||
|
||||
|
||||
$.ajax({
|
||||
url: '/posts/'+postId+'/likes/'+likeId+'.json',
|
||||
type: 'DELETE',
|
||||
complete: function(data){
|
||||
target.addClass('inactive')
|
||||
.removeClass('active')
|
||||
.data('like-id', '');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@ a:not([role='button']):not(.arrow)
|
|||
:font
|
||||
:weight normal !important
|
||||
:-webkit-tap-highlight-color rgba(200, 200, 200, 1) !important
|
||||
a.ui-link-inherit
|
||||
:font
|
||||
:weight bold !important
|
||||
:color #000 !important
|
||||
|
||||
.ui-body-c a
|
||||
a
|
||||
:color #2489CE
|
||||
|
||||
body
|
||||
:background #555
|
||||
:max-width 100%
|
||||
|
||||
#landing_content
|
||||
:text-align center
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ a.ui-link-inherit
|
|||
.tapped
|
||||
:background
|
||||
:color rgba(100, 103, 103, .2)
|
||||
:border-radius 5px
|
||||
@include border-radius(3px)
|
||||
a
|
||||
:padding 2px
|
||||
.alpha-warning
|
||||
|
|
@ -73,14 +73,12 @@ a
|
|||
.message
|
||||
:padding
|
||||
:left 2px
|
||||
|
||||
.stream_element,
|
||||
.comment
|
||||
.comments
|
||||
:overflow auto
|
||||
:position relative
|
||||
|
||||
:background
|
||||
:color #fff
|
||||
|
||||
*
|
||||
:max-width 100%
|
||||
|
||||
|
|
@ -88,33 +86,31 @@ a
|
|||
|
||||
.avatar
|
||||
:float left
|
||||
:height 48px
|
||||
:width 48px
|
||||
:height 35px
|
||||
:width 35px
|
||||
:margin
|
||||
:right 10px
|
||||
|
||||
.from
|
||||
a
|
||||
:margin
|
||||
:left -2px
|
||||
:color #000 !important
|
||||
:color #aaa !important
|
||||
:font
|
||||
:weight bold !important
|
||||
|
||||
:margin-bottom 2px
|
||||
:height 45px
|
||||
|
||||
.content
|
||||
:padding
|
||||
:left 58px
|
||||
:padding 10px
|
||||
:bottom 0
|
||||
|
||||
:border
|
||||
:bottom 1px solid #eee
|
||||
|
||||
:padding 10px
|
||||
:padding 10px 0
|
||||
|
||||
.info
|
||||
:margin
|
||||
:top 0.5em
|
||||
:font
|
||||
:size smaller
|
||||
:top 0
|
||||
|
||||
.photo_attachments
|
||||
:margin
|
||||
|
|
@ -125,11 +121,56 @@ a
|
|||
:weight normal
|
||||
p
|
||||
:margin 0 auto
|
||||
:line-height 1.4em
|
||||
:font-size 14px
|
||||
:line-height 19px
|
||||
|
||||
.black
|
||||
:color #333
|
||||
|
||||
|
||||
:margin 10px
|
||||
:top 10px
|
||||
:bottom 0
|
||||
:padding 0 !important
|
||||
|
||||
.comments
|
||||
:color #ccc
|
||||
|
||||
.from
|
||||
a
|
||||
:color #888 !important
|
||||
|
||||
.new_comment
|
||||
:padding 10px
|
||||
|
||||
.comment
|
||||
:padding 4px 0
|
||||
:border
|
||||
:bottom 1px dotted #444
|
||||
|
||||
|
||||
.stream_element
|
||||
@include border-radius(3px)
|
||||
@include box-shadow(0,1px,5px,rgba(0,0,0,1))
|
||||
|
||||
:background
|
||||
:color #fff
|
||||
:border
|
||||
:top 1px solid #000
|
||||
:bottom 1px solid #000
|
||||
|
||||
|
||||
.photo_attachments
|
||||
:position relative
|
||||
:left 0
|
||||
:top 0
|
||||
:padding 0
|
||||
:margin 0
|
||||
|
||||
img
|
||||
:margin 0
|
||||
:padding 0
|
||||
|
||||
|
||||
.reshare
|
||||
.content
|
||||
:padding
|
||||
|
|
@ -142,23 +183,28 @@ a
|
|||
:font
|
||||
:size 0.8em
|
||||
|
||||
.comment
|
||||
:padding
|
||||
:top 12px
|
||||
:bottom 12px
|
||||
|
||||
#main_stream
|
||||
:font
|
||||
:size 0.95em
|
||||
|
||||
.stream_element.person
|
||||
.from
|
||||
:font
|
||||
:size larger
|
||||
.from
|
||||
:font
|
||||
:size larger
|
||||
|
||||
.more-link
|
||||
:line-height 4em
|
||||
:display block
|
||||
:text-align center
|
||||
:padding 0 10px
|
||||
:margin 0 10px
|
||||
:-webkit-box-shadow inset 0 1px 5px #111
|
||||
:border-radius 3px
|
||||
:background
|
||||
:color #333
|
||||
|
||||
h1
|
||||
:color #ccc
|
||||
:padding 20px
|
||||
:text-shadow 0 -2px 0 #000
|
||||
|
||||
.time, .via
|
||||
:color #ccc
|
||||
|
|
@ -168,9 +214,13 @@ a
|
|||
a
|
||||
:color #ccc
|
||||
|
||||
.comment
|
||||
.time
|
||||
:color #777
|
||||
|
||||
.info
|
||||
:font
|
||||
:size smaller
|
||||
:margin
|
||||
:top -2px
|
||||
|
||||
#show_content
|
||||
:padding 12px
|
||||
|
|
@ -216,34 +266,11 @@ ul
|
|||
:list
|
||||
:style none
|
||||
|
||||
#author_info.show
|
||||
:margin
|
||||
:bottom 24px
|
||||
a
|
||||
:color #000
|
||||
:font
|
||||
:weight bold !important
|
||||
|
||||
img
|
||||
:float left
|
||||
:height 36px
|
||||
:width 36px
|
||||
:margin
|
||||
:right 6px
|
||||
|
||||
:font
|
||||
:size smaller
|
||||
|
||||
.diaspora_handle
|
||||
:font
|
||||
:size 14px
|
||||
:color #999
|
||||
|
||||
#author_info.profile
|
||||
:background
|
||||
:color #eee
|
||||
:border
|
||||
:bottom 2px solid #ccc
|
||||
:bottom 1px solid #000
|
||||
:height 90px
|
||||
:padding 6px
|
||||
:margin
|
||||
|
|
@ -264,18 +291,6 @@ ul
|
|||
:size small
|
||||
:color #999
|
||||
|
||||
.comments
|
||||
:border
|
||||
:top 2px solid #D2DBE1
|
||||
:background
|
||||
:color #EDF5FB
|
||||
:font
|
||||
:size smaller
|
||||
|
||||
.comment
|
||||
:background
|
||||
:color #EDF5FB
|
||||
|
||||
.stream_marker
|
||||
:background
|
||||
:color #eee
|
||||
|
|
@ -304,18 +319,6 @@ ul
|
|||
:margin
|
||||
:bottom 12px
|
||||
|
||||
#publisher
|
||||
:text
|
||||
:align center
|
||||
|
||||
#publisher_text
|
||||
:text
|
||||
:align left
|
||||
:font
|
||||
:weight bold
|
||||
:margin
|
||||
:bottom 3px
|
||||
|
||||
#aspect_title
|
||||
:padding 0 6px
|
||||
:bottom 6px
|
||||
|
|
@ -324,22 +327,18 @@ ul
|
|||
:text
|
||||
:align left
|
||||
|
||||
#header
|
||||
@include linear-gradient(#222, #000)
|
||||
header
|
||||
@include linear-gradient(#444, #000)
|
||||
|
||||
:padding 12px 5px
|
||||
|
||||
:padding 11px 5px
|
||||
:bottom 7px
|
||||
:border
|
||||
:bottom 1px solid #444
|
||||
|
||||
.right
|
||||
:position absolute
|
||||
:top 0px
|
||||
:padding 6px
|
||||
:top 4px
|
||||
:right 0
|
||||
:float right
|
||||
|
||||
#footer
|
||||
footer
|
||||
:background
|
||||
:color #ccc
|
||||
.inset
|
||||
|
|
@ -356,13 +355,63 @@ ul
|
|||
:weight bold
|
||||
:color #666
|
||||
|
||||
#aspect_header
|
||||
:padding 4px 7px
|
||||
:bottom 7px
|
||||
.bottom_bar
|
||||
@include border-radius(0, 0, 3px, 3px)
|
||||
:display block
|
||||
:padding 10px
|
||||
:background #eee
|
||||
:margin
|
||||
:top 10px
|
||||
:border
|
||||
:top 1px solid #ddd
|
||||
:height 24px
|
||||
:font
|
||||
:weight bold
|
||||
:text
|
||||
:shadow none
|
||||
:size larger
|
||||
|
||||
img
|
||||
:height 24px
|
||||
|
||||
a
|
||||
:color #999 !important
|
||||
:font-weight bold !important
|
||||
|
||||
|
||||
.floater
|
||||
:float right
|
||||
|
||||
.stream_element .photo_attachments
|
||||
img
|
||||
@include border-radius(3px, 3px, 0, 0)
|
||||
a
|
||||
:padding 0
|
||||
:margin-top 0
|
||||
|
||||
.photo_area
|
||||
:text-align center
|
||||
|
||||
.image_link
|
||||
:display inline-block
|
||||
:background
|
||||
:color #eee
|
||||
:color #999
|
||||
:size 24px
|
||||
:repeat no-repeat
|
||||
:position center
|
||||
:height 16px
|
||||
:width 24px
|
||||
:padding 5px
|
||||
:margin
|
||||
:left 5px
|
||||
|
||||
.like_action
|
||||
:background-image url('/images/icons/heart_mobile_grey.png')
|
||||
.active
|
||||
:background-image url('/images/icons/heart_mobile_red.png')
|
||||
|
||||
.comment_action
|
||||
:background-image url('/images/icons/pencil_mobile_grey.png')
|
||||
|
||||
form
|
||||
:position relative
|
||||
textarea,
|
||||
input
|
||||
:font
|
||||
:size larger
|
||||
|
|
|
|||
382
public/stylesheets/sass/mobile.scss
Normal file
382
public/stylesheets/sass/mobile.scss
Normal file
|
|
@ -0,0 +1,382 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
@import "mixins";
|
||||
|
||||
$blue: #3f8fba;
|
||||
|
||||
a:not([role='button']):not(.arrow) {
|
||||
text: {
|
||||
decoration: none; };
|
||||
font: {
|
||||
weight: normal !important; };
|
||||
-webkit-tap-highlight-color: rgba(200, 200, 200, 1) !important; }
|
||||
|
||||
a {
|
||||
color: #2489ce;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #555555;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#landing_content {
|
||||
text-align: center;
|
||||
.info_pane {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
#login_form {
|
||||
padding: 15px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
#diaspora_description {
|
||||
background: {
|
||||
image: url("../images/ball_small.png");
|
||||
repeat: no-repeat;
|
||||
position: top center; };
|
||||
padding: {
|
||||
top: 195px; };
|
||||
margin: {
|
||||
top: -18px; };
|
||||
font: {
|
||||
size: 1.3em;
|
||||
weight: bold; };
|
||||
text-shadow: 0 1px 3px #999999;
|
||||
line-height: 1.5;
|
||||
p {
|
||||
padding: 12px;
|
||||
background: {
|
||||
color: white; };
|
||||
-webkit-box-shadow: 0 1px 3px #cccccc;
|
||||
-moz-box-shadow: 0 1px 3px #cccccc;
|
||||
box-shadow: 0 1px 3px #cccccc;
|
||||
}
|
||||
}
|
||||
|
||||
.login_form {
|
||||
@include mobile-box;
|
||||
padding: 10px;
|
||||
label {
|
||||
font-weight: bold; } }
|
||||
|
||||
.message {
|
||||
padding: {
|
||||
left: 2px; };
|
||||
}
|
||||
|
||||
.stream_element,
|
||||
.comments {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
* {
|
||||
max-width: 100%; }
|
||||
min-height: 34px;
|
||||
.avatar {
|
||||
float: left;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
margin: {
|
||||
right: 10px; }; }
|
||||
.from {
|
||||
a {
|
||||
margin: {
|
||||
left: -2px; };
|
||||
color: #aaaaaa !important;
|
||||
font: {
|
||||
weight: bold !important; }; }
|
||||
margin-bottom: 2px;
|
||||
height: 45px; }
|
||||
.content {
|
||||
padding: 10px {
|
||||
bottom: 0; }; }
|
||||
padding: 10px 0;
|
||||
.info {
|
||||
margin: {
|
||||
top: 0; }; }
|
||||
.photo_attachments {
|
||||
margin: {
|
||||
top: 6px; }; }
|
||||
.time {
|
||||
font: {
|
||||
weight: normal; }; }
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
line-height: 19px; }
|
||||
.black {
|
||||
color: #333333; }
|
||||
margin: 10px {
|
||||
top: 10px;
|
||||
bottom: 0; };
|
||||
padding: 0 !important; }
|
||||
|
||||
.comments {
|
||||
color: #cccccc;
|
||||
.from {
|
||||
a {
|
||||
color: #888888 !important; } } }
|
||||
|
||||
.new_comment {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.comment {
|
||||
padding: 4px 0;
|
||||
border: {
|
||||
bottom: 1px dotted #444444; };
|
||||
}
|
||||
|
||||
.stream_element {
|
||||
@include border-radius(3px);
|
||||
@include box-shadow(0, 1px, 5px, rgba(0, 0, 0, 1));
|
||||
background: {
|
||||
color: white; };
|
||||
border: {
|
||||
top: 1px solid black;
|
||||
bottom: 1px solid black; }; }
|
||||
|
||||
.photo_attachments {
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0; } }
|
||||
|
||||
.reshare {
|
||||
.content {
|
||||
padding: {
|
||||
left: 15px;
|
||||
top: 10px; };
|
||||
.from {
|
||||
font: {
|
||||
style: italic; }; } }
|
||||
.reshare_action {
|
||||
font: {
|
||||
size: 0.8em; }; } }
|
||||
|
||||
#main_stream {
|
||||
font: {
|
||||
size: 0.95em; }; }
|
||||
|
||||
.from {
|
||||
font: {
|
||||
size: larger; }; }
|
||||
|
||||
.more-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
-webkit-box-shadow: inset 0 1px 5px #111111;
|
||||
border-radius: 3px;
|
||||
background: {
|
||||
color: #333333; };
|
||||
h1 {
|
||||
color: #cccccc;
|
||||
padding: 20px;
|
||||
text-shadow: 0 -2px 0 black; } }
|
||||
|
||||
.time, .via {
|
||||
color: #cccccc;
|
||||
font: {
|
||||
size: smaller;
|
||||
weight: bold; };
|
||||
a {
|
||||
color: #cccccc; } }
|
||||
|
||||
.comment {
|
||||
.time {
|
||||
color: #777777; } }
|
||||
|
||||
.info {
|
||||
margin: {
|
||||
top: -2px; }; }
|
||||
|
||||
#show_content {
|
||||
padding: 12px {
|
||||
bottom: 24px; };
|
||||
border: {
|
||||
bottom: 1px solid #bbbbbb; };
|
||||
background: {
|
||||
color: white; };
|
||||
font: {
|
||||
size: larger; };
|
||||
img {
|
||||
max-width: 100%; }
|
||||
.photo {
|
||||
text-align: center; }
|
||||
.controls {
|
||||
font: {
|
||||
size: smaller; }; }
|
||||
&.photo {
|
||||
background: {
|
||||
color: black; }; } }
|
||||
|
||||
#photo_controls {
|
||||
margin: {
|
||||
bottom: -42px; }; }
|
||||
|
||||
.arrow {
|
||||
color: white !important;
|
||||
font: {
|
||||
size: 26pt; };
|
||||
text: {
|
||||
shadow: 0 1px 2px #333333;
|
||||
decoration: none; };
|
||||
padding: 0; }
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list: {
|
||||
style: none; }; }
|
||||
|
||||
#author_info.profile {
|
||||
background: {
|
||||
color: #eeeeee; };
|
||||
border: {
|
||||
bottom: 1px solid black; };
|
||||
height: 90px;
|
||||
padding: 6px;
|
||||
margin: {
|
||||
bottom: 6px; };
|
||||
img {
|
||||
float: left;
|
||||
height: 90px;
|
||||
width: 90px; }
|
||||
.content {
|
||||
padding: {
|
||||
left: 100px; }; }
|
||||
.description {
|
||||
font: {
|
||||
weight: normal;
|
||||
size: small; };
|
||||
color: #999999; } }
|
||||
|
||||
.stream_marker {
|
||||
background: {
|
||||
color: #eeeeee; };
|
||||
border: {
|
||||
bottom: 1px solid #aaaaaa;
|
||||
top: 1px solid #cccccc; };
|
||||
font: {
|
||||
weight: bold;
|
||||
size: smaller; };
|
||||
color: #666666;
|
||||
padding: 3px 6px; }
|
||||
|
||||
.right {
|
||||
float: right; }
|
||||
|
||||
.hidden {
|
||||
display: none; }
|
||||
|
||||
.grey_back {
|
||||
background: {
|
||||
color: #eeeeee; };
|
||||
border: {
|
||||
bottom: 1px solid #999999; };
|
||||
padding: 8px {
|
||||
top: 3px; };
|
||||
margin: {
|
||||
bottom: 12px; }; }
|
||||
|
||||
#aspect_title {
|
||||
padding: 0 6px {
|
||||
bottom: 6px; };
|
||||
font: {
|
||||
weight: bold; };
|
||||
text: {
|
||||
align: left; }; }
|
||||
|
||||
header {
|
||||
@include linear-gradient(#444444, black);
|
||||
padding: 12px 5px;
|
||||
border: {
|
||||
bottom: 1px solid #444444; };
|
||||
.right {
|
||||
float: right; } }
|
||||
|
||||
footer {
|
||||
background: {
|
||||
color: #cccccc; };
|
||||
.inset {
|
||||
padding: 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;
|
||||
padding: 10px;
|
||||
background: #eeeeee;
|
||||
margin: {
|
||||
top: 10px; };
|
||||
border: {
|
||||
top: 1px solid #dddddd; };
|
||||
height: 24px;
|
||||
font: {
|
||||
size: larger; };
|
||||
img {
|
||||
height: 24px; }
|
||||
a {
|
||||
color: #999999 !important;
|
||||
font-weight: bold !important; } }
|
||||
|
||||
.floater {
|
||||
float: right; }
|
||||
|
||||
.stream_element .photo_attachments {
|
||||
img {
|
||||
@include border-radius(3px, 3px, 0, 0); }
|
||||
a {
|
||||
padding: 0; }
|
||||
margin-top: 0; }
|
||||
|
||||
.photo_area {
|
||||
text-align: center; }
|
||||
|
||||
.image_link {
|
||||
display: inline-block;
|
||||
background: {
|
||||
size: 24px;
|
||||
repeat: no-repeat;
|
||||
position: center; };
|
||||
height: 16px;
|
||||
width: 24px;
|
||||
padding: 5px;
|
||||
margin: {
|
||||
left: 5px; }; }
|
||||
|
||||
.like_action {
|
||||
background-image: url("/images/icons/heart_mobile_grey.png");
|
||||
.active {
|
||||
background-image: url("/images/icons/heart_mobile_red.png"); } }
|
||||
|
||||
.comment_action {
|
||||
background-image: url("/images/icons/pencil_mobile_grey.png"); }
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
textarea,
|
||||
input {
|
||||
font: {
|
||||
size: larger; }; } }
|
||||
315
public/stylesheets/vendor/html5-boilerplate-mobile.css
vendored
Normal file
315
public/stylesheets/vendor/html5-boilerplate-mobile.css
vendored
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
/*
|
||||
* HTML5 ✰ Boilerplate
|
||||
*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*
|
||||
* Detailed information about this CSS: h5bp.com/css
|
||||
*
|
||||
* ==|== normalize ==========================================================
|
||||
*/
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
|
||||
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
|
||||
audio:not([controls]) { display: none; }
|
||||
[hidden] { display: none; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
|
||||
* 2. Force vertical scrollbar in non-IE
|
||||
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
|
||||
*/
|
||||
|
||||
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
|
||||
body { margin: 0; font-size: 13px; line-height: 1.231; }
|
||||
|
||||
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight: h5bp.com/i
|
||||
* These selection declarations have to be separate
|
||||
* Also: hot pink! (or customize the background color to match your design)
|
||||
*/
|
||||
|
||||
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
a { color: #00e; }
|
||||
a:visited { color: #551a8b; }
|
||||
a:hover { color: #06e; }
|
||||
a:focus { outline: thin dotted; }
|
||||
|
||||
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
|
||||
a:hover, a:active { outline: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
|
||||
b, strong { font-weight: bold; }
|
||||
|
||||
blockquote { margin: 1em 40px; }
|
||||
|
||||
dfn { font-style: italic; }
|
||||
|
||||
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
|
||||
|
||||
ins { background: #ff9; color: #000; text-decoration: none; }
|
||||
|
||||
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
|
||||
|
||||
/* Redeclare monospace font family: h5bp.com/j */
|
||||
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
|
||||
|
||||
/* Improve readability of pre-formatted text in all browsers */
|
||||
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
|
||||
|
||||
q { quotes: none; }
|
||||
q:before, q:after { content: ""; content: none; }
|
||||
|
||||
small { font-size: 85%; }
|
||||
|
||||
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
|
||||
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
|
||||
sup { top: -0.5em; }
|
||||
sub { bottom: -0.25em; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
|
||||
dd { margin: 0 0 0 40px; }
|
||||
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Improve image quality when scaled in IE7: h5bp.com/d
|
||||
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
|
||||
*/
|
||||
|
||||
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* Correct overflow not hidden in IE9
|
||||
*/
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
figure { margin: 0; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
form { margin: 0; }
|
||||
fieldset { border: 0; margin: 0; padding: 0; }
|
||||
|
||||
/* Indicate that 'label' will shift focus to the associated form element */
|
||||
label { cursor: pointer; }
|
||||
|
||||
/*
|
||||
* 1. Correct color not inheriting in IE6/7/8/9
|
||||
* 2. Correct alignment displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
legend { border: 0; *margin-left: -7px; padding: 0; }
|
||||
|
||||
/*
|
||||
* 1. Correct font-size not inheriting in all browsers
|
||||
* 2. Remove margins in FF3/4 S5 Chrome
|
||||
* 3. Define consistent vertical alignment display in all browsers
|
||||
*/
|
||||
|
||||
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
|
||||
|
||||
/*
|
||||
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
|
||||
* 2. Correct inner spacing displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
button, input { line-height: normal; *overflow: visible; }
|
||||
|
||||
/*
|
||||
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
|
||||
*/
|
||||
|
||||
table button, table input { *overflow: auto; }
|
||||
|
||||
/*
|
||||
* 1. Display hand cursor for clickable form elements
|
||||
* 2. Allow styling of clickable form elements in iOS
|
||||
*/
|
||||
|
||||
button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }
|
||||
|
||||
/*
|
||||
* Consistent box sizing and appearance
|
||||
*/
|
||||
|
||||
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
|
||||
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
|
||||
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
|
||||
|
||||
/*
|
||||
* Remove inner padding and border in FF3/4: h5bp.com/l
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
|
||||
|
||||
/*
|
||||
* 1. Remove default vertical scrollbar in IE6/7/8/9
|
||||
* 2. Allow only vertical resizing
|
||||
*/
|
||||
|
||||
textarea { overflow: auto; vertical-align: top; resize: vertical; }
|
||||
|
||||
/* Colors for form validity */
|
||||
input:valid, textarea:valid { }
|
||||
input:invalid, textarea:invalid { background-color: #f0dddd; }
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
table { border-collapse: collapse; border-spacing: 0; }
|
||||
td { vertical-align: top; }
|
||||
|
||||
|
||||
/* ==|== primary styles =====================================================
|
||||
Author:
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Media queries for responsive design https://github.com/shichuan/mobile-html5-boilerplate/wiki/The-Style
|
||||
*/
|
||||
|
||||
|
||||
/* Styles for desktop and large screen ----------- */
|
||||
|
||||
/*styles for 800px and up!*/
|
||||
@media only screen and (min-width: 800px) {
|
||||
/* Styles */
|
||||
}/*/mediaquery*/
|
||||
|
||||
|
||||
/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
only screen and (-o-min-device-pixel-ratio: 3/2),
|
||||
only screen and (min--moz-device-pixel-ratio: 1.5),
|
||||
only screen and (min-device-pixel-ratio: 1.5) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==|== non-semantic helper classes ========================================
|
||||
Please define your styles before this section.
|
||||
========================================================================== */
|
||||
|
||||
/* prevent callout */
|
||||
.nocallout {-webkit-touch-callout: none;}
|
||||
|
||||
/* Text overflow with ellipsis */
|
||||
.ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* A hack for HTML5 contenteditable attribute on mobile */
|
||||
textarea[contenteditable] {-webkit-appearance: none;}
|
||||
|
||||
/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if they have been set as display: none */
|
||||
.gifhidden {position: absolute; left: -100%;}
|
||||
|
||||
/* For image replacement */
|
||||
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
|
||||
.ir br { display: none; }
|
||||
|
||||
/* Hide from both screenreaders and browsers: h5bp.com/u */
|
||||
.hidden { display: none !important; visibility: hidden; }
|
||||
|
||||
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
|
||||
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
|
||||
|
||||
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
|
||||
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
|
||||
|
||||
/* Hide visually and from screenreaders, but maintain layout */
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
/* Contain floats: h5bp.com/q */
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { *zoom: 1; }
|
||||
|
||||
|
||||
|
||||
/* ==|== print styles =======================================================
|
||||
Print styles.
|
||||
Inlined to avoid required HTTP connection: h5bp.com/r
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
|
||||
a, a:visited { text-decoration: underline; }
|
||||
a[href]:after { content: " (" attr(href) ")"; }
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
|
||||
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
|
||||
thead { display: table-header-group; } /* h5bp.com/t */
|
||||
tr, img { page-break-inside: avoid; }
|
||||
img { max-width: 100% !important; }
|
||||
@page { margin: 0.5cm; }
|
||||
p, h2, h3 { orphans: 3; widows: 3; }
|
||||
h2, h3 { page-break-after: avoid; }
|
||||
}
|
||||
Loading…
Reference in a new issue