added ng bootstrap module and change some styling

ORNL-AMO · Jan 30, 2024 · 2a83330 · 2a83330
1 parent 76330dc
commit 2a83330
Show file tree

Hide file tree

Showing 13 changed files with 141 additions and 43 deletions.
diff --git a/angular.json b/angular.json
@@ -30,6 +30,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.less"
             ],
             "scripts": [],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,9 @@
     "@angular/platform-server": "^17.0.0",
     "@angular/router": "^17.0.0",
     "@angular/ssr": "^17.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.2",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -29,6 +32,7 @@
     "@angular-devkit/build-angular": "^17.0.0",
     "@angular/cli": "^17.0.0",
     "@angular/compiler-cli": "^17.0.0",
+    "@angular/localize": "^17.0.0",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
@@ -40,4 +44,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.2.2"
   }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,28 +1,26 @@
 <main class="main">
   <div class="content" >
-
-    <form id="authorizationKey" >
-      <label class="inputLabel" for="inputKeyBox">Enter your authorization key:</label>
-      <br>
-      <input type="text" class="inputKeyBox" #authKey (keyup.enter)="getKey(authKey.value)" placeholder="Key">
-      <br>
-      <app-logo-button (click)="getKey(authKey.value)"></app-logo-button>
-      <br>
+    <form class="col-10 offset-1">
+        <div class="row col-5">
+        <label class="form-label text-light" for="inputKeyBox">Enter your authorization key:</label>
+        <input id="inputKeyBox" type="text" class="form-control" #authKey (keyup.enter)="getKey(authKey.value)" placeholder="Key">
+        <app-logo-button class="offset-3 mt-3" (click)="getKey(authKey.value)"></app-logo-button>
+      </div>
     </form>
+
     <form id="inputFile">
-      <label class="inputLabel" for="dataFile" style="display: none;">Import:</label>
+      <label class="inputLabel" for="dataFile">Import:</label>
       <input type="file" name="myfile" >
       <br>
-
+      <br>
       <div class="container">
         <div class="button-wrap">
           <label class="button" for="upload">Import File</label>
-          <input id="upload" type="file" name="testfile">
+          <input id="upload"  type="file" name="testfile">
         </div>
       </div>
-
     </form>
-      
+
   </div>
 </main>
 

diff --git a/src/app/app.component.less b/src/app/app.component.less
@@ -1,22 +1,3 @@
-p{
-    color: white;
-}
-
-.inputKeyBox{
-    width: 11rem;
-
-}
-.inputLabel{
-    color: white;
-
-}
-
-.InOutFileButton{
-    display: inline-flex;
-    width:5rem;
-    height:2rem;
-}
-
 .container {
     display: flex;
     align-items: flex-start;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { LogoButtonComponent } from './logo-button/logo-button.component';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, LogoButtonComponent],
+  imports: [CommonModule, RouterOutlet, LogoButtonComponent,NgbModule],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.less']
 })
@@ -18,4 +19,5 @@ export class AppComponent {
     alert("Your Key is " + this.authKey);
 
   }
+
 }
diff --git a/src/app/logo-button/logo-button.component.less b/src/app/logo-button/logo-button.component.less
@@ -18,6 +18,6 @@ button:hover{
 img{
     padding: 0px;
     border-radius: 50%;
-    width: 10rem;
-    height: 10rem;
+    width: 20rem;
+    height: 20rem;
 }
diff --git a/src/app/logo-button/logo-button.component.ts b/src/app/logo-button/logo-button.component.ts
@@ -9,5 +9,4 @@ import { CommonModule } from '@angular/common';
   styleUrl: './logo-button.component.less'
 })
 export class LogoButtonComponent {
-
 }
diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-<body>
+<body class="bg-dark">
   <app-root></app-root>
 </body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -1,3 +1,5 @@
+/// <reference types="@angular/localize" />
+
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';

diff --git a/src/styles.less b/src/styles.less
@@ -1,4 +1 @@
 /* You can add global styles to this file, and also import other style files */
-body{
-    background-color: #3A435C;
-}
diff --git a/tsconfig.app.json b/tsconfig.app.json
@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": [
-      "node"
+      "node",
+      "@angular/localize"
     ]
   },
   "files": [

diff --git a/tsconfig.spec.json b/tsconfig.spec.json
@@ -4,7 +4,8 @@
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "jasmine",
+      "@angular/localize"
     ]
   },
   "include": [
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,5 +9,4 @@ import { CommonModule } from '@angular/common'; @@
       styleUrl: './logo-button.component.less'
     })
     export class LogoButtonComponent {
     }