[Bug #128054481] Fix styling of logo upload field

andela · Aug 30, 2016 · 736cbc3 · 736cbc3
1 parent 51b6f46
commit 736cbc3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 37 deletions.
diff --git a/troupon/accounts/templates/account/register_merchant.html b/troupon/accounts/templates/account/register_merchant.html
@@ -88,13 +88,15 @@
             </div>
           </div>
         </div>
-        <div class="col-sm-5 preview-upload-img">
-          <div class="custom-form-group col-sm-12">
-            <label id="preview-upload-img-title">Merchant  Logo</label> {% csrf_token %}
+        <div class="col-lg-4 col-lg-offset-1 preview-upload-img">
+          <div class="custom-form-group col-sm-12 text-center">
+            <h4 id="preview-upload-img-title">Merchant  Logo</h4>
+            <hr><br>
+            {% csrf_token %}
             <div class="images">
               <img id="merchant-logo" src="{% static 'img/logo-v-lg.png' %}"/>
             </div>
-            <div>
+            <div class="text-center file-upload-container">
               <label class="file-upload-label">
                 <input id="file-upload" name="logo" type="file" size="#" onchange="previewImage();">
                 <span class="glyphicon glyphicon-folder-open" aria-hidden="true" ></span>Select Logo

diff --git a/troupon/authentication/templates/authentication/login.html b/troupon/authentication/templates/authentication/login.html
@@ -45,16 +45,13 @@ <h2>Log in</h2>
                                 <input type="password" name="password" id="password" placeholder="At least 6 characters.">
                             </div>
                         </div>
-                        <div class="row">
-                            <div class="col-md-12">
-                                <p><a href="{% url 'account_forgot_password' %}">Forgot your password?</a></p>
-                            </div>
-                        </div>
-                        <div class="row center-buttons">
-                            <div>
+
+                        <p><a href="{% url 'account_forgot_password' %}">Forgot your password?</a></p>
+
+                        <div class="row text-center">
+                            <div class="col-lg-12 clear-float text-center">
                                 <input id="loginBtn" type="submit" class="btn-action btn-form-submit" value="Log in"/>
-                            </div>
-                            <div>
+                                <br>
                                 <a href="/accounts/facebook/login/?process=login" id="facebooklogin">Login with facebook</a>
                             </div>
                         </div>

diff --git a/troupon/static/css/base_styles.css b/troupon/static/css/base_styles.css
@@ -1838,11 +1838,28 @@ footer.checkout-footer .divider-1 {
 }
 
 .preview-upload-img #preview-upload-img-title {
+  margin: 20px auto;
+}
+
+.images {
   margin-bottom: 20px;
-  margin-left: 86px;
 }
 
-.preview-upload-img .file-upload-label {
-  width: 222px;
-  margin-left: 40px;
+.images img {
+  max-width: 200px;
+}
+
+.file-upload-container {
+  width: 200px;
+  margin: 0 auto;
+}
+
+.file-upload-label {
+  float: none;
+  clear: both;
+  width: 100%;
+}
+
+.clear-float * {
+  float: none;
 }
diff --git a/troupon/static/css/style.css b/troupon/static/css/style.css
@@ -26,27 +26,14 @@ intl tel input styles:
     cursor: inherit;
     display: block;
 }
-.images{
-    display:inline-block;
-    width:300px;
-    height:250px;
-    overflow:hidden;
-    position: relative;
-    margin: 0 auto;
-}
-#merchant-logo{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
+
 label.file-upload-label input[type="file"] {
     position: fixed;
     top: -1000px;
 }
 .file-upload-label {
-    width: 50%;
     height: 30px;
+    float: none;
     border-radius: 4px;
     background: #660066;
     display: inline-block;

diff --git a/troupon/static/scss/partials/_pages.scss b/troupon/static/scss/partials/_pages.scss
@@ -179,11 +179,29 @@ footer.checkout-footer {
 // merchant register page
 .preview-upload-img {
   #preview-upload-img-title {
-    margin-bottom: 20px;
-    margin-left: 86px;
+    margin: 20px auto;
   }
-  .file-upload-label {
-    width: 222px;
-    margin-left: 40px;
+}
+
+.images {
+  margin-bottom: 20px;
+  img {
+    max-width: 200px;
   }
 }
+
+.file-upload-container {
+  width: 200px;
+  margin: 0 auto;
+}
+
+.file-upload-label {
+  float: none;
+  clear: both;
+  width: 100%;
+}
+
+// login page
+.clear-float * {
+  float: none;
+}