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

some more work.

main
Gisle Aune 4 years ago
parent
b38c177b1d
commit
09fe28286b
4 changed files with 81 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/layout/Layout.tsx
  2. 13
      src/components/layout/MagicImage.tsx
  3. 46
      src/components/layout/Sidebar.module.sass
  4. 41
      src/components/layout/Sidebar.tsx

2
src/components/layout/Layout.tsx
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>

13
src/components/layout/MagicImage.tsx
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 overlayStyle = {backgroundColor: `rgba(0,0,0,${1.0 - (props.opacity || 0.25)})`};
const imageStyle = {
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(" ")}>

46
src/components/layout/Sidebar.module.sass
View File

@ -1,25 +1,49 @@
div.sidebar
.sidebar
position: fixed position: fixed
width: 4ch
height: calc(100%)
width: 4.5ch
height: 100%
background-color: black background-color: black
display: flexbox
flex-direction: row
justify-content: center
display: flex
flex-direction: column
&:hover .sidebarItem
color: #777
transition: 250ms
&:hover
width: 20ch;
.sidebarItem
color: #777
.sidebarItemText
opacity: 1
div.sidebarItem div.sidebarItem
color: white color: white
padding: 0.5em
padding-bottom: 0
padding-top: 0.333em
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

41
src/components/layout/Sidebar.tsx
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 { faArchive, faDatabase, faAlignJustify, faHashtag } from "@fortawesome/free-solid-svg-icons";
import { IconDefinition, faListAlt, faMap, faAddressBook, faUser, faFileArchive, faFolderOpen, faFolder, faFileAlt } from "@fortawesome/free-regular-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={faArchive} />
<SidebarItem icon={faHashtag} skip />
<SidebarItem icon={faListAlt} href="/story/" text="Story" />
<SidebarItem icon={faArchive} href="/logs/" text="Logs" />
<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>
) )
} }
Write Preview
Loading…
Cancel
Save