Skip to content

Commit

Permalink
Merge pull request #265 from ThalesGroup/feature/update-floating-navbar
Browse files Browse the repository at this point in the history
Feature/update floating navbar
  • Loading branch information
Alvin-JohnPagente authored May 21, 2024
2 parents d91af1f + 7bc52f6 commit 3a27c38
Show file tree
Hide file tree
Showing 11 changed files with 502 additions and 489 deletions.
112 changes: 58 additions & 54 deletions app/src/global styles/global-styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,77 +21,69 @@
* HIGH RISK ACTIVITIES.
* -----------------------------------------------------------------------------
*/

html {
height: 100%;
}
body {
overflow: hidden;
height: 100%;
margin:0;
}
/*tabs*/

.wrapper {
min-width: 800px;
width: 55%;
width: 100%;
height: 100%;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
}

textarea {
font-family: Arial, Helvetica, sans-serif;
}

/* .tab-button {
border: 1px solid black;
} */

.buttonWrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 2px;
z-index: 3;
box-shadow: 0px 0px 1px black;
}

.buttonWrapper button {
border: none;
padding: 10px 0px;
/* background-color: white; */
font-size: 12px;
background-color: white;
font-size: 13px;
cursor: pointer;
}

/* button.active {
background-color: #dedede;
} */

button[data-id='welcome']{
background-color: #e1e1e1;
}

button[data-id='project-context'] {
background-color: #68a7ab;
}

button[data-id='business-assets'] {
background-color: #92d050;
}

button[data-id='supporting-assets'] {
background-color: #ffc000;
}

button[data-id='risks'] {
background-color: #b789fb;
}

button[data-id='vulnerabilities'] {
background-color: #f3748c;
}

button[data-id='isra-report'] {
background-color: #a6c2b2;
}

button[class="tab-button active"] {
font-weight: bold;
border: 1px solid black;
}

button[class="tab-button"] {
border: 1px solid black;
color: black;
border-width: 0 0 0 1px;
border-color: rgba(139, 139, 139, 0.281);
border-style: solid;
}
button.tab-button.active[data-id='welcome']{
border-bottom: 2px solid black;
}
button.tab-button.active[data-id='project-context']{
border-bottom: 2px solid #68a7ab;
}
button.tab-button.active[data-id='business-assets']{
border-bottom: 2px solid #92d050;
}
button.tab-button.active[data-id='supporting-assets']{
border-bottom: 2px solid #ffc000;
}
button.tab-button.active[data-id='risks']{
border-bottom: 2px solid #b789fb;
}
button.tab-button.active[data-id='vulnerabilities']{
border-bottom: 2px solid #f3748c;
}
button.tab-button.active[data-id='isra-report']{
border-bottom: 2px solid black;
}
button.tab-button:hover{
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}


Expand Down Expand Up @@ -121,7 +113,7 @@ header {
font-size: 24px;
font-weight: bold;
margin: 0 100px 20px 100px;
padding-top: 2%;
padding-top: 0.5rem;
}

.details {
Expand All @@ -138,6 +130,9 @@ label {
pointer-events: none;

}
button:disabled{
color: #aaaaaa8c !important;
}

.disabled div{
color: #aaaaaa8c !important;
Expand Down Expand Up @@ -165,6 +160,7 @@ button:hover{

button:disabled:hover{
cursor: default;
text-decoration: none;
}

select option {
Expand Down Expand Up @@ -321,7 +317,15 @@ select{
}

.contentWrapper {
width: 55%;
min-width: 800px;
padding: 2%;
margin-top: 2%;
background-color: white;
}

.scrollingWrapper{
overflow-y: scroll;
height: 100%;
display: grid;
justify-items: center;
}
9 changes: 5 additions & 4 deletions app/src/tabs/Business Assets/business-assets.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,12 @@
<button class="tab-button" data-id="vulnerabilities">Vulnerabilities</button>
<button class="tab-button" data-id="isra-report">ISRA Report</button>
</div>

<div class="contentWrapper">
<div class="content active" id="business-assets">
<div class="scrollingWrapper">
<div class="contentWrapper">
<div class="content active" id="business-assets">
</div>
<footer></footer>
</div>
<footer></footer>
</div>
</div>
<script src="../../javascript/common.js"></script>
Expand Down
1 change: 0 additions & 1 deletion app/src/tabs/Business Assets/renderer.js
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,6 @@ function updateBusinessAssetName(id, field){
checkbox.value = id;
checkbox.id = `business-assets__section__checkbox-${id}`;
checkbox.name = 'business-assets__section-checkboxes';
checkbox.style.position = 'absolute';
$('#business-assets__sections').append(checkbox);

// add section inside sections div
Expand Down
5 changes: 3 additions & 2 deletions app/src/tabs/Business Assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,10 @@ article {
margin-bottom: 2%;
}

div[class='content active'] {
background-color: #c0dc8c;
section[id='business-asset-section'] {
background-color: #c0dc8c !important ;
padding: 2%;

}

.business-assets__sections-description{
Expand Down
7 changes: 4 additions & 3 deletions app/src/tabs/Project Context/project-context.html
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@
<button class="tab-button" data-id="vulnerabilities">Vulnerabilities</button>
<button class="tab-button" data-id="isra-report">ISRA Report</button>
</div>

<div class="contentWrapper">
<div class="content active" id="project-context">
<div class="scrollingWrapper">
<div class="contentWrapper">
<div class="content active" id="project-context">
</div>
</div>
</div>
</div>
Expand Down
109 changes: 55 additions & 54 deletions app/src/tabs/Report/report.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,62 +60,63 @@
<button class="tab-button" data-id="vulnerabilities">Vulnerabilities</button>
<button class="tab-button active" data-id="isra-report">ISRA Report</button>
</div>

<div class="contentWrapper">
<div class="content active" id="isra-report">
<header>ISRA Report</header>
<h1><span id="name"></span> <span id="version"></span></h1>
<h2>Iteration/Revision: <span id="iteration"></span>(#<span id="revision"></span>)</h2>
<h2>App version: <span id="app"></span></h2>
<section>
<h1>Project security risks</h1>
<div class="chart-container" >
<canvas id="riskChart"></canvas>
</div>

<table id="risks">
<thead>
<th>Id</th>
<th>Risk Description</th>
<th>Inherent Score</th>
<th>Mitigated Score</th>
<th>Residual Score</th>
<th>Risk Level</th>
<th>Mgmt Decision</th>
</thead>
<tbody></tbody>
</table>
</section>
<section>
<h1>List of project vulnerabilities</h1>
<table id="vulnerabilities">
<thead>
<th>Id</th>
<th>Vulnerability Name</th>
<th>Overall Score</th>
<th>Overall Level</th>
</thead>
<tbody></tbody>
</table>
</section>
<section>
<h1>List of all accepted security controls</h1>
<table id="riskmanagement">
<thead>
<th>Description</th>
<th>Decision Detail</th>
<th>Cost (md)</th>
</thead>
<tbody></tbody>
</table>
</section>
</div>
<div style="background-color: rgb(220, 220, 220); padding: 1%; border: 2px solid black; margin-top: 5%;">
<p style="font-size: small;">Note: To print or export this page: On top left-hand corner, click on File then Print
to create a pdf document. Open it and print it, or copy/paste its content.</p>
<div class="scrollingWrapper">
<div class="contentWrapper">
<div class="content active" id="isra-report">
<header>ISRA Report</header>
<h1><span id="name"></span> <span id="version"></span></h1>
<h2>Iteration/Revision: <span id="iteration"></span>(#<span id="revision"></span>)</h2>
<h2>App version: <span id="app"></span></h2>
<section>
<h1>Project security risks</h1>
<div class="chart-container" >
<canvas id="riskChart"></canvas>
</div>

<table id="risks">
<thead>
<th>Id</th>
<th>Risk Description</th>
<th>Inherent Score</th>
<th>Mitigated Score</th>
<th>Residual Score</th>
<th>Risk Level</th>
<th>Mgmt Decision</th>
</thead>
<tbody></tbody>
</table>
</section>
<section>
<h1>List of project vulnerabilities</h1>
<table id="vulnerabilities">
<thead>
<th>Id</th>
<th>Vulnerability Name</th>
<th>Overall Score</th>
<th>Overall Level</th>
</thead>
<tbody></tbody>
</table>
</section>
<section>
<h1>List of all accepted security controls</h1>
<table id="riskmanagement">
<thead>
<th>Description</th>
<th>Decision Detail</th>
<th>Cost (md)</th>
</thead>
<tbody></tbody>
</table>
</section>
</div>
<div style="background-color: rgb(220, 220, 220); padding: 1%; border: 2px solid black; margin-top: 5%;">
<p style="font-size: small;">Note: To print or export this page: On top left-hand corner, click on File then Print
to create a pdf document. Open it and print it, or copy/paste its content.</p>
</div>
</div>
<footer></footer>
</div>
<footer></footer>
</div>
<script src="../../javascript/common.js"></script>
<script src="./renderer.js"></script>
Expand Down
Loading

0 comments on commit 3a27c38

Please sign in to comment.