subhra74
/
linux-web-console
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed editor issue

master
subhra74 2019-07-12 09:04:41 +02:00
parent 50d2a95d3c
commit 4b07803fdc
11 changed files with 404 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/data.service.ts
View File

@ -78,6 +78,8 @@ export class DataService {
currentViewChanger = new Subject<string>();
viewTextRequests=new Subject<string>();
terminalSession: TerminalSession;
constructor(private http: HttpClient) {

5
ui/src/app/home/editor/editor.component.html
View File

@ -1,5 +1,4 @@
<div style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; z-index: 100; background: white;"
*ngIf="tabKeys.length>0">
<div style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: white; z-index: 10;">
<div class="desktop-tabs" *ngIf="service.selectedEditorTab">
<div *ngFor="let tab of tabKeys"
style="padding: 10px; padding-left: 5px; padding-right: 5px; display: flex; justify-content: space-between;"
@ -32,6 +31,6 @@
</div>
<div *ngIf="tabKeys.length<1"
style="height: calc(100vh - 55px); width: 100vw; position: fixed; top: 55px; left: 0px; z-index: 100; background: white; text-align: center; padding-top: 30px;">
style="height: calc(100vh - 55px); width: 100vw; position: fixed; top: 55px; left: 0px; background: white; text-align: center; padding-top: 30px;">
<span>No file is opened, please goto files and select some.</span>
</div>

18
ui/src/app/home/editor/editor.component.ts
View File

@ -31,7 +31,14 @@ export class EditorComponent implements OnInit,AfterViewInit {
constructor(public service: DataService, private route: ActivatedRoute) { }
ngOnInit() {
console.log("editor: ngOnInit "+this.codeEditorElmRef);
this.getTabbedSessions();
this.service.viewTextRequests.subscribe(a=>{
this.getTabbedSessions();
this.loadSession(this.service.selectedEditorTab);
});
// console.log("selected tab: " + this.service.selectedEditorTab+" tabkexs: "+this.tabKeys);
if(this.tabKeys.length<1){
return;
@ -62,9 +69,16 @@ export class EditorComponent implements OnInit,AfterViewInit {
}
shouldShowTab(){
console.log("Tab count: "+this.tabKeys.length);
return this.tabKeys.length>0;
}
ngAfterViewInit(){
console.log("editor: ngAfterViewInit "+this.codeEditorElmRef);
ace.require('ace/ext/language_tools');
if(!this.codeEditorElmRef){
console.log("Code editor reference not found");
return;
}
const element = this.codeEditorElmRef.nativeElement;
@ -96,6 +110,7 @@ export class EditorComponent implements OnInit,AfterViewInit {
getTabbedSessions(): void {
this.tabKeys = Object.keys(this.service.editorContexts);
console.log("tab keys: "+JSON.stringify(this.tabKeys))
// this.service.editorContexts.forEach((value: EditorContext, key: string) => {
// this.tabKeys.push(key);
// console.log("tabbed key: " + key);
@ -123,6 +138,9 @@ export class EditorComponent implements OnInit,AfterViewInit {
}
onResize(event: any) {
if(!this.codeEditorElmRef){
return;
}
//console.log("window resized");
let doc: any = this.codeEditor.getSession().getDocument();
let r: any = this.codeEditor.renderer;

340
ui/src/app/home/files/files.component.css
View File

@ -1,167 +1,175 @@
.nav-tree {
height: 100%;
width: 250px;
min-width: 250px;
background: rgb(240, 240, 240);
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
border-right: 1px solid rgb(230, 230, 230);
padding-top: 10px;
}
.file-list {
flex: 1;
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
max-width: calc(100vw - 250px);
}
.file-list-content-wrapper {
padding-top: 52px;
}
.file-list-header {
display: flex;
height: 51px;
background: white;
border-bottom: 1px solid rgb(230, 230, 230);
cursor: pointer;
position: fixed;
box-shadow: 0px 0px 6px 0px rgb(230, 230, 230);
z-index: 0;
}
.file-list-item-row {
display: flex;
height: 51px;
border-bottom: 1px solid rgb(240, 240, 240);
overflow: hidden;
}
.desktop-file-list-first-item {
flex: 2;
overflow-x: hidden;
line-height: 50px;
display: flex;
padding-left: 10px;
}
.desktop-file-list-other-item {
flex: 1;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-file-list-row {
display: none;
width: 100%;
}
.desktop-nav {
display: flex;
padding: 10px;
background: rgb(245, 245, 245);
border-bottom: 1px solid rgb(230, 230, 230);
flex-wrap: nowrap;
overflow: hidden;
}
.mobile-nav {
display: none;
justify-content: space-around;
flex-wrap: nowrap;
overflow: hidden;
background: rgb(245, 245, 245);
border-top: 1px solid rgb(230, 230, 230);
}
.desktop-file-tabs {
height: 50px;
width: 100%;
display: flex;
background: rgb(230, 230, 230);
}
.dropdown-ctx-menu {
display: flex;
width: 200px;
flex-direction: column;
position: fixed;
right: 0px;
max-height: 50vh;
background: white;
border: 1px solid rgb(200, 200, 200);
box-shadow: 3px 3px 10px 0px rgb(200, 200, 200);
z-index: 301;
overflow-y: auto;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
@media (max-width:800px) {
[class="nav-tree"] {
display: none;
}
[class="file-list"] {
max-width: 100vw;
}
[class="file-list-header"] {
display: none;
}
[class*="file-list-content-wrapper"] {
padding-top: 0px;
}
[class*="file-list-item-row"] {
height: 80px;
}
[class="desktop-file-list-first-item"] {
display: none;
}
[class="desktop-file-list-other-item"] {
display: none;
}
[class="mobile-file-list-row"] {
display: flex;
}
[class="desktop-file-list-other-item"] {
display: none;
}
[class="desktop-nav"] {
display: none;
}
[class="mobile-nav"] {
display: flex;
}
[class*="desktop-file-tabs"] {
display: none;
}
[class="dropdown-ctx-menu"] {
bottom: 40px;
}
}
@media (min-width:800px) {
[class="dropdown-ctx-menu"] {
top: 100px;
}
.selected-tab{
border-bottom: 3px solid dodgerblue;
border-right: 1px solid rgb(230,230,230);
}
.normal-tab{
border-bottom: 3px solid rgb(240,240,240);
border-right: 1px solid rgb(230,230,230);
}
.nav-tree {
height: 100%;
width: 250px;
min-width: 250px;
background: rgb(240, 240, 240);
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
border-right: 1px solid rgb(230, 230, 230);
padding-top: 10px;
}
.file-list {
flex: 1;
overflow: hidden;
overflow-x: auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: relative;
max-width: calc(100vw - 250px);
}
.file-list-header {
display: flex;
height: 51px;
background: white;
border-bottom: 1px solid rgb(230, 230, 230);
cursor: pointer;
position: sticky;
top: 0px;
box-shadow: 0px 0px 6px 0px rgb(230, 230, 230);
}
.file-list-item-row {
display: flex;
height: 51px;
border-bottom: 1px solid rgb(240, 240, 240);
overflow: hidden;
}
.desktop-file-list-first-item {
flex: 2;
overflow-x: hidden;
line-height: 50px;
display: flex;
padding-left: 10px;
}
.desktop-file-list-other-item {
flex: 1;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-file-list-row {
display: none;
width: 100%;
}
.desktop-nav {
display: flex;
padding: 10px;
padding-left: 15px;
background: rgb(245, 245, 245);
border-bottom: 1px solid rgb(230, 230, 230);
flex-wrap: nowrap;
overflow: hidden;
}
.mobile-nav {
display: none;
justify-content: space-around;
flex-wrap: nowrap;
overflow: hidden;
background: rgb(245, 245, 245);
border-top: 1px solid rgb(230, 230, 230);
}
.desktop-file-tabs {
height: 50px;
width: 100%;
display: flex;
background: rgb(240, 240, 240);
border-bottom: 1px solid rgb(220,220,220);
}
.dropdown-ctx-menu {
display: flex;
width: 200px;
flex-direction: column;
position: fixed;
right: 0px;
max-height: 50vh;
background: white;
border: 1px solid rgb(200, 200, 200);
box-shadow: 3px 3px 10px 0px rgb(200, 200, 200);
z-index: 301;
overflow-y: auto;
}
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
supported by Chrome and Opera */
}
@media (max-width:800px) {
[class="nav-tree"] {
display: none;
}
[class="file-list"] {
max-width: 100vw;
}
[class="file-list-header"] {
display: none;
}
[class*="file-list-content-wrapper"] {
padding-top: 0px;
}
[class*="file-list-item-row"] {
height: 80px;
}
[class="desktop-file-list-first-item"] {
display: none;
}
[class="desktop-file-list-other-item"] {
display: none;
}
[class="mobile-file-list-row"] {
display: flex;
}
[class="desktop-file-list-other-item"] {
display: none;
}
[class="desktop-nav"] {
display: none;
}
[class="mobile-nav"] {
display: flex;
}
[class*="desktop-file-tabs"] {
display: none;
}
[class="dropdown-ctx-menu"] {
bottom: 40px;
}
}
@media (min-width:800px) {
[class="dropdown-ctx-menu"] {
top: 100px;
}
}

9
ui/src/app/home/files/files.component.html
View File

@ -1,4 +1,4 @@
<div style="height: 100%; width: 100%; display: flex;" (click)="onWindowClicked(contextmenu)" class="noselect">
<div style="height: 100%; width: 100%; display: flex; z-index: 5;" (click)="onWindowClicked(contextmenu)" class="noselect">
<!-- navigation tree start -->
<div class="nav-tree">
<!-- <app-tree [model]="service.tree1" [icon]="'fa-bookmark-o'"></app-tree> -->
@ -14,7 +14,8 @@
<div *ngIf="service.tabs.length>1" class="desktop-file-tabs">
<div (click)="showTab(i)" (mouseenter)="hoverIndex=i" (mouseleave)="hoverIndex=-1"
*ngFor="let tab of service.tabs; let i=index"
[ngStyle]="{'background': service.selectedTab==i? 'rgb(245,245,245)' : 'rgb(230,230,230)'}"
[ngClass]="service.selectedTab==i?'selected-tab': 'normal-tab'"
style="padding: 10px; padding-left: 10px; padding-right: 5px; display: flex; justify-content: space-between; cursor: pointer;">
<span style="line-height: 30px; margin-left: 10px; margin-right: 10px;">{{tab.folderName}}</span>
<div style="width: 20px;">
@ -101,7 +102,7 @@
<div class="file-list" *ngIf="service.tabs[service.selectedTab]&&service.tabs[service.selectedTab].files">
<!-- header start -->
<div [style.width]="content.clientWidth+'px'" class="file-list-header" #header>
<div class="file-list-header" #header>
<span style="flex: 2; line-height: 50px; padding-left: 20px;" (click)="sort(0)">
<span style="padding-right: 10px;">Name</span>
<span *ngIf="this.sortColumn==0&&this.ascendingSort">
@ -158,7 +159,7 @@
<!-- actual content begin -->
<div #content class="file-list-content-wrapper" (keydown)="keyup($event)" id="list" #list>
<div #content (keydown)="keyup($event)" id="list" #list>
<div *ngFor="let file of service.tabs[service.selectedTab].files; let i=index" class="file-list-item-row"
[style.color]="file.selected?'white':'black'" [style.background]="file.selected?'deepskyblue':'white'"
(dblclick)="file.type === 'Directory'?navigateTo(file.path): openItem(file)"

42
ui/src/app/home/files/files.component.ts
View File

@ -27,7 +27,7 @@ export class FilesComponent implements OnInit, OnDestroy {
toastVisible: boolean = false;
toastMessage: string;
@ViewChild("list")
@ViewChild("content")
list: ElementRef;
@ViewChild("header")
@ -36,7 +36,7 @@ export class FilesComponent implements OnInit, OnDestroy {
@Output()
viewChanged = new EventEmitter<string>();
fileToOpen:FileItem;
fileToOpen: FileItem;
uploadPopup: boolean;
hoverIndex: number = -1;
@ -63,7 +63,7 @@ export class FilesComponent implements OnInit, OnDestroy {
this.service.fileOpenRequests.subscribe((file: FileItem) => {
if (file.type == "Directory") {
this.navigateTo(file.path);
}else{
} else {
this.openItem(file);
}
});
@ -116,7 +116,7 @@ export class FilesComponent implements OnInit, OnDestroy {
openItem(fileItem: FileItem) {
let file: string = fileItem.path;
this.loading = true;
this.fileToOpen=fileItem;
this.fileToOpen = fileItem;
console.log("Opening file: " + file)
if (fileItem.type.startsWith("image")) {
this.previewer = "image";
@ -144,7 +144,8 @@ export class FilesComponent implements OnInit, OnDestroy {
ctx.session.setUseWrapMode(false);
this.service.editorContexts[file] = ctx;
this.loading = false;
console.log("before route init of editor: " + JSON.stringify(Object.keys(this.service.editorContexts)))
console.log("before route init of editor: " + JSON.stringify(Object.keys(this.service.editorContexts)));
this.service.viewTextRequests.next("changed");
this.viewChanged.emit("editor");
//this.router.navigate(["/app/editor"]);
}, err => {
@ -153,16 +154,16 @@ export class FilesComponent implements OnInit, OnDestroy {
});
}
// openAsText() {
// let file: string;
// for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
// if (this.service.tabs[this.service.selectedTab].files[i].selected) {
// file = this.service.tabs[this.service.selectedTab].files[i].path;
// this.openWithTextEditor(file);
// break;
// }
// }
// }
// openAsText() {
// let file: string;
// for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
// if (this.service.tabs[this.service.selectedTab].files[i].selected) {
// file = this.service.tabs[this.service.selectedTab].files[i].path;
// this.openWithTextEditor(file);
// break;
// }
// }
// }
navigateTo(file: string) {
this.loading = true;
@ -398,8 +399,9 @@ export class FilesComponent implements OnInit, OnDestroy {
let content: HTMLElement = this.list.nativeElement as HTMLElement;
let h: HTMLElement = this.header.nativeElement as HTMLElement;
console.log("window resized " + content.clientWidth);
h.style.width = content.clientWidth + "px";
console.log("Header width: " + h.style.width);
let s = getComputedStyle(content);
//h.style.width = (s.getPropertyValue("width"));
console.log("Header width: " + s.getPropertyValue("width"));
}
onWindowClicked(c) {
@ -439,8 +441,10 @@ export class FilesComponent implements OnInit, OnDestroy {
for (let i = 0; i < this.service.tabs[this.service.selectedTab].files.length; i++) {
if (this.service.tabs[this.service.selectedTab].files[i].selected) {
let path = this.service.tabs[this.service.selectedTab].files[i].path;
this.navigateTo(path);
break;
if (this.service.tabs[this.service.selectedTab].files[i].type === "Directory") {
this.navigateTo(path);
break;
}
}
}
}

336
ui/src/app/home/home.component.css
View File

@ -1,168 +1,170 @@
.fullscreen {
width: 100vw;
height: 100vh;
position: fixed;
bottom: 0px;
right: 0px;
display: flex;
flex-direction: column;
background: black;
color: white;
z-index: 100;
}
.minimized {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px;
color: white;
background: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.rounded-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.normal {
width: 740px;
height: 450px;
position: fixed;
bottom: 0px;
right: 10px;
display: flex;
flex-direction: column;
background: black;
color: white;
z-index: 100;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.term-normal {
height: 410px;
}
.term-fullscreen {
height: calc(100vh - 40px);
}
.router-wrapper {
padding-top: 55px;
height: 100%;
}
.desktop-title {
flex: 1;
line-height: 55px;
color: gray;
font-size: 22px;
}
.mobile-title {
flex: 1;
line-height: 55px;
color: gray;
font-size: 22px;
display: none;
}
.desktop-nav {
height: 55px;
background: rgb(33, 37, 43);
display: flex;
justify-content: flex-end;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
margin-bottom: 5px;
position: fixed;
width: 100vw;
z-index: 150;
padding-left: 20px;
padding-right: 20px;
left: 0px;
top: 0px;
}
.mobile-nav {
background: rgb(33, 37, 43);
display: none;
justify-content: space-around;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
margin-bottom: 5px;
position: fixed;
width: 100vw;
z-index: 150;
padding-left: 20px;
padding-right: 20px;
left: 0px;
top: 0px;
}
.desktop-terminal-wrapper {
display: block;
}
.terminal-btn {
position: fixed;
right: 30px;
bottom: 30px;
border-radius: 50%;
background: rgb(20, 20, 20);
color: white;
width: 50px;
text-align: center;
height: 50px;
z-index: 300;
box-shadow: 2px 2px 5px gray;
}
.active-link {
background: rgb(62, 66, 81)
}
.device-keyboard {
padding-right: 10px;
cursor: pointer;
color: white;
display: none;
}
@media (max-width:800px) {
[class="desktop-nav"] {
display: none;
}
[class="mobile-nav"] {
display: flex;
}
[class*="desktop-terminal-wrapper"] {
display: none;
}
[class="terminal-btn"] {
bottom: 60px;
right: 30px;
}
[class*="desktop-title"] {
display: none;
}
[class*="mobile-title"] {
display: block;
}
[class="device-keyboard"] {
display: block;
}
[class="term-fullscreen"]{
height: 50vh
}
}
.bg-gradient {
background: #3A1C71;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
.fullscreen {
width: 100vw;
height: 100vh;
position: fixed;
bottom: 0px;
right: 0px;
display: flex;
flex-direction: column;
background: black;
color: white;
z-index: 100;
}
.minimized {
width: 200px;
position: fixed;
right: 10px;
bottom: 0px;
color: white;
background: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.rounded-top {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.normal {
width: 740px;
height: 450px;
position: fixed;
bottom: 0px;
right: 10px;
display: flex;
flex-direction: column;
background: black;
color: white;
z-index: 100;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.term-normal {
height: 410px;
}
.term-fullscreen {
height: calc(100vh - 40px);
}
.router-wrapper {
padding-top: 55px;
height: 100%;
}
.desktop-title {
flex: 1;
line-height: 55px;
color: gray;
font-size: 22px;
}
.mobile-title {
flex: 1;
line-height: 55px;
color: gray;
font-size: 22px;
display: none;
}
.desktop-nav {
height: 55px;
/* background: rgb(33, 37, 43); */
background: rgb(36, 46, 43);;
display: flex;
justify-content: flex-end;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
margin-bottom: 5px;
position: fixed;
width: 100vw;
z-index: 150;
padding-left: 20px;
padding-right: 20px;
left: 0px;
top: 0px;
}
.mobile-nav {
background: rgb(33, 37, 43);
display: none;
justify-content: space-around;
box-shadow: 0px 3px 6px 0px rgb(200, 200, 200);
margin-bottom: 5px;
position: fixed;
width: 100vw;
z-index: 150;
padding-left: 20px;
padding-right: 20px;
left: 0px;
top: 0px;
}
.desktop-terminal-wrapper {
display: block;
}
.terminal-btn {
position: fixed;
right: 30px;
bottom: 30px;
border-radius: 50%;
background: rgb(20, 20, 20);
color: white;
width: 50px;
text-align: center;
height: 50px;
z-index: 300;
box-shadow: 2px 2px 5px gray;
}
.active-link {
background: rgb(62, 66, 81)
}
.device-keyboard {
padding-right: 10px;
cursor: pointer;
color: white;
display: none;
}
@media (max-width:800px) {
[class="desktop-nav"] {
display: none;
}
[class="mobile-nav"] {
display: flex;
}
[class*="desktop-terminal-wrapper"] {
display: none;
}
[class="terminal-btn"] {
bottom: 60px;
right: 30px;
}
[class*="desktop-title"] {
display: none;
}
[class*="mobile-title"] {
display: block;
}
[class="device-keyboard"] {
display: block;
}
[class="term-fullscreen"]{
height: 50vh
}
}
.bg-gradient {
background: #3A1C71;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

11
ui/src/app/home/home.component.html
View File

@ -76,10 +76,13 @@
</div>
<div class="router-wrapper">
<app-files (viewChanged)="view=$event"></app-files>
<app-editor *ngIf="view=='editor'"></app-editor>
<app-search *ngIf="view=='search'"></app-search>
<app-settings *ngIf="view=='settings'"></app-settings>
<app-editor [style.display]="view=='editor'?'block':'none'" ></app-editor>
<app-search [style.display]="view=='search'?'block':'none'" ></app-search>
<app-settings [style.display]="view=='settings'?'block':'none'" ></app-settings>
<div style="width: 100vw; height: calc(100vh - 55px);" [style.display]="view?'none':'block'" >
<app-files (viewChanged)="view=$event"></app-files>
</div>
<!-- <router-outlet></router-outlet> -->
</div>
</div>

2
ui/src/app/home/home.component.ts
View File

@ -97,4 +97,6 @@ export class HomeComponent implements OnInit {
this.router.navigate(["/login"]);
}
}

2
ui/src/app/home/search/search.component.html
View File

@ -1,4 +1,4 @@
<div style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; z-index: 100; flex-direction: column;" *ngIf="!loading">
<div style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; flex-direction: column;" *ngIf="!loading">
<div style="display: flex; justify-content: center; padding-top: 20px;" *ngIf="!ctx.searching">
<div>
<div class="form-group">

2
ui/src/app/home/settings/settings.component.html
View File

@ -1,5 +1,5 @@
<div
style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; z-index: 100; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
style="height: calc(100vh - 55px); width: 100vw; position: fixed; left: 0px; top: 55px; background: white; display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
<div style="padding:30px; box-shadow: 3px 3px 15px 5px gray; min-width: 400px;">
<div class="form-group">
<label for="username">New user name</label>