From fd76dc570f59d5a287fd011d3d0d52ed1c9c9af5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torjus=20H=C3=A5kestad?= Date: Sat, 2 Dec 2023 13:11:46 +0100 Subject: [PATCH] Changed layout --- package-lock.json | 6 - package.json | 1 - src/css/style.css | 315 ++++++++++------------------------------------ src/js/media.tsx | 10 +- src/js/menu.tsx | 12 +- 5 files changed, 78 insertions(+), 266 deletions(-) diff --git a/package-lock.json b/package-lock.json index da0e01f..16fc004 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,6 @@ "@types/node": "^20.10.1", "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", - "purecss": "^3.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -3853,11 +3852,6 @@ "node": ">=6" } }, - "node_modules/purecss": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/purecss/-/purecss-3.0.0.tgz", - "integrity": "sha512-IdYbGwbmuA7Hy9ACIO1q7ks4xGLcJSVHxJT2BXIz2c4Ve1aSrNU5bAzA1ILT4Gmdy5K59ruWoRPf9WvJZU5fbA==" - }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", diff --git a/package.json b/package.json index fd07b61..9ddb505 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "@types/node": "^20.10.1", "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", - "purecss": "^3.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/src/css/style.css b/src/css/style.css index 605554e..863843a 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,284 +1,101 @@ -@import 'npm:purecss/build/pure.css'; +:root { + --menu-header-color: #FF99C9; + --menu-header-text: #FFEBF4; + --menu-background-color: #C1BDDB; + --menu-item-color: #A2C7E5; + --menu-item-hover: #B7D8BE; + --menu-selected-color: #CBE896; + --main-background: #FCDFA6; +} body { - color: #777; -} - -.pure-img-responsive { - max-width: 100%; - height: auto; -} - -/* -Add transition to containers so they can push in and out. -*/ -#layout, -#menu, -.menu-link { - -webkit-transition: all 0.2s ease-out; - -moz-transition: all 0.2s ease-out; - -ms-transition: all 0.2s ease-out; - -o-transition: all 0.2s ease-out; - transition: all 0.2s ease-out; -} - -/* -This is the parent `
` that contains the menu and the content area. -*/ -#layout { - position: relative; - left: 0; - padding-left: 0; -} - -#layout.active #menu { - left: 150px; - width: 150px; -} - -#layout.active .menu-link { - left: 150px; -} - -/* -The content `
` is where all your content goes. -*/ -.content { - margin: 0 auto; - padding: 0 2em; - margin-left: 150px; - - /* max-width: 800px; */ - margin-bottom: 50px; - line-height: 1.6em; -} - -.content video { - position: absolute; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - width: auto; - height: auto; - z-index: -100; - background-size: cover; overflow: hidden; + height: 100vh; + margin: 0px; } -.content p { - padding-left: 5em; +#main { + flex: 1 1 auto; + height: 100%; + background-color: var(--main-background); } -.header { - margin: 0; - color: #333; - text-align: center; - padding: 2.5em 2em 0; - border-bottom: 1px solid #eee; +.video-wrapper { + justify-content: left; + align-items: left; } -.header h1 { - margin: 0.2em 0; - font-size: 3em; - font-weight: 300; +video { + position: absolute; + height: 100%; + width: auto; } -.header h2 { - font-weight: 300; - color: #ccc; - padding: 0; - margin-top: 0; -} - -.content-subhead { - margin: 50px 0 20px 0; - font-weight: 300; - color: #888; -} - - - -/* -The `#menu` `
` is the parent `
` that contains the `.pure-menu` that -appears on the left side of the page. -*/ - -#menu { - margin-left: -150px; - /* "#menu" width */ - width: 240px; - position: fixed; - top: 0; - left: 0; - bottom: 0; - z-index: 1000; - /* so the menu or its navicon stays above all content */ - background: #191818; +main { overflow-y: auto; } -/* - All anchors inside the menu should be styled like this. - */ -#menu a { - color: #999; - border: none; - padding: 0.6em 0 0.6em 0.6em; +aside { + width: max-content; + flex: 1 0 auto; + margin-left: 0px; + padding-left: 0px; + background-color: var(--menu-background-color); + height: 100%; } -/* - Remove all background/borders, since we are applying them to #menu. - */ -#menu .pure-menu, -#menu .pure-menu ul { - border: none; - background: transparent; +.menu-list { + list-style: none; + background-color: brown; + margin-top: 0px; } -/* - Add that light border to separate items into groups. - */ -#menu .pure-menu ul, -#menu .pure-menu .menu-item-divided { - border-top: 1px solid #333; +ul.menu-list { + padding-left: 0; } -/* - Change color of the anchor links on hover/focus. - */ -#menu .pure-menu li a:hover, -#menu .pure-menu li a:focus { - background: #333; +a.menu-link { + padding-left: 2em; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: larger; + margin-right: auto; } -/* - This styles the selected menu item `
  • `. - */ -#menu .pure-menu-selected, -#menu .pure-menu-heading { - background: #1f8dd6; +.menu-heading { + padding-left: 1em; + padding-right: 1em; + background-color: var(--menu-header-color); + color: var(--menu-header-text); + font-size: larger; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } -/* - This styles a link within a selected menu item `
  • `. - */ -#menu .pure-menu-selected a { - color: #fff; +a.menu-heading { + text-decoration: none; } -/* - This styles the menu heading. - */ -#menu .pure-menu-heading { - font-size: 110%; - color: #fff; - margin: 0; +.menu-item a { + color: aliceblue; + text-decoration: none; } -/* -- Dynamic Button For Responsive Menu -------------------------------------*/ - -/* -The button to open/close the Menu is custom-made and not part of Pure. Here's -how it works: -*/ - -/* -`.menu-link` represents the responsive menu toggle that shows/hides on -small screens. -*/ -.menu-link { - position: fixed; - display: block; - /* show this only on small screens */ - top: 0; - left: 0; - /* "#menu width" */ - background: #000; - background: rgba(0, 0, 0, 0.7); - font-size: 10px; - /* change this value to increase/decrease button size */ - z-index: 10; - width: 2em; - height: auto; - padding: 2.1em 1.6em; +.menu-item { + cursor: pointer; } -.menu-link:hover, -.menu-link:focus { - background: #000; +li.menu-item { + background-color: var(--menu-item-color); + margin-top: 1px; +} +li.menu-item:hover { + background-color: var(--menu-item-hover); } -.menu-link span { - position: relative; - display: block; +li.menu-selected { + background-color: var(--menu-selected-color) } -.menu-link span, -.menu-link span:before, -.menu-link span:after { - background-color: #fff; - pointer-events: none; - width: 100%; - height: 0.2em; -} - -.menu-link span:before, -.menu-link span:after { - position: absolute; - margin-top: -0.6em; - content: " "; -} - -.menu-link span:after { - margin-top: 0.6em; -} - - -/* -- Responsive Styles (Media Queries) ------------------------------------- */ - -/* -Hides the menu at `48em`, but modify this based on your app's needs. -*/ -@media (min-width: 48em) { - - .header, - .content { - padding-left: 2em; - padding-right: 2em; - } - - #layout { - padding-left: 150px; - /* left col width "#menu" */ - left: 0; - } - - #menu { - left: 150px; - } - - .menu-link { - position: fixed; - left: 150px; - display: none; - } - - #layout.active .menu-link { - left: 150px; - } -} - -@media (max-width: 48em) { - - /* Only apply this when the window is small. Otherwise, the following - case results in extra padding on the left: - * Make the window small. - * Tap the menu to trigger the active state. - * Make the window large again. - */ - #layout.active { - position: relative; - left: 150px; - } +#app { + display: flex; + height: 100%; } \ No newline at end of file diff --git a/src/js/media.tsx b/src/js/media.tsx index 8249f09..39b73bc 100644 --- a/src/js/media.tsx +++ b/src/js/media.tsx @@ -80,7 +80,7 @@ export class MediaContainer extends React.Component { - return {iceReady: state.iceReady, remoteReady: true} + return { iceReady: state.iceReady, remoteReady: true } }) } else { console.log("Could not set remote") @@ -121,9 +121,11 @@ export class MediaContainer extends React.Component -
    - {this.renderVideo()} -
    +
    +
    + {this.renderVideo()} +
    +
    • ) } diff --git a/src/js/menu.tsx b/src/js/menu.tsx index edfe46c..bc947e3 100644 --- a/src/js/menu.tsx +++ b/src/js/menu.tsx @@ -17,12 +17,12 @@ export class Menu extends React.Component { render() { return ( ) } @@ -32,11 +32,11 @@ export class Menu extends React.Component { <> {this.props.items.map((value, idx) => { if (this.props.selectedItem == value) { - return
  • {value}
    • + return
  • {value}
    • } else { return
  • { this.props.selectCallback(value) - }} className="pure-menu-item">{value}
    • + }} className="menu-item">{value} } })}