Updating styles for new issue form to make it more responsive.

Fixes: #679
gitcoinco · Mar 28, 2018 · ab7cfc0 · ab7cfc0
1 parent 1271188
commit ab7cfc0
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 45 deletions.
diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
@@ -488,20 +488,26 @@ input[type=text].loading {
     -o-filter: grayscale(100%);
 }
 
+#primary_form {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 0 4em;
+}
+
 #primary_form img {
     max-width: 100px;
 }
 
 .bounty_nav {
     border-bottom: 2px solid #212529;
     padding-bottom: 4px;
+    padding: 0;
+    display: flex;
+    justify-content: space-around;
 }
 
 .bounty_nav li {
     display: inline;
-    margin-left: 30px;
-    margin-right: 30px;
-    margin-bottom: 5px;
     padding: 5px;
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
@@ -1117,7 +1123,7 @@ input.is-invalid {
 }
 
 #gitcoinTestimonials{
-    height:288px; 
+    height:288px;
     width:500px;
 }
 
@@ -1245,7 +1251,7 @@ input.is-invalid {
 }
 @media (max-width: 769px) {
     #gitcoinTestimonials{
-        height:202px; 
+        height:202px;
         width:350px;
     }
 
@@ -1366,10 +1372,17 @@ input.is-invalid {
       display: none;
     }
 }
+
+@media (max-width: 540px) {
+    #primary_form {
+        max-width: 100%;
+    }
+}
+
 @media (max-width: 481px) {
 
     #gitcoinTestimonials{
-        height:144px; 
+        height:144px;
         width:250px;
     }
     .tldr_container img {

diff --git a/app/assets/v2/css/forms/form.css b/app/assets/v2/css/forms/form.css
@@ -36,3 +36,14 @@
 .form__footer--right {
   text-align: right;
 }
+
+@media (max-width: 540px) {
+    .form__group {
+        flex-direction: column;
+    }
+
+    .form__group-item {
+        margin-bottom: 1em;
+        width: 100%;
+    }
+}
diff --git a/app/dashboard/templates/shared/bounty_nav.html b/app/dashboard/templates/shared/bounty_nav.html
@@ -16,39 +16,39 @@
 
 {% endcomment %}
 
-                            <div class="w-100" style="text-align: center;">
-                                <ol class="bounty_nav">
-                                    <li class="{% if active_item == 1 %}active{%endif%} submit" >
-                                        1.
-                                        {% if past_tense %}
-                                            Open
-                                        {%else%}
-                                            Create Work
-                                        {%endif%}
-                                    </li>
-                                    <li class="{% if active_item == 2 %}active{%endif%} fulfill">
-                                        2.
-                                        {% if past_tense %}
-                                            Work Started
-                                        {%else%}
-                                            Start Work
-                                        {%endif%}
-                                    </li>
-                                    <li class="{% if active_item == 3 %}active{%endif%} fulfill">
-                                        3.
-                                        {% if past_tense %}
-                                            Work Submitted
-                                        {%else%}
-                                            Submit Work
-                                        {%endif%}
-                                    </li>
-                                    <li class="{% if active_item == 4 %}active{%endif%} accept">
-                                        4.
-                                        {% if past_tense %}
-                                            Work Done
-                                        {%else%}
-                                            Accept Work
-                                        {%endif%}
-                                    </li>
-                                </ol>
-                            </div>
+<div class="w-100" style="text-align: center;">
+    <ol class="bounty_nav">
+        <li class="{% if active_item == 1 %}active{%endif%} submit" >
+            1.
+            {% if past_tense %}
+                Open
+            {%else%}
+                Create Work
+            {%endif%}
+        </li>
+        <li class="{% if active_item == 2 %}active{%endif%} fulfill">
+            2.
+            {% if past_tense %}
+                Work Started
+            {%else%}
+                Start Work
+            {%endif%}
+        </li>
+        <li class="{% if active_item == 3 %}active{%endif%} fulfill">
+            3.
+            {% if past_tense %}
+                Work Submitted
+            {%else%}
+                Submit Work
+            {%endif%}
+        </li>
+        <li class="{% if active_item == 4 %}active{%endif%} accept">
+            4.
+            {% if past_tense %}
+                Work Done
+            {%else%}
+                Accept Work
+            {%endif%}
+        </li>
+    </ol>
+</div>
diff --git a/app/dashboard/templates/submit_bounty.html b/app/dashboard/templates/submit_bounty.html
@@ -29,15 +29,16 @@
     <div class="container-fluid header dash">
         {% include 'shared/nav.html' %}
     </div>
+
     <div class="row no-gutter">
         <div class="col-12 body">
             <div class="container-fluid no-gutter">
                 <div class="row font-smaller-2" id="form_container">
                     {% include 'shared/no_metamask_error.html' %}
                     {% include 'shared/zero_balance_error.html' %}
                     {% include 'shared/unlock_metamask.html' %}
-                    <div class="col offset-md-1 col-md-10 d-flex align-items-center justify-content-center" id="primary_form">
-                        <div class="d-flex justify-content-center flex-column mt-5 w-50" id="primary_subform">
+                    <div id="primary_form">
+                        <div class="d-flex justify-content-center flex-column mt-5" id="primary_subform">
                             <form id="submitBounty">
                                 {% include 'shared/bounty_nav.html' with active_item=1 %}
                                 <div class="w-100" style="text-align: center;">
@@ -95,7 +96,7 @@ <h3>Fund an Issue</h3>
                                             </select>
                                         </div>
                                     </div>
-                                    <div class="w-100 mt-2 d-flex ">
+                                    <div class="w-100 mt-2 d-flex">
                                         <div class="w-50 mt-2 mr-3 d-flex flex-column">
                                             <label class="form__label">Issue Details</label>
                                         </div>