UPD: Resize cols
This commit is contained in:
@@ -18,7 +18,7 @@ store.fetchProfiles()
|
||||
class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
|
||||
<DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
|
||||
<ConfigPane
|
||||
class="flex-1 basis-1/3 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
|
||||
class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -10,7 +10,7 @@
|
||||
<input
|
||||
ref="profileNameInput" v-model="nameInput"
|
||||
onfocus="this.select()" :placeholder="$t('profiles.name_placeholder')"
|
||||
class="flex-1 pl-6 h-full bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
|
||||
class="flex-1 pl-6 h-full text-sm bg-transparent focus-visible:ring-0 focus-visible:outline-none min-w-0 transition-colors"
|
||||
:class="{'font-semibold bg-zinc-300 hover:bg-zinc-200 text-black' : selected,
|
||||
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
|
||||
@blur="onNameInputBlur">
|
||||
@@ -27,7 +27,7 @@
|
||||
v-else
|
||||
:class="{'font-semibold bg-zinc-200 hover:bg-zinc-100 text-black' : selected,
|
||||
'hover:bg-zinc-900 bg-opacity-50 text-muted-foreground': !selected}"
|
||||
class="flex-1 h-12 text-left whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
|
||||
class="flex-1 h-12 text-left text-sm whitespace-nowrap overflow-hidden text-ellipsis pr-4 transition-colors"
|
||||
@click="!editing && $emit('select') && $refs.profileTitle.scramble()">
|
||||
<span class="ml-4 w-4 mr-2" :class="{'ml-4': !draggable}">
|
||||
<GripHorizontal
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<div
|
||||
class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
|
||||
<button class="flex items-center" @click="showProfileList=true">
|
||||
<ArrowLeft v-if="!showProfileList" class="w-5 h-full mr-1" />
|
||||
<h2 class="mr-2">
|
||||
<component :is="showProfileList ? List : ArrowLeft" class="w-5 h-full mr-1" />
|
||||
<span class="font-heading mr-2">
|
||||
<ScrambleText :text="showProfileList ? $t('profiles.title') : store.selectedProfile.name" />
|
||||
<ScrambleText
|
||||
v-if="showProfileList" class="text-sm text-zinc-600"
|
||||
@@ -13,7 +13,7 @@
|
||||
fill-interval="20"
|
||||
delay="500"
|
||||
:text="`(${store.profiles.length}/${ maxProfiles})`" />
|
||||
</h2>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="showProfileList"
|
||||
@@ -81,7 +81,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { Separator } from '@/components/ui/separator'
|
||||
import { ChevronRight, Plus, Search, ArrowLeft } from 'lucide-vue-next'
|
||||
import { ChevronRight, Plus, Search, ArrowLeft, List } from 'lucide-vue-next'
|
||||
import { computed, ref } from 'vue'
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
|
||||
import ScrambleText from '@/components/effects/ScrambleText.vue'
|
||||
|
||||
Reference in New Issue
Block a user