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

4
src/App.vue
View File

@@ -25,6 +25,9 @@
</div> </div>
</div> </div>
</v-app> </v-app>
<size-indicator></size-indicator>
</template> </template>
<script async setup> <script async setup>
@@ -33,6 +36,7 @@ import Footer from "@/views/main/Footer.vue";
import SideBar from "@/views/main/SideBar.vue"; import SideBar from "@/views/main/SideBar.vue";
import {ref, onMounted, onUnmounted} from 'vue'; import {ref, onMounted, onUnmounted} from 'vue';
import {useSideBarStore} from "@/stores/sideBarStore.js"; import {useSideBarStore} from "@/stores/sideBarStore.js";
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
const showPopup = ref(false); const showPopup = ref(false);
const popup = ref(null); const popup = ref(null);

2
src/views/creators/CreatorBanner.vue
View File

@@ -1,5 +1,4 @@
<template> <template>
<size-indicator></size-indicator>
<!-- Bannière--> <!-- Bannière-->
<div class="relative bottom-4 z-20 m"> <div class="relative bottom-4 z-20 m">
@@ -79,7 +78,6 @@
</template> </template>
<script setup> <script setup>
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue"; import AboutYou from "@/views/creators/CreatorDescriptionBtn.vue";
import SubscribeButton from "@/views/creators/SubscribeButton.vue"; import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import PublishContentButton from "@/views/contents/PublishContentButton.vue"; import PublishContentButton from "@/views/contents/PublishContentButton.vue";

2
src/views/main/Profile.vue
View File

@@ -64,13 +64,11 @@
</div> </div>
</div> </div>
<SizeIndicator></SizeIndicator>
</template> </template>
<script setup> <script setup>
import {ref, onMounted} from "vue"; import {ref, onMounted} from "vue";
import {useUserStore} from "@/stores/userStore.js"; import {useUserStore} from "@/stores/userStore.js";
import SizeIndicator from "@/views/tools/SizeIndicator.vue";
import ManageAccount from "@/views/Profile/ManageAccount.vue"; import ManageAccount from "@/views/Profile/ManageAccount.vue";
import PageInformations from "@/views/Profile/PageInformations.vue"; import PageInformations from "@/views/Profile/PageInformations.vue";
import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue"; import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";

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

@@ -1,16 +1,25 @@
<template> <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"> <div class="size-code sm:block md:hidden bg-blue-500 text-white">
sm 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> </div>
<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> </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>