Clean up the registration and log in left side.

This cleans up the left side of the split view to have better font size management and styling.
zulip · May 12, 2017 · df87b4c · df87b4c
1 parent 6e7305f
commit df87b4c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/static/js/dynamic_text.js b/static/js/dynamic_text.js
@@ -38,6 +38,7 @@ var DynamicText = (function () {
 
             // reset the font-size to inherit the parent's size; 1em.
             node.style.fontSize = "1em";
+            parent.style.opacity = 0;
 
             var width = {
                 node: node.offsetWidth,
@@ -47,10 +48,12 @@ var DynamicText = (function () {
             // if the width is larger than the parent, resize by the ratio of
             // the parent's width to the node's width.
             if (width.node > width.parent) {
-                node.style.fontSize = (width.parent / width.node) + "em";
+                node.style.fontSize = (width.parent * 0.995 / width.node) + "em";
             } else {
                 node.style.fontSize = "1em";
             }
+
+            parent.style.opacity = 1;
         },
     };
 

diff --git a/static/js/portico/signup.js b/static/js/portico/signup.js
@@ -57,4 +57,10 @@ $(function () {
         errorClass: "text-error",
         wrapper: "div",
     });
+
+    var $organization_name = $(".organization-name");
+
+    if ($organization_name.length > 0) {
+        DynamicText($organization_name);
+    }
 });
diff --git a/static/styles/portico-signin.css b/static/styles/portico-signin.css
@@ -480,16 +480,18 @@ html {
     display: inline-block;
     vertical-align: top;
 
-    width: 100px;
-    height: 100px;
+    width: 75px;
+    height: 75px;
+
+    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 
     background-size: 100% auto;
 }
 
 .split-view .org-header .info-box {
     display: inline-block;
     position: relative;
-    margin: 15px 0px 0px 20px;
+    margin: 0px 0px 0px 10px;
     width: calc(100% - 125px);
 
     /* full width minus the avatar + padding + borders */
@@ -505,15 +507,17 @@ html {
 }
 
 .split-view .info-box .organization-name {
-    font-size: 1.5em;
+    font-size: 2.5em;
     font-weight: 300;
     line-height: 1;
+
+    opacity: 0;
 }
 
 .split-view .info-box .organization-path {
     font-weight: 500;
     color: #aaa;
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 .new-style .lead {
@@ -696,11 +700,16 @@ button.login-google-button {
 .split-view .left-side .description {
     text-align: left;
     font-weight: normal;
+    font-size: 0.95em;
 
     margin-top: 20px;
     margin-right: 10px;
 }
 
+.split-view .left-side .description li {
+    line-height: normal;
+}
+
 @media (max-width: 950px) {
     .split-view .left-side {
         width: 400px;

diff --git a/zproject/settings.py b/zproject/settings.py
@@ -806,6 +806,7 @@ def get_secret(key):
     },
     'signup': {
         'source_filenames': [
+            'js/dynamic_text.js',
             'js/portico/signup.js',
             'node_modules/jquery-validation/dist/jquery.validate.js',
         ],