17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished work on the profile page header reactivity

Browse Source
This commit is contained in:
ajdj100
2023-10-10 03:08:03 -04:00
parent ccae711e24
commit 1a5b888892
3 changed files with 14 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
17th Website/src/components/ProfilePage/profile.vue
View File

@@ -13,8 +13,9 @@ export default {
</script>
<template>
<div id="ProfileWrapper" class="flex flex-col xl:flex-row">
<div id="HeaderWrapper" class="bg-opacity-20 xl:h-screen xl:pt-32 xl:pr-10 xl:border-r-2 xl:border-gray-dark">
<div id="ProfileWrapper" class="flex flex-col xl:flex-row items-center">
<div id="HeaderWrapper" class="flex flex-col items-center bg-opacity-20 xl:h-screen pt-8 xl:pt-32
xl:pr-10 sm:border-b-2 xl:border-b-0 xl:border-r-2 border-gray-dark sm:w-full xl:w-96">
<profileHeader></profileHeader>
<div id="profileSubnavWrapper" class="mt-8 flex flex-row xl:flex-col">
<profileSubNav link="home" content="Home"></profileSubNav>
@@ -26,12 +27,4 @@ export default {
<RouterView />
</div>
</div>
</template>
<style scoped>
#profileContentWrapper {
margin-left: 300px;
margin-top: 100px;
}
</style>
</template>

6
17th Website/src/components/ProfilePage/profileHeader.vue
View File

@@ -11,10 +11,10 @@ export default {
</script>
<template>
<div id="wrapper" class="flex flex-row xl:flex-col items-center">
<div id="wrapper" class="flex flex-row xl:flex-col xl:max-w-fit">
<div id="headerImages" class="flex flex-col items-center">
<img id="rankImg" src="../icons/misc/test.png" class="w-52" />
<img id="rangerTab" src="../icons/misc/test.png" class="w-32" />
<img id="rankImg" src="../icons/misc/test.png" class="xl:w-52 w-40" />
<img id="rangerTab" src="../icons/misc/test.png" class="xl:w-32 w-28" />
</div>
<div id="mainInfo">
<h1>Big Name</h1>

10
17th Website/src/components/ProfilePage/profileSubNav.vue
View File

@@ -17,8 +17,12 @@ export default {
<template>
<RouterLink :to="link">
<p class="text-white rounded-md my-0 p-2 hover:text-blue transition-all active:ring-1 active:ring-blue"
:class="{ active: active }">{{ content }}</p>
<Icon :icon="iconName"/>
<p class="text-white xl:rounded-md my-0 p-2 hover:text-blue transition-all
xl:active:ring-1 sm:border-b-2 xl:border-b-0 sm:border-gray-light sm:active:border-blue
xl:active:ring-blue xl:w-64 sm:w-36 sm:text-center xl:text-left"
:class="{ active: active }">
{{ content }}
</p>
<Icon :icon="iconName" />
</RouterLink>
</template>