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

Feature/wff hint + mobile navigation #72

Merged
merged 11 commits into from
Jun 18, 2024
Merged

Feature/wff hint + mobile navigation #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
edea63d
Replaced bottom navigation within quiz with a drawer.
malikpiara Jun 9, 2024
7183583
Removed borders and paddings from quiz on mobile to declutter the use…
malikpiara Jun 9, 2024
16907e8
Replaced drawer placeholder with wff hint for syllogistic logic.
malikpiara Jun 9, 2024
cdc1a29
Started building custom navigation for mobile.
malikpiara Jun 11, 2024
dc7635e
Added Logicola favicon
malikpiara Jun 14, 2024
c1df1e3
Replacing the navbar in the quiz mode with a navigation that only dis…
malikpiara Jun 18, 2024
4ccf5b8
Keeping the footer from being rendered on the quiz pages and optimize…
malikpiara Jun 18, 2024
0afe302
Made button text larger on mobile.
malikpiara Jun 18, 2024
ae304bb
Conditionally rendering different wff based on different chapters.
malikpiara Jun 18, 2024
f85e156
Replaced 'chapters' label with 'exercises' in navigation.
malikpiara Jun 18, 2024
6626e2c
Rendering a hint for the definitions chapter.
malikpiara Jun 18, 2024
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
Binary file removed app/favicon.ico
View file
Open in desktop
Binary file not shown.
11 changes: 11 additions & 0 deletions app/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 5 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import type { Metadata } from 'next';
import { Roboto_Flex } from 'next/font/google';
import './globals.css';
import Navbar from '@/components/navbar';
import MobileNavbar from '@/components/mobile/navbar';
import { Footer } from '@/components/footer';
import { CSPostHogProvider } from '@/components/providers';

import thumbnail from '../public/thumbnail.jpg';
import ExerciseNavbar from '@/components/mobile/exerciseNavbar';

const robotoFlex = Roboto_Flex({
subsets: ['latin'],
Expand Down Expand Up @@ -61,6 +62,9 @@ export default function RootLayout({
<body
className={`antialiased min-h-screen bg-white text-primaryColor ${robotoFlex.className}`}
>
<ExerciseNavbar />
<MobileNavbar />

<Navbar />
<main className={`flex`}>{children}</main>
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion components/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Button = ({ label, ...props }: ButtonProps) => {
<>
<button
type='button'
className={`text-white font-semibold rounded-full text-sm px-7 py-2.5 me-2 mb-2 ${
className={`text-white w-full font-semibold rounded-md text-base md:text-sm px-7 py-2.5 mb-2 ${
props.disabled
? ' bg-gray-200 cursor-not-allowed'
: 'bg-primaryColor hover:opacity-90'
Expand Down
236 changes: 120 additions & 116 deletions components/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,131 +1,135 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export function Footer() {
return (
<footer className='p-4 mt-4 bg-white sm:p-6'>
<div className='mx-auto max-w-screen-xl'>
<div className='md:flex md:justify-between'>
<div className='mb-6 md:mb-0'>
<Link href='https://logicola.org' className='flex items-center'>
{/* <img
const pathname = usePathname();
if (!pathname.includes('quiz'))
return (
<footer className='p-4 mt-4 bg-white sm:p-6'>
<div className='mx-auto max-w-screen-xl'>
<div className='md:flex md:justify-between'>
<div className='mb-6 md:mb-0'>
<Link href='https://logicola.org' className='flex items-center'>
{/* <img
src='https://flowbite.com/docs/images/logo.svg'
className='mr-3 h-8'
alt='FlowBite Logo'
/> */}
<span className='self-center text-2xl font-bold whitespace-nowrap font-stretch'>
LogiCola
</span>
</Link>
</div>
<div className='grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3'>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Resources
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://harrycola.com/lc/index.htm'
className='hover:underline'
>
Classic Logicola
</Link>
</li>
<li>
<Link
href='https://www.routledge.com/Introduction-to-Logic/Gensler/p/book/9781138910591'
className='hover:underline'
>
Get the Book
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Follow us
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://github.com/malikpiara/logicola'
className='hover:underline '
>
Github
</Link>
</li>
<li>
<Link
href='https://twitter.com/LogicolaWeb'
className='hover:underline'
>
Twitter
</Link>
</li>
</ul>
<span className='self-center text-2xl font-bold whitespace-nowrap font-stretch'>
LogiCola
</span>
</Link>
</div>
<div>
<h2 className='mb-6 text-sm font-semibold text-gray-900 uppercase font-stretch'>
Legal
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link href='#' className='hover:underline'>
Privacy Policy
</Link>
</li>
<li>
<Link href='#' className='hover:underline'>
Terms &amp; Conditions
</Link>
</li>
</ul>
<div className='grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3'>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Resources
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://harrycola.com/lc/index.htm'
className='hover:underline'
>
Classic Logicola
</Link>
</li>
<li>
<Link
href='https://www.routledge.com/Introduction-to-Logic/Gensler/p/book/9781138910591'
className='hover:underline'
>
Get the Book
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 font-stretch text-sm font-semibold text-gray-900 uppercase'>
Follow us
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link
href='https://github.com/malikpiara/logicola'
className='hover:underline '
>
Github
</Link>
</li>
<li>
<Link
href='https://twitter.com/LogicolaWeb'
className='hover:underline'
>
Twitter
</Link>
</li>
</ul>
</div>
<div>
<h2 className='mb-6 text-sm font-semibold text-gray-900 uppercase font-stretch'>
Legal
</h2>
<ul className='text-gray-500'>
<li className='mb-4'>
<Link href='#' className='hover:underline'>
Privacy Policy
</Link>
</li>
<li>
<Link href='#' className='hover:underline'>
Terms &amp; Conditions
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr className='my-6 border-gray-200 sm:mx-auto lg:my-8' />
<div className='sm:flex sm:items-center sm:justify-between'>
<span className='text-sm text-gray-500 sm:text-center '>
© 2024{' '}
<Link href='https://logicola.com' className='hover:underline'>
Logicola
</Link>
. Some Rights Reserved.
</span>
<div className='flex mt-4 space-x-6 sm:justify-center sm:mt-0'>
<Link
href='https://twitter.com/LogicolaWeb'
className='text-gray-500 hover:text-gray-900'
>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
<hr className='my-6 border-gray-200 sm:mx-auto lg:my-8' />
<div className='sm:flex sm:items-center sm:justify-between'>
<span className='text-sm text-gray-500 sm:text-center '>
© 2024{' '}
<Link href='https://logicola.com' className='hover:underline'>
Logicola
</Link>
. Some Rights Reserved.
</span>
<div className='flex mt-4 space-x-6 sm:justify-center sm:mt-0'>
<Link
href='https://twitter.com/LogicolaWeb'
className='text-gray-500 hover:text-gray-900'
>
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
</svg>
</Link>
<a
href='https://github.com/malikpiara/logicola'
className='text-gray-500 hover:text-gray-900'
>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path d='M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84' />
</svg>
</Link>
<a
href='https://github.com/malikpiara/logicola'
className='text-gray-500 hover:text-gray-900'
>
<path
fillRule='evenodd'
d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
clipRule='evenodd'
/>
</svg>
</a>
<svg
className='w-5 h-5'
fill='currentColor'
viewBox='0 0 24 24'
aria-hidden='true'
>
<path
fillRule='evenodd'
d='M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z'
clipRule='evenodd'
/>
</svg>
</a>
</div>
</div>
</div>
</div>
</footer>
);
</footer>
);
}
25 changes: 25 additions & 0 deletions components/mobile/exerciseNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
'use client';
import Link from 'next/link';
import { X } from 'lucide-react';
import { usePathname } from 'next/navigation';

const ExerciseNavbar = () => {
const pathname = usePathname();
if (pathname.includes('quiz'))
return (
<nav className='bg-white border-gray-200 md:hidden '>
<div className='flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4'>
<Link
href='/'
className='flex items-center space-x-3 rtl:space-x-reverse'
>
<span className='self-center text-2xl font-bold text-gray-900 whitespace-nowrap font-stretch'>
<X />
</span>
</Link>
</div>
</nav>
);
};

export default ExerciseNavbar;
Loading
Loading