css: funding / killing form update (#1061)

* css: fixed spacing in forms Fixes: #1056 * bounty: forms css fixes - set default value as 0.001 - Fixed height mismatch - Dropdown list uses Muli + uses font-body - fixed height overflow issue when amount == 0 * css: replaced px -> rem
gitcoinco · May 3, 2018 · 2602b04 · 2602b04
1 parent 3a2a764
commit 2602b04
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 11 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -20,9 +20,11 @@ span {
 .nav_avatar {
   cursor: pointer;
 }
+
 .dropdown-menu{
   z-index: 9999999999;
 }
+
 .navbar {
   font-family: 'futura-pt', Futura, sans-serif;
 }
@@ -543,13 +545,39 @@ input[type=text].loading {
 #primary_form {
   max-width: 500px;
   margin: 0 auto;
-  padding: 0 4em;
+  padding: 0 2em;
+}
+
+.submit_bounty .select2-search,
+.fulfill_bounty .select2-search,
+.submit_bounty .select2-results__option,
+.fulfill_bounty .select2-results__option {
+  font-size: 0.875rem;
+  font-family: "Muli", sans-serif;
+}
+
+.submit_bounty .select2-results__option,
+.fulfill_bounty .select2-results__option {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
 }
 
 #primary_form img {
   max-width: 100px;
 }
 
+#primary_form .github-username {
+  margin-top: 14px !important;
+}
+
+#primary_form small {
+  display: inline;
+}
+
+#primary_form #amount {
+  height: 37px;
+}
+
 .bounty_nav {
   border-bottom: 2px solid #212529;
   padding: 0;
@@ -1218,7 +1246,6 @@ input.is-invalid {
   background: #0D0764 !important;
 }
 
-
 .ui-button:hover,
 .ui-button:focus {
   border: 1px solid #0D0764 !important;

diff --git a/app/assets/v2/css/forms/form.css b/app/assets/v2/css/forms/form.css
@@ -2,8 +2,11 @@
   display: flex;
 }
 
+.form__group-item {
+  height: 37px;
+}
+
 .form__amount-wrapper {
-  width: 20%;
   margin-right: 1rem;
 }
 

diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css
@@ -24,15 +24,15 @@
   color: #D50000;
   background-image: url('/static/v2/images/close-red.png');
   background-repeat: no-repeat;
-  background-size: auto 21px;
-  background-position: top 5px right 7px;
+  background-size: auto 1.313rem;
+  background-position: top 0.4375rem right 1.25rem;
 }
 
 .form__input.valid {
   background-image: url('/static/v2/images/success.png');
   background-repeat: no-repeat;
-  background-size: auto 21px;
-  background-position: top 5px right 7px;
+  background-size: auto 1.313rem;
+  background-position: top 0.4375rem right 1.25rem;
 }
 
 .form__input::-webkit-input-placeholder {

diff --git a/app/dashboard/templates/shared/github_username.html b/app/dashboard/templates/shared/github_username.html
@@ -15,7 +15,7 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n %}
-<div class="w-100 mt-2">
+<div class="w-100 mt-2 github-username">
   <label class="form__label" for="githubUsername">{% trans "Github Username" %}</label>
   {% if not user.is_authenticated %}
     <a href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}">({% trans "Login" %})</a>

diff --git a/app/dashboard/templates/submit_bounty.html b/app/dashboard/templates/submit_bounty.html
@@ -53,10 +53,10 @@ <h3>{% trans "Fund an Issue" %}</h3>
                                 <div class="w-100 mt-2 amount_container">
                                     <label class="form__label" for="amount">{% trans "Amount" %}</label>
                                     <div class="form__flex-group">
-                                        <div class="form__amount-wrapper">
-                                            <input name='amount' id='amount'  class="form__input" type="number" placeholder="Amount" value="{{amount}}" step="0.001" min="0.001" />
+                                        <div class="col-6 form__amount-wrapper">
+                                            <input name='amount' id='amount'  class="form__input" type="number" value="{{amount|default:'0.001'}}" step="0.001" min="0.001" />
                                         </div>
-                                        <div class="form__group-item">
+                                        <div class="col-6 form__group-item">
                                             <div class="form__select2">
                                                 <select name='deonomination' id='token'></select>
                                             </div>