refactor: sort windi class names
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="bg-error flex justify-between">
|
||||
<span
|
||||
class="group relative flex items-center justify-center px-4 py-2 transition"
|
||||
class="flex py-2 px-4 transition justify-center group relative items-center"
|
||||
>
|
||||
<i class="material-icons mr-2">info_outline</i>
|
||||
<i class="mr-2 material-icons">info_outline</i>
|
||||
<span class="text-secondaryDark">
|
||||
<span class="md:hidden">
|
||||
{{ t("helpers.offline_short") }}
|
||||
</span>
|
||||
<span class="md:inline hidden">
|
||||
<span class="hidden md:inline">
|
||||
{{ t("helpers.offline") }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
@click.native="$refs.options.tippy().hide()"
|
||||
/>
|
||||
<!-- <SmartItem :label="t('app.status')" /> -->
|
||||
<div class="flex px-4 py-2 opacity-50">
|
||||
<div class="flex opacity-50 py-2 px-4">
|
||||
{{ `${t("app.name")} ${t("app.version")}` }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,7 +135,7 @@
|
||||
@click.native="COLUMN_LAYOUT = !COLUMN_LAYOUT"
|
||||
/>
|
||||
<span
|
||||
class="transition transform"
|
||||
class="transform transition"
|
||||
:class="{
|
||||
'rotate-180': SIDEBAR_ON_LEFT,
|
||||
}"
|
||||
|
||||
@@ -11,9 +11,9 @@
|
||||
/>
|
||||
<div
|
||||
v-if="searchResults.length === 0"
|
||||
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
|
||||
>
|
||||
<i class="material-icons pb-2 opacity-75">manage_search</i>
|
||||
<i class="opacity-75 pb-2 material-icons">manage_search</i>
|
||||
<span class="text-center">
|
||||
{{ t("state.nothing_found") }} "{{ search }}"
|
||||
</span>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<header
|
||||
class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
|
||||
class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
|
||||
>
|
||||
<div class="inline-flex items-center space-x-2">
|
||||
<div class="space-x-2 inline-flex items-center">
|
||||
<ButtonSecondary
|
||||
class="tracking-wide !font-bold !text-secondaryDark"
|
||||
label="HOPPSCOTCH"
|
||||
@@ -11,7 +11,7 @@
|
||||
/>
|
||||
<AppGitHubStarButton class="mt-1.5 transition hidden sm:flex" />
|
||||
</div>
|
||||
<div class="inline-flex items-center space-x-2">
|
||||
<div class="space-x-2 inline-flex items-center">
|
||||
<ButtonSecondary
|
||||
id="installPWA"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
@@ -39,7 +39,7 @@
|
||||
svg="upload-cloud"
|
||||
:label="t('header.save_workspace')"
|
||||
filled
|
||||
class="md:flex hidden"
|
||||
class="hidden md:flex"
|
||||
@click.native="showLogin = true"
|
||||
/>
|
||||
<ButtonPrimary
|
||||
@@ -47,13 +47,13 @@
|
||||
:label="t('header.login')"
|
||||
@click.native="showLogin = true"
|
||||
/>
|
||||
<div v-else class="inline-flex items-center space-x-2">
|
||||
<div v-else class="space-x-2 inline-flex items-center">
|
||||
<ButtonPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="t('team.invite_tooltip')"
|
||||
:label="t('team.invite')"
|
||||
svg="user-plus"
|
||||
class="!bg-green-500 !text-green-500 !bg-opacity-15 !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-400"
|
||||
class="!bg-green-500 !bg-opacity-15 !text-green-500 !hover:bg-opacity-10 !hover:bg-green-400 !hover:text-green-600"
|
||||
@click.native="showTeamsModal = true"
|
||||
/>
|
||||
<span class="px-2">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-start p-4 space-y-4">
|
||||
<div class="flex flex-col space-y-4 p-4 items-start">
|
||||
<SmartToggle
|
||||
:on="PROXY_ENABLED"
|
||||
@change="toggleSettingKey('PROXY_ENABLED')"
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
autocomplete="off"
|
||||
name="command"
|
||||
:placeholder="`${t('app.type_a_command_search')}`"
|
||||
class="border-dividerLight text-secondaryDark flex flex-shrink-0 p-6 text-base bg-transparent border-b"
|
||||
class="bg-transparent border-b border-dividerLight flex flex-shrink-0 text-base text-secondaryDark p-6"
|
||||
/>
|
||||
<AppFuse
|
||||
v-if="search && show"
|
||||
@@ -24,14 +24,14 @@
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 space-y-4 overflow-auto divide-y"
|
||||
class="divide-dividerLight divide-y flex flex-col space-y-4 flex-1 overflow-auto hide-scrollbar"
|
||||
>
|
||||
<div
|
||||
v-for="(map, mapIndex) in mappings"
|
||||
:key="`map-${mapIndex}`"
|
||||
class="flex flex-col"
|
||||
>
|
||||
<h5 class="text-secondaryLight px-6 py-2 my-2">
|
||||
<h5 class="my-2 text-secondaryLight py-2 px-6">
|
||||
{{ t(map.section) }}
|
||||
</h5>
|
||||
<AppPowerSearchEntry
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<button
|
||||
class="search-entry focus:outline-none flex items-center flex-1 px-6 py-2 transition cursor-pointer"
|
||||
class="cursor-pointer flex flex-1 py-2 px-6 transition items-center search-entry focus:outline-none"
|
||||
:class="{ active: active }"
|
||||
tabindex="-1"
|
||||
@click="$emit('action', shortcut.action)"
|
||||
@keydown.enter="$emit('action', shortcut.action)"
|
||||
>
|
||||
<SmartIcon
|
||||
class="svg-icons mr-4 transition opacity-50"
|
||||
class="mr-4 opacity-50 transition svg-icons"
|
||||
:class="{ 'opacity-100 text-secondaryDark': active }"
|
||||
:name="shortcut.icon"
|
||||
/>
|
||||
<span
|
||||
class="flex flex-1 mr-4 font-medium transition"
|
||||
class="flex font-medium flex-1 mr-4 transition"
|
||||
:class="{ 'text-secondaryDark': active }"
|
||||
>
|
||||
{{ t(shortcut.label) }}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section :id="label.toLowerCase()" class="relative flex flex-col flex-1">
|
||||
<section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<p class="text-secondaryLight px-2 mb-8">
|
||||
<p class="text-secondaryLight mb-8 px-2">
|
||||
{{ t("app.invite_description") }}
|
||||
</p>
|
||||
<div class="flex flex-col px-2 space-y-2">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="flex flex-col space-y-2 px-2">
|
||||
<div class="grid gap-4 grid-cols-3">
|
||||
<a
|
||||
v-for="(platform, index) in platforms"
|
||||
:key="`platform-${index}`"
|
||||
@@ -17,13 +17,13 @@
|
||||
target="_blank"
|
||||
class="share-link"
|
||||
>
|
||||
<SmartIcon :name="platform.icon" class="w-6 h-6" />
|
||||
<SmartIcon :name="platform.icon" class="h-6 w-6" />
|
||||
<span class="mt-3">
|
||||
{{ platform.name }}
|
||||
</span>
|
||||
</a>
|
||||
<button class="share-link" @click="copyAppLink">
|
||||
<SmartIcon class="w-6 h-6 text-xl" :name="copyIcon" />
|
||||
<SmartIcon class="h-6 text-xl w-6" :name="copyIcon" />
|
||||
<span class="mt-3">
|
||||
{{ t("app.copy") }}
|
||||
</span>
|
||||
|
||||
@@ -2,34 +2,34 @@
|
||||
<AppSlideOver :show="show" @close="close()">
|
||||
<template #content>
|
||||
<div
|
||||
class="bg-primary border-dividerLight sticky top-0 z-10 flex items-center justify-between p-2 border-b"
|
||||
class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
|
||||
>
|
||||
<h3 class="heading ml-4">{{ t("app.shortcuts") }}</h3>
|
||||
<h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
|
||||
<div class="flex">
|
||||
<ButtonSecondary svg="x" class="rounded" @click.native="close()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-primary border-dividerLight border-b">
|
||||
<div class="flex flex-col mx-6 my-4">
|
||||
<div class="bg-primary border-b border-dividerLight">
|
||||
<div class="flex flex-col my-4 mx-6">
|
||||
<input
|
||||
v-model="filterText"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="bg-primaryLight border-dividerLight focus-visible:border-divider flex w-full px-4 py-2 border rounded"
|
||||
class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="filterText"
|
||||
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
|
||||
class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
|
||||
>
|
||||
<div
|
||||
v-for="(map, mapIndex) in searchResults"
|
||||
:key="`map-${mapIndex}`"
|
||||
class="px-6 py-4 space-y-4"
|
||||
class="space-y-4 py-4 px-6"
|
||||
>
|
||||
<h1 class="text-secondaryDark font-semibold">
|
||||
<h1 class="font-semibold text-secondaryDark">
|
||||
{{ t(map.item.section) }}
|
||||
</h1>
|
||||
<AppShortcutsEntry
|
||||
@@ -40,9 +40,9 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="searchResults.length === 0"
|
||||
class="text-secondaryLight flex flex-col items-center justify-center p-4"
|
||||
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
|
||||
>
|
||||
<i class="material-icons pb-2 opacity-75">manage_search</i>
|
||||
<i class="opacity-75 pb-2 material-icons">manage_search</i>
|
||||
<span class="text-center">
|
||||
{{ t("state.nothing_found") }} "{{ filterText }}"
|
||||
</span>
|
||||
@@ -50,14 +50,14 @@
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="divide-dividerLight hide-scrollbar flex flex-col flex-1 overflow-auto divide-y"
|
||||
class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
|
||||
>
|
||||
<div
|
||||
v-for="(map, mapIndex) in mappings"
|
||||
:key="`map-${mapIndex}`"
|
||||
class="px-6 py-4 space-y-4"
|
||||
class="space-y-4 py-4 px-6"
|
||||
>
|
||||
<h1 class="text-secondaryDark font-semibold">
|
||||
<h1 class="font-semibold text-secondaryDark">
|
||||
{{ t(map.section) }}
|
||||
</h1>
|
||||
<AppShortcutsEntry
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<aside class="md:flex-col flex justify-between h-full">
|
||||
<nav class="flex-nowrap md:flex-col md:flex-none flex flex-1">
|
||||
<aside class="flex h-full justify-between md:flex-col">
|
||||
<nav class="flex flex-nowrap flex-1 md:flex-col md:flex-none">
|
||||
<NuxtLink
|
||||
v-for="(navigation, index) in primaryNavigation"
|
||||
:key="`navigation-${index}`"
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<transition v-if="show" name="fade" appear>
|
||||
<div class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
|
||||
<div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
|
||||
<div
|
||||
class="bg-primaryLight opacity-90 absolute inset-0"
|
||||
class="bg-primaryLight opacity-90 inset-0 absolute"
|
||||
tabindex="0"
|
||||
@click="close()"
|
||||
></div>
|
||||
</div>
|
||||
</transition>
|
||||
<aside
|
||||
class="bg-primary w-96 fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto transition duration-300 ease-in-out transform"
|
||||
class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto"
|
||||
:class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
|
||||
>
|
||||
<slot name="content"></slot>
|
||||
|
||||
Reference in New Issue
Block a user