🌱 Added contributors section

README.md

@@ -361,20 +361,10 @@ See the list of [contributors](https://github.com/liyasthomas/postwoman/graphs/c
 
 * [dev.to 👩‍💻👨‍💻](https://dev.to)
 
-### Code Contributors
-
-This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
-
-<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
-
 ### Financial Contributors
 
 Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/postwoman/contribute)]
 
-#### Individuals
-
-<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
-
 #### Organizations
 
 Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/postwoman/contribute)]
@@ -390,6 +380,16 @@ Support this project with your organization. Your logo will show up here with a
 <a href="https://opencollective.com/postwoman/organization/8/website"><img src="https://opencollective.com/postwoman/organization/8/avatar.svg"></a>
 <a href="https://opencollective.com/postwoman/organization/9/website"><img src="https://opencollective.com/postwoman/organization/9/avatar.svg"></a>
 
+#### Individuals
+
+<a href="https://opencollective.com/postwoman"><img src="https://opencollective.com/postwoman/individuals.svg"></a>
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+
+<a href="https://github.com/liyasthomas/postwoman/graphs/contributors"><img src="https://opencollective.com/postwoman/contributors.svg?width=890&button=false" /></a>
+
 ## License 📄
 
 This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.

assets/css/styles.scss

@@ -265,6 +265,7 @@ h4 {
 
 hr {
   border-bottom: 1px dashed var(--brd-color);
+  margin: 16px 0;
 }
 
 p {

components/modal.vue

@@ -37,7 +37,6 @@
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  max-width: 720px;
 }
 
 .modal-container {
@@ -50,7 +49,8 @@
   background-color: var(--bg-color);
   border-radius: 16px;
   box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
-  max-height: calc(100vh - 32px);
+  max-height: calc(100vh - 128px);
+  max-width: 720px;
 }
 
 .modal-body {

lang/en-US.js

@@ -19,7 +19,6 @@ export default {
   save_to_collections: "Save to Collections",
   copy_request_link: "Copy Request Link",
   reset_request: "Reset Request",
-  support_us_on: "Support us on",
   open_collective: "Open Collective",
   paypal: "PayPal",
   patreon: "Patreon",

layouts/default.vue

@@ -569,7 +569,7 @@
         <ul>
           <li>
             <div class="flex-wrap">
-              <h3 class="title">{{ $t("support_us_on") }}</h3>
+              <h3 class="title">{{ $t("support_us") }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
                   <i class="material-icons">close</i>
@@ -625,6 +625,70 @@
             </button>
           </a>
         </div>
+        <hr />
+        <h3 class="title">Financial Contributors</h3>
+        <p class="info">
+          Become a financial contributor and help us sustain our community.
+          <a class="link" href="https://opencollective.com/postwoman/contribute">[Contribute]</a>.
+        </p>
+        <h3 class="title">Organizations</h3>
+        <p class="info">
+          Support this project with your organization. Your logo will show up here with a link to
+          your website.
+          <a class="link" href="https://opencollective.com/postwoman/contribute">[Contribute]</a>.
+        </p>
+        <div class="sponors">
+          <a href="https://opencollective.com/postwoman/organization/0/website">
+            <img src="https://opencollective.com/postwoman/organization/0/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/1/website">
+            <img src="https://opencollective.com/postwoman/organization/1/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/2/website">
+            <img src="https://opencollective.com/postwoman/organization/2/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/3/website">
+            <img src="https://opencollective.com/postwoman/organization/3/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/4/website">
+            <img src="https://opencollective.com/postwoman/organization/4/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/5/website">
+            <img src="https://opencollective.com/postwoman/organization/5/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/6/website">
+            <img src="https://opencollective.com/postwoman/organization/6/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/7/website">
+            <img src="https://opencollective.com/postwoman/organization/7/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/8/website">
+            <img src="https://opencollective.com/postwoman/organization/8/avatar.svg" />
+          </a>
+          <a href="https://opencollective.com/postwoman/organization/9/website">
+            <img src="https://opencollective.com/postwoman/organization/9/avatar.svg" />
+          </a>
+        </div>
+        <h3 class="title">Individuals</h3>
+        <p class="info">
+          Support this project with your organization. Your logo will show up here with a link to
+          your website.
+          <a class="link" href="https://opencollective.com/postwoman/contribute">[Contribute]</a>.
+        </p>
+        <div class="sponors">
+          <a href="https://opencollective.com/postwoman">
+            <img src="https://opencollective.com/postwoman/individuals.svg" />
+          </a>
+        </div>
+        <h3 class="title">Code Contributors</h3>
+        <p class="info">
+          This project exists thanks to all the people who contribute.
+        </p>
+        <div class="sponors">
+          <a href="https://github.com/liyasthomas/postwoman/graphs/contributors">
+            <img src="https://opencollective.com/postwoman/contributors.svg" />
+          </a>
+        </div>
       </div>
       <div slot="footer"></div>
     </modal>
@@ -635,6 +699,14 @@
 .footer-link {
   margin: 8px 16px;
 }
+.sponors {
+  display: flex;
+  flex-flow: row nowrap;
+  overflow: auto;
+  padding: 8px 0;
+  margin: 8px 0;
+  max-width: calc(100vw - 72px);
+}
 </style>
 
 <script>

pages/index.vue

@@ -509,6 +509,7 @@
             </li>
           </ul>
         </pw-section>
+
         <section id="options">
           <input id="tab-one" type="radio" name="options" checked="checked" />
           <label for="tab-one">{{ $t("authentication") }}</label>
@@ -715,6 +716,7 @@
               </ul>
             </pw-section>
           </div>
+
           <input id="tab-two" type="radio" name="options" />
           <label for="tab-two">{{ $t("headers") }}</label>
           <div class="tab">
@@ -797,6 +799,7 @@
               </ul>
             </pw-section>
           </div>
+
           <input id="tab-three" type="radio" name="options" />
           <label for="tab-three">{{ $t("parameters") }}</label>
           <div class="tab">
@@ -876,6 +879,7 @@
               </ul>
             </pw-section>
           </div>
+
           <!-- <div class="flex-wrap">
             <span></span>
             <button
@@ -986,6 +990,7 @@
           </ul>
         </pw-section>
       </div>
+
       <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <input id="history-tab" type="radio" name="side" checked="checked" />
@@ -993,16 +998,19 @@
           <div class="tab">
             <history @useHistory="handleUseHistory" ref="historyComponent" />
           </div>
+
           <input id="collection-tab" type="radio" name="side" />
           <label for="collection-tab">{{ $t("collections") }}</label>
           <div class="tab">
             <collections />
           </div>
+
           <input id="environment-tab" type="radio" name="side" />
           <label for="environment-tab">{{ $t("environment") }}</label>
           <div class="tab">
             <environments @use-environment="useSelectedEnvironment($event)" />
           </div>
+
           <input id="sync-tab" type="radio" name="side" />
           <label for="sync-tab">{{ $t("notes") }}</label>
           <div class="tab">