Commit cd98ef48 authored by Anton's avatar Anton

Update from mobile fix branch

# Conflicts:
#	partials/DataTable.vue
parents 9b50ff3c f905fe77
Pipeline #12119 passed with stage
in 8 minutes and 43 seconds
<template lang="pug">
q-btn(@click="goToTarget()", color="lightgrey", icon="keyboard_backspace", round, size="sm")
</template>
<script>
export default {
props: ['target'],
methods: {
goToTarget () {
return this.$router.push({name: this.target})
}
}
}
</script>
<template lang="pug">
// div.bg-orange(:class="{'q-mt-xl': position !== 'first', 'q-pb-xl ui-border-bottom': position !== 'last'}")
div(:class="{'q-mt-xl': position !== 'first', '': position !== 'last'}")
slot
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'content-block',
props: ['position'],
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
})
}
}
</script>
<style scoped lang="stylus">
@import '~variables'
</style>
<template lang="pug">
div(:class="{'q-mb-md': position !== 'last'}")
slot
.text-right
slot(name="buttons")
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'content-paragraph',
props: ['position'],
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
})
}
}
</script>
<style scoped lang="stylus">
@import '~variables'
</style>
<template lang="pug">
div.q-mb-lg.q-pb-sm
// headline
h5.q-my-none.q-pt-none {{ content }}
// subheadline
.text-grey-8.ui-border-bottom.q-pb-md
slot
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'headline',
props: ['content'],
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
})
}
}
</script>
<style scoped lang="stylus">
@import '~variables'
</style>
<template lang="pug"> <template lang="pug">
.shadow-6 div
q-datetime-picker.full-width(v-model="datetimeInternal", type="date", dark) q-datetime-picker.full-width(v-model="datetimeInternal", type="date", dark)
.text-center.q-px-md q-btn.full-width(@click="setNow", label="Today", flat)
q-btn.full-width.q-ma-md(@click="setNow", label="Today", no-caps)
</template> </template>
<script> <script>
......
<template lang="pug"> <template lang="pug">
.row.col-12 .row.col-12.gutter-sm
// CALENDAR // CALENDAR
// //
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="event_note", :label="dateString") .col-xs-12.col-lg-6
calendar(@update="onUpdateDate", :datetime="datetimeInternal") q-collapsible.ui-border-bottom.q-px-none(group="somegroup", icon="event_note", :label="dateString")
calendar(@update="onUpdateDate", :datetime="datetimeInternal")
// TIME // TIME
// //
q-collapsible.col-xs-12.col-lg-6.q-mb-lg(group="somegroup", icon="access_time", :label="timeString") .col-xs-12.col-lg-6
slider-time(@update="onUpdateTime", :datetime="datetimeInternal") q-collapsible.ui-border-bottom.q-px-none(group="somegroup", icon="access_time", :label="timeString")
slider-time(@update="onUpdateTime", :datetime="datetimeInternal")
</template> </template>
...@@ -71,3 +73,10 @@ ...@@ -71,3 +73,10 @@
} }
} }
</script> </script>
<style scoped lang="stylus">
@import '~variables'
.ui-border-bottom
border-color #999
</style>
...@@ -4,35 +4,38 @@ ...@@ -4,35 +4,38 @@
// .row.md-gutter.justify-between.items-between // .row.md-gutter.justify-between.items-between
div div
template(v-if="loaded", v-for="(field, key) in fields") template(v-if="loaded", v-for="(field, key) in fields")
form-row-checkbox.col-sm-12.no-margin( div.q-mb-md
v-if="isType(field.type, 'checkbox')", form-row-checkbox.col-sm-12.no-margin(
v-model="local[key]", v-if="isType(field.type, 'checkbox')",
:type="field.type", v-model="local[key]",
:validation="$v.local[key]", :type="field.type",
:attributes="field.attributes", :validation="$v.local[key]",
:label="$t(field.label)", :attributes="field.attributes",
:helper-label="$t(field.helperLabel)", :label="$t(field.label)",
:error-label="$t(field.errorLabel)", :helper-label="$t(field.helperLabel)",
:class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }" :error-label="$t(field.errorLabel)",
) :class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }"
form-row.col-sm-12.no-margin( )
v-else, form-row.col-sm-12.no-margin(
v-model="local[key]", v-else,
:type="field.type", v-model="local[key]",
:select-options="field.options", :type="field.type",
:autocomplete-options="field.autocompleteOptions", :select-options="field.options",
:validation="field.validators ? $v.local[key] : undefined", :autocomplete-options="field.autocompleteOptions",
:attributes="field.attributes", :validation="field.validators ? $v.local[key] : undefined",
:label="$t(field.label)", :attributes="field.attributes",
:helper-label="$t(field.helperLabel)", :label="$t(field.label)",
:error-label="$t(field.errorLabel)", :helper-label="$t(field.helperLabel)",
:class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }" :error-label="$t(field.errorLabel)",
) :class="{ 'col-xl-6': !field.fullWidth, 'col-12': field.fullWidth }"
.row.xs-gutter.full-width.justify-end.items-end )
//.row.xs-gutter.full-width.justify-end.items-end.bg-purple
.row.full-width.justify-end.items-end
slot(name="form-buttons-add") slot(name="form-buttons-add")
slot(name="form-buttons") slot(name="form-buttons")
submit-button.q-mt-md( submit-button(
:active="maySubmit", :active="maySubmit",
:class="{'full-width': isMobile}"
) {{ $t(schema.submit.label) || $t('buttons.submit') }} ) {{ $t(schema.submit.label) || $t('buttons.submit') }}
mb-notification-service mb-notification-service
</template> </template>
...@@ -42,6 +45,8 @@ ...@@ -42,6 +45,8 @@
import Vuelidate from 'vuelidate' import Vuelidate from 'vuelidate'
import Promise from 'bluebird' import Promise from 'bluebird'
import { mapGetters } from 'vuex'
import FormRow from './FormRow' import FormRow from './FormRow'
import FormRowCheckbox from './FormRowCheckbox' import FormRowCheckbox from './FormRowCheckbox'
import SubmitButton from './SubmitButton' import SubmitButton from './SubmitButton'
...@@ -73,6 +78,9 @@ ...@@ -73,6 +78,9 @@
this.initForm() this.initForm()
}, },
computed: { computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
}),
initial () { initial () {
const initial = {} const initial = {}
for (let key in this.fields) { for (let key in this.fields) {
......
<template lang="pug"> <template lang="pug">
q-list.no-border.shadow-6 div
slider-time-row.q-mx-lg(v-if="datetimeParsed", v-for="row in rows", slider-time-row(v-if="datetimeParsed", v-for="row in rows",
@update="onSliderUpdate", :value="datetimeParsed[row.type]", @update="onSliderUpdate", :value="datetimeParsed[row.type]",
:key="row.type", :max="row.max", :suffix="row.suffix", :type="row.type") :key="row.type", :max="row.max", :suffix="row.suffix", :type="row.type")
q-item q-btn.full-width(@click="setNow", label="Now", flat)
q-item-main.text-center
q-btn.full-width(@click="setNow", label="Now", no-caps)
</template> </template>
<script> <script>
......
<template lang="pug"> <template lang="pug">
q-btn(:dark="true", outline, icon-right="forward", :color="active ? 'primary' : 'light'", q-btn(:dark="true", :color="active ? 'primary' : 'light'",
@click="clickHandler", type="submit", :disabled="!active") @click="clickHandler", type="submit", :disabled="!active")
slot slot
</template> </template>
......
<template lang="pug"> <template lang="pug">
div div
//
.absolute(style="top: 70px; left: 20px;") // back button
slot(name="backButton") q-page-sticky.q-ma-sm(position="top-left")
.q-ma-md
slot(name="backButton") slot(name="backButton")
.q-px-xl // content
// slot(name="nav-button") div.bg-dark(:class="[isMobile ? 'q-px-md q-py-lg' : 'q-px-xl q-py-xl']")
.q-pt-xl
h5.caption.text-white.q-mt-none .q-pb-xl
// headline slots
h5.q-mt-none(v-if="$slots.fullscreenTitle")
slot(name="fullscreen-title")
h5.q-mt-none(v-if="$slots.formTitle")
slot(name="form-title") slot(name="form-title")
// unknown...
slot(name="form-caption") slot(name="form-caption")
// content slot
slot slot
.q-mt-xl(v-if="!isElectron") // footer
site-footer template(v-if="!isElectron")
site-footer
</template> </template>
<script> <script>
import { openURL } from 'quasar' import { openURL } from 'quasar'
import { mapGetters } from 'vuex'
import SiteFooter from '../partials/SiteFooter' import SiteFooter from '../partials/SiteFooter'
export default { export default {
components: { components: {
SiteFooter SiteFooter
}, },
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
})
},
data: function () { data: function () {
return { return {
openURL, openURL,
......
<template lang="pug"> <template lang="pug">
q-table( div
// buttons and search bar above the table
.row.gutter-md.q-mb-md
.col-3.col-sm-5.col-md-4.col-lg-3.col-xl-3
slot(name="top-buttons", slot-scope="props")
.col-9.col-sm-7.col-md-8.col-lg-9.col-xl-9
q-search(v-model="filter", dark, icon="search")q-table(
v-if="cols.length > 0", v-if="cols.length > 0",
dark, dark,
ref="table", ref="table",
...@@ -19,11 +25,10 @@ ...@@ -19,11 +25,10 @@
template(slot="top-left", slot-scope="props") template(slot="top-left", slot-scope="props")
slot(name="buttons-left") slot(name="buttons-left")
template(slot="top-right", slot-scope="props") <!--template(slot="top-right", slot-scope="props")-->
q-search(hide-underline, v-model="filter", dark) <!--q-search(v-model="filter", dark, icon="search")-->
q-td(slot="body-cell-title", slot-scope="props", :props="props")
q-td(slot="body-cell-title", slot-scope="props", :props="props") template(v-if="customTitleLink")
template(v-if="customTitleLink")
router-link.primary(:to="getCustomLink(customTitleLink, props.row._uuid)") router-link.primary(:to="getCustomLink(customTitleLink, props.row._uuid)")
promise-span(:value="props.value") promise-span(:value="props.value")
template(v-else) template(v-else)
...@@ -189,3 +194,6 @@ ...@@ -189,3 +194,6 @@
} }
} }
</script> </script>
<style scoped lang="stylus">
</style>
<template lang="pug"> <template lang="pug">
.row.full-width.q-pt-xl .q-px-md.q-py-lg
.col-6.text-left
a(@click="openURL('https://auth0.com/?utm_source=oss&utm_medium=gp&utm_campaign=oss')") // links
img(src="https://cdn.auth0.com/oss/badges/a0-badge-dark.png", style="height: 50px;") div
.col-6.text-right a.q-mr-md.q-caption.cursor-pointer(v-for="l in links", @click="l.click") {{ l.label }}
div
small .row.items-end
a(@click="$router.push({ name: 'site.imprint' })") {{ $t('navigation.imprint') }}
small.q-ml-sm // left side
a(@click="$router.push({ name: 'site.contact' })") {{ $t('navigation.contact') }} .col-6
small.q-ml-sm // copyright
a(@click="$router.push({ name: 'site.terms' })") {{ $t('navigation.terms') }} .q-caption {{ $t('site.copyright') }}
small.q-ml-sm
a(@click="openURL('https://gitlab.rlp.net/motionbank')") {{ $t('navigation.repo') }} // version
div .q-caption(v-if="version")
small {{ $t('site.copyright') }} | {{ $t('site.version') }}:&nbsp;
small.q-ml-sm(v-if="version") a.cursor-pointer(@click="openURL('https://gitlab.rlp.net/motionbank/applications/systems-frontend/blob/master/CHANGELOG.md')")
| {{ $t('site.version') }}:
a(@click="openURL('https://gitlab.rlp.net/motionbank/applications/systems-frontend/blob/master/CHANGELOG.md')")
| v{{ version }}{{ isStaging ? `-staging` : '' }} | v{{ version }}{{ isStaging ? `-staging` : '' }}
small.q-ml-sm
| {{ $t('site.license') }}: // license
a(@click="openURL('https://gitlab.rlp.net/motionbank/systems-frontend/blob/master/LICENSE')") MIT .q-caption
| {{ $t('site.license') }}:&nbsp;
a.cursor-pointer(@click="openURL('https://gitlab.rlp.net/motionbank/systems-frontend/blob/master/LICENSE')") MIT
// right side
.col-6.text-right
// auth0 logo
a(@click="openURL('https://auth0.com/?utm_source=oss&utm_medium=gp&utm_campaign=oss')")
img(src="https://cdn.auth0.com/oss/badges/a0-badge-dark.png", style="height: 50px;")
</template> </template>
<script> <script>
import { openURL } from 'quasar' import { openURL } from 'quasar'
import { mapGetters } from 'vuex'
export default { export default {
props: ['positionCorners'], props: ['positionCorners'],
computed: {
...mapGetters({
isMobile: 'globalSettings/getIsMobile'
})
},
data: function () { data: function () {
return { return {
version: process.env.UI_VERSION, version: process.env.UI_VERSION,
isStaging: process.env.IS_STAGING, isStaging: process.env.IS_STAGING,
openURL openURL,
links: [
{
label: this.$t('navigation.imprint'),
click: () => this.$router.push({ name: 'site.imprint' })
},
{
label: this.$t('navigation.contact'),
click: () => this.$router.push({ name: 'site.contact' })
},
{
label: this.$t('navigation.terms'),
click: () => this.$router.push({ name: 'site.terms' })
},
{
label: this.$t('navigation.repo'),
click: () => this.openURL('https://gitlab.rlp.net/motionbank')
}
]
} }
} }
} }
</script> </script>
<style></style> <style lang="stylus" scoped>
@import '~variables'
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment