Merge pull request #5056 from arlogn/login-podname-size-flexible

Flexible font-size for huge text in sign_in page

Changelog.md

@@ -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)

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);

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

app/assets/javascripts/login.js

@@ -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');
-  });
-});
-

app/assets/javascripts/main.js

@@ -41,3 +41,4 @@
 //= require bootstrap-dropdown
 //= require bootstrap-scrollspy-custom
 //= require osmlocator
+//= require flexime

app/assets/stylesheets/login.css.scss

@@ -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;
-
-}

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'

app/views/sessions/new.haml

@@ -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)
-
-

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

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;
+}

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
 #