feat: simplify layout

This commit is contained in:
Vlad Stan 2023-07-05 17:49:48 +03:00
parent ca466937e6
commit 040097381b

View file

@ -7,7 +7,9 @@
<q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" /> <q-btn flat @click="drawerRight = !drawerRight" round dense icon="menu" />
</q-toolbar> </q-toolbar>
</q-header> --> </q-header> -->
<q-drawer v-model="drawer" side="left"> <!-- <q-drawer v-model="drawer" side="left"></q-drawer>
<q-drawer v-model="drawer" side="right"></q-drawer> -->
<!-- <q-drawer v-model="drawer" side="left">
<q-toolbar class="bg-primary text-white shadow-2"> <q-toolbar class="bg-primary text-white shadow-2">
<q-toolbar-title>Settings</q-toolbar-title> <q-toolbar-title>Settings</q-toolbar-title>
<q-btn flat round dense icon="close" @click="drawer = !drawer"></q-btn> <q-btn flat round dense icon="close" @click="drawer = !drawer"></q-btn>
@ -151,15 +153,18 @@
</q-expansion-item> </q-expansion-item>
</q-list> </q-list>
</div> </div>
</q-drawer> </q-drawer> -->
<!-- <q-drawer v-model="drawer" side="right"></q-drawer> --> <!-- <q-drawer v-model="drawer" side="right"></q-drawer> -->
<q-page-container> <q-page-container class="q-mr-md">
<div class="row q-mb-md">
<div class="col-lg-2 col-md-1 col-sm-0"></div>
<div class="col-lg-8 col-md-10 col-sm-12 auto-width">
<div class="row q-mb-md"> <div class="row q-mb-md">
<!-- <q-toolbar class="col-2"> <!-- <q-toolbar class="col-2">
<q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn> <q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
</q-toolbar> --> </q-toolbar> -->
<q-toolbar class="col-lg-9 col-md-8 col-sm-6 auto-width"> <q-toolbar class="col-lg-8 col-md-7 col-sm-6 auto-width">
<q-input class="rounded-pill" style="width:100%;" rounded outlined clearable v-model.trim="searchText" <q-input class="rounded-pill" style="width:100%;" rounded outlined clearable v-model.trim="searchText"
label="Filter products"> label="Filter products">
<template v-slot:append> <template v-slot:append>
@ -167,15 +172,18 @@
</template> </template>
</q-input> </q-input>
</q-toolbar> </q-toolbar>
<q-toolbar class="col-lg-3 col-md-4 col-sm-6"> <q-toolbar class="col-lg-4 col-md-5 col-sm-6">
<div class="float-right"> <div class="float-right">
<q-btn color="gray" icon="travel_explore" flat size="lg" @click="searchNostr = !searchNostr"><q-tooltip>Search <q-btn color="gray" icon="travel_explore" flat size="lg"
@click="searchNostr = !searchNostr"><q-tooltip>Search
for products on Nostr</q-tooltip></q-btn> for products on Nostr</q-tooltip></q-btn>
<q-btn color="gray" icon="settings" flat size="lg" @click="showMarketConfig = !showMarketConfig"><q-tooltip> <q-btn color="gray" icon="settings" flat size="lg"
@click="showMarketConfig = !showMarketConfig"><q-tooltip>
Settings</q-tooltip></q-btn> Settings</q-tooltip></q-btn>
<q-btn v-if="account" color="gray" icon="perm_identity" flat size="lg"><q-tooltip>User <q-btn v-if="account" color="gray" icon="perm_identity" flat size="lg"><q-tooltip>User
Login</q-tooltip></q-btn> Login</q-tooltip></q-btn>
<q-btn v-else @click="accountDialog.show = true" color="gray" icon="person_add" flat size="lg"><q-tooltip>User <q-btn v-else @click="accountDialog.show = true" color="gray" icon="person_add" flat
size="lg"><q-tooltip>User
Config</q-tooltip></q-btn> Config</q-tooltip></q-btn>
<q-btn color="gray" icon="shopping_cart" flat size="lg" <q-btn color="gray" icon="shopping_cart" flat size="lg"
@click="searchNostr = !searchNostr"><q-tooltip>Shopping @click="searchNostr = !searchNostr"><q-tooltip>Shopping
@ -205,7 +213,9 @@
@login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall> @login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall>
<customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts" <customer-market v-else :search-nostr="searchNostr" :relays="relays" :products="filterProducts"
:styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market> :styles="config?.opts ?? {}" @change-page="navigateTo" @update-data="updateData"></customer-market>
</div>
<div class="col-lg-2 col-md-1 col-sm-0 auto-width"></div>
</div>
</q-page-container> </q-page-container>
<!-- ACCOUNT DIALOG --> <!-- ACCOUNT DIALOG -->