Skip to content

Adding admin account management HTML component #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
erhchi merged 2 commits into from
Oct 4, 2020
Merged

Adding admin account management HTML component #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c527819
Created admin account management html
kevin-looft Oct 2, 2020
0500d9c
Update admin link
kevin-looft Oct 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 256 additions & 0 deletions milestone2/admin-account-management-component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- Adding ROBOTO Google Font Family -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon-32x32.png"/>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Triangular Arbitrary</title>

<style>
html, body {
height: 100%;
width: 100%;
background-color: #EDEAE5;
font-family: 'Roboto', sans-serif;
background-image: url(./logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

hr {
color: black;
background-color: black;
line-height: 2px;
}

.col-8, .col-4, .col-1, .col-10 {
opacity: .8;
}

.color-jet {
background-color: #2F2D2E;
}

.color-charcoal {
background-color: #2E4057;
}

.color-orange {
background-color: #E27D60;
}

.color-lightblue {
background-color: #97caef;
}

.color-lightorange {
background-color: #E8A87C;
}

.color-pink {
background-color: #C38D9E;
}

.color-green {
background-color: #41B3A3;
}

.color-corp-lightblue {
background-color: #265077;
}

.color-corp-darkblue {
background-color: #022140;
}

.color-corp-pink {
background-color: #494B68;
}

.color-corp-darkgreen {
background-color: #1E4258;
}

.color-corp-lightgreen {
background-color: #2D5F5D
}

.bg-color-lively-darkgreen {
background-color: #026670;
}

.bg-color-lively-lightgreen {
background-color: #9FEDD7;
}

.bg-color-lively-tan {
background-color: #FEF9C7;
}

.bg-color-lively-yellow {
background-color: #FCE181;
}

.bg-color-lively-grey {
background-color: #EDEAE5;
}

.text-color-lively-darkgreen {
color: #026670;
}

.text-color-lively-lightgreen {
color: #9FEDD7;
}

.text-color-lively-tan {
color: #FEF9C7;
}

.text-color-lively-yellow {
color: #FCE181;
}

.text-color-lively-grey {
color: #EDEAE5;
}

.text-color-jet {
color: #2F2D2E;
}

.min-width-1000 {
min-width: 1000;
}

.max-width-100 {
max-width: 100%;
}


</style>
</head>
<body>
<div class="container-fluid color-lively-grey shadow min-width-1000 max-width-100">
<!-- Header -->
<div class="row">
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 w-75">
<!-- Page Title -->
<div class="navbar-header m-2">
<a href="./index.html" class="navbar-brand ml-5"><h1 class="text-color-jet">Tri<b>angular</b> Arbitrary</h1></a>
</div>
</div>

<!-- User Greeting - TODO: add interpolation for userName {{ userName }} -->
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 w-25" style="float: right;">
<div class="text-color-lively-darkgreen float-right m-3">
<span>Welcome, </span>
<a href="">John Doe</a>
</div>
</div>
</div>
</div>

<div class="fluid-container md-form m-5 h-75 w-90 align-self-center">
<h1><b>Account Administration</b></h1>
<hr>

<div class="row">
<div class="col" style="width: 40%">
Copy link
Copy Markdown
Contributor

@merg13 merg13 Oct 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider a min-width style for smaller screen resolutions that stops the elements from overlapping each other at those smaller resolutions

<h2>Ticket Queue</h2>
<table class="table table-striped">
<thead class="thead-light">
<tr>
<th>Subject</th>
<th>Type</th>
<th>Severity</th>
<th>Description</th>
<th>User</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Transaction rejected</td>
<td>Bug found</td>
<td>Critical</td>
<td>When I clicked on the sell button I got a blank screen</td>
<td>UserId123</td>
<td><button class="btn btn-success">Resolve</button></td>
</tr>
<tr>
<td>Can't change password</td>
<td>Account Issues</td>
<td>Medium</td>
<td>I don't know how to change my password....</td>
<td>UserId456</td>
<td><button class="btn btn-success">Resolve</button></td>
</tr>
<tr>
<td>Remove my account</td>
<td>Account Issues</td>
<td>High</td>
<td>I'd like my account to be removed</td>
<td>UserId789</td>
<td><button class="btn btn-success">Resolve</button></td>
</tr>
</tbody>
</table>
</div>
<div class="col float-left" style="width: 60%">
<h2>Account Table</h2>
<table class="table table-striped">
<thead class="thead-light">
<th>User ID</th>
<th>Name</th>
<th></th>
<th></th>
</thead>
<tr>
<td>UserId123</td>
<td>Michael Scoot</td>
<td><button class="btn btn-warning">Freeze</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>UserId456</td>
<td>Dwight Schrute</td>
<td><button class="btn btn-warning">Freeze</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tr>
<td>UserId789</td>
<td>Ron Swanson</td>
<td><button class="btn btn-warning">Freeze</button></td>
<td><button class="btn btn-danger">Remove</button></td>
</tr>
<tbody>

</tbody>
</table>
</div>
</div>

</div>

</body>
</html>


4 changes: 2 additions & 2 deletions milestone2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
<hr>
<div class="row">
<!-- TODO: INSERT href here -->
<li class="btn w-100 nav-item "><a class="nav-link text-color-jet" href=""><b>ACCOUNT ADMINISTRATION</b> </a></li>
<li class="btn w-100 nav-item "><a class="nav-link text-color-jet" href="./admin-account-management-component.html"><b>ACCOUNT ADMINISTRATION</b> </a></li>
</div>
<hr>

Expand Down Expand Up @@ -291,4 +291,4 @@ <h1><b>Create Ticket</b></h1>

<!-- Footer -->
</body>
</html>
</html>