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

4
frontend/src/App.vue
View file

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

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

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

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

@ -27,13 +27,21 @@ const p4 = {
</script>
<template>
<div
class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
>
<AudioCard v-bind="p1"></AudioCard>
<AudioCard v-bind="p2"></AudioCard>
<AudioCard v-bind="p3"></AudioCard>
<AudioCard v-bind="p4"></AudioCard>
<div class="container overflow-hidden">
<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>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<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>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p4"></AudioCard>
</div>
</div>
</div>
</template>