Fix list page styling consistency

components-web-app · Aug 16, 2024 · 4a057f5 · 4a057f5
1 parent efe34ad
commit 4a057f5
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 10 deletions.
diff --git a/src/layer/pages/_cwa/layouts.vue b/src/layer/pages/_cwa/layouts.vue
@@ -3,7 +3,7 @@
  <ListFilter :order-options="orderOptions" :search-fields="['reference', 'uiComponent']" />
  <ListContent ref="listContent" fetch-url="/_/layouts">
  <template #item="data">
- <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-4 cwa-space-x-4 cwa-items-center">
+ <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-6 cwa-space-x-4 cwa-items-center">
  <div class="cwa-grow cwa-flex cwa-flex-col cwa-space-y-1">
  <span class="cwa-text-xl">{{ data.reference }}</span>
  <span class="cwa-text-stone-400">UI: {{ getDisplayLayoutUi(data.uiComponent) }}</span>

diff --git a/src/layer/pages/_cwa/pages.vue b/src/layer/pages/_cwa/pages.vue
@@ -19,7 +19,7 @@
  </ListContainer>
  <ListContent ref="listContent" fetch-url="/_/pages">
  <template #item="data">
- <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-4 cwa-space-x-4 cwa-items-center">
+ <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-6 cwa-space-x-4 cwa-items-center">
  <div class="cwa-grow cwa-flex cwa-flex-col cwa-space-y-1">
  <div class="cwa-flex cwa-items-center cwa-space-x-3">
  <span class="cwa-text-xl">{{ data.reference }}</span><span :class="['cwa-outline', 'cwa-outline-1', 'cwa-outline-offset-2', 'cwa-w-2', 'cwa-h-2', 'cwa-rounded-full', data.isTemplate ? 'cwa-outline-yellow cwa-bg-yellow' : 'cwa-outline-blue-600 cwa-bg-blue-600']" />

diff --git a/src/layer/pages/_cwa/routes.vue b/src/layer/pages/_cwa/routes.vue
@@ -3,7 +3,7 @@
  <ListFilter :order-options="orderOptions" :search-fields="['path']" />
  <ListContent ref="listContent" fetch-url="/_/routes">
  <template #item="data">
- <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-4 cwa-space-x-4 cwa-items-center">
+ <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-6 cwa-space-x-4 cwa-items-center">
  <div class="cwa-grow cwa-flex cwa-flex-col cwa-space-y-1 cwa-min-w-0">
  <span class="cwa-text-xl cwa-truncate">{{ data.path }}</span>
  <span v-if="data.redirect || getAssociatedIri(data)" class="cwa-text-stone-400">
@@ -13,16 +13,20 @@
  <span class="cwa-truncate">{{ data.redirect || getAssociatedIri(data) }}</span>
  </span>
  </span>
- <span v-else class="cwa-truncate cwa-text-magenta cwa-font-bold">This route has no association and should be deleted</span>
+ <span v-else>
+ <span class="cwa-inline-flex cwa-truncate cwa-bg-magenta/60 cwa-text-white cwa-font-bold cwa-py-1 cwa-px-3 cwa-border cwa-border-magenta cwa-rounded">
+ This route has no association and should be deleted
+ </span>
+ </span>
  </div>
  <div>
  <CwaUiFormButton v-if="getAssociatedIri(data)" :to="computedItemLink(getAssociatedIri(data), '_cwa-pages', '#routes')">
  <IconPages class="cwa-w-6" />
- <span class="cwa-sr-only">Settings</span>
+ <span class="cwa-sr-only">View</span>
  </CwaUiFormButton>
- <CwaUiFormButton v-else-if="!data.redirect" color="blue" @click="deleteRoute(data['@id'])">
+ <CwaUiFormButton v-else-if="!data.redirect" color="error" @click="deleteRoute(data['@id'])">
  <CwaUiIconBinIcon class="cwa-w-4 cwa-m-1" />
- <span class="cwa-sr-only">Settings</span>
+ <span class="cwa-sr-only">Delete</span>
  </CwaUiFormButton>
  </div>
  </div>

diff --git a/src/layer/pages/_cwa/users.vue b/src/layer/pages/_cwa/users.vue
@@ -3,7 +3,7 @@
  <ListFilter :order-options="orderOptions" :search-fields="['emailAddress', 'username']" />
  <ListContent ref="listContent" fetch-url="/users">
  <template #item="data">
- <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-4 cwa-space-x-4 cwa-items-center" :class="{ 'cwa-opacity-50': !data.enabled }">
+ <div class="cwa-flex cwa-border-b cwa-border-b-stone-700 cwa-py-6 cwa-space-x-4 cwa-items-center" :class="{ 'cwa-opacity-50': !data.enabled }">
  <div class="cwa-grow cwa-flex cwa-flex-col cwa-space-y-1">
  <span class="cwa-text-xl">{{ data.username }} <span class="cwa-text-stone-400 cwa-text-sm">{{ getUserRole(data.roles) }}</span></span>
  <span>{{ data.emailAddress }}</span>

diff --git a/src/runtime/templates/components/core/admin/ListContent.vue b/src/runtime/templates/components/core/admin/ListContent.vue
@@ -22,7 +22,7 @@
  </h2>
  </div>
  </div>
- <ul v-else class="cwa-flex cwa-flex-col cwa-space-y-4">
+ <ul v-else class="cwa-flex cwa-flex-col">
  <li v-for="(item, index) in itemsFromStore" :key="`list-item-${index}`">
  <slot name="item" v-bind="item">
  <div class="cwa-dark-blur cwa-p-2 cwa-border cwa-border-light/20">

diff --git a/src/runtime/templates/components/ui/form/Button.vue b/src/runtime/templates/components/ui/form/Button.vue
@@ -23,7 +23,7 @@ export interface ButtonOption {
  value: ModelValue
 }
 
-export type ButtonColor = 'blue' | 'grey' | 'dark'
+export type ButtonColor = 'blue' | 'grey' | 'dark' | 'error'
 
 const props = withDefaults(defineProps<
 {
@@ -53,6 +53,9 @@ const buttonColorClassNames = computed(() => {
  if (props.color === 'dark') {
  return 'cwa-text-light cwa-bg-dark/90 hover:cwa-bg-dark cwa-border-stone-400 hover:cwa-border-white hover:cwa-text-white'
  }
+ if (props.color === 'error') {
+ return 'cwa-text-light cwa-bg-magenta/80 hover:cwa-bg-magenta cwa-border-magenta hover:cwa-border-magenta hover:cwa-text-white'
+ }
  return 'cwa-text-white cwa-bg-stone-700/90 hover:cwa-bg-stone-700 cwa-border-transparent'
 })