From 2394c3df393ac4f567264bcf8068bba2f97208de Mon Sep 17 00:00:00 2001 From: arlogn Date: Thu, 3 Jul 2014 20:56:47 +0200 Subject: [PATCH] flexible font-size for sign_in podname huge text --- app/assets/javascripts/app/router.js | 5 + app/assets/javascripts/jasmine-load-all.js | 1 - app/assets/javascripts/login.js | 30 ------ app/assets/javascripts/main.js | 1 + app/assets/stylesheets/login.css.scss | 111 --------------------- app/views/layouts/application.html.haml | 2 +- app/views/sessions/new.haml | 55 ---------- config/application.rb | 2 - lib/assets/javascripts/flexime.js | 33 ++++++ spec/javascripts/support/jasmine.yml | 3 - 10 files changed, 40 insertions(+), 203 deletions(-) delete mode 100644 app/assets/javascripts/login.js delete mode 100644 app/assets/stylesheets/login.css.scss delete mode 100644 app/views/sessions/new.haml create mode 100644 lib/assets/javascripts/flexime.js diff --git a/app/assets/javascripts/app/router.js b/app/assets/javascripts/app/router.js index d795f0e7d..2062e68c3 100644 --- a/app/assets/javascripts/app/router.js +++ b/app/assets/javascripts/app/router.js @@ -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); diff --git a/app/assets/javascripts/jasmine-load-all.js b/app/assets/javascripts/jasmine-load-all.js index 755afb9a7..620104855 100644 --- a/app/assets/javascripts/jasmine-load-all.js +++ b/app/assets/javascripts/jasmine-load-all.js @@ -5,7 +5,6 @@ //= require home //= require finder //= require inbox -//= require login //= require mobile //= require profile //= require people diff --git a/app/assets/javascripts/login.js b/app/assets/javascripts/login.js deleted file mode 100644 index 60da5e47e..000000000 --- a/app/assets/javascripts/login.js +++ /dev/null @@ -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'); - }); -}); - diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index a17df7c4a..ec6219e7c 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -41,3 +41,4 @@ //= require bootstrap-dropdown //= require bootstrap-scrollspy-custom //= require osmlocator +//= require flexime diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss deleted file mode 100644 index 50b6d7bbb..000000000 --- a/app/assets/stylesheets/login.css.scss +++ /dev/null @@ -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; - -} diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index cc4f5d82e..0bac3a096 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -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' diff --git a/app/views/sessions/new.haml b/app/views/sessions/new.haml deleted file mode 100644 index 068a2c506..000000000 --- a/app/views/sessions/new.haml +++ /dev/null @@ -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) - - diff --git a/config/application.rb b/config/application.rb index 8de398985..284c3f696 100644 --- a/config/application.rb +++ b/config/application.rb @@ -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 diff --git a/lib/assets/javascripts/flexime.js b/lib/assets/javascripts/flexime.js new file mode 100644 index 000000000..d6d8e4150 --- /dev/null +++ b/lib/assets/javascripts/flexime.js @@ -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; +} diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index 25a685d7c..88ff13ea4 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/spec/javascripts/support/jasmine.yml @@ -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 #