feat: remove tailwindcss + introduce windicss
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user