Client - style update

This commit is contained in:
Sam 2021-09-24 14:10:20 +02:00
parent 34c51c6ef0
commit 66f2f3a4df
3 changed files with 46 additions and 25 deletions

View File

@ -104,8 +104,17 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/scss/base'; @import '~@/scss/base';
.leaflet-container { #workout-map {
height: 400px; .leaflet-container {
width: 600px; height: 400px;
width: 600px;
}
@media screen and (max-width: $small-limit) {
.leaflet-container {
width: 100%;
height: 300px;
}
}
} }
</style> </style>

View File

@ -81,7 +81,9 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/scss/base'; @import '~@/scss/base';
.workout-detail { .workout-detail {
display: flex;
::v-deep(.card) { ::v-deep(.card) {
width: 100%;
.card-title { .card-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View File

@ -1,21 +1,23 @@
<template> <template>
<div id="workout"> <div id="workout">
<div class="workout-loading" v-if="workout.loading"> <div class="container">
<div class="loading"> <div class="workout-loading" v-if="workout.loading">
<Loader /> <div class="loading">
<Loader />
</div>
</div> </div>
</div> <div v-else class="workout-container">
<div v-else class="container"> <div v-if="workout.workout.id">
<div v-if="workout.workout.id"> <WorkoutDetail
<WorkoutDetail v-if="sports.length > 0"
v-if="sports.length > 0" :workout="workout"
:workout="workout" :sports="sports"
:sports="sports" :authUser="authUser"
:authUser="authUser" />
/> </div>
</div> <div v-else>
<div class="container" v-else> <NotFound target="WORKOUT" />
<NotFound target="WORKOUT" /> </div>
</div> </div>
</div> </div>
</div> </div>
@ -66,13 +68,21 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/scss/base'; @import '~@/scss/base';
#workout { #workout {
.workout-loading { display: flex;
height: $app-height; .container {
width: 100%;
.loading { padding: 0;
display: flex; .workout-container {
align-items: center; width: 100%;
height: 100%; }
.workout-loading {
height: $app-height;
width: 100%;
.loading {
display: flex;
align-items: center;
height: 100%;
}
} }
} }
} }