zhao/badl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

💄 Responsive layout with grid

Browse source
This commit is contained in:
zhbaor 2023-02-23 16:10:33 +08:00
parent 761cb651ab
commit cd93d3a8a0
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/App.vue
View file

@ -5,7 +5,9 @@ import AudioDownload from "./views/AudioDownload.vue";
</script> </script>
<template> <template>
<div class="vh-100 vw-100 bg-body-secondary">
<AudioDownload></AudioDownload> <AudioDownload></AudioDownload>
</div>
</template> </template>
<style scoped></style> <style scoped></style>

8
frontend/src/components/AudioCard.vue
View file

@ -44,13 +44,13 @@ const progress = computed(() => {
</script> </script>
<template> <template>
<div class="card mb-2 w-100 shadow-sm"> <div class="card w-100 shadow-sm">
<div class="card-body position-relative"> <div class="card-body position-relative">
<h6 v-if="number" class="text-muted mb-1">{{ number }}</h6> <h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
<div v-else class="placeholder-wave"> <div v-else class="placeholder-wave">
<h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6> <h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6>
</div> </div>
<h5 v-if="title">{{ title }}</h5> <h5 v-if="title" class="text-truncate">{{ title }}</h5>
<div v-else class="placeholder-wave"> <div v-else class="placeholder-wave">
<h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5> <h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5>
</div> </div>
@ -97,10 +97,6 @@ const progress = computed(() => {
</template> </template>
<style scoped> <style scoped>
.card {
max-width: 600px;
}
i { i {
font-size: 36px; font-size: 36px;
} }

14
frontend/src/views/AudioDownload.vue
View file

@ -27,14 +27,22 @@ const p4 = {
</script> </script>
<template> <template>
<div <div class="container overflow-hidden">
class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100" <div class="row g-3 py-3">
> <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p1"></AudioCard> <AudioCard v-bind="p1"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p2"></AudioCard> <AudioCard v-bind="p2"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p3"></AudioCard> <AudioCard v-bind="p3"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p4"></AudioCard> <AudioCard v-bind="p4"></AudioCard>
</div> </div>
</div>
</div>
</template> </template>
<style scoped></style> <style scoped></style>