rpdata/frontend2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

some more work.

Browse Source
This commit is contained in:
gisle
2020-09-08 16:30:54 +02:00
parent b38c177b1d
commit 09fe28286b
4 changed files with 81 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/Layout.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ interface LayoutProps {
export default function Layout(props: LayoutProps) { export default function Layout(props: LayoutProps) {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<MagicImage opacity={0.25} fixed src="https://files.aiterp.net/misc/renders/2020-08-30%20-%20Archive.jpg"> <MagicImage opacity={0.50} alignH="right" fixed src="https://files.aiterp.net/misc/renders/2020-08-30%20-%20Archive.jpg">
<Sidebar /> <Sidebar />
<div className={styles.container}> <div className={styles.container}>
<Head> <Head>
src/components/layout/MagicImage.tsx
+11 -2
View File
@@ -4,6 +4,8 @@ import styles from "./MagicImage.module.sass";
interface MagicImageProps { interface MagicImageProps {
src: string src: string
alignH?: "left" | "center" | "right"
alignV?: "top" | "middle" | "bottom"
full?: boolean full?: boolean
banner?: boolean banner?: boolean
fixed?: boolean fixed?: boolean
@@ -29,8 +31,15 @@ export default function MagicImage(props: MagicImageProps) {
overlayClass.push(styles.banner) overlayClass.push(styles.banner)
} }
const imageStyle = {background: `url(${JSON.stringify(props.src)}) no-repeat fixed center`}; const imageStyle = {
const overlayStyle = {backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`}; background: `url(${JSON.stringify(props.src)}) no-repeat fixed center`,
backgroundPositionX: props.alignH || "left",
backgroundPositionY: props.alignV || "middle",
};
const overlayStyle = {
backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`,
};
return ( return (
<div className={containerClass.join(" ")}> <div className={containerClass.join(" ")}>
src/components/layout/Sidebar.module.sass
+35 -11
View File
@@ -1,25 +1,49 @@
div.sidebar .sidebar
position: fixed position: fixed
width: 4ch width: 4.5ch
height: calc(100%) height: 100%
background-color: black background-color: black
display: flexbox display: flex
flex-direction: row flex-direction: column
justify-content: center
&:hover .sidebarItem transition: 250ms
color: #777
&:hover
width: 20ch;
.sidebarItem
color: #777
.sidebarItemText
opacity: 1
div.sidebarItem div.sidebarItem
color: white color: white
padding: 0.5em padding-top: 0.333em
padding-bottom: 0
transition: 250ms transition: 250ms
color: #333 color: #333
white-space: nowrap
svg
margin-left: 0.5ch
height: 1.5em
&:hover &:hover
background-color: #222 background-color: #222
color: #fc1 !important color: #fc1 !important
.sidebarItemIcon
display: inline-block
height: 2em
width: 3.5ch
text-align: center
.sidebarItemText
display: inline-block
vertical-align: top
opacity: 0
height: 2em
margin-left: 1ch
div.sidebarItemSkip div.sidebarItemSkip
margin-top: auto margin: auto 0 0 0
src/components/layout/Sidebar.tsx
+34 -7
View File
@@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { IconDefinition, faListAlt } from "@fortawesome/free-regular-svg-icons"; import { IconDefinition, faListAlt, faMap, faAddressBook, faUser, faFileArchive, faFolderOpen, faFolder, faFileAlt } from "@fortawesome/free-regular-svg-icons";
import { faArchive, faDatabase, faAlignJustify, faHashtag } from "@fortawesome/free-solid-svg-icons"; import { faArchive, faDatabase, faAlignJustify, faHashtag, faHistory, faPlus, faPen, faRadiation } from "@fortawesome/free-solid-svg-icons";
import styles from "./Sidebar.module.sass"; import styles from "./Sidebar.module.sass";
@@ -9,27 +9,54 @@ export function Sidebar() {
return ( return (
<div className={styles.sidebar}> <div className={styles.sidebar}>
<SidebarItem icon={faListAlt} /> <SidebarItem icon={faListAlt} href="/story/" text="Story" />
<SidebarItem icon={faArchive} /> <SidebarItem icon={faArchive} href="/logs/" text="Logs" />
<SidebarItem icon={faHashtag} skip /> <SidebarItem icon={faAddressBook} href="/data/characters/" text="Characters" />
<SidebarItem icon={faHashtag} href="/data/channels/" text="Channels" />
<SidebarItem icon={faFileAlt} href="/data/files/" text="Files" />
<SidebarItem icon={faHistory} href="/data/changes/" text="History" />
<SidebarItem icon={faPlus} text="Add" skip />
<SidebarItem icon={faRadiation} text="Danger Zone" />
<SidebarItem icon={faUser} text="Logout [Gisle]" />
</div> </div>
) )
} }
interface SidebarItemProps { interface SidebarItemProps {
icon: IconDefinition icon: IconDefinition
text: string
href?: string
skip?: boolean skip?: boolean
} }
export function SidebarItem(props: SidebarItemProps) { export function SidebarItem(props: SidebarItemProps) {
let className = styles.sidebarItem; let className = styles.sidebarItem;
if (props.skip) { if (props.skip === true) {
className += " " + styles.sidebarItemSkip; className += " " + styles.sidebarItemSkip;
} }
const content = (
<>
<div className={styles.sidebarItemIcon}>
<FontAwesomeIcon icon={props.icon} />
</div>
<div className={styles.sidebarItemText}>{props.text}</div>
</>
);
if (props.href) {
return (
<a href={props.href}>
<div className={className}>
{content}
</div>
</a>
)
}
return ( return (
<div className={className}> <div className={className}>
<FontAwesomeIcon icon={props.icon} /> {content}
</div> </div>
) )
} }