Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug - TeamView is not mobile responsive #62 #105

Merged
merged 5 commits into from
Jul 27, 2022
Merged

Bug - TeamView is not mobile responsive #62 #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3bf6e86
Style(Header,Navbar) : Fixed Header and Navbar
MadhushaPrasad Jul 27, 2022
8c07f68
style(TeamCard) : fixed teamcard mobile responsive
MadhushaPrasad Jul 27, 2022
814c724
style(TeamView):fixed team view page mobile responsive
MadhushaPrasad Jul 27, 2022
74d3327
style(navbar):fixed mobile responsive
MadhushaPrasad Jul 27, 2022
44eb7fb
Merge branch 'development' into feature/mobile-responsive
MadhushaPrasad Jul 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions src/components/Navbar/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const solutions = [
const Header = () => {
return (
<Popover className="relative bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
<div className="flex justify-between items-center border-0 py-3 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<div className="text-xl font-medium text-black hover:text-gray-900 list-none">
Expand All @@ -53,11 +53,14 @@ const Header = () => {
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-7">
<li className="text-base font-medium text-black hover:text-gray-900 mt-1 list-none cursor-pointer">
<Popover.Group
as="nav"
className="hidden md:flex md:flex-row md:justify-end md:items-center space-x-7 md:space-x-3 "
>
<li className="lg:text-lg md:text-sm text-base font-medium text-black hover:text-gray-900 mt-1 list-none cursor-pointer">
Home
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="eligibility"
spy={true}
Expand All @@ -69,7 +72,7 @@ const Header = () => {
Eligibility
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="timeline"
spy={true}
Expand All @@ -81,7 +84,7 @@ const Header = () => {
Timeline
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="teams"
spy={true}
Expand All @@ -93,7 +96,7 @@ const Header = () => {
Teams
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<Link
to="gallery"
spy={true}
Expand All @@ -105,7 +108,7 @@ const Header = () => {
Gallery
</Link>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<a
href="https://bit.ly/minihack22Guideline"
target="_blank"
Expand All @@ -114,7 +117,7 @@ const Header = () => {
Rules
</a>
</li>
<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
<a
href="https://www.facebook.com/msclubsliit"
target="_blank"
Expand All @@ -123,7 +126,7 @@ const Header = () => {
Contact
</a>
</li>
<li className="ml-8 cursor-pointer inline-flex items-center justify-center px-4 py-1 border-0 rounded font-normal text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500">
<li className="lg:text-lg md:text-sm ml-8 md:ml-3 cursor-pointer inline-flex items-center justify-center px-4 md:px-2 md:w-fit py-1 border-0 rounded font-normal text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500">
<a
href="https://teams.microsoft.com/l/team/19%3asKeZlvZa7jFdXBP_ZmYQnyc-w70KXbrRugHyDumm2To1%40thread.tacv2/conversations?groupId=b6390614-7075-4334-afe7-ef873eeb4550&tenantId=44e3cf94-19c9-4e32-96c3-14f5bf01391a"
target="_blank"
Expand Down
33 changes: 33 additions & 0 deletions src/components/TeamCard/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,39 @@ import { PortalWithState } from 'react-portal';

const TeamCard = (props) => {
return (
<div className="md:w-1/3 md:ml-5 lg:w-96 p-4 bg-white border-inherit h-52 border rounded-lg mb-5">
<div className="grid md:flex md:flex-row md:justify-between grid-rows-1 grid-cols-11 items-center p-4 md:p-0 pt-2">
<div className="col-start-1 col-span-1">
<img
src={props.teamImage}
className="max-w-sm md:h-[2.5rem] rounded-full h-10"
alt="Team Cats"
/>
</div>
<div className="col-start-3 col-span-6">
<p className="font-bold md:text-xs">{props.team_name}</p>
</div>
<div className="col-start-7 col-span-2">
<button className="w-24 md:w-20 whitespace-nowrap rounded-full md:text-xs border-2 px-3 py-1 text-base md:text-gray-800">
{props.round + "st Round"}
</button>
</div>
</div>
<div className="p-4 pt-0 pl-2 md:pl-0">
<p className="text-gray-900 text-base font-medium mb-1">
{props.member01}
</p>
<p className="text-gray-900 text-base font-medium mb-1">
{props.member02}
</p>
<p className="text-gray-900 text-base font-medium mb-1">
{props.member03}
</p>
<p className="text-gray-900 text-base font-medium mb-1">
{props.member04}
</p>
</div>
</div>
<PortalWithState closeOnOutsideClick closeOnEsc node={document.getElementById('portal-root')}>
{({ openPortal, closePortal, portal }) => (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/views/Header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Countdown = () => {

return (
<div className="flex justify-center flex-col md:flex-row px-3.5 mt-10">
<div className="flex justify-center items-center md:p-10">
<div className="flex justify-center items-center md:p-10 md:w-1/2 logoDiv">
<img
src={Logo}
alt="Mini Hackathon Logo"
Expand Down
1 change: 1 addition & 0 deletions src/views/TeamView/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const TeamView = () => {
Search
</button>
</div>
<div className="flex flex-wrap justify-between md:justify-center sm:justify-center px-4 md:px-20">
<div className="flex flex-wrap px-4 justify-center md:px-20">
{currentTeamCards.map((singleTeamCardDetails) => (
<div key={singleTeamCardDetails.team_id} className="p-3">
Expand Down
11 changes: 7 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7930,7 +7930,8 @@
"kleur" "^3.0.3"
"sisteransi" "^1.0.5"

"prop-types@^15.5.8", "prop-types@^15.7.2", "prop-types@^15.8.1":
"prop-types@^15.7.2", "prop-types@^15.8.1":

"integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
"resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
"version" "15.8.1"
Expand Down Expand Up @@ -8079,7 +8080,8 @@
"strip-ansi" "^6.0.1"
"text-table" "^0.2.0"

"react-dom@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>= 16.8.0", "react-dom@>=16.8":
"react-dom@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>= 16.8.0", "react-dom@>=16.8":

"integrity" "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w=="
"resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"
"version" "18.1.0"
Expand Down Expand Up @@ -8143,7 +8145,7 @@
"version" "4.2.2"
dependencies:
"prop-types" "^15.5.8"

"react-qr-code@^2.0.7":
"integrity" "sha512-NpknL80p7dWbLdHfBSIxQIqLCu3+kBlyzYD692rO0UnVwfCSziIxc1xn/p3JhPEv1RV1lRD8j0w+hR3L7tawTQ=="
"resolved" "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.7.tgz"
Expand Down Expand Up @@ -8257,7 +8259,8 @@
"prop-types" "^15.7.2"
"react-intersection-observer" "^8.26.2"

"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^16.8.0 || ^17 || ^18", "react@^16.x || ^17.x || ^18.x", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.8", "[email protected]":
"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0 || ^17", "react@^16.8.0 || ^17 || ^18", "react@^16.x || ^17.x || ^18.x", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.8":

"integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
"resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
"version" "18.1.0"
Expand Down