Fix landing page mobile overflow bug
logo.svg, global.css, layouts.css, PublicNavbar.tsx, subpanel.module.css, index.module.css, EditEntityNode.tsx, EntityEditNode.tsx, EntityOptions.tsx, EntityViewNode.tsx, Graph.tsx, ViewEntityNode.tsx, and LandingPage.tsx
This commit is contained in:
jerlendds
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 23 KiB |
@@ -54,19 +54,18 @@ button {
|
||||
html {
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
|
||||
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #001547fa 1%, #1100a7cb 99%),radial-gradient(142% 91% at 83% 7%, #8f1a0dd6 1%, #005f46da 99%),radial-gradient(142% 91% at -6% 74%, #002aff70 1%, #a81010c1 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
|
||||
background-image: radial-gradient(49% 81% at 45% 47%, #0048ffcb 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #001547fa 1%, #1100a7cb 99%),radial-gradient(142% 91% at 83% 7%, #dc1d08f0 1%, #469a02da 99%),radial-gradient(142% 91% at -6% 74%, #002aff 1%, #a81010f4 99%),radial-gradient(142% 91% at 111% 84%, #0040ff 25%, #452296 95%);
|
||||
}
|
||||
|
||||
/* https://gradienta.io/editor */
|
||||
body {
|
||||
@apply min-h-screen ;
|
||||
}
|
||||
|
||||
|
||||
#root {
|
||||
@apply flex flex-col min-h-screen relative bg-mirage-700/60 from-mirage-700/70 to-mirage-800/50 bg-gradient-to-br ;
|
||||
/* color: #066b74c1; */
|
||||
@apply flex flex-col h-full relative bg-mirage-700/60 from-mirage-700/70 to-mirage-800/50 bg-gradient-to-br justify-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
svg.icon {
|
||||
@apply flex items-center justify-center;
|
||||
}
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
.sidebar-link {
|
||||
@apply flex items-center duration-200 ease-in-out mx-2.5 my-1 py-2 text-base font-medium rounded-md border hover:border-mirage-400/60 border-transparent hover:ring-slate-800/20 text-slate-400/30 hover:text-slate-400/60 shadow hover:translate-x-px z-50 transition-all focus:text-slate-400/40 -translate-x-px ring-slate-900/20 ring-1 ring-inset from-mirage-400/10 pl-3 to-mirage-300/5 bg-gradient-to-tl from-10% pr-1.5 hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl font-display;
|
||||
@apply flex items-center duration-200 ease-in-out mx-2.5 my-1 py-2 text-base font-medium rounded-md border hover:border-mirage-400/60 border-transparent hover:ring-slate-800/20 text-slate-400/30 hover:text-slate-400/60 shadow hover:translate-x-px z-50 transition-all focus:text-slate-400/40 -translate-x-px ring-slate-900/20 ring-2 ring-inset from-mirage-400/10 pl-3 to-mirage-300/5 bg-gradient-to-tl from-10% pr-1.5 hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl font-display;
|
||||
}
|
||||
|
||||
.sidebar-link.active {
|
||||
@apply hover:translate-x-px shadow translate-x-px ring-primary-400/20 border-primary-400/40 ring-1 ring-inset from-mirage-300/20 to-mirage-300/10 bg-gradient-to-tl from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl text-slate-300/80 ;
|
||||
@apply hover:translate-x-px shadow translate-x-px ring-1 ring-primary-300/80 border-primary-300/80 ring-inset from-mirage-300/20 to-mirage-300/10 bg-gradient-to-tl from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl text-slate-300/80 ;
|
||||
}
|
||||
|
||||
.sidebar-link.active button {
|
||||
@apply bg-mirage-500 border-mirage-300/40 ;
|
||||
}
|
||||
.sidebar-link.active svg {
|
||||
@apply text-primary-400
|
||||
@apply text-primary-300
|
||||
}
|
||||
.sidebar-link button {
|
||||
@apply border border-mirage-400/40 transition-colors duration-200 from-10% hover:from-mirage-300/20 hover:to-mirage-300/10 hover:bg-gradient-to-tl
|
||||
|
||||
@@ -149,37 +149,36 @@ export default function PublicNavbar(): React.ReactElement {
|
||||
return (
|
||||
<header
|
||||
className={classNames(
|
||||
'fixed w-full top-0 z-50 flex sm:flex-wrap items-center justify-between flex-nowrap px-4 py-3 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
|
||||
'sticky w-full top-0 z-50 flex sm:flex-wrap items-center justify-between flex-nowrap px-4 py-2.5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
|
||||
isScrolled
|
||||
? 'dark:bg-slate-800/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
|
||||
: 'dark:bg-transparent'
|
||||
)}
|
||||
>
|
||||
<div className="mr-6 flex lg:hidden">
|
||||
<div className="flex lg:hidden">
|
||||
<Link to="/">
|
||||
<img className=" h-9 w-auto fill-slate-700 dark:fill-sky-100 block" src={Logo} />
|
||||
<img className=" h-7 w-auto fill-slate-700 dark:fill-sky-100 block" src={Logo} />
|
||||
</Link>
|
||||
{/* @todo add mobile navigation */}
|
||||
</div>
|
||||
<div className="relative flex flex-grow basis-0 items-center">
|
||||
<Link to="/">
|
||||
<img className="hidden h-9 w-auto fill-slate-700 dark:fill-sky-100 lg:block" src={Logo} />
|
||||
<img className="hidden h-9 fill-slate-700 dark:fill-sky-100 lg:block" src={Logo} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="-my-5 mr-6 sm:mr-8 md:mr-0">
|
||||
<div className="">
|
||||
{/* <Search /> */}
|
||||
</div>
|
||||
<div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
|
||||
<div className="ml-auto relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
|
||||
<a href="https://discord.gg/gsbbYHA3K3" className="group" aria-label="Discord">
|
||||
<Icon icon="brand-discord-filled" className="h-6 w-6 transition-colors duration-150 ease-in-out text-slate-500 hover:text-slate-300" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative flex justify-end">
|
||||
<a href="https://github.com/jerlendds/osintbuddy" className="group" aria-label="GitHub">
|
||||
<GithubIcon className="h-6 w-6 transition-colors duration-150 ease-in-out fill-slate-500 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative flex justify-end">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@apply flex flex-col justify-between relative flex-shrink ;
|
||||
}
|
||||
.subpanel-section {
|
||||
@apply py-1 px-0.5 flex flex-col
|
||||
@apply py-1 flex flex-col
|
||||
}
|
||||
.subpanel > p {
|
||||
@apply text-sm py-4 font-medium text-slate-500 focus:outline-none cursor-pointer px-2
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* wraps the sidebar with search and the main view */
|
||||
.sidebar-wrapper {
|
||||
@apply rounded py-px !min-w-[20rem] max-w-[20rem] flex-col h-[99vh] pt-3.5 border-r-2 border-mirage-500/60 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br justify-between shadow-xl flex relative w-full
|
||||
@apply rounded py-px !min-w-[20rem] max-w-[20rem] flex-col h-[99vh] pt-3.5 border-r-2 border-mirage-500/60 from-mirage-600/20 to-mirage-500/20 bg-gradient-to-br justify-between shadow-xl flex relative w-full pl-1
|
||||
}
|
||||
|
||||
.search-container {
|
||||
|
||||
@@ -68,7 +68,7 @@ export function EntityOption({ entity, onDragStart }: JSONObject) {
|
||||
<div
|
||||
draggable
|
||||
onDragStart={(event) => onDragStart(event, entity.label)}
|
||||
className='flex min-w-[12rem] p-2 justify-between overflow-x-hidden from-mirage-300/10 to-mirage-300/20 bg-gradient-to-br hover:from-mirage-300/20 hover:from-40% hover:to-mirage-300/10 border-mirage-300/20 border max-h-[160px] border-l-primary-300/50 hover:border-primary-400 transition-colors duration-100 ease-out border-l-[6px] hover:border-l-[6px] rounded-md w-full'
|
||||
className='flex min-w-[12rem] p-2 justify-between overflow-x-hidden from-mirage-300/10 to-mirage-300/20 bg-gradient-to-br hover:from-mirage-300/20 hover:from-40% hover:to-mirage-300/10 border-mirage-300/20 border max-h-[160px] border-l-primary-300/50 hover:border-primary-400 transition-colors duration-100 ease-out border-l-[6px] hover:border-l-[6px] rounded-md w-full backdrop-blur-md'
|
||||
>
|
||||
<div className='flex flex-col w-full select-none'>
|
||||
<div className='flex items-start justify-between gap-x-3 w-full relative'>
|
||||
@@ -85,9 +85,8 @@ export function EntityOption({ entity, onDragStart }: JSONObject) {
|
||||
</div>
|
||||
<div className='flex flex-wrap items-center gap-x-2 text-xs leading-5 text-slate-500'>
|
||||
<p className='truncate whitespace-normal leading-5 text-slate-500'>
|
||||
{' '}
|
||||
{entity.description && entity.description.length > 76 ?
|
||||
`${entity.description.slice(0, 76)}...` : entity.description}
|
||||
{entity.description && entity.description.length > 78 ?
|
||||
`${entity.description.slice(0, 78)}..` : entity.description}
|
||||
</p>
|
||||
<br />
|
||||
<p className='truncate flex items-center leading-5 text-slate-500 text-xs'>
|
||||
@@ -196,7 +195,7 @@ export default function EntityOptions({ positionMode, activeGraph, setElkLayout,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className=' overflow-hidden rounded-md z-10 border border-mirage-400/70 from-mirage-500/80 to-slate-900/90 bg-gradient-to-br flex flex-col h-min'
|
||||
className=' overflow-hidden rounded-md z-10 border border-mirage-400/60 from-mirage-600/50 to-slate-900/90 bg-gradient-to-br flex flex-col h-min'
|
||||
key='entities'
|
||||
id='node-options-tour'
|
||||
>
|
||||
@@ -229,7 +228,7 @@ export default function EntityOptions({ positionMode, activeGraph, setElkLayout,
|
||||
</ol>
|
||||
{showEntities && (
|
||||
<>
|
||||
<div className='mt-2.5 hover:border-mirage-200/40 transition-colors duration-200 ease-in-out block justify-between items-center to-mirage-400/50 from-mirage-300/20 bg-gradient-to-br rounded border mb-2 mx-4 focus-within:!border-primary/40 px-3.5 py-1 text-slate-100 shadow-sm border-mirage-400/20 ring-light-900/10 focus-within:from-mirage-400/20 focus-within:to-mirage-400/30 focus-within:bg-gradient-to-l'>
|
||||
<div className='mt-2.5 hover:border-mirage-200/40 transition-colors duration-200 ease-in-out block justify-between items-center to-mirage-400/70 from-mirage-300/60 bg-gradient-to-br rounded border mb-2 mx-4 focus-within:!border-primary/40 px-3.5 py-1 text-slate-100 shadow-sm border-mirage-400/20 ring-light-900/10 focus-within:from-mirage-400/20 focus-within:to-mirage-400/30 focus-within:bg-gradient-to-l'>
|
||||
<input
|
||||
onChange={(e) => setSearchFilter(e.target.value)}
|
||||
className='block w-full placeholder:text-slate-700 bg-transparent outline-none sm:text-sm'
|
||||
|
||||
@@ -14,11 +14,11 @@ import ReactFlow, {
|
||||
getBoundsOfRects,
|
||||
getTransformForBounds,
|
||||
} from 'reactflow';
|
||||
import EditEntityNode from './EditEntityNode';
|
||||
import EditEntityNode from './EntityEditNode';
|
||||
import { addNodeUpdate, createEdge, disableEntityEdit, enableEntityEdit, graph, onEdgesChange, selectEditState, setEditLabel, setEditState, updateEdgeEvent, updateNodeFlow } from '@src/features/graph/graphSlice';
|
||||
import { useAppDispatch, useAppSelector, useEffectOnce } from '@src/app/hooks';
|
||||
import { toast } from 'react-toastify';
|
||||
import ViewEntityNode from './ViewEntityNode';
|
||||
import ViewEntityNode from './EntityViewNode';
|
||||
import { CreateEntityOnDropApiResponse, useCreateEntityOnDropMutation, useRefreshPluginsQuery } from '@src/app/api';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import NewConnectionLine from './ConnectionLine';
|
||||
|
||||
@@ -4,9 +4,13 @@ import Earth from '@tarii/3d-earth'
|
||||
import { useEffectOnce } from '@src/app/hooks';
|
||||
|
||||
const QUOTES = [
|
||||
"It's the connections that give it meaning",
|
||||
"Find the connections that matter to you",
|
||||
"Vision is the art of seeing insight in the invisible",
|
||||
"Reveal the connections behind actionable insights",
|
||||
"Find the path to actionable insights",
|
||||
"Unlock the potential of public data",
|
||||
"Empower your research with public data",
|
||||
"Connecting the dots for actionable insights",
|
||||
"Transforming data into knowledge",
|
||||
]
|
||||
|
||||
export default function LandingPage(): React.ReactElement {
|
||||
@@ -19,7 +23,7 @@ export default function LandingPage(): React.ReactElement {
|
||||
rotateSpeed: 0.0005,
|
||||
pointColor: 0x242E4D,
|
||||
pointHighlight: 0x394778,
|
||||
fogColor: 0x005c5f,
|
||||
fogColor: 0x002aa6,
|
||||
lineHighlightSize: 10,
|
||||
minLineSpacing: 30,
|
||||
maxLineSpacing: 1000,
|
||||
@@ -44,16 +48,16 @@ export default function LandingPage(): React.ReactElement {
|
||||
})
|
||||
return (
|
||||
<>
|
||||
<div className=' h-full min-h-screen relative flex flex-col justify-between items-between overflow-scroll'>
|
||||
<div className='lg:pt-32 pt-16 top-8 px-4 relative'>
|
||||
<div className='h-full min-h-[calc(100vh-3.5rem)] relative flex flex-col justify-between items-between'>
|
||||
<div className='lg:pt-32 pt-3 lg:top-8 px-4 relative'>
|
||||
<div className='mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 lg:max-w-8xl lg:grid-cols-2 '>
|
||||
<div className='relative px- sm:px-3 z-10 md:text-center lg:text-left'>
|
||||
<div className='relative pb-12'>
|
||||
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400/90 bg-clip-text text-4xl font-display font-medium tracking-tight text-transparent'>
|
||||
<p className='inline bg-gradient-to-r from-primary-300 via-primary-200 to-primary-400 bg-clip-text text-4xl font-display font-medium tracking-tight text-transparent'>
|
||||
Elevate your Research with<br /> Strategic Insights from Public Data
|
||||
</p>
|
||||
<p className='pt-1 text-lg tracking-tight text-slate-400'>
|
||||
Reveal the connections that shape our world and stay informed with targeted insights from public data. We're on a mission to democratize access to open source intelligence and analytics.
|
||||
Reveal the connections that shape our world and stay informed with targeted insights from public data. We're on a mission to ensure everyone can exercise their fundamental human rights online. From defending against cyber threats and corruption to countering online censorship, let's fight for a free internet.
|
||||
</p>
|
||||
<div className='mt-5 lg:mt-4 flex gap-4 md:justify-center lg:justify-start'>
|
||||
<button
|
||||
@@ -76,13 +80,13 @@ export default function LandingPage(): React.ReactElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={earthRef} className='z-0 absolute w-[20rem] md:w-[40rem] lg:w-[54rem] md:h-[100%] h-[30rem] lg:h-[80rem] lg:mt-10 -mt-20 md:-mt-10 sm:ml-20 [mask-image:linear-gradient(transparent,white,white)] dark:[mask-image:linear-gradient(transparent,#2D385EAF,#14192A6F)] lg:-top-full top-0 right-0' />
|
||||
<div ref={earthRef} className='z-0 absolute w-[20rem] md:w-[40rem] lg:w-[54rem] md:h-[100%] h-[30rem] lg:h-[80rem] lg:mt-10 -mt-20 md:-mt-10 sm:ml-20 [mask-image:linear-gradient(transparent,white,white)] dark:[mask-image:linear-gradient(transparent,#000000AF,#00000009)] lg:-top-full top-0 right-0' />
|
||||
</div>
|
||||
<div className='relative mt-full bottom-0 mx-4 sm:px-0 mb-0 h-min'>
|
||||
<div className='mx-auto grid h-full max-w-2xl grid-cols-1 mt-auto mb-0 items-center lg:max-w-8xl '>
|
||||
<div className='relative mt-auto bottom-0 mx-4 sm:px-0 mb-0 flex items-center justify-between'>
|
||||
<div className='mx-auto grid max-w-2xl grid-cols-1 mt-auto mb-0 items-center lg:max-w-8xl flex-grow'>
|
||||
<div className='relative z-10 md:text-center lg:text-left '>
|
||||
<header className='space-y-1 mt-24'>
|
||||
<p className='font-display text-sm font-medium text-primary-300'>Welcome to ICgraph</p>
|
||||
<header className='space-y-1 mt-24 md:mt-0'>
|
||||
<p className='font-display text-sm font-medium text-primary-200'>Welcome to ICGraph</p>
|
||||
<h1 className='font-display text-3xl tracking-tight text-slate-300 dark:text-slate-300'>
|
||||
{atfQuote}
|
||||
</h1>
|
||||
@@ -92,6 +96,7 @@ export default function LandingPage(): React.ReactElement {
|
||||
</div>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user