jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ensure the SizeIndicator helper is visible on all pages

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-08-05 17:06:50 -04:00
parent bd30b58463
commit f2209cda64
4 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/views/tools/SizeIndicator.vue
View File

@@ -1,16 +1,25 @@
<template>
<div class="fixed bottom-0 left-0 m-4 z-50">
<div class="hidden sm:block md:hidden bg-blue-500 text-white p-2 rounded">
sm
</div>
<div class="hidden md:block lg:hidden bg-green-500 text-white p-2 rounded">
md
</div>
<div class="hidden lg:block xl:hidden bg-yellow-500 text-black p-2 rounded">
lg
</div>
<div class="hidden xl:block bg-red-500 text-white p-2 rounded">
xl
</div>
<div class="size-code sm:block md:hidden bg-blue-500 text-white">
sm
</div>
</template>
<div class="size-code md:block lg:hidden bg-green-500 text-white">
md
</div>
<div class="size-code lg:block xl:hidden bg-yellow-500 text-black">
lg
</div>
<div class="size-code xl:block bg-red-500 text-white">
xl
</div>
</template>
<style scoped>
.size-code {
@apply fixed bottom-0 left-0 z-50 rounded p-2 m-2 w-9 h-9 text-center content-center capitalize font-mono font-semibold
}
</style>