Fix application and namespace list styles to be the same
This commit is contained in:
Jože Fortun
parent
fb83a8fac8
commit
68f6897a5c
@ -1,14 +1,8 @@
|
||||
<template>
|
||||
<b-col
|
||||
class="my-2"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card
|
||||
no-body
|
||||
class="h-100 shadow-sm pt-3 mx-2"
|
||||
footer-class="text-center pt-0"
|
||||
class="shadow-sm pt-3 h-100"
|
||||
:class="{ 'shadow': hovered && isEnabled, 'namespace-item' : isEnabled, 'disabled' : !isEnabled}"
|
||||
@mouseover="hovered = true"
|
||||
@mouseleave="hovered = false"
|
||||
@ -42,6 +36,7 @@
|
||||
>
|
||||
<h5
|
||||
:data-test-id="namespace.name"
|
||||
class="mt-2"
|
||||
>
|
||||
{{ namespace.name }}
|
||||
</h5>
|
||||
@ -69,7 +64,6 @@
|
||||
/>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -114,10 +108,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$avatar-size: 110px;
|
||||
$avatar-size: 120px;
|
||||
$disabled-opacity: 0.6;
|
||||
|
||||
.namespace-item {
|
||||
min-height: 13rem;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.2s ease;
|
||||
top: -1px;
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
class="d-flex w-100 overflow-auto"
|
||||
>
|
||||
<div class="d-flex flex-column w-100 py-2 overflow-hidden h-100 py-2">
|
||||
<portal to="topbar-title">
|
||||
{{ $t('title') }}
|
||||
</portal>
|
||||
@ -23,53 +21,53 @@
|
||||
</b-btn>
|
||||
</portal>
|
||||
|
||||
<b-container
|
||||
class="ns-wrapper"
|
||||
fluid="xl"
|
||||
>
|
||||
<b-row
|
||||
class="my-3"
|
||||
no-gutters
|
||||
>
|
||||
<b-col
|
||||
offset-md="2"
|
||||
offset-lg="3"
|
||||
md="8"
|
||||
lg="6"
|
||||
>
|
||||
<div class="d-flex flex-column justify-content-center align-items-center mx-4 my-2">
|
||||
<b-img
|
||||
:src="logo"
|
||||
class="logo px-2"
|
||||
/>
|
||||
|
||||
<div class="search w-100 mx-auto my-4">
|
||||
<c-input-search
|
||||
v-model.trim="query"
|
||||
:placeholder="$t('searchPlaceholder')"
|
||||
:debounce="200"
|
||||
/>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill overflow-auto">
|
||||
<b-container class="ns-wrapper h-100">
|
||||
<transition-group
|
||||
v-if="filtered && filtered.length"
|
||||
name="namespace-list"
|
||||
tag="div"
|
||||
class="row my-3 card-deck no-gutters"
|
||||
tag="b-row"
|
||||
class="d-flex flex-wrap align-items-stretch justify-content-center mx-2"
|
||||
>
|
||||
<namespace-item
|
||||
<b-col
|
||||
v-for="n in filtered"
|
||||
:key="n.namespaceID"
|
||||
:namespace="n"
|
||||
/>
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
class="p-2"
|
||||
>
|
||||
<namespace-item :namespace="n" />
|
||||
</b-col>
|
||||
</transition-group>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="d-flex justify-content-center align-items-center h-50 w-100"
|
||||
>
|
||||
<h3
|
||||
data-test-id="no-namespaces-found"
|
||||
class="text-left"
|
||||
class="d-flex justify-content-center align-items-center mt-5 w-100"
|
||||
>
|
||||
<h3 data-test-id="no-namespaces-found">
|
||||
{{ $t('noResults') }}
|
||||
</h3>
|
||||
</div>
|
||||
</b-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
@ -109,6 +107,10 @@ export default {
|
||||
}, false)
|
||||
},
|
||||
|
||||
logo () {
|
||||
return this.$Settings.attachment('ui.mainLogo')
|
||||
},
|
||||
|
||||
importNamespaceEndpoint () {
|
||||
return this.$ComposeAPI.namespaceImportEndpoint({})
|
||||
},
|
||||
@ -145,3 +147,21 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.logo {
|
||||
max-height: 20vh;
|
||||
max-width: 500px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.search {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.logo {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
<template>
|
||||
<div
|
||||
class="app-selector d-flex flex-column h-100 py-2"
|
||||
>
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<div class="app-selector d-flex flex-column h-100 py-2">
|
||||
<div class="d-flex flex-column justify-content-center align-items-center mx-4 my-2">
|
||||
<b-img
|
||||
:src="logo"
|
||||
class="logo px-3"
|
||||
class="logo px-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="search w-100 mx-auto my-4 px-5">
|
||||
<div class="search w-100 mx-auto my-4">
|
||||
<c-input-search
|
||||
v-model.trim="query"
|
||||
data-v-onboarding="app-list"
|
||||
:aria-label="$t('search')"
|
||||
:placeholder="$t('search')"
|
||||
:debounce="200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill overflow-auto">
|
||||
<b-container
|
||||
class="h-100"
|
||||
>
|
||||
<b-container class="h-100">
|
||||
<draggable
|
||||
v-if="filteredApps.length"
|
||||
v-model="appList"
|
||||
@ -40,11 +35,10 @@
|
||||
v-for="app in filteredApps"
|
||||
:key="app.applicationID"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="p-0 mb-3 mt-1"
|
||||
:data-v-onboarding="getStepName(app.unify.url)"
|
||||
md="6"
|
||||
lg="4"
|
||||
xl="3"
|
||||
class="p-2"
|
||||
>
|
||||
<b-card
|
||||
no-body
|
||||
@ -53,9 +47,7 @@
|
||||
@mouseover="hovered = app.applicationID"
|
||||
@mouseleave="hovered = undefined"
|
||||
>
|
||||
<div
|
||||
class="align-content-center d-flex flex-grow-1 flex-wrap"
|
||||
>
|
||||
<div class="align-content-center d-flex flex-grow-1 flex-wrap">
|
||||
<b-card-img
|
||||
class="rounded-bottom thumbnail"
|
||||
:src="logoUrl(app)"
|
||||
@ -63,11 +55,9 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<b-card-text
|
||||
class="text-center my-4 h6"
|
||||
>
|
||||
<h6 class="text-center my-4">
|
||||
{{ app.unify.name || app.name }}
|
||||
</b-card-text>
|
||||
</h6>
|
||||
|
||||
<b-link
|
||||
:data-test-id="app.name"
|
||||
@ -84,12 +74,9 @@
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="d-flex justify-content-center w-100"
|
||||
>
|
||||
<h4
|
||||
data-test-id="heading-no-apps"
|
||||
class="mt-5"
|
||||
class="d-flex justify-content-center align-items-center mt-5 w-100"
|
||||
>
|
||||
<h4 data-test-id="heading-no-apps">
|
||||
{{ query ? $t('no-applications-found') : $t('no-applications') }}
|
||||
</h4>
|
||||
</div>
|
||||
@ -181,19 +168,6 @@ export default {
|
||||
unpinApp: 'applications/unpin',
|
||||
}),
|
||||
|
||||
getStepName (url) {
|
||||
switch (url) {
|
||||
case 'compose/':
|
||||
return 'low-code'
|
||||
case 'compose/ns/crm/pages':
|
||||
return 'crm'
|
||||
case 'reporter/':
|
||||
return 'reporter'
|
||||
case 'workflow/':
|
||||
return 'workflow'
|
||||
}
|
||||
},
|
||||
|
||||
fetchEffective () {
|
||||
this.$SystemAPI.permissionsEffective({ resource: 'application' })
|
||||
.then(p => {
|
||||
@ -263,7 +237,6 @@ export default {
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0;
|
||||
top: 0;
|
||||
margin: 0 0.625rem;
|
||||
|
||||
.thumbnail {
|
||||
max-width: 100%;
|
||||
|
||||
@ -101,7 +101,6 @@
|
||||
<b-dropdown
|
||||
v-if="!settings.hideProfile"
|
||||
data-test-id="dropdown-profile"
|
||||
data-v-onboarding="profile"
|
||||
:variant="avatarExists ? 'link' : 'outline-extra-light'"
|
||||
:toggle-class="`nav-icon text-decoration-none text-dark rounded-circle border ${avatarExists ? 'p-0' : ''}`"
|
||||
size="lg"
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
no-applications: No applications
|
||||
no-applications-found: No applications with this name found
|
||||
no-applications-found: No applications found
|
||||
search: Type here to search
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user