feat: remove tailwindcss + introduce windicss

This commit is contained in:
Liyas Thomas
2021-06-25 23:44:27 +00:00
committed by GitHub
parent 3e5629e738
commit 6d33132705
84 changed files with 1560 additions and 40544 deletions

View File

@@ -9,12 +9,12 @@
<div class="px-2 row-wrapper">
<span>
<a
v-tooltip.right="$t('recurring')"
v-tooltip.right="$t('one_time_recurring')"
href="https://github.com/sponsors/hoppscotch"
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<i class="material-icons">
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -41,7 +41,7 @@
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<i class="material-icons">donut_large</i>
<span>{{ $t("open_collective") }}</span>
</button>
@@ -56,7 +56,7 @@
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<i class="material-icons">local_parking</i>
<span>{{ $t("patreon") }}</span>
</button>
@@ -71,7 +71,7 @@
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<i class="material-icons">payment</i>
<span>{{ $t("paypal") }}</span>
</button>
@@ -80,7 +80,7 @@
</div>
<hr />
<div class="p-2">
<h3 class="title">Financial Contributors</h3>
<h3 class="heading">Financial Contributors</h3>
<div class="contributors">
<a
href="https://oss.capital/?ref=hoppscotch"

View File

@@ -2,9 +2,9 @@
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("extensions") }}</h3>
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon" @click="hideModal">
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
@@ -20,7 +20,7 @@
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<svg
class="material-icons"
xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@
<span
v-if="hasFirefoxExtInstalled"
v-tooltip="$t('installed')"
class="icon"
class="icon button"
>
<i class="material-icons">done</i>
</span>
@@ -48,7 +48,7 @@
target="_blank"
rel="noopener"
>
<button class="icon">
<button class="icon button">
<svg
class="material-icons"
xmlns="http://www.w3.org/2000/svg"
@@ -63,7 +63,7 @@
<span
v-if="hasChromeExtInstalled"
v-tooltip="$t('installed')"
class="icon"
class="icon button"
>
<i class="material-icons">done</i>
</span>

View File

@@ -49,18 +49,18 @@
</span>
<span class="flex font-mono" style="align-items: start">
<a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
<button v-tooltip="$t('contact_us')" class="icon">
<button v-tooltip="$t('contact_us')" class="icon button">
<i class="material-icons">email</i>
</button>
</a>
<v-popover>
<button v-tooltip="$t('choose_language')" class="icon">
<button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons">translate</i>
</button>
<template slot="popover">
<div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon">
<button v-close-popover class="icon button">
{{ locale.name }}
</button>
</nuxt-link>

View File

@@ -3,7 +3,7 @@
<div class="row-wrapper">
<span class="slide-in">
<nuxt-link :to="localePath('index')">
<h1 class="logo">Hoppscotch</h1>
<h1 class="heading logo">Hoppscotch</h1>
</nuxt-link>
<iframe
src="https://ghbtns.com/github-btn.html?user=hoppscotch&repo=hoppscotch&type=star&count=true"
@@ -22,7 +22,6 @@
target="_blank"
rel="noopener"
class="
inline-flex
items-center
px-4
py-2
@@ -44,7 +43,7 @@
<button
id="installPWA"
v-tooltip="$t('install_pwa')"
class="icon"
class="icon button"
@click.prevent="showInstallPrompt()"
>
<i class="material-icons">offline_bolt</i>
@@ -55,7 +54,7 @@
aria-label="GitHub"
rel="noopener"
>
<button v-tooltip="'GitHub'" class="icon" aria-label="GitHub">
<button v-tooltip="'GitHub'" class="icon button" aria-label="GitHub">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -69,7 +68,7 @@
</button>
</a>
<v-popover v-if="currentUser === null">
<button v-tooltip="$t('login_with')" class="icon">
<button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i>
</button>
<template slot="popover">
@@ -84,7 +83,7 @@
'<br>' +
(currentUser.email || '<label><i>Email not found</i></label>')
"
class="icon"
class="icon button"
aria-label="Account"
>
<img
@@ -98,7 +97,7 @@
<template slot="popover">
<div>
<nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon">
<button class="icon button">
<i class="material-icons">settings</i>
<span>
{{ $t("settings") }}
@@ -112,25 +111,37 @@
</template>
</v-popover>
<v-popover>
<button v-tooltip="$t('more')" class="icon">
<button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i>
</button>
<template slot="popover">
<button v-close-popover class="icon" @click="showExtensions = true">
<button
v-close-popover
class="icon button"
@click="showExtensions = true"
>
<i class="material-icons">extension</i>
<span>{{ $t("extensions") }}</span>
</button>
<button v-close-popover class="icon" @click="showShortcuts = true">
<button
v-close-popover
class="icon button"
@click="showShortcuts = true"
>
<i class="material-icons">keyboard</i>
<span>{{ $t("shortcuts") }}</span>
</button>
<button v-close-popover class="icon" @click="showSupport = true">
<button
v-close-popover
class="icon button"
@click="showSupport = true"
>
<i class="material-icons">favorite</i>
<span>{{ $t("support_us") }}</span>
</button>
<button
v-close-popover
class="icon"
class="icon button"
onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
@@ -144,7 +155,7 @@
v-if="navigatorShare"
v-close-popover
v-tooltip="$t('more')"
class="icon"
class="icon button"
@click="nativeShare"
>
<i class="material-icons">share</i>

View File

@@ -2,9 +2,9 @@
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("shortcuts") }}</h3>
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon" @click="hideModal">
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>

View File

@@ -188,8 +188,6 @@ export default {
</script>
<style scoped lang="scss">
$responsiveWidth: 767px;
.nav-first {
@apply h-screen;
@apply p-2;
@@ -298,7 +296,7 @@ nav.secondary-nav {
}
}
@media (max-width: $responsiveWidth) {
@media (max-width: 767px) {
.nav-first {
@apply fixed;
@apply z-10;

View File

@@ -2,9 +2,9 @@
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("support_us") }}</h3>
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon" @click="hideModal">
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>