Skip to content
Snippets Groups Projects
Commit f76b8d71 authored by ishanps2's avatar ishanps2
Browse files

Modified the main page layout with semantic UI

parent e70ae746
No related branches found
No related tags found
No related merge requests found
Pipeline #71458 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
source/common/manifest.json
+ 1
− 1
View file @ f76b8d71
......@@ -41,5 +41,5 @@
"web_accessible_resources": [
"web_accessible_resources/*"
],
"content_security_policy": "default-src 'none'; style-src 'self'; script-src 'self'; connect-src 'none'; img-src 'none'"
"content_security_policy": "default-src 'none'; style-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; script-src 'self' https://code.jquery.com; font-src https://fonts.googleapis.com https://fonts.gstatic.com data:; connect-src 'none'; img-src 'none'"
}
\ No newline at end of file
source/common/pages/popup/popup.css
+ 51
− 86
View file @ f76b8d71
/* Remove all margins to make window properly fit the contents */
body {
margin: 0;
padding: 0;
font-family: sans-serif;
.main-content {
margin-top: 1em;
margin-bottom: 1em;
}
h1, h2, h3, p {
margin: 0;
padding: 5px;
padding-top: 10px;
/* Remove all margins to make window properly fit the contents */
body {
margin: 0;
padding: 0;
}
/* Size of the window on non-restricted pages */
#content {
height: 600px;
width: 600px;
#allContent {
height: 400px;
width: 650px;
}
/* Style of the main menu */
#main-menu {
width: 50%;
height: 100%;
float: left;
background-color: #eeeeee;
cursor: pointer;
width: 50%;
height: 100%;
float: left;
}
/* Style of the Details section */
#details {
width: 50%;
height: 100%;
float: right;
position: relative;
}
.main-menu-item {
padding-left: 10px;
padding-right: 10px;
transition: background-color 0.5s;
}
.main-menu-item:not(.main-menu-item--active):hover {
background-color: #ffe6b3;
transition: background-color 0.1s;
}
.main-menu-item-small {
height: 10%;
}
.main-menu-item-large {
height: 30%;
width: 50%;
height: 100%;
float: right;
position: relative;
}
/* The style modifier for selecter main menu item */
.main-menu-item--active {
background-color: #ffcc66;
transition: background-color 0.5s;
background-color: #ffcc66;
transition: background-color 0.5s;
}
.main-menu-item > h2 {
margin: 0;
padding: 5px;
padding-top: 10px;
}
/* Unselected details section is hidden */
.details-item {
display: none;
display: none;
}
/* Style of the selected details section */
.details-item--active {
display: block;
height: 100%;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
/* The "informaton" button in the main menu */
.info{
width: 1em;
float: right;
cursor: help;
display: block;
height: 100%;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
}
/*
......@@ -92,16 +57,16 @@ h1, h2, h3, p {
*/
.list-collapsible {
list-style: none;
padding-inline-start: 1em;
list-style: none;
padding-inline-start: 1em;
}
.list-collapsible > li > ul{
display:none
display:none
}
.list-collapsible--active > ul {
display:block !important
display:block !important
}
/*
......@@ -110,12 +75,12 @@ h1, h2, h3, p {
* in CLOSED position
*/
.list-collapsible > li::before {
background-image: url("/includes/fontawesome/caret-right.svg");
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
background-image: url("/includes/fontawesome/caret-right.svg");
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
}
/* The look of the drop-down indicator
......@@ -123,12 +88,12 @@ h1, h2, h3, p {
* in OPEN position
*/
ul.list-collapsible > li.list-collapsible--active::before {
background-image: url("/includes/fontawesome/caret-down.svg");
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
background-image: url("/includes/fontawesome/caret-down.svg");
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
}
/* The icon to the right of the domain name in the list
......@@ -136,25 +101,25 @@ ul.list-collapsible > li.list-collapsible--active::before {
*/
li.list-domain > a::after {
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
background-size: 20px;
display: inline-block;
width: 20px;
height: 20px;
content:"";
}
li.list-domain--secure > a::after {
background-image: url("/includes/fontawesome/check.svg");
background-image: url("/includes/fontawesome/check.svg");
}
li.list-domain--enabled > a::after {
background-image: url("/includes/fontawesome/lock.svg");
background-image: url("/includes/fontawesome/lock.svg");
}
li.list-domain--disabled > a::after {
background-image: url("/includes/fontawesome/unlock.svg");
background-image: url("/includes/fontawesome/unlock.svg");
}
li.list-domain--insecure > a::after {
background-image: url("/includes/fontawesome/exclamation-triangle.svg");
background-image: url("/includes/fontawesome/exclamation-triangle.svg");
}
source/common/pages/popup/popup.html
+ 109
− 69
View file @ f76b8d71
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="/includes/semantic-ui-css/semantic.min.css" rel="stylesheet">
<link href="popup.css" rel="stylesheet"/>
<script src="/includes/jquery/jquery.min.js" defer></script>
<script src="/includes/semantic-ui-css/semantic.min.js" defer></script>
<script src="popup.js" defer></script>
</head>
<body>
<div id="message">
<h1>This is a safe page.</h1>
<p>TODO: make pretty</p>
</div>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="/includes/semantic-ui-css/semantic.min.css" rel="stylesheet">
<link href="popup.css" rel="stylesheet"/>
<script src="/includes/jquery/jquery.min.js" defer></script>
<script src="/includes/semantic-ui-css/semantic.min.js" defer></script>
<script src="popup.js" defer></script>
</head>
<body>
<div id="allContent">
<div id="main-menu">
<div class="main ui container main-content">
<div class="ui unstackable divided items">
<div class="item">
<div class="image">
<img src="/img-t/image.png">
</div>
<div class="content">
<a class="header">Monitoring</a>
<div class="ui icon button" data-tooltip="Add users to your feed" data-position="bottom right" data-inverted="">
<i class="info icon"></i>
</div>
<div id="content">
<div id="main-menu">
<div id="main-menu-primary" class="main-menu-item main-menu-item-large">
<h2>Primary resources<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
</div>
<div id="main-menu-thirdparty" class="main-menu-item main-menu-item-large">
<h2>Third-party sources<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
</div>
<div id="main-menu-security" class="main-menu-item main-menu-item-large">
<h2>Security<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
</div>
<div id="main-menu-debug" class="main-menu-item main-menu-item-small">
<h2>Something broke?<img alt="?" class="info" src="/includes/fontawesome/question-circle-o.svg"></h2>
</div>
</div>
<div id="details">
<div id="details-default" class="details-item">
<h2>You didn't choose anything yet</h2>
</div>
<div id="details-primary" class="details-item">
<h2>You chose Primary</h2>
</div>
<div id="details-thirdparty" class="details-item">
<h2>You chose Thirdparty</h2>
</div>
<div id="details-security" class="details-item">
<h2>You chose Security</h2>
<div>
<select name="site">
<option value="" disabled selected hidden>Site</option>
<option value="any">Any</option>
</select>
<select name="security">
<option value="" disabled selected hidden>Security</option>
<option value="any">Any</option>
<option value="safe">Secure by default</option>
<option value="enabled">Under protection</option>
<option value="disabled">Vulnerable</option>
<option value="insecure">Insecure</option>
</select>
<select name="severity">
<option value="" disabled selected hidden>Severity</option>
<option value="any">Any</option>
<option value="">Tempering possible</option>
<option value="volvo">Tempering detected</option>
<option value="confideniality">Snooping possible</option>
<option value="leak">Leak detected</option>
</select>
<div class="meta">
<span>Description</span>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img-t/image.png">
</div>
<div class="content">
<a class="header">Sharing</a>
<div class="ui icon button" data-tooltip="Add users to your feed" data-position="bottom right" data-inverted="">
<i class="info icon"></i>
</div>
<div class="meta">
<span>Info shared with 2 other sites. </span>
</div>
<div class="extra">
Sites Blocked: None
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/img-t/image.png">
</div>
<div class="content">
<a class="header">Security</a>
<div class="ui icon button" data-tooltip="Add users to your feed" data-position="bottom right" data-inverted="">
<i class="info icon"></i>
</div>
<div class="meta">
<span>Description</span>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
<p>Enabling some of these options may break the site functionality. In that case, you might have to revert back.</p>
<ul id="details-security-list" class="list-collapsible"></ul>
</div>
<div id="details-debug" class="details-item">
<h2>You chose Debugging</h2>
</div>
</div>
</div>
<div id="details">
<div id="details-default" class="details-item">
<h2>You didn't choose anything yet</h2>
</div>
<div id="details-primary" class="details-item">
<h2>You chose Primary</h2>
</div>
<div id="details-thirdparty" class="details-item">
<h2>You chose Thirdparty</h2>
</div>
<div id="details-security" class="details-item">
<h2>You chose Security</h2>
<div>
<select name="site">
<option value="" disabled selected hidden>Site</option>
<option value="any">Any</option>
</select>
<select name="security">
<option value="" disabled selected hidden>Security</option>
<option value="any">Any</option>
<option value="safe">Secure by default</option>
<option value="enabled">Under protection</option>
<option value="disabled">Vulnerable</option>
<option value="insecure">Insecure</option>
</select>
<select name="severity">
<option value="" disabled selected hidden>Severity</option>
<option value="any">Any</option>
<option value="">Tempering possible</option>
<option value="volvo">Tempering detected</option>
<option value="confideniality">Snooping possible</option>
<option value="leak">Leak detected</option>
</select>
</div>
<p>Enabling some of these options may break the site functionality. In that case, you might have to revert back.</p>
<ul id="details-security-list" class="list-collapsible"></ul>
</div>
<div id="details-debug" class="details-item">
<h2>You chose Debugging</h2>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
</body>
</html>
webpack.config.js
+ 1
− 0
View file @ f76b8d71
......@@ -27,6 +27,7 @@ const files = [
const modules = {
"semantic-ui-css/semantic.min.js": "semantic-ui-css/semantic.min.js",
"semantic-ui-css/semantic.min.css": "semantic-ui-css/semantic.min.css",
"semantic-ui-css/themes/": "semantic-ui-css/themes/",
"jquery/dist/jquery.min.js": "jquery/jquery.min.js"
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment