Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(controls): add help text to API dropdown

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-11-08 15:28:45 +01:00
committed by Benedikt Rötsch
parent da942eda24
commit 229a892bfc
4 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app.js
View File

@@ -44,21 +44,6 @@ app.use(settings)
// Make data available for our views to consume
app.use(async function (request, response, next) {
// Set active api based on query parameter
const apis = [
{
id: 'cda',
label: 'Delivery'
},
{
id: 'cpa',
label: 'Preview'
}
]
response.locals.currentApi = apis
.find((api) => api.id === (request.query.api || 'cda'))
// Get enabled locales from Contentful
const space = await getSpace()
response.locals.locales = space.locales
@@ -79,6 +64,21 @@ app.use(async function (request, response, next) {
initializeTranslations()
response.locals.translate = translate
// Set active api based on query parameter
const apis = [
{
id: 'cda',
label: translate('cdaApiLabel', response.locals.currentLocale.code)
},
{
id: 'cpa',
label: translate('cpaApiLabel', response.locals.currentLocale.code)
}
]
response.locals.currentApi = apis
.find((api) => api.id === (request.query.api || 'cda'))
// Inject custom helpers
response.locals.helpers = helpers

8
i18n/locales/de-DE.json
View File

@@ -1,14 +1,16 @@
{
"defaultTitle": "Die Beispielanwendung",
"whatIsThisApp": "Was ist die Beispielanwendung?",
"whatIsThisApp": "Hilfe",
"metaDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
"metaTwitterCard": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
"metaImageAlt": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
"metaImageDescription": "Dies ist die Beispielanwendung, eine Anwendung die Ihnen hilft Ihre eigene Anwendung mit Contentful zu bauen.",
"viewOnGithub": "Auf GitHub ansehen",
"apiSwitcherHelp": "Ansehen des veröffentlichten und unveröffentlichten Inhalts durch Wechsel von Delivery und Preview APIs.",
"apiLabelHelpcda": "(veröffentlichter Inhalt)",
"apiLabelHelpcpa": "(unveröffentlichter Inhalt)",
"cdaApiLabel": "Content Delivery API",
"cdaApiHelp": "Diese API zeigt veröffentlichte Inhalte",
"cpaApiLabel": "Content Preview API",
"cpaApiHelp": "Diese API zeigt unveröffentlichte Inhalte und Änderungen",
"locale": "Sprache",
"localeQuestion": "Sie arbeiten mit verschiedenen Sprachen? Dann können Sie die Sprache für Anfragen an die Content Delivery API definieren.",
"settingsLabel": "Einstellungen",

8
i18n/locales/en-US.json
View File

@@ -1,14 +1,16 @@
{
"defaultTitle": "The Example App",
"whatIsThisApp": "What is this example app?",
"whatIsThisApp": "Help",
"metaDescription": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
"metaTwitterCard": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
"metaImageAlt": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
"metaImageDescription": "This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.",
"viewOnGithub": "View on Github",
"apiSwitcherHelp": "View the published or draft content by simply switching between the Deliver and Preview APIs.",
"apiLabelHelpcda": "(published content)",
"apiLabelHelpcpa": "(draft content)",
"cdaApiLabel": "Content Delivery API",
"cdaApiHelp": "This is just some dummy text for styling. Please change me @todo",
"cpaApiLabel": "Content Preview API",
"cpaApiHelp": "This is just some dummy text for styling. Please change me @todo",
"locale": "Locale",
"localeQuestion": "Working with multiple languages? You can query the Content Delivery API for a specific locale.",
"settingsLabel": "Settings",

14
views/layout.pug
View File

@@ -29,7 +29,7 @@ html
.header__upper.layout-centered
.header__upper-first
a#about-this-modal-trigger(href='#').header__title
svg.course__overview-icon
svg.header__upper-icon
use(xlink:href='/icons/icons.svg#info')
span #{translate('whatIsThisApp', currentLocale.code)}
.header__upper-second
@@ -42,7 +42,7 @@ html
.header__controls
.header__controls_group
form(action='' method='get')
.header__controls_label API: #{currentApi.label} #{translate(`apiLabelHelp${currentApi.id}`, currentLocale.code)}
.header__controls_label API: #{currentApi.label}
.header__controls_dropdown
.header__controls_help_text #{translate('apiSwitcherHelp', currentLocale.code)}
button.header__controls_button(
@@ -50,13 +50,19 @@ html
name='api'
value='cda'
class=`${currentApi.id === 'cda' ? 'header__controls_button--active' : ''}`
) Delivery #{translate('apiLabelHelpcda', currentLocale.code)}
)
| #{translate('cdaApiLabel', currentLocale.code)}:
br
span.header__controls_button_help= translate('cdaApiHelp', currentLocale.code)
button.header__controls_button(
type='submit'
name='api'
value='cpa'
class=`${currentApi.id === 'cpa' ? 'header__controls_button--active' : ''}`
) Preview #{translate('apiLabelHelpcpa', currentLocale.code)}
)
| #{translate('cpaApiLabel', currentLocale.code)}:
br
span.header__controls_button_help= translate('cpaApiHelp', currentLocale.code)
input(type='hidden' name='locale' value=currentLocale.code)
.header__controls_group