diff --git a/README.md b/README.md index 95402d899..515307816 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,9 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno # postwoman Postwoman -### 👽 API request builder by [Liyas Thomas](https://github.com/liyasthomas) +### API request builder + +**Start here: _[Story behind Postwoman](https://dev.to/liyasthomas/i-created-postwoman-an-online-open-source-api-request-builder-41md)_**

@@ -28,13 +30,72 @@ When I wrote this, only God and I understood what I was doing. Now, only God kno ### Features :sparkles: -:heart: **Lightweight and minimal**: Crafted with minimalistic UI design +:heart: **Lightweight**: Crafted with minimalistic UI design -:electric_plug: **Real-time demo**: Send requests and get response right away! + - Faster, lighter, cleaner, minimal & responsive -:robot: **VIBGYOR**: Neon combination of colors for background and foreground +:zap: **Real-time**: Send requests and get/copy responses right away! -:sparkles: **PWA**: Install as a PWA on your device +**Methods:** + - GET - Retrieve information about the REST API resource + - POST - Create a REST API resource + - PUT - Update a REST API resource + - DELETE - Delete a REST API resource or related component + - OPTIONS - Describe the communication options for the target resource. + +_History entries are synced with local session storage_ + +:rainbow: **VIBGYOR**: Neon combination background, foreground & accent colors - because customization === freedom :sparkles: + +**Customizations:** + - Dark and Light background themes + - Choose accent color + - Toggle multi-colored frames + +_Customized themes are also synced with local session storage_ + +:fire: **PWA**: Install as a **[PWA](https://developers.google.com/web/progressive-web-apps)** on your device + +**Features:** + - Instant loading with Service Workers + - Offline support + - Low RAM/memory and CUP usage + +:electric_plug: **Web Socket**: Establish full-duplex communication channels over a single TCP connection + + - Send and receive data + +:closed_lock_with_key: **Authentication**: Allows to identity the end user + +**Types:** + - None + - Basic authentication using username and password + - Token based authentication + +:loudspeaker: **Headers**: Describes the format the body of your request is being sent as + +:mailbox: **Parameters**: Use request parameters to set varying parts in simulated requests + +:page_with_curl: **Request Body**: Used to send and receive data via the REST API + +**Options:** + - Set content Type + - Toggle between RAW input and parameter list + +:wave: **Responses**: Contains the status line, headers and the message/response body + +_HTML responses have "Preview HTML" feature_ + +:: **History**: Request entries are synced with local session storage to reuse with a single click + +**Fields** + - Timestamp + - Method + - Status code + - URL + - Path + +_History entries can be deleted one-by-one or all together_ --- @@ -111,6 +172,7 @@ See the [CHANGELOG](CHANGELOG.md) file for details. ### Testing and Debugging * [Liyas Thomas](https://github.com/liyasthomas) +* ([contributors](https://github.com/liyasthomas/postwoman/graphs/contributors)) ### Contributors * [NBTX](https://github.com/NBTX) diff --git a/assets/css/styles.scss b/assets/css/styles.scss index 4774b393e..9c7a5de8a 100644 --- a/assets/css/styles.scss +++ b/assets/css/styles.scss @@ -20,16 +20,6 @@ $responsiveWidth: 720px; font-family: "Poppins", "Roboto", "Noto", sans-serif; } -@keyframes fadein { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - a { display: inline-flex; color: inherit; @@ -42,7 +32,6 @@ body { color: var(--fg-color); font-weight: 500; line-height: 1.5; - animation: fadein 0.2s; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; @@ -56,6 +45,10 @@ h3 { font-weight: 700; } +h3.title { + margin: 4px; +} + header, footer { display: flex; @@ -65,20 +58,6 @@ footer { justify-content: space-between; } - -@media(max-width: $responsiveWidth){ - header { - display: block; - text-align: center; - - nav { - display: inline-flex; - margin-top: 20px; - } - } -} - - nav { a:not(:last-of-type) { margin-right: 15px; @@ -87,9 +66,9 @@ nav { body.sticky-footer footer { position: fixed; + right: 0; bottom: 0; left: 0; - right: 0; } .logo { @@ -172,7 +151,15 @@ fieldset.purple legend { color: #C198FB; } -.collapsible.hidden { +fieldset.orange { + border-color: #F5A623; +} + +fieldset.orange legend { + color: #F5A623; +} + +.hidden { display: none; } @@ -183,8 +170,8 @@ textarea, pre { margin: 4px; padding: 8px 16px; - width: calc(100% - 8px); border-radius: 4px; + width: calc(100% - 8px); background-color: var(--bg-dark-color); color: var(--fg-color); font-weight: 700; @@ -196,14 +183,36 @@ pre { select, input, option { - height: 38px; + height: 41px; } input[type="checkbox"] { - width: initial; + display: none; - &, & + label { + &, + & + label { vertical-align: middle; + cursor: pointer; + + &:before { + content: "\2714"; + border: 2px solid var(--fg-color); + border-radius: 4px; + display: inline-flex; + height: 16px; + width: 16px; + align-items: center; + justify-content: center; + margin: 8px 8px 8px 0; + color: transparent; + transition: .2s; + } + } + + &:checked + label:before { + background-color: var(--ac-color); + border-color: var(--ac-color); + color: var(--act-color); } } @@ -234,18 +243,24 @@ ol li { flex-direction: column; flex-grow: 1; } -.flex-wrap{ + +.flex-wrap { display: flex; justify-content: space-between; -} -.btn-copy{ - padding: 6px 14px; - font-size: 11px; - margin-right: 15px; - + align-items: center; } @media (max-width: $responsiveWidth) { + header { + display: block; + text-align: center; + + nav { + display: inline-flex; + margin-top: 20px; + } + } + ul, ol { flex-direction: column; @@ -255,6 +270,10 @@ ol li { ol li { display: flex; } + + .hide-on-small-screen { + display: none; + } } #installPWA { @@ -281,6 +300,10 @@ ol li { background-color: #B71C1C; } +.missing-data-response { + background-color: #676767; +} + fieldset#history { .method-list-item { position: relative; @@ -293,3 +316,37 @@ fieldset#history { } } } + +.align-left { + text-align: left; +} + +.align-right { + text-align: right; +} + +#response-details-wrapper { + position: relative; + overflow: hidden; + border-radius: 4px; + margin: 4px; + + textarea { + width: 100%; + } + + #response-details { + margin: 0; + } + + .covers-response { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: white; + height: 100%; + width: 100%; + } +} diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue index 262c718f2..40f9bd1b1 100644 --- a/components/settings/swatch.vue +++ b/components/settings/swatch.vue @@ -12,10 +12,11 @@ display: inline-block; vertical-align: middle; - padding: 8px 15px; - margin: 5px; + padding: 8px 16px; + margin: 4px; background-color: rgba(93, 93, 93, 0.2); border-radius: 4px; + cursor: pointer; &.active { background-color: rgba(93, 93, 93, 0.3); @@ -24,10 +25,10 @@ .preview { vertical-align: middle; display: inline-block; - width: 36px; - height: 36px; + width: 32px; + height: 32px; border-radius: 100%; - margin-right: 10px; + margin-right: 8px; position: relative; .activeTick { diff --git a/layouts/default.vue b/layouts/default.vue index 7f439597a..aa5f2f463 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -3,55 +3,54 @@
-

Postwoman

+

+ Postwoman

API request builder

-
- -
- + diff --git a/pages/index.vue b/pages/index.vue index 8280c7d44..98a03077a 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,6 +1,5 @@ - diff --git a/pages/settings.vue b/pages/settings.vue index bb34e09d5..fa6b17d7a 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -1,126 +1,133 @@ - \ No newline at end of file + } + + diff --git a/pages/websocket.vue b/pages/websocket.vue index cd371346c..1d0d8d1da 100644 --- a/pages/websocket.vue +++ b/pages/websocket.vue @@ -1,6 +1,5 @@ - +