benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BriH

Browse Source
This commit is contained in:
Ben
2022-01-24 03:48:52 +00:00
parent 791bd1393a
commit 4ba98c00e6
10 changed files with 80 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
README.md
View File

Binary file not shown.

15
client/public/components/components.js
View File

@@ -8,7 +8,9 @@ class Component extends HTMLElement {
}
}
// some not-so-scalable way to load all the components
// other components with behaviour go here
// some not-so-scalable way to load all the generic template-like components
async function loadComponents() {
// because of "sECuRItY" i can't simply just find everything in the components folder
// there is a way to sideload this with express and have it do all that stuff
@@ -17,10 +19,12 @@ async function loadComponents() {
'navbar'
];
for (let i = 0; i < components.length; i++) {
const path = `./components/${components[i]}.html`;
const path = `./components/${components[i]}/${components[i]}.html`;
const component = await sideLoad(path);
const stylePath = `./components/${components[i]}.css`;
const stylePath = `./components/${components[i]}/${components[i]}.css`;
const styleComponent = await sideLoad(stylePath);
const scriptPath = `./components/${components[i]}/${components[i]}.js`;
const scriptComponent = await sideLoad(scriptPath);
const Template = class extends Component {
constructor() {
@@ -31,6 +35,11 @@ async function loadComponents() {
shadow.innerHTML = component;
const script = document.createElement('script');
script.text = scriptComponent;
shadow.appendChild(script);
// always assume global.css is the first css file
const style = document.createElement('style');
style.textContent = styleComponent;
shadow.appendChild(style);

5
client/public/components/navbar.css
View File

@@ -1,5 +0,0 @@
h1 {
font-size: 1.5em;
color: rgb(214, 114, 114);
margin: 0;
}

2
client/public/components/navbar.html
View File

@@ -1,2 +0,0 @@
<!-- Basic NavBar template that uses logo.svg -->
<h1>lol</h1>

25
client/public/components/navbar/navbar.css Normal file
View File

@@ -0,0 +1,25 @@
.tl-nav-bar {
display: flex;
font-family: 'Londrina Solid', cursive;
flex-direction: row;
justify-content: center;
align-items: baseline;
align-content: center;
flex-wrap: nowrap;
width: 100%;
height: 10%;
background-color: #4A6C6F;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
};
.tl-nav-item {
display: flex;
font-size: 150%;
flex-grow: 2;
};
.nav-bar-logo {
display: flex;
flex-shrink: 3;
order: -1;
};

25
client/public/components/navbar/navbar.html Normal file
View File

@@ -0,0 +1,25 @@
<!-- Basic NavBar template that uses logo.svg -->
<div class="tl-nav-bar">
<div class="tl-nav-item">
<img class="nav-bar-logo" src="/res/logo.svg" alt="LegoLog Logo">
</div>
<div class="tl-nav-item">
New
</div>
<div class="tl-nav-item">
Offers
</div>
<div class="tl-nav-item">
Bricks
</div>
<div class="tl-nav-item">
Our Sets
</div>
<div class="tl-nav-item">
My Sets
</div>
<div class="tl-nav-item tl-nav-right">
My Account
<div class="nested-nav-item"></div>
</div>
</div> <!-- end of nav-bar -->

0
client/public/components/navbar/navbar.js Normal file
View File

14
client/public/global.css Normal file
View File

@@ -0,0 +1,14 @@
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: rgb(241, 241, 241);
}
.text {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #333;
line-height: 1.5;
}

5
client/public/index.html
View File

@@ -1,7 +1,10 @@
<html>
<head>
<title>LegoLog Home!</title>
<script src="components/components.js"></script>
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet"> <script src="components/components.js"></script>
</head>
<body>
<navbar-component></navbar-component>

2
src/routes/server.js
View File

@@ -21,8 +21,6 @@ function listen(port) {
app.use(logRequest);
app.use(express.static('client/public/'));
app.get('/', (req, res) => { res.end('lol') })
}
module.exports = {