Skip to content

Commit

Permalink
Backend commits undo, queries resolves except teams/index.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
paaban25 committed Aug 26, 2023
1 parent f934e14 commit 8d5aa0a
Show file tree
Hide file tree
Showing 9 changed files with 521 additions and 559 deletions.
1 change: 1 addition & 0 deletions backend/Aries/urls.py
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@
urlpatterns = [
path('admin/', admin.site.urls),
path('user/', include(user_urls)),
path('alum/',include(alum_urls))
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
5 changes: 4 additions & 1 deletion backend/user/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,7 @@ def __str__(self):
class Meta:
verbose_name = "Alum"
verbose_name_plural = "Alums"



def __str__(self):
return f"{self.first_name} {self.last_name} {self.user.email}"
39 changes: 12 additions & 27 deletions frontend/components/Card.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from "react";
import Head from "next/head";
import styles from './../styles/card.module.css'

type PropType = {
Name:string,
Expand All @@ -10,42 +12,25 @@ function Card(props:PropType) {
const imgStyle = {
width: "12.4rem",
height: "12.8rem",
flexShrink: "0",
flexBasis: "21%",
borderRadius: "1.5rem",
};

// Create an array of 10 elements to map over
// const members = new Array(10).fill(null);

// return (
// <div>
// {members.map((_, index) => (
// <div key={index} className=' my-4 gap-1 flex flex-col' style={imgStyle} >
// <img src="https://tse1.mm.bing.net/th?id=OIP.EWOspfJGuA_VRUDKgfHIiAHaIJ&pid=Api&P=0&h=180" alt="" className='object-cover max-w-full h-auto align-middle transition-transform duration-300 transform hover:scale-125 z-0 memberimage md:my-1' style={imgStyle} />
// <div className="text-left -mt-16 z-10 memberDetails"><span className='pl-4 text-xl'>Name</span ><br /><span className='pl-4 text-base'>Designation</span>
// <div className='flex justify-center'>
// <img src="/insta.svg" alt="" className='w-12 -mt-10 mx-2 contactIcon' />
// <img src="/message.svg" alt="" className='w-12 -mt-10 mx-2 contactIcon' />
// <img src="/linkedin.svg" alt="" className='w-12 -mt-10 mx-2 contactIcon' />
// </div>
// </div>
// </div>
// ))}
// </div>
// );

return (
<div className=' my-4 gap-1 flex flex-col' style={imgStyle} >
<img src={props.Image} alt="" className='object-cover max-w-full h-auto align-middle transition-transform duration-300 transform hover:scale-125 z-0 memberimage md:my-1' style={imgStyle} />
<div className="text-left -mt-16 z-10 memberDetails"><span className='pl-4 text-xl'>{props.Name}</span ><br /><span className='pl-4 text-base'>{props.Designation}</span>
<>

<div className=' my-4 gap-1 flex flex-col .flex-shrink-0 ' style={imgStyle} >
<img src={props.Image} alt="memberImage not loaded" className='object-cover max-w-full h-auto align-middle transition-transform duration-300 transform hover:scale-125 z-0 memberImage md:my-1 rounded-3xl' style={imgStyle} />
<div className={`text-left -mt-16 z-10 ${styles.memberDetails} ${styles.memberImage}`}><span className='pl-4 text-xl'>{props.Name}</span ><br /><span className='pl-4 text-base'>{props.Designation}</span>
<div className='flex justify-center'>
<img src="/insta.svg" alt="" className='w-12 -mt-10 mx-2 ' />
<img src="/message.svg" alt="" className='w-12 -mt-10 mx-2 ' />
<img src="/linkedin.svg" alt="" className='w-12 -mt-10 mx-2 ' />
{/* <img src="/insta.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' />
<img src="/message.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' />
<img src="/linkedin.svg" alt="contactIcons not loading" className='w-12 -mt-10 mx-2 memberContacts' /> */}
{/* Above are usefull comments */}
</div>
</div>
</div>
</>
);
}

Expand Down
22 changes: 22 additions & 0 deletions frontend/hooks/team.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {useMutation} from "@tanstack/react-query";
import { getUrl,request,getErrorBody } from "../utils/network.js";

const TeamData= () => {
const url = getUrl('/team/')
return request("GET",url,null,false)

}

export const TeamApi = (successCallback, errorCallback) => {
return useMutation(TeamData, {
mutationKey: "get-auth-token",
onSuccess: (res) => {
successCallback(res);

},
onError: (err) => {
errorCallback(err);
},
});
};

154 changes: 76 additions & 78 deletions frontend/pages/team/index.tsx
Original file line number Diff line number Diff line change
@@ -1,78 +1,76 @@
'use client';

import React , { useState } from 'react'


import './../../styles/team.module.css'
import Card from '@/components/Card';
// import MemberList from './MemberList';

const OurTeam = () => {
const styleObj = {
background: ";",
borderRadius: "1.5rem",
boxShadow: "2px 2px 2px 0px rgba(35, 17, 17, 0.05) inset, -1px -1px 4px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10);"
}
const bg = {
background: "rgba(170, 170, 170, 0.30)",
// background: rgba(170, 170, 170, 0.30);
backgroundBlendMode: "luminosity",
marginRight: "-6rem"
}
const imgStyle = {
width: "12.4rem",
height: "12.8rem",
flexShrink: "0",
flexBasis: "21%",
borderRadius: "1.5rem"
}

const activeButton={
background: "var(--controls-idle, linear-gradient(0deg, rgba(94, 94, 94, 0.18) 0%, rgba(94, 94, 94, 0.18) 100%), rgba(255, 255, 255, 0.07))",
}
const [bgColor,setBgColor]=useState(0);
const members = new Array(10).fill({Name: "XYZ", Designation: "XYZ", Image:"https://s.yimg.com/fz/api/res/1.2/N0fIf9F9GTzoaOqJ13.lNw--~C/YXBwaWQ9c3JjaGRkO2ZpPWZpbGw7aD0yMjA7cT04MDt3PTE2NQ--/https://s.yimg.com/zb/imgv1/d71ffb26-8c8a-34b1-bc0f-abfcfb942420/t_500x300"});
return (

<>

<div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh]">

<div className='w-full flex justify-center'>
<div className=" inline-flex px-5 py-5 flex-col justify-center items-center gap-2.5 rounded-3xl text-3xl mt-10 bg-[linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.10) 100%)] " style={styleObj}>Our Team</div>
</div>
<div className='flex h-[80%] justify-end'>
<div className="flex w-[15%] items-center justify-end ">
<div className="flex -rotate-90 h-14 items-center gap-2 shrink-0 rounded-3xl backdrop-blur-2xl justify-end px-4 " style={bg}>
<div><button className={`flex h-10 ${ bgColor == 0 ? "activeButton" : "" } px-4 py-5 items-center rounded-3xl bg-blend-luminosity text-center`} >Current Team</button></div>
<div><button className={`flex h-10 ${ bgColor == 1 ? "activeButton" : "" } px-4 py-5 items-center rounded-3xl bg-blend-luminosity text-center`} >Alum</button></div>
</div>
</div>
<div className="mt-5 m-auto block text-center overflow-y-scroll scroll-smooth scrollbar-thin h-[66vh] w-[75%] pl-[2%] pt-[1%] flex flex-row flex-wrap overflow-hidden">

{ members.map((member,it)=>{
return(<>
<Card Name={member.Name} Designation={member.Designation} Image={member.Image}/>

</>)}
)
}
</div>
</div>

<div className="flex align-center justify-center -mt-10 mb-0">
<div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl shadow-md shadow-slate-100 backdrop-blur-2xl " style={styleObj}>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/lightBulb.svg" alt="" /></a>
</div>
</div>

</div>
</>
)
}

export default OurTeam
'use client';

import React , { useState } from 'react'


import './../../styles/team.module.css'
import Card from '@/components/Card';


const OurTeam = () => {
const styleObj = {
background: ";",
borderRadius: "1.5rem",
boxShadow: "2px 2px 2px 0px rgba(35, 17, 17, 0.05) inset, -1px -1px 4px 0px rgba(255, 255, 255, 0.05) inset, 0px 4px 4px 0px rgba(0, 0, 0, 0.10);"
}
const bg = {
background: "rgba(170, 170, 170, 0.30)",

backgroundBlendMode: "luminosity",
marginRight: "-6rem"
}
const imgStyle = {
width: "12.4rem",
height: "12.8rem",
flexShrink: "0",
flexBasis: "21%",
borderRadius: "1.5rem"
}


const [bgColor,setBgColor]=useState(0);
const members = new Array(20).fill({Name: "XYZ", Designation: "XYZ", Image:"https://s.yimg.com/fz/api/res/1.2/N0fIf9F9GTzoaOqJ13.lNw--~C/YXBwaWQ9c3JjaGRkO2ZpPWZpbGw7aD0yMjA7cT04MDt3PTE2NQ--/https://s.yimg.com/zb/imgv1/d71ffb26-8c8a-34b1-bc0f-abfcfb942420/t_500x300"});
return (

<>

<div className="bg-[url('/images/bg.png')] bg-cover bg-center h-[100vh]">

<div className='w-full flex justify-center'>
<div className=" inline-flex px-5 py-5 flex-col justify-center items-center gap-2.5 rounded-3xl text-3xl mt-10 bg-[linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.10) 100%)] " style={styleObj}>Our Team</div>
</div>
<div className='flex h-[80%] justify-end'>
<div className="flex w-[15%] items-center justify-end ">
<div className="flex -rotate-90 h-14 items-center gap-2 shrink-0 rounded-3xl backdrop-blur-2xl justify-end px-4 " style={bg}>
<div><button className={`flex h-10 ${ bgColor == 0 ? "activeButton" : "" } px-4 py-5 items-center rounded-3xl bg-blend-luminosity text-center`} >Current Team</button></div>
<div><button className={`flex h-10 ${ bgColor == 1 ? "activeButton" : "" } px-4 py-5 items-center rounded-3xl bg-blend-luminosity text-center`} >Alum</button></div>
</div>
</div>
<div className="mt-5 m-auto block text-center overflow-y-scroll scroll-smooth scrollbar-thin h-[66vh] w-[75%] pl-[2%] pt-[1%] flex flex-row flex-wrap overflow-hidden justify-around">

{ members.map((member,it)=>{
return(<>
<Card Name={member.Name} Designation={member.Designation} Image={member.Image}/>

</>)}
)
}
</div>
</div>

<div className="flex align-center justify-center -mt-10 mb-0">
<div className="inline-flex px-2 py-4 items-start gap-2 rounded-3xl shadow-md shadow-slate-100 backdrop-blur-2xl " style={styleObj}>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/contactUs.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/fluentPeople.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/home.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/info.svg" alt="" /></a>
<a href=""><img className='h-5 w-5 mx-2 shrink-0' src="/images/lightBulb.svg" alt="" /></a>
</div>
</div>

</div>
</>
)
}

export default OurTeam
8 changes: 8 additions & 0 deletions frontend/styles/card.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

.memberImage:hover + .memberDetails{
visibility: hidden;
}

.memberImage:hover + .memberContacts{
z-index: 10;
}
Loading

0 comments on commit 8d5aa0a

Please sign in to comment.