tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

header und cache overview

Browse Source
This commit is contained in:
Timo Volkmann 2019-03-26 22:26:23 +01:00
parent 907d344a26
commit 76d42d30ef
5 changed files with 69 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/quasar.conf.js
View File

@ -56,7 +56,8 @@ module.exports = function (ctx) {
'QInput',
'QFab',
'QFabAction',
'QDialog'
'QDialog',
'QFooter'
],
directives: [

15
frontend/src/layouts/MyLayout.vue
View File

@ -1,8 +1,15 @@
<template>
<q-layout view="hhh Lpr lFf">
<q-header elevated class="bg-white text-green-8">
<q-header id="qheader" elevated class="bg-white text-grey-14">
<q-toolbar class="q-pa-md">
<q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm" />
<q-toolbar-title>
BuGa Geocaching
</q-toolbar-title>
<q-btn
class="desktop-hide"
flat
dense
ripple
@ -11,11 +18,6 @@
>
<q-icon name="menu" />
</q-btn>
<q-toolbar-title>
BuGa Geocaching
</q-toolbar-title>
<!--<div>Quasar v{{ $q.version }}</div>-->
</q-toolbar>
</q-header>
@ -114,6 +116,7 @@ export default {
data() {
return {
leftDrawerOpen: this.$q.platform.is.desktop,
//menuButtonVisible: !this.$q.platform.is.desktop,
//leftDrawerOpen: true,
//miniState: true
};

107
frontend/src/pages/Index.vue
View File

@ -1,54 +1,61 @@
<template>
<div class="q-pa-md row items-start q-gutter-md">
<q-card class="my-card">
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-page>
<q-tab-panels v-model="tab" animated swipeable>
<q-tab-panel name="map" class="q-pa-none">
<q-img src="statics/osm_mock.png" class="full-height full-width" :style="mapHeight"/>
<!--<img src="statics/osm_mock.png" class="full-height full-width"/>-->
</q-tab-panel>
<q-card
class="my-card text-white"
style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
>
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-tab-panel name="list">
<div class="text-h6">Alarms</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</q-tab-panel>
</q-tab-panels>
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card dark bordered class="bg-grey-9 my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-separator dark inset />
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card flat bordered class="my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
</q-card-section>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
<q-separator inset />
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
</q-card>
</div>
<q-separator />
<q-footer id="qfooter">
<q-tabs
v-model="tab"
dense
class="bg-grey-14"
align="justify"
inline-label
>
<q-tab name="map" label="Karte" icon="map"/>
<q-tab name="list" label="Liste" icon="list"/>
</q-tabs>
</q-footer>
</q-page>
</template>
<script>
import { dom } from 'quasar'
const { height, width } = dom
export default {
data () {
return {
tab: 'map',
hheight: 71.0,
fheight: 0.0,
//header: {h: '0px', w: 0}
}
},
mounted: function() {
//this.header.h = style(this.$refs.layout.$refs.header, 'height')
this.hheight = height(document.getElementById('qheader'));
this.fheight = height(document.getElementById('qfooter'));
},
computed: {
mapHeight () {
let header = this.hheight
let footer = this.fheight
let offset = header+footer+1;
console.log(offset)
return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' };
},
// computedMainStyle() {
// return { height: `calc( 100vh - ${this.header.h} )` };
// }
}
}
</script>

1
frontend/src/statics/buga_logo.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291 282.2"><defs><style>.cls-1,.cls-5{fill:#58c5c7;}.cls-1,.cls-2,.cls-3,.cls-7{opacity:0.65;isolation:isolate;}.cls-2,.cls-6{fill:#ec0090;}.cls-3,.cls-4{fill:#5ca038;}.cls-7,.cls-8{fill:#accd6b;}</style></defs><title>buga_logo</title><path class="cls-1" d="M272.4,1H256.8V83.4c-.3,6.2-.4,11.7-1.8,17.8-2.2,11.1-10.2,32.9-31.5,33.2h0c30.2-.2,43.3-22.1,46.4-33.2,1.9-6.1,2.1-11.5,2.5-17.8ZM165.6,1V83.4c.4,6.3.6,11.7,2.5,17.8,3,11.1,16.3,33,46.5,33.2-21.4-.2-29.4-22.1-31.6-33.2-1.4-6.1-1.5-11.5-1.8-17.8V1Zm49,133.4Z" transform="translate(0 -1)"/><path class="cls-2" d="M29.7,1H15.8V133.5H29.6V1ZM75.1,1H71.8c1.6,0,7.3.3,11.7,2.6C91.9,7.9,97.9,20,97.9,33.1c0,4.1-.7,14.2-6.7,21.9a36.4314,36.4314,0,0,1-5.1,5.3,20.8768,20.8768,0,0,1,7.8,3.4c8.2,5.7,12.7,18.1,12.7,31,0,4.5-.7,14.6-6,24-4.7,8.5-10.7,12.8-17.9,14.2-2.2.4-4.6.4-6.9.6h5.1c3.2-.2,6.6-.2,9.8-.6,10.2-1.3,18.7-5.7,25.3-14.2a39.4348,39.4348,0,0,0,8.5-24c0-12.9-6.4-25.4-17.9-31a38.99,38.99,0,0,0-11-3.4c3.6-2.4,5.7-3.8,7.2-5.3a29.4216,29.4216,0,0,0,9.4-21.9A31.5822,31.5822,0,0,0,91.8,3.6C85.5,1.2,76.8,1,75.1,1" transform="translate(0 -1)"/><path class="cls-3" d="M223.4,157.9v.5L271.2,282H291Zm-8.6,0L147.2,282H167l47.8-123.5Z" transform="translate(0 -1)"/><path class="cls-4" d="M271.2,282,223.4,158V282ZM167,282h47.8V158Z" transform="translate(0 -1)"/><path class="cls-5" d="M256.7,83.4V1H223.5V134.4c21.3-.3,29.3-22.1,31.5-33.2,1.3-6.1,1.4-11.6,1.7-17.8m-42.1,51V1H181.2V83.4c.3,6.2.4,11.7,1.8,17.8,2.1,11.1,10.2,33,31.6,33.2" transform="translate(0 -1)"/><path class="cls-6" d="M91.3,55c6-7.8,6.7-17.8,6.7-21.9C98,20,92,7.9,83.6,3.6,79,1.2,72.8,1,71.6,1H68V133.5h7.8c2.3-.2,4.7-.2,6.9-.6,7.2-1.3,13.2-5.7,17.9-14.2a50.9125,50.9125,0,0,0,6-24c0-12.9-4.5-25.3-12.7-31a22.1428,22.1428,0,0,0-7.7-3.4A31.9906,31.9906,0,0,0,91.3,55m-39,78.5h6.9V1H29.7V133.5Z" transform="translate(0 -1)"/><path class="cls-7" d="M59.1,283.2h0c-8.3-1.1-16-5.5-22.4-12.2l-.1-.1c-1-1.1-2-2.2-3-3.4a3.0388,3.0388,0,0,1-.5-.7,37.1169,37.1169,0,0,1-2.3-3.2,14.0034,14.0034,0,0,0-1-1.6c-.5-.9-1.1-1.8-1.6-2.7-.4-.7-.7-1.5-1.1-2.2s-.8-1.6-1.2-2.4a4.8745,4.8745,0,0,1-.4-1.1c-.6-1.3-1.1-2.5-1.6-3.9,0-.1-.1-.2-.1-.3a73.8391,73.8391,0,0,1-2.9-10.2,89.8012,89.8012,0,0,1-1.5-10.4c-.2-2.5-.3-4.9-.3-7.5,0-7.2.8-25.1,10.3-40.5,7.6-12.4,18.5-21.1,29.9-22.6h0c-18.5,1.2-33.8,10.2-44.5,22.6C1.2,196.1,0,214,0,221.2c0,33,25.5,60,59.1,62m68-61.8H108.3c0,2.5-.1,4.9-.3,7.3a89.8012,89.8012,0,0,1-1.5,10.4,70.0787,70.0787,0,0,1-2.9,10.2c0,.1-.1.2-.1.3-.5,1.3-1,2.6-1.6,3.9-.1.4-.3.7-.4,1.1l-1.2,2.4c-.4.8-.7,1.5-1.1,2.2-.5.9-1.1,1.8-1.6,2.7a14.0034,14.0034,0,0,1-1,1.6,37.103,37.103,0,0,1-2.3,3.2,3.0388,3.0388,0,0,0-.5.7c-1,1.2-2,2.3-3,3.4l-.1.1c-6.4,6.7-14.1,11.1-22.4,12.2h0c33.3-1.9,58.7-28.7,58.8-61.7" transform="translate(0 -1)"/><path class="cls-8" d="M59.1,283.2V158.1c-11.4,1.5-22.4,10.2-29.9,22.6-9.5,15.5-10.3,33.3-10.3,40.5-.1,33,18,59,40.2,62m49.2-61.8H68v61.7c22.1-2.9,40.2-28.7,40.3-61.7" transform="translate(0 -1)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
frontend/src/statics/osm_mock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 MiB