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

16
assets/scss/themes.scss
View File

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

2
components/app/Contributors.vue
View File

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

222
components/app/Sidenav.vue
View File

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

2
components/collections/index.vue
View File

@@ -1,5 +1,5 @@
<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">
<input
aria-label="Search"

2
components/environments/index.vue
View File

@@ -1,5 +1,5 @@
<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">
<span class="select-wrapper">
<select

2
components/history/index.vue
View File

@@ -1,5 +1,5 @@
<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">
<input
aria-label="Search"

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

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

2
components/http/BodyParameters.vue
View File

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

2
components/http/Headers.vue
View File

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

2
components/http/Notes.vue
View File

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

2
components/http/Parameters.vue
View File

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

2
components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<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" />
<div v-if="response.body && response.body !== $t('loading')">
<LensesResponseBodyRenderer :response="response" />

38
components/lenses/ResponseBodyRenderer.vue
View File

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

8
components/realtime/Mqtt.vue
View File

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

4
components/realtime/Socketio.vue
View File

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

4
components/realtime/Sse.vue
View File

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

4
components/realtime/Websocket.vue
View File

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

11
components/smart/AccentModePicker.vue
View File

@@ -2,12 +2,15 @@
<div class="flex flex-col">
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<div>
<!-- text-indigo-400 -->
<!-- text-purple-400 -->
<!-- text-pink-400 -->
<span
v-for="(color, index) of colors"
v-for="(color, index) of accentColors"
:key="`color-${index}`"
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="[{ 'bg-bgDarkColor': color === active }, `text-${color}-400`]"
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="[`text-${color}-400`, { 'bg-actColor': color === active }]"
@click="setActiveColor(color)"
>
<i class="material-icons">lens</i>
@@ -21,7 +24,7 @@ export default {
data() {
return {
active: localStorage.getItem("THEME_COLOR") || "green",
colors: ["blue", "green", "teal", "purple", "orange", "pink", "red", "yellow"],
accentColors: ["blue", "green", "indigo", "purple", "red", "pink", "yellow"],
}
},
methods: {

4
components/smart/AceEditor.vue
View File

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

2
components/smart/ColorModePicker.vue
View File

@@ -16,7 +16,7 @@
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="[
{ 'bg-bgDarkColor': color === $colorMode.preference },
{ 'bg-actColor': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value },
]"
@click="$colorMode.preference = color"

13
components/smart/Tabs.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="tabs-wrapper">
<section class="tabs-wrapper">
<div class="tabs" :class="styles">
<ul>
<li
@@ -21,20 +21,19 @@
<div class="tabs-details">
<slot></slot>
</div>
</div>
</section>
</template>
<style scoped lang="scss">
.tabs-wrapper {
@apply flex;
@apply flex-col;
@apply flex-no-wrap;
@apply flex-nowrap;
@apply flex-1;
.tabs {
@apply scrolling-touch;
@apply flex;
@apply whitespace-no-wrap;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply mt-4;
@@ -87,13 +86,15 @@
ul,
ol {
@apply flex-row;
@apply flex-no-wrap;
@apply flex-nowrap;
}
}
</style>
<script>
import Section from "../app/Section.vue"
export default {
components: { Section },
props: {
styles: {
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: {
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",
"mustache": "^4.1.0",
"nuxt": "^2.15.3",
"nuxt-i18n": "^6.21.0",
"nuxt-i18n": "^6.21.1",
"paho-mqtt": "^1.1.0",
"socket.io-client": "^4.0.0",
"socketio-wildcard": "^2.0.0",
@@ -51,17 +51,18 @@
"@nuxtjs/google-analytics": "^2.4.0",
"@nuxtjs/google-fonts": "^1.3.0",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/tailwindcss": "^3.4.3",
"@nuxtjs/tailwindcss": "^4.0.1",
"@testing-library/jest-dom": "^5.11.9",
"@vue/test-utils": "^1.1.3",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"eslint": "^7.20.0",
"eslint": "^7.22.0",
"eslint-plugin-vue": "^7.7.0",
"firebase-mock": "^2.3.2",
"husky": "^5.1.3",
"jest": "^26.6.3",
"jest-serializer-vue": "^2.0.2",
"postcss": "^8.2.8",
"prettier": "^2.2.1",
"pretty-quick": "^3.1.0",
"raw-loader": "^4.0.2",

4
pages/doc.vue
View File

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

14
pages/graphql.vue
View File

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

4
pages/index.vue
View File

@@ -2,7 +2,7 @@
<div class="page">
<div class="content">
<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>
<li class="shrink">
<label for="method">{{ $t("method") }}</label>
@@ -208,7 +208,7 @@
</SmartTab>
<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>
<li>
<div class="row-wrapper">

12
pages/settings.vue
View File

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

6
tailwind.config.js
View File

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