DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Make the toolbar responsive on mobile screens

Browse Source
This commit is contained in:
Emmy Leke 2023-10-19 10:15:55 +01:00 committed by Jože Fortun
parent 35d455f154
commit 5d2d30431f
6 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/web/compose/src/components/Admin/EditorToolbar.vue
View File

@ -6,16 +6,16 @@
>
<b-row
no-gutters
class="wrap-with-vertical-gutters align-items-center"
class="gap-1 gap-col-3 flex-column flex-md-row align-items-md-center"
>
<div
class="wrap-with-vertical-gutters align-items-center"
class="d-flex gap-1 align-items-center"
>
<b-button
data-test-id="button-back-without-save"
variant="link"
:disabled="processing"
class="text-dark back mr-auto"
class="text-dark back mr-auto p-1"
@click="$emit('back')"
>
<font-awesome-icon
@ -25,15 +25,18 @@
{{ $t('label.backWithoutSave') }}
</b-button>
</div>
<div
class="ml-auto"
class="ml-md-auto d-flex flex-column d-inline-block-md"
>
<slot />
</div>
<div
class="d-flex wrap-with-vertical-gutters align-items-center ml-auto"
class="d-flex gap-1 flex-md-row flex-column align-items-md-center ml-md-auto"
>
<slot name="delete" />
<c-input-confirm
v-if="!hideDelete"
v-b-tooltip.hover
@ -45,6 +48,7 @@
variant="danger"
:title="deleteTooltip"
:borderless="false"
class="d-flex flex-column"
@confirmed="$emit('delete')"
/>
@ -59,9 +63,10 @@
variant="light"
:text="$t('label.saveAsCopy')"
size="lg"
class="ml-2"
class="ml-md-2"
@submit="$emit('clone')"
/>
<c-button-submit
v-if="!hideSave"
data-test-id="button-save-and-close"
@ -70,9 +75,10 @@
variant="light"
:text="$t('label.saveAndClose')"
size="lg"
class="ml-2"
class="ml-md-2"
@submit="$emit('saveAndClose')"
/>
<c-button-submit
v-if="!hideSave"
data-test-id="button-save"
@ -80,7 +86,7 @@
:processing="processingSave"
:text="$t('label.save')"
size="lg"
class="ml-2"
class="ml-md-2"
@submit="$emit('save')"
/>
</div>

2
client/web/compose/src/components/Admin/Import.vue
View File

@ -3,7 +3,7 @@
<b-btn
variant="light"
size="lg"
class="float-left"
class="w-100"
@click="showModal=true"
>
{{ $t('label.import') }}

8
client/web/compose/src/themes/corteza-base/custom.scss
View File

@ -404,3 +404,11 @@ input[type="search"]::-webkit-search-cancel-button {
width: 100%;
}
}
.gap-1 {
gap: 0.5rem;
}
.gap-2 {
gap: 1rem;
}

8
client/web/compose/src/views/Admin/Modules/List.vue
View File

@ -36,14 +36,14 @@
<template #header>
<div class="flex-grow-1">
<div
class="wrap-with-vertical-gutters"
class="gap-1 d-flex flex-wrap flex-md-row flex-column"
>
<b-btn
v-if="namespace.canCreateModule"
data-test-id="button-create"
variant="primary"
size="lg"
class="mr-1 float-left"
class="mr-1"
:to="{ name: 'admin.modules.create' }"
>
{{ $t('createLabel') }}
@ -53,14 +53,14 @@
v-if="namespace.canCreateModule"
:namespace="namespace"
type="module"
class="mr-1 float-left"
class="mr-1"
@importSuccessful="onImportSuccessful"
/>
<export
:list="modules"
type="module"
class="mr-1 float-left"
class="mr-1"
/>
<b-dropdown

4
client/web/compose/src/views/Admin/Pages/Builder.vue
View File

@ -274,7 +274,7 @@
data-test-id="button-add-block"
variant="light"
size="lg"
class="mr-1 float-right"
class="mr-1"
>
+ {{ $t('build.addBlock') }}
</b-button>
@ -287,7 +287,7 @@
:disabled="processing"
size="lg"
variant="light"
class="ml-2"
class="ml-md-2"
>
<b-dropdown-item
data-test-id="dropdown-item-saveAsCopy-ref"

6
lib/vue/src/components/resourceList/CResourceList.vue
View File

@ -127,10 +127,10 @@
#footer
>
<div
class="d-flex align-items-center justify-content-between"
class="d-flex align-items-center justify-content-between flex-wrap"
>
<div
class="text-truncate"
class="text-truncate ml-3 ml-sm-0"
>
<div
v-if="!hideTotal"
@ -151,6 +151,7 @@
>
<font-awesome-icon :icon="['fas', 'angle-double-left']" />
</b-button>
<b-button
:disabled="!hasPrevPage"
variant="outline-light"
@ -163,6 +164,7 @@
/>
{{ translations.prevPagination }}
</b-button>
<b-button
:disabled="!hasNextPage"
variant="outline-light"