refactor(ui): minor ux improvements
This commit is contained in:
liyasthomas
@@ -1,109 +0,0 @@
|
||||
# **GitHub Externship @ Hoppscotch**
|
||||
|
||||
**We ❤️ open source**
|
||||
|
||||
We are super excited to be a ‘Partner Organization’ of GitHub Externship 2021 and look forward to supporting all interested students to participate and contribute to our [open source projects](https://github.com/hoppscotch).
|
||||
|
||||
This document covers the process, expectations and guidelines for any interested student so that we can guide, mentor in the best possible manner and most importantly review your community engagement which is a critical factor along with your project idea to be selected from our organization.
|
||||
|
||||
**This post will be updated from time to time. So please keep an eye on it.**
|
||||
|
||||
Before, any of you jump in and start contributing, here are a few documents from the GitHub Externship Team which we advise every student to read through carefully and thoroughly:
|
||||
|
||||
- [GitHub Externship: Website](https://github-externships.github.io/externship/index.html)
|
||||
- [GitHub Externship: Program Structure](https://github-externships.github.io/externship/structure.html)
|
||||
|
||||
Our awesome community members frequently request for features on our [Discord server](https://hoppscotch.io/discord), [Telegram group](https://hoppscotch.io/externship_telegram), [GitHub issues tab](https://github.com/hoppscotch/hoppscotch/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and we have a never ending list of awesome ideas. However, keeping in mind the 3 months time span, we have filtered through our stockpile and come up with the following ideas for [GitHub Externship](https://github-externships.github.io/externship/index.html) program.
|
||||
|
||||
## **Ideas**
|
||||
|
||||
If you’re a student interested in working with Hoppscotch during GitHub Externship, we’ve assembled for you a list of 20 ideas under the following three categories:
|
||||
|
||||
### **1. Implement existing feature requests:**
|
||||
|
||||
- [gRPC-Web support](https://github.com/hoppscotch/hoppscotch/issues/402)
|
||||
|
||||
Like swagger, let users view message formats from `.proto` / `URL` and test the server methods by sending any messages from the Hoppscotch.
|
||||
|
||||
[**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/402)
|
||||
|
||||
- [Swagger / OpenAPI support](https://github.com/hoppscotch/hoppscotch/issues/470)
|
||||
|
||||
Like [Swagger Inspector](https://inspector.swagger.io/builder) / [Swagger Editor](https://editor.swagger.io). Let users import `swagger.json` and test the server methods by sending any messages from the Hoppscotch.
|
||||
|
||||
[**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/470)
|
||||
|
||||
- [Mock Server](https://github.com/hoppscotch/hoppscotch/issues/1598)
|
||||
|
||||
Mock server allows users to create mock endpoints that accepts request from the system-under-test or from a `json` file.
|
||||
|
||||
[**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/1598)
|
||||
|
||||
### **2. Implement new features:**
|
||||
|
||||
If you'd like to implement a totally new feature to help developers make API testing easy, feel free to come up with your own feature request or a port of feature from other API testing tools.
|
||||
|
||||
[**Create new feature request →**](https://github.com/hoppscotch/hoppscotch/issues/new?assignees=&labels=&template=feature_request.md&title=Feature%20[GitHub%20Externship]:)
|
||||
|
||||
### **3. Refactor existing features:**
|
||||
|
||||
If you'd like to refactor an already implemented feature / workflow - feel free to open a PR to do that. We appreciate using industry best pratices and latest technologies on all of our open source projects.
|
||||
|
||||
## **Built with**
|
||||
|
||||
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
|
||||
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Tailwind CSS](https://tailwindcss.com)
|
||||
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||||
- [TypeScript](https://www.typescriptlang.org)
|
||||
- [Vue](https://vuejs.org)
|
||||
- [Nuxt](https://nuxtjs.org)
|
||||
|
||||
## **Contributing**
|
||||
|
||||
Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/hoppscotch/hoppscotch/compare).
|
||||
|
||||
Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
|
||||
|
||||
## **Quick links**
|
||||
|
||||
[**`Repository →`**](https://github.com/hoppscotch/hoppscotch)
|
||||
|
||||
[**`Web app →`**](https://hoppscotch.io)
|
||||
|
||||
[**`Discord server →`**](https://hoppscotch.io/discord)
|
||||
|
||||
[**`Telegram group →`**](https://hoppscotch.io/externship_telegram)
|
||||
|
||||
## **Discussions channel**
|
||||
|
||||
We use [GitHub Discussions](https://github.com/hoppscotch/hoppscotch/discussions) as the primary channel for anything and everything related to GitHub Externship, ranging from
|
||||
|
||||
- Queries on issues you’re working or thinking about to take up.
|
||||
- Mentor advice on your project ideas [Google Drive document once there is enough clarity for easier collaboration and feedback – check project proposal ideas above]
|
||||
- Helping out your friends to onboard and contribute
|
||||
- Finally even selection updates etc.
|
||||
|
||||
Before asking a question please check this [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask)
|
||||
|
||||
## **Need help?**
|
||||
|
||||
Start a discussion [here](https://github.com/hoppscotch/hoppscotch/discussions) if you’re unable to get a response from the [Telegram](https://hoppscotch.io/externship_telegram), [Discord](https://hoppscotch.io/discord) communities.
|
||||
|
||||
Start a new idea under [discussions](https://github.com/hoppscotch/hoppscotch/discussions) only once you’ve finalized your project proposal.
|
||||
|
||||
Send us an email at support@hoppscotch.io for any administrative or operational concerns regarding the program.
|
||||
|
||||
## **Submit your proposal on time**
|
||||
|
||||
You can find the complete GitHub Externship program timeline [here](https://github-externships.github.io/externship/structure.html). Students can begin registering and submitting project proposals to mentor organizations—including Hoppscotch—on April 22, 2021.
|
||||
|
||||
All proposals must be submitted by May 21, 2021.
|
||||
|
||||
We look forward to seeing your proposals for a happy summer of coding.
|
||||
|
||||
## **Mentors**
|
||||
|
||||
- [Liyas Thomas](https://github.com/liyasthomas)
|
||||
- [Andrew Bastin](https://github.com/andrewbastin)
|
||||
|
||||
If you have any questions or queries please contact us via [Telegram](https://hoppscotch.io/externship_telegram), [Discord](https://hoppscotch.io/discord) or send an email to us at support@hoppscotch.io.
|
||||
@@ -49,7 +49,7 @@ body {
|
||||
@apply text-base;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply transition;
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
@@ -57,12 +57,6 @@ body {
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
body.afterLoad {
|
||||
@apply transition-colors;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
body.sticky-footer footer {
|
||||
@apply opacity-25;
|
||||
}
|
||||
|
||||
@@ -157,7 +157,6 @@ export default {
|
||||
$responsiveWidth: 768px;
|
||||
|
||||
.nav-first {
|
||||
@apply z-10;
|
||||
@apply h-screen;
|
||||
@apply p-2;
|
||||
@apply bg-primaryDark;
|
||||
@@ -268,6 +267,7 @@ nav.secondary-nav {
|
||||
@media (max-width: $responsiveWidth) {
|
||||
.nav-first {
|
||||
@apply fixed;
|
||||
@apply z-10;
|
||||
@apply top-auto;
|
||||
@apply bottom-0;
|
||||
@apply h-auto;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div>
|
||||
<AppSection ref="request" :label="$t('request')" no-legend>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div>
|
||||
<AppSection ref="request" :label="$t('request')" no-legend>
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<slot name="body"></slot>
|
||||
<!-- <div class="fade top"></div>
|
||||
<div class="fade bottom"></div> -->
|
||||
<!-- <div class="top fade"></div>
|
||||
<div class="bottom fade"></div> -->
|
||||
</div>
|
||||
<div v-if="hasFooterSlot" class="modal-footer">
|
||||
<slot name="footer"></slot>
|
||||
@@ -44,7 +44,7 @@ export default {
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.32);
|
||||
background-color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
|
||||
.modal-wrapper {
|
||||
@@ -66,7 +66,7 @@ export default {
|
||||
@apply bg-primary;
|
||||
@apply rounded-lg;
|
||||
@apply shadow-2xl;
|
||||
@apply border;
|
||||
@apply border-4;
|
||||
@apply border-tooltip;
|
||||
|
||||
max-height: calc(100vh - 128px);
|
||||
@@ -108,25 +108,25 @@ export default {
|
||||
@apply duration-150;
|
||||
}
|
||||
|
||||
.fade {
|
||||
@apply absolute;
|
||||
@apply block;
|
||||
@apply transition;
|
||||
@apply ease-in-out;
|
||||
@apply duration-150;
|
||||
// .fade {
|
||||
// @apply absolute;
|
||||
// @apply block;
|
||||
// @apply transition;
|
||||
// @apply ease-in-out;
|
||||
// @apply duration-150;
|
||||
|
||||
left: 16px;
|
||||
right: 20px;
|
||||
height: 32px;
|
||||
// left: 16px;
|
||||
// right: 20px;
|
||||
// height: 32px;
|
||||
|
||||
&.top {
|
||||
top: 68px;
|
||||
background: linear-gradient(to bottom, var(--primary-color), transparent);
|
||||
}
|
||||
// &.top {
|
||||
// top: 56px;
|
||||
// background: linear-gradient(to bottom, var(--primary-color), transparent);
|
||||
// }
|
||||
|
||||
&.bottom {
|
||||
bottom: 16px;
|
||||
background: linear-gradient(to top, var(--primary-color), transparent);
|
||||
}
|
||||
}
|
||||
// &.bottom {
|
||||
// bottom: 16px;
|
||||
// background: linear-gradient(to top, var(--primary-color), transparent);
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -27,8 +27,6 @@ export default {
|
||||
document.documentElement.setAttribute("data-accent", color)
|
||||
},
|
||||
async mounted() {
|
||||
document.body.classList.add("afterLoad")
|
||||
|
||||
performMigrations()
|
||||
|
||||
console.log(
|
||||
|
||||
@@ -14,12 +14,6 @@
|
||||
status = 301
|
||||
force = true
|
||||
|
||||
[[redirects]]
|
||||
from = "/externship_telegram"
|
||||
to = "https://t.me/hoppscotch_externship"
|
||||
status = 301
|
||||
force = true
|
||||
|
||||
[[redirects]]
|
||||
from = "/beta"
|
||||
to = "https://forms.gle/XPYDMp8m6JHNWcYp9"
|
||||
|
||||
@@ -60,12 +60,9 @@
|
||||
v-for="(header, index) in headers"
|
||||
:key="`${header.value}_${index}`"
|
||||
class="
|
||||
border-b border-dashed
|
||||
divide-y
|
||||
md:divide-x
|
||||
border-divider
|
||||
divide-dashed divide-divider
|
||||
md:divide-y-0
|
||||
divide-y divide-dashed divide-divider
|
||||
border-b border-dashed border-divider
|
||||
md:divide-x md:divide-y-0
|
||||
"
|
||||
:class="{ 'border-t': index == 0 }"
|
||||
>
|
||||
@@ -343,7 +340,7 @@
|
||||
</AppSection>
|
||||
</div>
|
||||
|
||||
<aside class="sticky-inner inner-right lg:max-w-md">
|
||||
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection ref="docs" :label="$t('docs')" no-legend>
|
||||
@@ -466,6 +463,11 @@
|
||||
</SmartTab> -->
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
|
||||
<SmartHideMenu
|
||||
:active="activeSidebar"
|
||||
@toggle="activeSidebar = !activeSidebar"
|
||||
/>
|
||||
</div>
|
||||
<CollectionsSaveRequest
|
||||
mode="graphql"
|
||||
|
||||
Reference in New Issue
Block a user