Merge branch 'feature/mobile' into 'main'
Mergeing Mobile Layout changes Closes #19, #26, #27, #29, #20, and #28 See merge request neshura-websites/www!11
This commit is contained in:
commit
023bd8962c
13 changed files with 528 additions and 69 deletions
|
@ -1,4 +1,4 @@
|
||||||
import { Footer } from "../components/styles/generic"
|
import { Footer, MobileFooter } from "../components/styles/generic"
|
||||||
|
|
||||||
const PageFooter = () => {
|
const PageFooter = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -7,5 +7,13 @@ const PageFooter = () => {
|
||||||
</Footer>
|
</Footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const NavMenuFooter = () => {
|
||||||
|
return (
|
||||||
|
<MobileFooter>
|
||||||
|
Built using Next.js
|
||||||
|
</MobileFooter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default PageFooter;
|
export default PageFooter;
|
|
@ -2,40 +2,80 @@ import PageFooter from './footer';
|
||||||
import PageNavbar from './navbar';
|
import PageNavbar from './navbar';
|
||||||
import Script from 'next/script';
|
import Script from 'next/script';
|
||||||
import { Page, Main } from './styles/generic';
|
import { Page, Main } from './styles/generic';
|
||||||
|
import useWindowSize from './windowsize';
|
||||||
|
|
||||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
return (
|
const isMobile = useWindowSize();
|
||||||
<Page>
|
|
||||||
<Script id="matomo_analytics"
|
|
||||||
defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
|
||||||
data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
|
|
||||||
</Script>
|
|
||||||
<Script id="matomo_analytics">
|
|
||||||
{`
|
|
||||||
var _paq = window._paq = window._paq || [];
|
|
||||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
|
||||||
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
|
|
||||||
_paq.push(["setCookieDomain", "www.neshweb.net"]);
|
|
||||||
_paq.push(["disableCookies"]);
|
|
||||||
_paq.push(['trackPageView']);
|
|
||||||
_paq.push(['enableLinkTracking']);
|
|
||||||
(function() {
|
|
||||||
var u="//tracking.neshweb.net/";
|
|
||||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
|
||||||
_paq.push(['setSiteId', '2']);
|
|
||||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
|
||||||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
|
||||||
})();
|
|
||||||
`}
|
|
||||||
</Script>
|
|
||||||
|
|
||||||
<PageNavbar />
|
let ret: JSX.Element;
|
||||||
<Main>
|
if(isMobile) {
|
||||||
{children}
|
ret = (
|
||||||
</Main>
|
<Page mobile={isMobile}>
|
||||||
<PageFooter />
|
<Script id="matomo_analytics"
|
||||||
</Page>
|
defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||||
);
|
data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
|
||||||
|
</Script>
|
||||||
|
<Script id="matomo_analytics">
|
||||||
|
{`
|
||||||
|
var _paq = window._paq = window._paq || [];
|
||||||
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||||
|
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
|
||||||
|
_paq.push(["setCookieDomain", "www.neshweb.net"]);
|
||||||
|
_paq.push(["disableCookies"]);
|
||||||
|
_paq.push(['trackPageView']);
|
||||||
|
_paq.push(['enableLinkTracking']);
|
||||||
|
(function() {
|
||||||
|
var u="//tracking.neshweb.net/";
|
||||||
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||||
|
_paq.push(['setSiteId', '2']);
|
||||||
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||||
|
})();
|
||||||
|
`}
|
||||||
|
</Script>
|
||||||
|
|
||||||
|
<PageNavbar mobile={isMobile}/>
|
||||||
|
<Main>
|
||||||
|
{children}
|
||||||
|
</Main>
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = (
|
||||||
|
<Page>
|
||||||
|
<Script id="matomo_analytics"
|
||||||
|
defer src='https://static.cloudflareinsights.com/beacon.min.js'
|
||||||
|
data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
|
||||||
|
</Script>
|
||||||
|
<Script id="matomo_analytics">
|
||||||
|
{`
|
||||||
|
var _paq = window._paq = window._paq || [];
|
||||||
|
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||||
|
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
|
||||||
|
_paq.push(["setCookieDomain", "www.neshweb.net"]);
|
||||||
|
_paq.push(["disableCookies"]);
|
||||||
|
_paq.push(['trackPageView']);
|
||||||
|
_paq.push(['enableLinkTracking']);
|
||||||
|
(function() {
|
||||||
|
var u="//tracking.neshweb.net/";
|
||||||
|
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||||
|
_paq.push(['setSiteId', '2']);
|
||||||
|
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||||
|
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||||
|
})();
|
||||||
|
`}
|
||||||
|
</Script>
|
||||||
|
|
||||||
|
<PageNavbar mobile={isMobile}/>
|
||||||
|
<Main>
|
||||||
|
{children}
|
||||||
|
</Main>
|
||||||
|
<PageFooter />
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
|
@ -1,27 +1,74 @@
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
import { NavBar, NavLink, NavWrap } from './styles/navbar';
|
import { NavBarMobile, NavIndicator, NavIndicators , NavSideMenu, NavSideMenuButton, NavSideMenuPanel, NavLinkMobile, NavWrapMobile, NavWrapMobileGhost, NavSideMenuGhost } from './styles/navbar/mobile';
|
||||||
|
import { NavBar, NavLink, NavWrap } from './styles/navbar/desktop';
|
||||||
import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
|
import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
|
||||||
import Links from '../public/data/navbar.json';
|
import Links from '../public/data/navbar.json';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { NavMenuFooter } from './footer';
|
||||||
|
|
||||||
const PageNavbar = () => {
|
const PageNavbar = ({ mobile }: { mobile: number }) => {
|
||||||
const path = usePathname();
|
const path = usePathname();
|
||||||
|
const [sideBarActive, setSideBarActive] = useState(true); //DEBUG: set to false
|
||||||
|
|
||||||
return (
|
function handleSidebar(event: any) {
|
||||||
<NavWrap>
|
if (!event.currentTarget.contains(event.relatedTarget)) {
|
||||||
<StyleSelector></StyleSelector>
|
setSideBarActive(false);
|
||||||
<NavBar>
|
}
|
||||||
{Links.links.map((item) => (
|
}
|
||||||
<NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
|
|
||||||
{item.name}
|
let navbar: JSX.Element;
|
||||||
|
if (mobile) {
|
||||||
|
navbar = (
|
||||||
|
<>
|
||||||
|
<NavSideMenu tabIndex={-1} onBlur={(event) => handleSidebar(event)} active={+sideBarActive}>
|
||||||
|
<NavSideMenuButton onClick={() => setSideBarActive(sideBarActive => !sideBarActive)} active={+sideBarActive}>Menu</NavSideMenuButton>
|
||||||
|
<NavSideMenuPanel active={+sideBarActive}>
|
||||||
|
<NavBarMobile>
|
||||||
|
{Links.links.map((item) => (
|
||||||
|
<NavLinkMobile active={path === item.href ? +true : +false} key={item.name} href={item.href}>
|
||||||
|
{item.name}
|
||||||
|
</NavLinkMobile>
|
||||||
|
))}
|
||||||
|
<NavLinkMobile key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
|
||||||
|
Mastodon
|
||||||
|
</NavLinkMobile>
|
||||||
|
</NavBarMobile>
|
||||||
|
<NavSideMenuGhost />
|
||||||
|
<StyleSelector mobile={mobile}/>
|
||||||
|
<NavSideMenuGhost num={2}/>
|
||||||
|
<NavMenuFooter />
|
||||||
|
</NavSideMenuPanel>
|
||||||
|
</NavSideMenu>
|
||||||
|
<NavWrapMobile>
|
||||||
|
<NavIndicators>
|
||||||
|
{Links.links.map((item) => (
|
||||||
|
<NavIndicator active={path === item.href ? +true : +false} key={item.name} href={item.href} />
|
||||||
|
))}
|
||||||
|
</NavIndicators>
|
||||||
|
</NavWrapMobile>
|
||||||
|
<NavWrapMobileGhost />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
navbar = (
|
||||||
|
<NavWrap>
|
||||||
|
<StyleSelector mobile={mobile}/>
|
||||||
|
<NavBar>
|
||||||
|
{Links.links.map((item) => (
|
||||||
|
<NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
|
||||||
|
{item.name}
|
||||||
|
</NavLink>
|
||||||
|
))}
|
||||||
|
<NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
|
||||||
|
Mastodon
|
||||||
</NavLink>
|
</NavLink>
|
||||||
))}
|
</NavBar>
|
||||||
<NavLink key="Mastodon_Verify" rel="me" href="https://mastodon.neshweb.net/@neshura">
|
<StyleSelectorPlaceholder />
|
||||||
Mastodon
|
</NavWrap>
|
||||||
</NavLink>
|
);
|
||||||
</NavBar>
|
}
|
||||||
<StyleSelectorPlaceholder></StyleSelectorPlaceholder>
|
return navbar;
|
||||||
</NavWrap>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PageNavbar;
|
export default PageNavbar;
|
|
@ -24,7 +24,7 @@ export const PageTitle = styled.h1`
|
||||||
export const PageDescription = styled.p`
|
export const PageDescription = styled.p`
|
||||||
background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
|
background-color: ${({ theme }) => theme.colors.background ? theme.colors.background : ""};
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
margin: 4rem 0;
|
margin: 4rem 2rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
@ -7,13 +7,18 @@ export const StyledBody = styled.body`
|
||||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Page = styled.div`
|
interface MobilePropType {
|
||||||
|
mobile?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Page = styled.div<MobilePropType>`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: ${({ theme }) => theme.colors.background};
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
|
background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""};
|
||||||
`
|
`
|
||||||
|
|
||||||
export const Main = styled.main`
|
export const Main = styled.main`
|
||||||
|
@ -43,3 +48,9 @@ export const Footer = styled.footer`
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
export const MobileFooter = styled(Footer)`
|
||||||
|
white-space: nowrap;
|
||||||
|
flex: 0.5;
|
||||||
|
width: 100%;
|
||||||
|
`
|
||||||
|
|
|
@ -40,8 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
|
||||||
margin: 0.2rem;
|
margin: 0.2rem;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transition: all 0.1s ease;
|
transition: all 0.1s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
249
components/styles/navbar/mobile.tsx
Normal file
249
components/styles/navbar/mobile.tsx
Normal file
|
@ -0,0 +1,249 @@
|
||||||
|
import styled from 'styled-components'
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { NavBar, NavLink, NavWrap } from './desktop';
|
||||||
|
|
||||||
|
interface ActivePropType {
|
||||||
|
active?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MultipliesPropType {
|
||||||
|
num?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NavWrapMobile = styled(NavWrap)`
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: row;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 50;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavWrapMobileGhost = styled.div`
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavSideMenu = styled.div <ActivePropType>`
|
||||||
|
position: fixed;
|
||||||
|
top: 0%; left: 0%; right: 0%; bottom: 0%;
|
||||||
|
max-width: ${props => props.active ? "240px" : "0px"};
|
||||||
|
max-height: ${props => props.active ? "100%" : "50px"};
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
border-right: ${ props => ({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if(props.active) {
|
||||||
|
ret = "1px solid " + theme.colors.primary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = "0px solid";
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
|
||||||
|
background-color: ${ props => ({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (props.active) {
|
||||||
|
ret = theme.colors.background;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = "";
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
backdrop-filter: ${props => props.active ? "blur(5px)" : ""};
|
||||||
|
|
||||||
|
overflow-x: hidden;
|
||||||
|
transition-property: max-width, max-height, border-right, background-color, backdrop-filter;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: 0.15s, 0s;
|
||||||
|
transition-delay: ${props => props.active ? "0s" : "0s, 0.15s"};
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavSideMenuPanel = styled.div <ActivePropType>`
|
||||||
|
height: 100%;
|
||||||
|
width: 240px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: left;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavSideMenuButton = styled.button <ActivePropType>`
|
||||||
|
position: ${ props => props.active ? "absolute" : "fixed"};
|
||||||
|
z-index: 200;
|
||||||
|
left: ${ props => props.active ? "165px" : "0px"};
|
||||||
|
|
||||||
|
transition-property: left, color, background-color, border-color;
|
||||||
|
transition-timing-function: ease-in-out;
|
||||||
|
transition-duration: 0.135s, 0.15s;
|
||||||
|
transition-delay: ${props => props.active ? "0.03s, 0s" : "0s, 0s"};
|
||||||
|
|
||||||
|
align-self: flex-end;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 12px;
|
||||||
|
color: ${props => ({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (props.active) {
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.primary;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
background-color: ${props => ({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (props.active) {
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.background;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.background;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-color: ${props => ({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (props.active) {
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.primary;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
|
||||||
|
background-color: ${({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.background;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
|
||||||
|
border-color: ${({ theme }) => {
|
||||||
|
let ret: string;
|
||||||
|
if (theme.invertButtons) {
|
||||||
|
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
ret = theme.colors.secondary;
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavSideMenuGhost = styled.div <MultipliesPropType>`
|
||||||
|
flex: ${ props => props.num ? props.num * 2 : 2 };
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavBarMobile = styled(NavBar)`
|
||||||
|
margin-top: 56px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavLinkMobile = styled(NavLink)`
|
||||||
|
display: block;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: none;
|
||||||
|
border-top: 2px solid;
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary};
|
||||||
|
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${({ theme }) => theme.colors.secondary };
|
||||||
|
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavIndicators = styled.nav`
|
||||||
|
background-color: ${({ theme }) => theme.colors.background};
|
||||||
|
background-image: ${({ theme }) => theme.backgroundImage ? "url(" + theme.backgroundImage + ")" : ""};
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"};
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
padding: 1rem 0;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`
|
||||||
|
|
||||||
|
export const NavIndicator = styled(Link) <ActivePropType>`
|
||||||
|
margin: 0.2rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
width: 10px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-color: ${ props => ({ theme }) => props.active ?
|
||||||
|
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
|
||||||
|
theme.colors.primary
|
||||||
|
};
|
||||||
|
|
||||||
|
background-color: ${props => ({ theme }) => props.active ?
|
||||||
|
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
|
||||||
|
theme.colors.background
|
||||||
|
};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: ${ props => ({ theme }) =>
|
||||||
|
theme.invertButtons ? theme.colors.secondary : theme.colors.primary
|
||||||
|
};
|
||||||
|
|
||||||
|
color: ${({ theme }) => theme.invertButtons ?
|
||||||
|
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
|
||||||
|
theme.colors.primary
|
||||||
|
};
|
||||||
|
|
||||||
|
background-color: ${({ theme }) => theme.invertButtons ?
|
||||||
|
theme.colors.secondary :
|
||||||
|
theme.colors.primary
|
||||||
|
};
|
||||||
|
}
|
||||||
|
`
|
49
components/styles/themedropdown/mobile.tsx
Normal file
49
components/styles/themedropdown/mobile.tsx
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from './desktop';
|
||||||
|
|
||||||
|
export const ThemeDropDownMobile = styled(ThemeDropDown)`
|
||||||
|
width: 80%;
|
||||||
|
margin-left: 1rem;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ThemeDropDownButtonMobile = styled(ThemeDropDownButton)`
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: none;
|
||||||
|
border-top: 2px solid;
|
||||||
|
border-left: ${ props => props.show ? "2px solid" : "0px solid"};
|
||||||
|
border-right: ${ props => props.show ? "2px solid" : "0px solid"};
|
||||||
|
|
||||||
|
color: ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
|
||||||
|
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||||
|
|
||||||
|
&:focus,:hover {
|
||||||
|
color: ${({ theme }) => theme.colors.secondary};
|
||||||
|
|
||||||
|
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||||
|
}
|
||||||
|
|
||||||
|
transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color, border-left, border-right;
|
||||||
|
transition-timing-function: ease;
|
||||||
|
transition-duration: 0.15s;
|
||||||
|
transition-delay: 0s, ${ props => props.show ? "0s" : "0.6s, 0.6s, 0s, 0.6s, 0.6s" };
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ThemeDropDownOptionsMobile = styled(ThemeDropDownOptions)`
|
||||||
|
background-image: unset;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid ${props => ({ theme }) => props.focus ? theme.colors.secondary : theme.colors.primary};
|
||||||
|
border-top: 0;
|
||||||
|
max-height: ${ props => props.show ? "100%" : "0%"};
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ThemeDropDownOptionMobile = styled(ThemeDropDownOption)`
|
||||||
|
text-align: left;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0rem 0.5rem;
|
||||||
|
width: 80%;
|
||||||
|
border-left: 2px solid;
|
||||||
|
border-radius: 5px;
|
||||||
|
`;
|
|
@ -2,10 +2,11 @@ import { useUpdateTheme } from "../pages/_app";
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
import { ThemeContext, DefaultTheme } from "styled-components";
|
import { ThemeContext, DefaultTheme } from "styled-components";
|
||||||
import { darkTheme, lightTheme } from './themes';
|
import { darkTheme, lightTheme } from './themes';
|
||||||
import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown";
|
import { ThemeDropDown, ThemeDropDownButton, ThemeDropDownOption, ThemeDropDownOptions } from "./styles/themedropdown/desktop";
|
||||||
|
import { ThemeDropDownMobile, ThemeDropDownButtonMobile, ThemeDropDownOptionMobile, ThemeDropDownOptionsMobile } from "./styles/themedropdown/mobile";
|
||||||
import Themes from '../public/data/themes.json';
|
import Themes from '../public/data/themes.json';
|
||||||
|
|
||||||
export const StyleSelector = () => {
|
export const StyleSelector = ({ mobile }: { mobile: number }) => {
|
||||||
const themes: DefaultTheme[] = Themes.themes;
|
const themes: DefaultTheme[] = Themes.themes;
|
||||||
const updateTheme = useUpdateTheme();
|
const updateTheme = useUpdateTheme();
|
||||||
const currentTheme = useContext(ThemeContext);
|
const currentTheme = useContext(ThemeContext);
|
||||||
|
@ -34,7 +35,7 @@ export const StyleSelector = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(true); //DEBUG set to false
|
||||||
const [buttonFocus, setButtonFocus] = useState(visible);
|
const [buttonFocus, setButtonFocus] = useState(visible);
|
||||||
|
|
||||||
function handleBlur(event:any) {
|
function handleBlur(event:any) {
|
||||||
|
@ -44,19 +45,39 @@ export const StyleSelector = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
let themeselector: JSX.Element;
|
||||||
<ThemeDropDown onBlur={(event) => handleBlur(event)}>
|
if(mobile) {
|
||||||
<ThemeDropDownButton focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}
|
themeselector = (
|
||||||
</ThemeDropDownButton>
|
<ThemeDropDownMobile onBlur={(event) => handleBlur(event)}>
|
||||||
<ThemeDropDownOptions id="themesDropdown" show={+visible}>
|
<ThemeDropDownButtonMobile focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>
|
||||||
{themes.map((theme) => (
|
{selectedTheme.themeName}
|
||||||
<ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
</ThemeDropDownButtonMobile>
|
||||||
{theme.themeName}
|
<ThemeDropDownOptionsMobile focus={+buttonFocus} id="themesDropdown" show={+visible}>
|
||||||
</ThemeDropDownOption>
|
{themes.map((theme) => (
|
||||||
))}
|
<ThemeDropDownOptionMobile active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
||||||
</ThemeDropDownOptions>
|
{theme.themeName}
|
||||||
</ThemeDropDown>
|
</ThemeDropDownOptionMobile>
|
||||||
);
|
))}
|
||||||
|
</ThemeDropDownOptionsMobile>
|
||||||
|
</ThemeDropDownMobile>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
themeselector = (
|
||||||
|
<ThemeDropDown onBlur={(event) => handleBlur(event)}>
|
||||||
|
<ThemeDropDownButton focus={+buttonFocus} show={+visible} onFocus={() => setButtonFocus(true)} onClick={() => setVisible(visible => !visible)}>{selectedTheme.themeName}
|
||||||
|
</ThemeDropDownButton>
|
||||||
|
<ThemeDropDownOptions id="themesDropdown" show={+visible}>
|
||||||
|
{themes.map((theme) => (
|
||||||
|
<ThemeDropDownOption active={theme.themeId === selectedTheme.themeId ? 1 : 0} key={theme.themeId} onClick={() => updateThemeWithStorage(theme)}>
|
||||||
|
{theme.themeName}
|
||||||
|
</ThemeDropDownOption>
|
||||||
|
))}
|
||||||
|
</ThemeDropDownOptions>
|
||||||
|
</ThemeDropDown>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return themeselector;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StyleSelectorPlaceholder = () => {
|
export const StyleSelectorPlaceholder = () => {
|
||||||
|
|
34
components/windowsize.tsx
Normal file
34
components/windowsize.tsx
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
interface ScreenSize {
|
||||||
|
width: number | undefined;
|
||||||
|
height: number | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function useWindowSize(): number {
|
||||||
|
const [windowSize, setWindowSize] = useState<ScreenSize>({
|
||||||
|
width: undefined,
|
||||||
|
height: undefined,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleResize() {
|
||||||
|
setWindowSize({
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
|
||||||
|
handleResize();
|
||||||
|
|
||||||
|
return () => window.removeEventListener("resize", handleResize);
|
||||||
|
}, []);
|
||||||
|
if(typeof(windowSize.width) === "number") {
|
||||||
|
return windowSize.width <= 1080 ? 1 : 0;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
|
@ -52,6 +52,7 @@
|
||||||
"themeName": "Nordlys",
|
"themeName": "Nordlys",
|
||||||
"themeId": 4,
|
"themeId": 4,
|
||||||
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
|
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
|
||||||
|
"backgroundOffset": "60%",
|
||||||
"invertButtons": true,
|
"invertButtons": true,
|
||||||
"colors": {
|
"colors": {
|
||||||
"background": "#0008",
|
"background": "#0008",
|
||||||
|
|
1
styled.d.ts
vendored
1
styled.d.ts
vendored
|
@ -5,6 +5,7 @@ declare module 'styled-components' {
|
||||||
themeName: string,
|
themeName: string,
|
||||||
themeId: number,
|
themeId: number,
|
||||||
backgroundImage?: string,
|
backgroundImage?: string,
|
||||||
|
backgroundOffset?: string,
|
||||||
invertButtons?: boolean,
|
invertButtons?: boolean,
|
||||||
colors: {
|
colors: {
|
||||||
background: string,
|
background: string,
|
||||||
|
|
Loading…
Reference in a new issue