Merge pull request #5056 from arlogn/login-podname-size-flexible
Flexible font-size for huge text in sign_in page
This commit is contained in:
Jonne Haß
commit
fe1d1bd7a8
11 changed files with 41 additions and 203 deletions
|
|
@ -12,6 +12,7 @@
|
|||
* Fix live updating when renaming an aspect [#5049](https://github.com/diaspora/diaspora/pull/5049)
|
||||
* Use double quotes when embedding translations into Javascript [#5055](https://github.com/diaspora/diaspora/issues/5055)
|
||||
* Fix regression in mobile sign-in ([commit](https://github.com/diaspora/diaspora/commit/4a2836b108f8a9eb6f46ca58cfcb7b23f40bb076))
|
||||
* Fit pod name to page size on the sign in page [#5056](https://github.com/diaspora/diaspora/pull/5056)
|
||||
|
||||
## Features
|
||||
* Port admin pages to bootstrap, polish user search results, allow accounts to be closed from the backend [#5046](https://github.com/diaspora/diaspora/pull/5046)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
app.Router = Backbone.Router.extend({
|
||||
routes: {
|
||||
"users/sign_in": "login",
|
||||
"help": "help",
|
||||
|
||||
//new hotness
|
||||
|
|
@ -31,6 +32,10 @@ app.Router = Backbone.Router.extend({
|
|||
this.route(/^bookmarklet(?:\?(.*))?/, "bookmarklet");
|
||||
},
|
||||
|
||||
login: function() {
|
||||
$('#huge-text').flexime(1.05, {responsive:true});
|
||||
},
|
||||
|
||||
help: function() {
|
||||
app.help = new app.views.Help();
|
||||
$("#help").prepend(app.help.el);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
//= require home
|
||||
//= require finder
|
||||
//= require inbox
|
||||
//= require login
|
||||
//= require mobile
|
||||
//= require profile
|
||||
//= require people
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
/* Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
jQuery.fn.center = function () {
|
||||
this.css("position","absolute");
|
||||
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
|
||||
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
|
||||
return this;
|
||||
}
|
||||
|
||||
$(document).ready( function(){
|
||||
var username = $("#user_username"),
|
||||
password = $("#user_password"),
|
||||
forgotPass = $("#forgot_password_link"),
|
||||
controls = $("#controls");
|
||||
|
||||
$("#login").center();
|
||||
$(window).resize(function(){
|
||||
$("#login").center();
|
||||
});
|
||||
|
||||
username.focus();
|
||||
$("form").submit(function(){
|
||||
$('#asterisk').addClass('rideSpinners');
|
||||
forgotPass.addClass('hidden');
|
||||
controls.addClass('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -41,3 +41,4 @@
|
|||
//= require bootstrap-dropdown
|
||||
//= require bootstrap-scrollspy-custom
|
||||
//= require osmlocator
|
||||
//= require flexime
|
||||
|
|
|
|||
|
|
@ -1,111 +0,0 @@
|
|||
// 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 "colors";
|
||||
@import "mixins";
|
||||
|
||||
#login {
|
||||
width: 400px;
|
||||
text: {
|
||||
align: center;
|
||||
};
|
||||
|
||||
display: inline-block;
|
||||
|
||||
form {
|
||||
input,
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
label {
|
||||
top: 10px;
|
||||
left: 12px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
-webkit-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
|
||||
-moz-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
|
||||
box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
|
||||
width: 180px;
|
||||
max-width: 180px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.submit {
|
||||
width: auto;
|
||||
bottom: 15px;
|
||||
input {
|
||||
width: auto;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
top: 0px;
|
||||
color: $text-dark-grey;
|
||||
margin: {
|
||||
bottom: 10px;
|
||||
};
|
||||
&:hover {
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#forgot_password_link {
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 205px;
|
||||
top: 2em;
|
||||
width: 150px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
#controls {
|
||||
@include transition(opacity);
|
||||
&.hidden {
|
||||
@include opacity(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes rotate {
|
||||
from {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rideSpinners
|
||||
{
|
||||
-webkit-animation-name: rotate;
|
||||
-webkit-animation-duration: 5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-moz-animation-name: rotate;
|
||||
-moz-animation-duration: 5s;
|
||||
-moz-animation-iteration-count: infinite;
|
||||
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
- if @css_framework == :bootstrap && !@include_application_css
|
||||
= stylesheet_link_tag :default, 'new-templates', :media => 'all'
|
||||
- else
|
||||
= stylesheet_link_tag 'login', 'application', 'default'
|
||||
= stylesheet_link_tag 'application', 'default'
|
||||
|
||||
- if rtl?
|
||||
= stylesheet_link_tag :rtl, :media => 'all'
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
-# Copyright (c) 2010-2012, Diaspora Inc. This file is
|
||||
-# licensed under the Affero General Public License version 3 or later. See
|
||||
-# the COPYRIGHT file.
|
||||
|
||||
= content_for :page_title do
|
||||
= "#{pod_name} / #{t('devise.sessions.new.sign_in')}"
|
||||
|
||||
= content_for :head do
|
||||
= javascript_include_tag :login
|
||||
|
||||
:css
|
||||
header, #flash_alert { display:none; }
|
||||
footer{ position: absolute; bottom: 6px; }
|
||||
|
||||
.container{:style => 'text-align:center;'}
|
||||
#login
|
||||
%p
|
||||
= image_tag('branding/asterisk.png', :id => 'asterisk', :class => 'logo', :height => 154, :width => 154)
|
||||
%p
|
||||
= image_tag('branding/logo.png', :id => 'logo', :width => 98, :height => 14)
|
||||
|
||||
- flash.each do |name, msg|
|
||||
%p{:class => "login_#{name}"}= msg
|
||||
|
||||
= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f|
|
||||
|
||||
%p
|
||||
= f.label :username , t('username')
|
||||
= f.text_field :username, :tabindex => 1, :value => prefilled_username, :placeholder => t('username')
|
||||
%br
|
||||
|
||||
%p
|
||||
= f.label :password , t('password')
|
||||
= f.password_field :password, :tabindex => 2, :placeholder => t('password')
|
||||
|
||||
- if display_password_reset_link?
|
||||
= link_to t('devise.shared.links.forgot_your_password'), new_password_path(resource_name), :id => "forgot_password_link", :tabindex => 5
|
||||
|
||||
%br
|
||||
%p#controls.checkbox_select
|
||||
%span#remember_me
|
||||
- if devise_mapping.rememberable?
|
||||
= f.check_box :remember_me, :tabindex => 3
|
||||
= f.label :remember_me, t('devise.sessions.new.remember_me')
|
||||
= f.submit t('devise.sessions.new.sign_in'), :tabindex => 4
|
||||
|
||||
|
||||
- if display_registration_link?
|
||||
%br
|
||||
%br
|
||||
%br
|
||||
%br
|
||||
= link_to t('devise.shared.links.sign_up'), new_registration_path(resource_name)
|
||||
|
||||
|
||||
|
|
@ -68,7 +68,6 @@ module Diaspora
|
|||
jquery.js
|
||||
jquery_ujs.js
|
||||
jquery.textchange.js
|
||||
login.js
|
||||
mailchimp.js
|
||||
main.js
|
||||
mobile.js
|
||||
|
|
@ -87,7 +86,6 @@ module Diaspora
|
|||
default.css
|
||||
error_pages.css
|
||||
admin.css
|
||||
login.css
|
||||
mobile/mobile.css
|
||||
new-templates.css
|
||||
rtl.css
|
||||
|
|
|
|||
33
lib/assets/javascripts/flexime.js
Normal file
33
lib/assets/javascripts/flexime.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
/*
|
||||
*
|
||||
* flexime.js
|
||||
* Flexible font-size for huge text (pod name) in login page.
|
||||
*
|
||||
*/
|
||||
|
||||
jQuery.fn.flexime = function (refine, options) {
|
||||
|
||||
var opt = $.extend({
|
||||
responsive: false
|
||||
}, options);
|
||||
|
||||
var $this = $(this);
|
||||
var r = refine || 1;
|
||||
var max_size = 200; // #huge-text default size
|
||||
|
||||
var resize = function () {
|
||||
var clone = $this.clone();
|
||||
clone.css({'font-size':'10px','display':'inline-block','visibility':'hidden'}).appendTo('body');
|
||||
var size = Math.floor(($this.width() / clone.width()) * 10 / r);
|
||||
if (size < max_size) $this.css({'font-size':size+'px', 'line-height':Math.floor(size*.2)+'px'});
|
||||
|
||||
clone.remove();
|
||||
};
|
||||
|
||||
resize();
|
||||
|
||||
if (opt.responsive)
|
||||
$(window).on('resize', resize);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
|
@ -28,10 +28,7 @@ stylesheets:
|
|||
- assets/blueprint.css
|
||||
- assets/bootstrap.css
|
||||
- assets/default.css
|
||||
- assets/login.css
|
||||
#- assets/mobile.css
|
||||
- assets/new-templates.css
|
||||
#- assets/rtl.css
|
||||
|
||||
# helpers
|
||||
#
|
||||
|
|
|
|||
Loading…
Reference in a new issue