onTouch mobile bubble sidemenu

This commit is contained in:
Vince 2021-02-19 10:53:06 +11:00
parent 70f7bc25b6
commit 5190919d89
11 changed files with 16 additions and 32 deletions

1
.gitignore vendored
View File

@ -10,6 +10,7 @@
# next.js
/.next/
/_next/
/out/
!public/

1
_next Symbolic link
View File

@ -0,0 +1 @@
.next

View File

@ -1,9 +1,12 @@
import classNames from 'classnames';
import { useContext } from 'react';
import { useDispatch } from 'react-redux';
import { ScreenContext } from '../contexts/screen';
import { expandSideMenu } from '../state/navigation';
export function HomeHeroBubble() {
const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
const dispatch = useDispatch();
return (
<div
@ -15,6 +18,7 @@ export function HomeHeroBubble() {
? 'translateY(-40vh)'
: 'translateY(-50vh)',
}}
onClick={() => dispatch(expandSideMenu())}
className="absolute bottom-0 z-40 px-10 duration-300"
>
<div

View File

@ -44,7 +44,7 @@ export function ArticleCardFeature(props: IPost) {
<div
style={{ marginTop: isMobile || isTablet ? '1rem' : '0' }}
className="flex flex-col justify-between w-full tablet:w-5/12"
className="flex flex-col justify-between w-full text-primary tablet:w-5/12"
>
<div className="flex flex-col space-y-3">
<Link href={href} as={as}>

View File

@ -30,7 +30,7 @@ export default function Layout({ children }: Props) {
return (
<div
style={{ height: '100vh', width: '100%' }}
className="relative flex flex-col justify-between bg-alt"
className="relative flex flex-col justify-between bg-alt text-primary"
>
<Header />

View File

@ -20,7 +20,7 @@ export function DesktopHeader() {
zIndex: UI.Z_INDEX_HEADER,
}}
className={classNames(
'w-full overflow-hidden bg-alt flex items-center border-b border-primary',
'w-full overflow-hidden bg-alt text-primary flex items-center border-b border-primary',
)}
>
<div className="flex items-center w-full h-full px-6">
@ -42,6 +42,7 @@ export function DesktopHeader() {
{NAVIGATION.MENU_ITEMS.filter(item => !item.mobileMenuOnly).map(
item => {
const link = (
// eslint-disable-next-line react/jsx-no-target-blank
<a
className={classNames(
'uppercase whitespace-no-wrap cursor-pointer',
@ -49,6 +50,7 @@ export function DesktopHeader() {
? 'text-xs hover:underline'
: 'duration-300 text-base font-bold py-1 px-2 hover:bg-primary rounded hover:bg-opacity-10',
)}
href={item.external ? item.href : undefined}
target={item.newTab ? '_blank' : undefined}
rel={item.newTab ? 'noreferrer' : undefined}
>

View File

@ -55,7 +55,7 @@ export function SideMenuInner() {
{!isDesktop && (
<div
className={classNames(
'flex flex-col pt-8 pb-2 font-medium uppercase font-prompt',
'flex flex-col pt-8 font-medium uppercase font-prompt',
isDesktop ? 'text-xs' : 'text-base',
)}
>
@ -71,7 +71,7 @@ export function SideMenuInner() {
</div>
)}
<div className="flex pb-6 space-x-3 mobile:-mx-6">
<div className="flex pt-3 pb-6 space-x-3 mobile:-mx-6">
<a
href="https://t.me/Oxen_Community"
target="_blank"

View File

@ -54,7 +54,7 @@ export function SideMenuSideBar({ mode }: Props) {
}}
className={classNames(
'flex flex-col justify-between w-12 text-2xl items-center h-full bg-blue-300 px-4 py-6 border-l border-black select-none',
mode === SideBarMode.LABEL && 'border-r border-b',
mode === SideBarMode.LABEL && 'border-r',
mode === SideBarMode.MENU && !expanded && 'border-r',
)}
>

View File

@ -5,9 +5,8 @@
"scripts": {
"now": "npm run now",
"dev": "NODE_ENV=development next dev",
"dev:https": "NODE_ENV=development node server.js",
"build": "next build",
"start": "next start",
"start": "npm run build && next start",
"staging": "func() { git add . && git commit -m \"$1\" && git push -u origin staging; }; func",
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
"lint:fix": "npm run lint -- --fix"

View File

@ -127,7 +127,7 @@ function Roadmap() {
</div>
</div>
<div className="flex flex-col px-6 space-y-10">
<div className="flex flex-col px-6 pb-6 space-y-10">
<img
style={{ maxHeight: '90%' }}
src={'img/session-roadmap.png'}

View File

@ -1,23 +0,0 @@
const { createServer } = require('https');
const { parse } = require('url');
const next = require('next');
const fs = require('graceful-fs');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const httpsOptions = dev && {
key: fs.readFileSync('./certificates/localhost.key'),
cert: fs.readFileSync('./certificates/localhost.crt'),
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, err => {
if (err) throw err;
console.log('🐙 Ready on https://localhost:3000');
});
});