RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #181 from IncognitoTGT/rewrite

Browse source 
Nav buttons and some polish
This commit is contained in:
rift 2023-12-27 18:28:56 -06:00 • committed by GitHub
commit 4f8f18f0ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/iframe/IframeHeader.tsx
View file

@ -2,7 +2,7 @@ import { useState } from "preact/hooks";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Link } from "preact-router"; import { Link } from "preact-router";
import { RiPictureInPictureExitFill, RiFullscreenFill } from "react-icons/ri"; import { RiPictureInPictureExitFill, RiFullscreenFill } from "react-icons/ri";
import { IoCodeSlashSharp } from "react-icons/io5"; import { IoCodeSlashSharp,IoChevronBackSharp,IoChevronForwardSharp, IoReloadSharp } from "react-icons/io5";
import { FaXmark } from "react-icons/fa6"; import { FaXmark } from "react-icons/fa6";
interface ProxyFrame extends HTMLElement { interface ProxyFrame extends HTMLElement {
@ -25,13 +25,14 @@ export function IframeHeader(props: { url: string }) {
return ( return (
<div <div
id="iframeNav" id="iframeNav"
className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4" className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4 gap-3"
> >
<Link href="/" class="w-1/2"> <Link href="/" class="w-1/8">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<img <img
src="/logo.png" src="/logo.png"
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]" className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
alt="Nebula Logo"
></img> ></img>
<h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl"> <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
{" "} {" "}
@ -39,7 +40,30 @@ export function IframeHeader(props: { url: string }) {
</h1> </h1>
</div> </div>
</Link> </Link>
<div id="navItems" class="w-1/2"> <div className="gap-3 mr-4 flex flex-row items-center justify-end">
<IoChevronBackSharp
className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
onClick={() => {
const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
proxyFrame.contentWindow.history.back();
}}
/>
<IoReloadSharp
className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:rotate-[360deg] hover:scale-110 hover:brightness-125"
onClick={() => {
const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
proxyFrame.contentWindow.location.reload();
}}
/>
<IoChevronForwardSharp
className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
onClick={() => {
const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
proxyFrame.contentWindow.history.forward();
}}
/>
</div>
<div id="navItems" class="w-1/8">
<div className="mr-4 flex flex-row items-center justify-end gap-3"> <div className="mr-4 flex flex-row items-center justify-end gap-3">
<IoCodeSlashSharp <IoCodeSlashSharp
className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125" className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"