Showcase form #2
Conversation
…iss into showcase-form
| @@ -44,9 +44,15 @@ | |||
| <template #option="option"> | |||
| <span> | |||
| {{ option.title }} | |||
| <span style="float: right; color: #888;">({{ option.count }})</span> | |||
| <span v-if="option.count" style="float: right; color: #888;">({{ option.count }})</span> | |||
There was a problem hiding this comment.
Hiding the ({count}) text when it's not set to avoid empty ()
| #selected-option="option" | ||
| > | ||
| {{ option.title }} | ||
| <input type="hidden" :name="name" :value="option.id"> |
There was a problem hiding this comment.
Hidden input makes it possible to use the component in native <form>
| @@ -89,7 +89,7 @@ function isChildPage({ to }: OdsNavTabItem) { | |||
| <NuxtLinkLocale :class="{ active: isChildPage(item) }" :to="item.to"><span> {{ t(item.label) }}</span></NuxtLinkLocale> | |||
| </li> | |||
| <li v-if="item.subMenu" class="tab"> | |||
| <v-menu> | |||
| <v-menu open-on-hover> | |||
There was a problem hiding this comment.
I made the menu to expand on hover so that Showcases in the menu is still a link but it also has child items in a submenu
| @@ -0,0 +1,150 @@ | |||
| <template> | |||
There was a problem hiding this comment.
This is direct copy from swiss design
| @@ -0,0 +1,49 @@ | |||
| <template> | |||
There was a problem hiding this comment.
This is a copy from swiss design example plus...
| .notification-banner { | ||
| display: block; | ||
| transition-property: padding, opacity; | ||
| transition-timing-function: ease-in-out, ease-in-out; | ||
| } | ||
| .notification-banner:not([open]) { | ||
| padding: 0; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| } | ||
| .notification-banner__wrapper { | ||
| transition-property: height; | ||
| transition-duration: 0s; | ||
| } | ||
| .notification-banner:not([open]) .notification-banner__wrapper { | ||
| height: 0; | ||
| } |
There was a problem hiding this comment.
...a transition which smoothly collapses the notification when open is set from true to false
| @@ -0,0 +1,109 @@ | |||
| <template> | |||
There was a problem hiding this comment.
Also a copy from swiss design
| }, (resource, localeInstance) => { | ||
| return { | ||
| ...resource, | ||
| pref_label: resource.pref_label[localeInstance.currentLocale], |
There was a problem hiding this comment.
I could not figure out a way to use the Extended result so that translations are automatically selected
opendata.swiss/ui/nuxt.config.ts
Outdated
| @@ -37,6 +40,11 @@ export default defineNuxtConfig({ | |||
| } | |||
| } | |||
| }, | |||
| runtimeConfig: { | |||
| public: { | |||
| contentRoot: path.resolve(__dirname, 'content') | |||
There was a problem hiding this comment.
This will be used only locally to find the content dir in the repository.
feat(showcase): select and upload showcase cover image
# Conflicts: # opendata.swiss/ui/nuxt.config.ts
|
Your preview environment is deployed! 🚀 |
No description provided.