From ab7cfc0e40a073b7443da9cb10ddd8ca48806f44 Mon Sep 17 00:00:00 2001
From: Josh Mobley <josh@joshmobley.net>
Date: Fri, 23 Mar 2018 09:58:09 -0400
Subject: [PATCH 1/2] Updating styles for new issue form to make it more
 responsive. Fixes: https://github.com/gitcoinco/web/issues/679

---
 app/assets/v2/css/base.css                    | 25 +++++--
 app/assets/v2/css/forms/form.css              | 11 +++
 .../templates/shared/bounty_nav.html          | 72 +++++++++----------
 app/dashboard/templates/submit_bounty.html    |  7 +-
 4 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css
index 11ff4bb3fba..368d492d5eb 100644
--- a/app/assets/v2/css/base.css
+++ b/app/assets/v2/css/base.css
@@ -488,6 +488,12 @@ 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;
 }
@@ -495,13 +501,13 @@ input[type=text].loading {
 .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
index d8bab5cfb54..13d79bf7571 100644
--- 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
index 091e3c1319a..b83dd53eb0b 100644
--- 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
index 6f9ce3be94b..f6690f90525 100644
--- a/app/dashboard/templates/submit_bounty.html
+++ b/app/dashboard/templates/submit_bounty.html
@@ -29,6 +29,7 @@
     <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">
@@ -36,8 +37,8 @@
                     {% 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>

From ae981e4013103cf168e6a841e7d8bb959cc14947 Mon Sep 17 00:00:00 2001
From: Josh Mobley <josh@joshmobley.net>
Date: Mon, 26 Mar 2018 12:14:56 -0400
Subject: [PATCH 2/2] updating indent from 4 spaces to 2  as requested by
 mbeacom

---
 .../templates/shared/bounty_nav.html          | 90 +++++++++----------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/app/dashboard/templates/shared/bounty_nav.html b/app/dashboard/templates/shared/bounty_nav.html
index b83dd53eb0b..9eaa1c459cb 100644
--- a/app/dashboard/templates/shared/bounty_nav.html
+++ b/app/dashboard/templates/shared/bounty_nav.html
@@ -1,54 +1,54 @@
 {% comment %}
-    Copyright (C) 2017 Gitcoin Core
+  Copyright (C) 2017 Gitcoin Core
 
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
 
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-    GNU Affero General Public License for more details.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
 
-    You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see <http://www.gnu.org/licenses/>.
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
 
 {% 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>
+  <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>