btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

TailwindCSS v2.x (#1540)

Browse Source
This commit is contained in:
Liyas Thomas
2021-03-16 01:49:21 -07:00
committed by GitHub
parent 5399ddf6ac
commit f1389cdba0
30 changed files with 6068 additions and 21361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
assets/scss/styles.scss
View File

@@ -110,7 +110,7 @@ footer {
@apply min-h-screen; @apply min-h-screen;
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
} }
.wrapper .page { .wrapper .page {
@@ -415,14 +415,10 @@ button {
@apply font-icon; @apply font-icon;
@apply font-normal; @apply font-normal;
@apply not-italic; @apply not-italic;
@apply h-6;
@apply w-6;
@apply text-2xl;
@apply leading-6;
@apply inline-block; @apply inline-block;
@apply normal-case; @apply normal-case;
@apply tracking-normal; @apply tracking-normal;
@apply whitespace-no-wrap; @apply whitespace-nowrap;
@apply antialiased; @apply antialiased;
word-wrap: normal; word-wrap: normal;
@@ -627,7 +623,7 @@ ul li,
ol li { ol li {
@apply inline-flex; @apply inline-flex;
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
@apply flex-1; @apply flex-1;
@apply justify-center; @apply justify-center;
@@ -646,7 +642,7 @@ ol li {
span, span,
div { div {
@apply inline-flex; @apply inline-flex;
@apply flex-no-wrap; @apply flex-nowrap;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
} }
@@ -661,7 +657,7 @@ ol li {
} }
.redir-response { .redir-response {
@apply text-orange-400; @apply text-pink-400;
} }
.cl-error-response { .cl-error-response {
@@ -696,7 +692,7 @@ ol li {
} }
#send { #send {
@apply whitespace-no-wrap; @apply whitespace-nowrap;
@apply outline-none; @apply outline-none;
@apply border-none; @apply border-none;
@@ -719,6 +715,7 @@ ol li {
section { section {
@apply flex; @apply flex;
@apply rounded-lg; @apply rounded-lg;
@apply w-full;
} }
.toasted-container .toasted { .toasted-container .toasted {
@@ -772,7 +769,7 @@ section {
ul, ul,
ol { ol {
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
} }
ul li, ul li,

16
assets/scss/themes.scss
View File

@@ -83,9 +83,9 @@
--ac-color: theme("colors.green.400"); --ac-color: theme("colors.green.400");
} }
@mixin tealTheme { @mixin indigoTheme {
// Acent color // Acent color
--ac-color: theme("colors.teal.400"); --ac-color: theme("colors.indigo.400");
} }
@mixin purpleTheme { @mixin purpleTheme {
@@ -93,11 +93,6 @@
--ac-color: theme("colors.purple.400"); --ac-color: theme("colors.purple.400");
} }
@mixin orangeTheme {
// Acent color
--ac-color: theme("colors.orange.400");
}
@mixin pinkTheme { @mixin pinkTheme {
// Acent color // Acent color
--ac-color: theme("colors.pink.400"); --ac-color: theme("colors.pink.400");
@@ -137,15 +132,12 @@
:root[data-accent="green"] { :root[data-accent="green"] {
@include greenTheme; @include greenTheme;
} }
:root[data-accent="teal"] { :root[data-accent="indigo"] {
@include tealTheme; @include indigoTheme;
} }
:root[data-accent="purple"] { :root[data-accent="purple"] {
@include purpleTheme; @include purpleTheme;
} }
:root[data-accent="orange"] {
@include orangeTheme;
}
:root[data-accent="pink"] { :root[data-accent="pink"] {
@include pinkTheme; @include pinkTheme;
} }

2
components/app/Contributors.vue
View File

@@ -162,7 +162,7 @@
.contributors { .contributors {
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply flex-no-wrap; @apply flex-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply m-2; @apply m-2;
} }

222
components/app/Sidenav.vue
View File

@@ -59,111 +59,61 @@
<i class="material-icons">settings</i> <i class="material-icons">settings</i>
</nuxt-link> </nuxt-link>
</nav> </nav>
<div v-if="$route.path == '/'"> <nav v-if="$route.path == '/'" class="secondary-nav">
<nav class="secondary-nav"> <a href="#request" v-tooltip.right="$t('request')">
<ul> <i class="material-icons">cloud_upload</i>
<li> </a>
<a href="#request" v-tooltip.right="$t('request')"> <a href="#options" v-tooltip.right="$t('options')">
<i class="material-icons">cloud_upload</i> <i class="material-icons">toc</i>
</a> </a>
</li> <a href="#response" v-tooltip.right="$t('response')">
<li> <i class="material-icons">cloud_download</i>
<a href="#options" v-tooltip.right="$t('options')"> </a>
<i class="material-icons">toc</i> </nav>
</a> <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
</li> <a href="#request" v-tooltip.right="$t('request')">
<li> <i class="material-icons">cloud_upload</i>
<a href="#response" v-tooltip.right="$t('response')"> </a>
<i class="material-icons">cloud_download</i> <a href="#response" v-tooltip.right="$t('communication')">
</a> <i class="material-icons">cloud_download</i>
</li> </a>
</ul> </nav>
</nav> <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
</div> <a href="#endpoint" v-tooltip.right="$t('endpoint')">
<div v-else-if="$route.path.includes('/realtime')"> <i class="material-icons">cloud</i>
<nav class="secondary-nav"> </a>
<ul> <a href="#schema" v-tooltip.right="$t('schema')">
<li> <i class="material-icons">assignment_returned</i>
<a href="#request" v-tooltip.right="$t('request')"> </a>
<i class="material-icons">cloud_upload</i> <a href="#query" v-tooltip.right="$t('query')">
</a> <i class="material-icons">cloud_upload</i>
</li> </a>
<li> <a href="#response" v-tooltip.right="$t('response')">
<a href="#response" v-tooltip.right="$t('communication')"> <i class="material-icons">cloud_download</i>
<i class="material-icons">cloud_download</i> </a>
</a> </nav>
</li> <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
</ul> <a href="#import" v-tooltip.right="$t('import')">
</nav> <i class="material-icons">folder</i>
</div> </a>
<div v-else-if="$route.path.includes('/graphql')"> <a href="#documentation" v-tooltip.right="$t('documentation')">
<nav class="secondary-nav"> <i class="material-icons">insert_drive_file</i>
<ul> </a>
<li> </nav>
<a href="#endpoint" v-tooltip.right="$t('endpoint')"> <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
<i class="material-icons">cloud</i> <a href="#account" v-tooltip.right="$t('account')">
</a> <i class="material-icons">person</i>
</li> </a>
<li> <a href="#theme" v-tooltip.right="$t('theme')">
<a href="#schema" v-tooltip.right="$t('schema')"> <i class="material-icons">brush</i>
<i class="material-icons">assignment_returned</i> </a>
</a> <a href="#extensions" v-tooltip.right="$t('extensions')">
</li> <i class="material-icons">extension</i>
<li> </a>
<a href="#query" v-tooltip.right="$t('query')"> <a href="#proxy" v-tooltip.right="$t('proxy')">
<i class="material-icons">cloud_upload</i> <i class="material-icons">public</i>
</a> </a>
</li> </nav>
<li>
<a href="#response" v-tooltip.right="$t('response')">
<i class="material-icons">cloud_download</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/doc')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#import" v-tooltip.right="$t('import')">
<i class="material-icons">folder</i>
</a>
</li>
<li>
<a href="#documentation" v-tooltip.right="$t('documentation')">
<i class="material-icons">insert_drive_file</i>
</a>
</li>
</ul>
</nav>
</div>
<div v-else-if="$route.path.includes('/settings')">
<nav class="secondary-nav">
<ul>
<li>
<a href="#account" v-tooltip.right="$t('account')">
<i class="material-icons">person</i>
</a>
</li>
<li>
<a href="#theme" v-tooltip.right="$t('theme')">
<i class="material-icons">brush</i>
</a>
</li>
<li>
<a href="#extensions" v-tooltip.right="$t('extensions')">
<i class="material-icons">extensions</i>
</a>
</li>
<li>
<a href="#proxy" v-tooltip.right="$t('proxy')">
<i class="material-icons">public</i>
</a>
</li>
</ul>
</nav>
</div>
</aside> </aside>
</template> </template>
@@ -178,16 +128,17 @@ $responsiveWidth: 768px;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
// @apply overflow-y-auto; @apply space-y-2;
} }
nav.primary-nav { nav.primary-nav {
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply space-y-2; @apply space-y-2;
@apply w-full;
svg { svg {
@apply fill-current; @apply fill-current;
@@ -239,45 +190,38 @@ nav.primary-nav::-webkit-scrollbar,
nav.secondary-nav { nav.secondary-nav {
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply border-t-2; @apply border-t-2;
@apply border-dashed; @apply border-dashed;
@apply border-brdColor; @apply border-brdColor;
@apply mt-2; @apply pt-2;
@apply space-y-2;
ul { a {
@apply flex; @apply inline-flex;
@apply flex-col; @apply items-center;
@apply flex-no-wrap; @apply justify-center;
@apply space-y-2; @apply flex-shrink-0;
@apply py-1; @apply p-4;
@apply rounded-full;
@apply bg-bgDarkColor;
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-150;
li { &:hover {
@apply flex; @apply text-fgColor;
@apply fill-current;
}
a { &.current {
@apply p-4; @apply text-acColor;
@apply rounded-full; @apply fill-current;
@apply bg-bgDarkColor;
@apply text-fgLightColor;
@apply fill-current;
@apply outline-none;
@apply transition;
@apply ease-in-out;
@apply duration-150;
&:hover {
@apply text-fgColor;
@apply fill-current;
}
&.current {
@apply text-acColor;
@apply fill-current;
}
}
} }
} }
} }
@@ -296,7 +240,7 @@ nav.secondary-nav {
nav.primary-nav { nav.primary-nav {
@apply flex-row; @apply flex-row;
@apply flex-no-wrap; @apply flex-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;
@apply space-y-0; @apply space-y-0;

2
components/collections/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend> <AppSection :label="$t('collections')" ref="collections" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<input <input
aria-label="Search" aria-label="Search"

2
components/environments/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="green" icon="history" :label="$t('environments')" ref="environments" no-legend> <AppSection icon="history" :label="$t('environments')" ref="environments" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<span class="select-wrapper"> <span class="select-wrapper">
<select <select

2
components/history/index.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="green" icon="history" :label="$t('history')" ref="history" no-legend> <AppSection icon="history" :label="$t('history')" ref="history" no-legend>
<div class="show-on-large-screen"> <div class="show-on-large-screen">
<input <input
aria-label="Search" aria-label="Search"

28
components/history/rest/Card.vue
View File

@@ -18,19 +18,21 @@
class="bg-transparent" class="bg-transparent"
/> />
</li> </li>
<button <span>
data-testid="star_button" <button
class="icon" data-testid="star_button"
:class="{ stared: entry.star }" class="icon"
@click="$emit('toggle-star')" :class="{ stared: entry.star }"
v-tooltip="{ @click="$emit('toggle-star')"
content: !entry.star ? $t('add_star') : $t('remove_star'), v-tooltip="{
}" content: !entry.star ? $t('add_star') : $t('remove_star'),
> }"
<i class="material-icons"> >
{{ entry.star ? "star" : "star_border" }} <i class="material-icons">
</i> {{ entry.star ? "star" : "star_border" }}
</button> </i>
</button>
</span>
<!-- <li> <!-- <li>
<button <button
class="icon" class="icon"

2
components/http/BodyParameters.vue
View File

@@ -137,7 +137,7 @@
.file-chips-container { .file-chips-container {
@apply flex; @apply flex;
@apply flex-1; @apply flex-1;
@apply whitespace-no-wrap; @apply whitespace-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-bgDarkColor; @apply bg-bgDarkColor;

2
components/http/Headers.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="orange" label="Headers" ref="headers" no-legend> <AppSection label="Headers" ref="headers" no-legend>
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">

2
components/http/Notes.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="pink" :label="$t('notes')" ref="sync" no-legend> <AppSection :label="$t('notes')" ref="sync" no-legend>
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
<FirebaseInputform /> <FirebaseInputform />
<FirebaseFeeds /> <FirebaseFeeds />

2
components/http/Parameters.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="pink" label="Parameters" ref="parameters" no-legend> <AppSection label="Parameters" ref="parameters" no-legend>
<ul v-if="params.length !== 0"> <ul v-if="params.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">

2
components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<AppSection class="purple" id="response" :label="$t('response')" ref="response" no-legend> <AppSection id="response" :label="$t('response')" ref="response" no-legend>
<HttpResponseMeta :response="response" :active="active" /> <HttpResponseMeta :response="response" :active="active" />
<div v-if="response.body && response.body !== $t('loading')"> <div v-if="response.body && response.body !== $t('loading')">
<LensesResponseBodyRenderer :response="response" /> <LensesResponseBodyRenderer :response="response" />

38
components/lenses/ResponseBodyRenderer.vue
View File

@@ -1,24 +1,22 @@
<template> <template>
<div> <SmartTabs styles="m-4">
<SmartTabs styles="m-4"> <SmartTab
<SmartTab v-for="(lens, index) in validLenses"
v-for="(lens, index) in validLenses" :key="lens.lensName"
:key="lens.lensName" :id="lens.lensName"
:id="lens.lensName" :label="lens.lensName"
:label="lens.lensName" :selected="index === 0"
:selected="index === 0" >
> <component :is="lens.renderer" :response="response" />
<component :is="lens.renderer" :response="response" /> </SmartTab>
</SmartTab> <SmartTab
<SmartTab v-if="Object.keys(response.headers).length !== 0"
v-if="Object.keys(response.headers).length !== 0" id="headers"
id="headers" :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
:label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`" >
> <LensesHeadersRenderer :headers="response.headers" />
<LensesHeadersRenderer :headers="response.headers" /> </SmartTab>
</SmartTab> </SmartTabs>
</SmartTabs>
</div>
</template> </template>
<script> <script>

8
components/realtime/Mqtt.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<AppSection class="blue" :label="$t('request')" no-legend> <AppSection :label="$t('request')" no-legend>
<ul> <ul>
<li> <li>
<label for="mqtt-url">{{ $t("url") }}</label> <label for="mqtt-url">{{ $t("url") }}</label>
@@ -30,9 +30,9 @@
</li> </li>
</div> </div>
</ul> </ul>
</Appsection> </AppSection>
<AppSection class="blue" :label="$t('communication')" no-legend> <AppSection :label="$t('communication')" no-legend>
<ul> <ul>
<li> <li>
<RealtimeLog :title="$t('log')" :log="this.log" /> <RealtimeLog :title="$t('log')" :log="this.log" />
@@ -94,7 +94,7 @@
</li> </li>
</div> </div>
</ul> </ul>
</Appsection> </AppSection>
</div> </div>
</template> </template>

4
components/realtime/Socketio.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<AppSection class="blue" :label="$t('request')" ref="request" no-legend> <AppSection :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="socketio-url">{{ $t("url") }}</label> <label for="socketio-url">{{ $t("url") }}</label>
@@ -43,7 +43,7 @@
</ul> </ul>
</AppSection> </AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend> <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />

4
components/realtime/Sse.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<AppSection class="blue" :label="$t('request')" ref="request" no-legend> <AppSection :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="server">{{ $t("server") }}</label> <label for="server">{{ $t("server") }}</label>
@@ -36,7 +36,7 @@
</ul> </ul>
</AppSection> </AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend> <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<RealtimeLog :title="$t('events')" :log="events.log" /> <RealtimeLog :title="$t('events')" :log="events.log" />

4
components/realtime/Websocket.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<AppSection class="blue" :label="$t('request')" ref="request" no-legend> <AppSection :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li> <li>
<label for="websocket-url">{{ $t("url") }}</label> <label for="websocket-url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
</ul> </ul>
</AppSection> </AppSection>
<AppSection class="purple" :label="$t('communication')" id="response" ref="response" no-legend> <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
<ul> <ul>
<li> <li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> <RealtimeLog :title="$t('log')" :log="communication.log" />

11
components/smart/AccentModePicker.vue
View File

@@ -2,12 +2,15 @@
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label> <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div> <div>
<!-- text-indigo-400 -->
<!-- text-purple-400 -->
<!-- text-pink-400 -->
<span <span
v-for="(color, index) of colors" v-for="(color, index) of accentColors"
:key="`color-${index}`" :key="`color-${index}`"
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 hover:shadow-none" class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer hover:shadow-none"
:class="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]" :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
@click="setActiveColor(color)" @click="setActiveColor(color)"
> >
<i class="material-icons">lens</i> <i class="material-icons">lens</i>
@@ -21,7 +24,7 @@ export default {
data() { data() {
return { return {
active: localStorage.getItem("THEME_COLOR") || "green", active: localStorage.getItem("THEME_COLOR") || "green",
colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"], accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
} }
}, },
methods: { methods: {

4
components/smart/AceEditor.vue
View File

@@ -37,7 +37,7 @@
.outline { .outline {
@apply flex; @apply flex;
@apply flex-no-wrap; @apply flex-nowrap;
@apply w-full; @apply w-full;
@apply overflow-auto; @apply overflow-auto;
@apply font-mono; @apply font-mono;
@@ -103,7 +103,7 @@ export default {
provideJSONOutline: { provideJSONOutline: {
type: Boolean, type: Boolean,
default: false, default: false,
required: false required: false,
}, },
value: { value: {
type: String, type: String,

2
components/smart/ColorModePicker.vue
View File

@@ -16,7 +16,7 @@
v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`" v-tooltip="`${color.charAt(0).toUpperCase()}${color.slice(1)}`"
class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none" class="inline-flex items-center justify-center p-3 m-2 transition duration-150 ease-in-out bg-transparent rounded-full cursor-pointer border-collapseer-2 text-fgLightColor hover:text-fgColor hover:shadow-none"
:class="[ :class="[
{ 'bg-bgDarkColor': color === $colorMode.preference }, { 'bg-actColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value }, { 'text-acColor hover:text-acColor': color === $colorMode.value },
]" ]"
@click="$colorMode.preference = color" @click="$colorMode.preference = color"

13
components/smart/Tabs.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tabs-wrapper"> <section class="tabs-wrapper">
<div class="tabs" :class="styles"> <div class="tabs" :class="styles">
<ul> <ul>
<li <li
@@ -21,20 +21,19 @@
<div class="tabs-details"> <div class="tabs-details">
<slot></slot> <slot></slot>
</div> </div>
</div> </section>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.tabs-wrapper { .tabs-wrapper {
@apply flex; @apply flex;
@apply flex-col; @apply flex-col;
@apply flex-no-wrap; @apply flex-nowrap;
@apply flex-1; @apply flex-1;
.tabs { .tabs {
@apply scrolling-touch;
@apply flex; @apply flex;
@apply whitespace-no-wrap; @apply whitespace-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply mt-4; @apply mt-4;
@@ -87,13 +86,15 @@
ul, ul,
ol { ol {
@apply flex-row; @apply flex-row;
@apply flex-no-wrap; @apply flex-nowrap;
} }
} }
</style> </style>
<script> <script>
import Section from "../app/Section.vue"
export default { export default {
components: { Section },
props: { props: {
styles: { styles: {
type: String, type: String,

5
nuxt.config.js
View File

@@ -197,6 +197,11 @@ export default {
}, },
}, },
// TailwindCSS module configuration (https://github.com/nuxt-community/tailwindcss-module)
tailwindcss: {
jit: true,
},
// i18n module configuration (https://github.com/nuxt-community/i18n-module) // i18n module configuration (https://github.com/nuxt-community/i18n-module)
i18n: { i18n: {
locales: [ locales: [

26986
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -34,7 +34,7 @@
"graphql-language-service-interface": "^2.8.2", "graphql-language-service-interface": "^2.8.2",
"mustache": "^4.1.0", "mustache": "^4.1.0",
"nuxt": "^2.15.3", "nuxt": "^2.15.3",
"nuxt-i18n": "^6.21.0", "nuxt-i18n": "^6.21.1",
"paho-mqtt": "^1.1.0", "paho-mqtt": "^1.1.0",
"socket.io-client": "^4.0.0", "socket.io-client": "^4.0.0",
"socketio-wildcard": "^2.0.0", "socketio-wildcard": "^2.0.0",
@@ -51,17 +51,18 @@
"@nuxtjs/google-analytics": "^2.4.0", "@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/google-fonts": "^1.3.0", "@nuxtjs/google-fonts": "^1.3.0",
"@nuxtjs/pwa": "^3.3.5", "@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/tailwindcss": "^3.4.3", "@nuxtjs/tailwindcss": "^4.0.1",
"@testing-library/jest-dom": "^5.11.9", "@testing-library/jest-dom": "^5.11.9",
"@vue/test-utils": "^1.1.3", "@vue/test-utils": "^1.1.3",
"babel-core": "^7.0.0-bridge.0", "babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3", "babel-jest": "^26.6.3",
"eslint": "^7.20.0", "eslint": "^7.22.0",
"eslint-plugin-vue": "^7.7.0", "eslint-plugin-vue": "^7.7.0",
"firebase-mock": "^2.3.2", "firebase-mock": "^2.3.2",
"husky": "^5.1.3", "husky": "^5.1.3",
"jest": "^26.6.3", "jest": "^26.6.3",
"jest-serializer-vue": "^2.0.2", "jest-serializer-vue": "^2.0.2",
"postcss": "^8.2.8",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"pretty-quick": "^3.1.0", "pretty-quick": "^3.1.0",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",

4
pages/doc.vue
View File

@@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<AppSection class="blue" :label="$t('import')" ref="import" no-legend> <AppSection :label="$t('import')" ref="import" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("collection") }}</label> <label>{{ $t("collection") }}</label>
<p class="info"> <p class="info">
@@ -47,7 +47,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="green" :label="$t('documentation')" ref="documentation" no-legend> <AppSection :label="$t('documentation')" ref="documentation" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("documentation") }}</label> <label>{{ $t("documentation") }}</label>
<p v-if="this.items.length === 0" class="info"> <p v-if="this.items.length === 0" class="info">

14
pages/graphql.vue
View File

@@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<AppSection class="blue" :label="$t('endpoint')" ref="endpoint" no-legend> <AppSection :label="$t('endpoint')" ref="endpoint" no-legend>
<ul> <ul>
<li> <li>
<label for="url">{{ $t("url") }}</label> <label for="url">{{ $t("url") }}</label>
@@ -37,7 +37,7 @@
</ul> </ul>
</AppSection> </AppSection>
<AppSection class="orange" :label="$t('headers')" ref="headers" no-legend> <AppSection :label="$t('headers')" ref="headers" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("headers") }}</label> <label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
@@ -140,7 +140,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="green" :label="$t('schema')" ref="schema" no-legend> <AppSection :label="$t('schema')" ref="schema" no-legend>
<div class="row-wrapper"> <div class="row-wrapper">
<label>{{ $t("schema") }}</label> <label>{{ $t("schema") }}</label>
<div v-if="schema"> <div v-if="schema">
@@ -200,7 +200,7 @@
/> />
</AppSection> </AppSection>
<AppSection class="teal" :label="$t('query')" ref="query" no-legend> <AppSection :label="$t('query')" ref="query" no-legend>
<div class="row-wrapper gqlRunQuery"> <div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label> <label for="gqlQuery">{{ $t("query") }}</label>
<div> <div>
@@ -243,7 +243,7 @@
/> />
</AppSection> </AppSection>
<AppSection class="yellow" :label="$t('variables')" ref="variables" no-legend> <AppSection :label="$t('variables')" ref="variables" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("variables") }}</label> <label>{{ $t("variables") }}</label>
<SmartAceEditor <SmartAceEditor
@@ -262,7 +262,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="purple" :label="$t('response')" ref="response" no-legend> <AppSection :label="$t('response')" ref="response" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("response") }}</label> <label>{{ $t("response") }}</label>
<div class="row-wrapper"> <div class="row-wrapper">
@@ -320,7 +320,7 @@
<aside class="sticky-inner inner-right lg:max-w-md"> <aside class="sticky-inner inner-right lg:max-w-md">
<SmartTabs> <SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true"> <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection class="purple" :label="$t('docs')" ref="docs" no-legend> <AppSection :label="$t('docs')" ref="docs" no-legend>
<section class="flex-col"> <section class="flex-col">
<input <input
type="text" type="text"

4
pages/index.vue
View File

@@ -2,7 +2,7 @@
<div class="page"> <div class="page">
<div class="content"> <div class="content">
<div class="page-columns inner-left"> <div class="page-columns inner-left">
<AppSection class="blue" :label="$t('request')" ref="request" no-legend> <AppSection :label="$t('request')" ref="request" no-legend>
<ul> <ul>
<li class="shrink"> <li class="shrink">
<label for="method">{{ $t("method") }}</label> <label for="method">{{ $t("method") }}</label>
@@ -208,7 +208,7 @@
</SmartTab> </SmartTab>
<SmartTab :id="'authentication'" :label="$t('authentication')"> <SmartTab :id="'authentication'" :label="$t('authentication')">
<AppSection class="teal" :label="$t('authentication')" ref="authentication" no-legend> <AppSection :label="$t('authentication')" ref="authentication" no-legend>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="row-wrapper">

12
pages/settings.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<AppSection class="green" :label="$t('account')" ref="account" no-legend> <AppSection :label="$t('account')" ref="account" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("account") }}</label> <label>{{ $t("account") }}</label>
<div v-if="fb.currentUser"> <div v-if="fb.currentUser">
@@ -35,7 +35,7 @@
</SmartToggle> </SmartToggle>
</p> </p>
<p v-if="fb.currentSettings.length !== 3"> <p v-if="fb.currentSettings.length !== 3">
<button class="" @click="initSettings"> <button @click="initSettings">
<i class="material-icons">sync</i> <i class="material-icons">sync</i>
<span>{{ $t("turn_on") + " " + $t("sync") }}</span> <span>{{ $t("turn_on") + " " + $t("sync") }}</span>
</button> </button>
@@ -50,7 +50,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="teal" :label="$t('theme')" ref="theme" no-legend> <AppSection :label="$t('theme')" ref="theme" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("theme") }}</label> <label>{{ $t("theme") }}</label>
<SmartColorModePicker /> <SmartColorModePicker />
@@ -67,7 +67,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="purple" :label="$t('extensions')" ref="extensions" no-legend> <AppSection :label="$t('extensions')" ref="extensions" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("extensions") }}</label> <label>{{ $t("extensions") }}</label>
<div class="row-wrapper"> <div class="row-wrapper">
@@ -87,7 +87,7 @@
</div> </div>
</AppSection> </AppSection>
<AppSection class="blue" :label="$t('proxy')" ref="proxy" no-legend> <AppSection :label="$t('proxy')" ref="proxy" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("proxy") }}</label> <label>{{ $t("proxy") }}</label>
<div class="row-wrapper"> <div class="row-wrapper">
@@ -151,7 +151,7 @@
--> -->
</AppSection> </AppSection>
<AppSection class="red" :label="$t('experiments')" ref="experiments" no-legend> <AppSection :label="$t('experiments')" ref="experiments" no-legend>
<div class="flex flex-col"> <div class="flex flex-col">
<label>{{ $t("experiments") }}</label> <label>{{ $t("experiments") }}</label>
<p class="info"> <p class="info">

6
tailwind.config.js
View File

@@ -44,8 +44,6 @@ module.exports = {
variants: {}, variants: {},
plugins: [], plugins: [],
purge: { purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === "production",
content: [ content: [
"components/**/*.vue", "components/**/*.vue",
"layouts/**/*.vue", "layouts/**/*.vue",
@@ -53,9 +51,5 @@ module.exports = {
"plugins/**/*.js", "plugins/**/*.js",
"nuxt.config.js", "nuxt.config.js",
], ],
// These options are passed through directly to PurgeCSS
options: {
whitelistPatterns: [/^bg-/, /^text-/, /^border-/, /^h-/, /^w-/, /^hover:/],
},
}, },
} }