Merge pull request 'UI' (#2) from UI into main

Reviewed-on: #2

database/mistox.sql

@@ -201,7 +201,8 @@ INSERT INTO Account (
   PasswordAttempts,
   CurrentPasswordAttempts,
   Role,
-  EmailToken
+  EmailToken,
+  DataServer
 ) VALUES (
   1,
   'admin',

src/Client/src/app/app.css

@@ -27,7 +27,7 @@
     height: 15px;
     width: 150px;
     border-radius: 5px;
-    margin: 20px;
+    margin: 10px;
     text-align: center;
     padding: 15px 0;
     transition: 0.5s;
@@ -38,22 +38,51 @@
 }
 
     .nav-button:hover {
-        background-color: var(--Mistox-Black);
+        background-color: #00000044;
+        color: var(--Mistox-Light);
     }
 
+    .active {
+        background-color: #00000010;
+        color: var(--Mistox-Bright);
+    }
+
+.nav-button-login {
+    width: 100px;
+    padding: 10px 0;
+}
+
 .content {
     width: 100%;
-    min-height: calc(100vh - 400px);
+    min-height: calc(100vh - 300px);
 }
 
 .bottom-bar {
     display: flex;
     width: 100%;
-    height: 200px;
+    height: 100px;
     background: linear-gradient(180deg,#99999988, #000000FF);
     backdrop-filter: blur(2px);
 }
 
+.bottom-bar-logo {
+    width: 80px;
+    height: 80px;
+    margin: 10px 50px;
+}
+
+.bottom-bar-logo img {
+    width: 80px;
+    height: 80px;
+}
+
+.bottom-bar-buttons {
+    display: flex;
+    width: calc(50% - 110px);
+    height: 80px;
+    margin: 10px;
+}
+
 .nav-button-bottom {
     height: 15px;
     width: 150px;
@@ -65,17 +94,6 @@
     text-decoration: none;
 }
 
-    .nav-button:hover {
-        color: var(--Mistox-Bright);
-    }
-
-.bottom-bar-logo {
-    width: 80px;
-    height: 80px;
-    padding: 0 50px;
-    padding-top: 100px;
-}
-
 .bottom-bar-float {
     align-items: end;
     color: var(--Mistox-White);

src/Client/src/app/app.html

@@ -1,33 +1,33 @@
 <div class="top-bar">
   <div class="top-bar-buttons">
-    <a #mistLink class="nav-button" href="/">HOME</a>
+    <a #homeLink class="nav-button" href="">HOME</a>
-    <a #mistLink class="nav-button" href="/companies">COMPANIES</a>
+    <a #companiesLink class="nav-button" href="/companies">COMPANIES</a>
-    <a #mistLink class="nav-button" href="/jobs">JOB BOARD</a>
+    <a #jobsLink class="nav-button" href="/jobs">JOB BOARD</a>
   </div>
   <a class="top-bar-logo" href="">
-    <img class="top-bar-logo" style="margin: 0;" src="img/logo.png" />
+    <img class="top-bar-logo" style="margin: 0;" src="img/logo-full.png" />
   </a>
   <div *ngIf="auth.isLoggedIn" class="top-bar-buttons flex-right">
-      <a class="nav-button" href="/account/settings"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
+      <a class="nav-button nav-button-login" href="/account/settings"><span>{{ auth.loggedInUser.userName.toUpperCase() }}</span></a>
-      <a class="nav-button" href="/account/logout"><span>LOGOUT</span></a>
+      <a class="nav-button nav-button-login" href="/account/logout"><span>LOGOUT</span></a>
   </div>
   <div *ngIf="!auth.isLoggedIn" class="top-bar-buttons flex-right">
-      <a class="nav-button" href="/account/login"><span>LOGIN</span></a>
+      <a class="nav-button nav-button-login" href="/account/login"><span>LOGIN</span></a>
-      <a class="nav-button" href="/account/register"><span>REGISTER</span></a>
+      <a class="nav-button nav-button-login" href="/account/register"><span>REGISTER</span></a>
   </div>
 </div>
 <div class="content">
   <router-outlet></router-outlet>
 </div>
 <div class="bottom-bar">
-  <div class="top-bar-buttons bottom-bar-float">
+  <div class="bottom-bar-buttons bottom-bar-float">
     <a class="nav-button-bottom bottom-bar-padding" href="/contact">CONTACT</a>
     <a class="nav-button-bottom bottom-bar-padding" href="/privacy">PRIVACY</a>
   </div>
-  <a class="top-bar-logo" href="https://mistox.com">
+  <a class="bottom-bar-logo" href="https://mistox.com">
-    <img class="bottom-bar-logo" src="img/mistox-logo.png" />
+    <img src="img/mistox-logo.png" />
   </a>
-  <div class="top-bar-buttons flex-right bottom-bar-float">
+  <div class="bottom-bar-buttons flex-right bottom-bar-float">
     <div class="bottom-bar-padding">
       <span>Mistox LLC</span>
     </div>

src/Client/src/app/app.routes.ts

@@ -11,6 +11,7 @@ import { ResetPasswordComponent } from './pages/account/resetpassword/resetpassw
 import { VerifyEmailComponent } from './pages/account/verifyemail/verifyemail.component';
 import { NewItemComponent } from './pages/store/admin/newitem/new.component';
 import { EditItemComponent } from './pages/store/admin/edititem/edit.component';
+import { HomeComponent } from './pages/home/home.component';
 
 export const routes: Routes = [
 
@@ -23,6 +24,8 @@ export const routes: Routes = [
     { path: "account/register", component: RegisterComponent },
     { path: "account/settings", component: SettingsComponent },
 
+    { path: "", component: HomeComponent },
+
     // Projects
     { path: "project/mist", component: MistComponent },
 

src/Client/src/app/app.ts

@@ -12,14 +12,13 @@ import { CommonModule } from '@angular/common';
 export class App {
 
   @ViewChild('homeLink') homeLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('mistLink') mistLink!: ElementRef<HTMLAnchorElement>;
+  @ViewChild('companiesLink') companyLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('storeLink') storeLink!: ElementRef<HTMLAnchorElement>;
+  @ViewChild('jobsLink') jobLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('aboutLink') aboutLink!: ElementRef<HTMLAnchorElement>;
 
   constructor(public auth: Authentication, private router: Router){}
 
   ngAfterViewInit(){
-    let ViewLinks = [ this.homeLink, this.mistLink, this.storeLink, this.aboutLink ];
+    let ViewLinks = [ this.homeLink, this.companyLink, this.jobLink ];
     ViewLinks.forEach(link => {
       if (new URL(link.nativeElement.href).pathname === new URL(window.location.href).pathname){
         link.nativeElement.classList.add("active");

src/Client/src/app/pages/home/home.component.css

@@ -0,0 +1,15 @@
+.center {
+    background-color: green;
+}
+
+.tile-frame {
+    column-count: 4;
+    column-gap: 20px;
+    padding: 20px;
+    width: calc(100% - 40px);
+}
+
+.tile{
+    background-color: aqua;
+    height: 40px;
+}

src/Client/src/app/pages/home/home.component.html

@@ -0,0 +1,11 @@
+<div class="tile-frame">
+
+    <div class="tile">
+
+    </div>
+
+    <div class="tile">
+        
+    </div>
+
+</div>

src/Client/src/app/pages/home/home.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'home',
+  templateUrl: './home.component.html',
+  styleUrls: [ './home.component.css' ],
+  imports: [ FormsModule, CommonModule ]
+})
+export class HomeComponent {
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title ) {
+    this.title.setTitle("Home | BoredCareers");
+  };
+
+}

src/Client/src/index.html

@@ -5,7 +5,7 @@
       <title>BoredCareers</title>
       <base href="/">
       <meta name="viewport" content="width=device-width, initial-scale=1">
-      <link rel="icon" type="image/x-icon" href="favicon.ico">
+      <link rel="icon" type="image/x-icon" href="img/logo-full.png">
     </head>
     <body style="border: 0; margin: 0; padding: 0;">
       <app-root></app-root>

src/Client/src/styles.css

@@ -13,7 +13,11 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
+html {
+    background-color: #000;
+}
+
 body {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='1' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     background-color: #fff;
 }