Merge pull request #5 from morvader/style_extension_with_bootstrap

Style extension with bootstrap. Minor fixes
morvader · May 29, 2018 · 54d3b79 · 54d3b79
2 parents a55c45c + 559ef8a
commit 54d3b79
Show file tree

Hide file tree

Showing 36 changed files with 902 additions and 900 deletions.
diff --git a/.gitignore b/.gitignore
@@ -51,3 +51,4 @@ crashlytics.properties
 crashlytics-build.properties
 fabric.properties
 
+.vscode/launch.json
diff --git a/HTMLReport/loadData.js b/HTMLReport/loadData.js
diff --git a/HTMLReport/preview.css b/HTMLReport/preview.css
@@ -1,90 +1,65 @@
-#canvasHolder {
-    float: left;
-    /*height:300px;*/
-    /*width:400px;*/
-    height:95%;
-    width:95%;
+body{
+    min-width: 40%;
+    max-width: 100%; 
 }
-#sessionInfo{
-    height:auto;
-    overflow: auto;
+#sessionInfo {
+    font-size: 0.7rem;
 }
+#sessionInfo ul li span {
+    font-weight: bold;
+    display: block;
+    font-size: 0.8rem;
+}
+
 a.canvasjs-chart-credit {
     display: none;
 }
-#sessionData {
-    font-size:16px;
-    /*font-weight:bold;*/
-    border: 1px solid #d3cdcd;
-    float: left;
-    width:22%;
-}
 
-#sessionResults{
-    /*clear:both;*/
+#export{
     float: right;
-    margin-left:5px;
-    width:77%;
+    clear:both;
 }
 
-#export{
-    float:left;
-    /*clear:both;*/
-    margin-left:5px;
-    margin-top: 4px;
-}
-.info{
-    float:left;
-    clear: both;
-    margin: 5px;
-}
 img{
     padding:2px;
+    vertical-align: top;
 }
-.centered{
-    text-align:center;
-    vertical-align: middle;
+
+#sessionActivityTable.tr {
+    vertical-align: top;
+}
+.Type {
+
+}
+.Description {
+
 }
-.noWrap{
- white-space: nowrap;
+.URL {
+    
 }
-TH{
-    padding:5px;
+.Screenshot {
+
 }
 
-#sessionActivityTable {
-border: 1px solid #B0B0B0;
-}
-#sessionActivityTable tbody {
-/* Kind of irrelevant unless your .css is alreadt doing something else */
-margin: 0;
-padding: 0;
-border: 0;
-outline: 0;
-font-size: 100%;
-vertical-align: baseline;
-background: transparent;
-}
-#sessionActivityTable thead {
-text-align: center;
-}
-#sessionActivityTable thead th {
-background: -moz-linear-gradient(top, #F0F0F0 0, #DBDBDB 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F0F0F0), color-stop(100%, #DBDBDB));
-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#DBDBDB', GradientType=0);
-border: 1px solid #B0B0B0;
-color: #444;
-font-size: 16px;
-font-weight: bold;
-padding: 3px 10px;
-}
-#sessionActivityTable td {
-padding: 3px 10px;
+.annotationDescription, .annotationUrl {
+    font-size: 0.7rem;
+    vertical-align: top;
+    white-space: pre; 
+}
 
+tr.Bug {
+    /*background-color: #f5c6cb;*/
+}
+tr.Note {
+    /*background-color: #ffeeba;*/
 }
-#sessionActivityTable tr:nth-child(even) {
-background: #F2F2F2;
+tr.Question {
+    /*background-color: #c3e6cb;*/
 }
+tr.Idea {
+    /*background-color: #bee5eb;*/
+}
+
 .updatethVal{
     width: 100%;
 }

diff --git a/HTMLReport/preview.html b/HTMLReport/preview.html
@@ -2,8 +2,9 @@
 <html>
 <head>
     <title>Exploratory Session Report</title>
-    <link rel="stylesheet" type="text/css" href="preview.css">
-    <link rel="stylesheet" type="text/css" href="../popUp.css">
+    <link rel="stylesheet" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" href="preview.css">
+    <!--<link rel="stylesheet" href="../css/popUp.css">-->
 
     <script src="loadData.js" type="text/javascript"></script>
     <script src="../lib/tablefilter_all_min.js" type="text/javascript"></script>
@@ -14,37 +15,46 @@
     <script src="../lib/date.js" type="text/javascript"></script>
     <script src="../lib/browserInfo.js" type="text/javascript"></script>
     <script src="../lib/canvasjs.min.js" type="text/javascript"></script>
-    <script src="../lib/jquery-1.11.3.min.js" type="text/javascript"></script>
+    <script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
 
 </head>
 <body>
 
-<button id="fakeData" style="display: none;">Init</button>
-<h1>Exploratory Session Report</h1>
-
-<div id="sessionData">
-    <div id="sessionInfo">
-        <span class="info" id="sessionDate">Date</span>
-        <span class="info" id="browserInfo">Browser</span>
-        <span class="info" id="osInfo">OS</span>
-        <span class="info" id="miscInfo">MiscInfo</span>
+<div class="container">
+    <div class="row">
+        <div class="col">
+            <h1 class="display-4">Exploratory Session Report</h1>
+        </div>
     </div>
 
-    <div id="graph">
-        <div id="canvasHolder">
-            <span>Graph</span>
-        </div>
-        </div>
+    <div class="row">
+        <div class="col-3">
+            <div id="sessionData">
+                <div id="sessionInfo">
+                    <ul class="list-group">
+                    <li class="list-group-item" id="sessionDate">Date</li>
+                    <li class="list-group-item" id="browserInfo">Browser</li>
+                    <li class="list-group-item" id="osInfo">OS</li>
+                    <li class="list-group-item" id="miscInfo">MiscInfo</li>
+                </div>
+                <div id="graph">
+                    <div id="canvasHolder">
+                        <span>Graph</span>
+                    </div>
+                </div>
 
-    </div>
+            </div>
+        </div>
 
-<div>
-    <div id="sessionResults">
-        <label>Data Table</label>
-    </div>
+        <div class="col-9">
+            <div id="sessionResults">
+                <label>Data Table</label>
+            </div>
 
+        </div>
     </div>
-<button id="export" class="actionButton" title="Get report in a plain HTML file">Export Session to HTML</button>
+
+</div>
 <div id="divOverlay">
     <div id='deleteDialog'>
         <span>Delete this annotation?</span>

diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/popUp.css b/css/popUp.css
@@ -0,0 +1,106 @@
+body {
+	min-width: 300px;
+	max-width: 400px;
+}
+.form-control-sm {
+	width: 100%;
+}
+
+.screenshot {
+	background-image: url("../images/device-camera.svg");
+	background-repeat: no-repeat;
+	background-size: 75%;
+	background-position: 4px 3px; 
+	min-width: 30px;
+}
+
+.add {
+	background-image: url("../images/diff-added.svg");
+	background-repeat: no-repeat;
+	background-size: 75%;
+	background-position: 4px 3px; 
+	min-width: 30px;
+}
+.card-header {
+	padding: 4px 0 0 7px;
+}
+.card, .card-body, .card > .card > .card-header, .card-body > .card-footer {
+	padding: 2px 3px;
+}
+
+.cancel {
+	float: right;
+}
+
+.list-group-item > .card > .card-header, .list-group-item > .card > .card-footer, .list-group-item > .card > .card-body {
+	padding: 2px;
+}
+
+.reportAnnotation {
+	display: none;
+	margin-top: 2px;
+}
+
+#resetConfirmation {
+	margin-top: 20px;
+}
+
+.btn-secondary{
+	background-color: #f7f7f7;
+	border-color: #f7f7f7;
+
+}
+#resetBtn{
+
+	max-height: 30px;
+	margin-right: 100px;
+
+
+}
+button input.file-input {
+	display: none;
+	/*position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  font-size: 20px;
+  cursor: pointer;
+  opacity: 0;
+  filter: alpha(opacity=0);*/
+}
+#exportCSVBtn{
+	background-image: url("../images/003-csv.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	/*background-position: 4px 3px; */
+	min-width: 30px;
+	min-height: 30px;
+}
+#exportJsonBtn{
+	background-image: url("../images/002-download.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	/*background-position: 4px 3px; */
+	min-width: 30px;
+	min-height: 30px;
+	margin-left: 5px;
+}
+#importJsonBtn{
+	background-image: url("../images/004-up-arrow.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	/*background-position: 4px 3px; */
+	min-width: 30px;
+	min-height: 30px;
+	margin-left: 5px;
+}
+#previewBtn{
+	background-image: url("../images/001-graphic.svg");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	/*background-position: 4px 3px; */
+	min-width: 30px;
+	min-height: 30px;
+	margin-left: 5px;
+}
diff --git a/images/001-graphic.svg b/images/001-graphic.svg
diff --git a/images/001-interface.png b/images/001-interface.png
Original file line number	Diff line number	Diff line change
Expand Up		@@ -51,3 +51,4 @@ crashlytics.properties
		crashlytics-build.properties
		fabric.properties

		.vscode/launch.json