Focus on domain level view (#9)

* WIP * see through jelly * Hide controls except agency websites Add more agency websites Add legend/title Add long form content below Grey out all nodes to start off with * upgrade jquery and remove fancybox * upgrade jquery and remove fancybox * remove TODO * color edges * formatting * flex layout * highlight entry points * Remove extra help text I'd like to see if the visualisation behaviour is intuitive enough to be understood. * Callout position Moving the callout/help text back to the top and putting the title inside the callout * Class changes for styling * Small updates to styles * hide green edges when viewing domain
govau · Jun 26, 2019 · d29d892 · d29d892
1 parent cf1bde4
commit d29d892
Show file tree

Hide file tree

Showing 12 changed files with 2,014 additions and 1,926 deletions.
diff --git a/html/observatory/config_augov.json b/html/observatory/config_augov.json
@@ -6,7 +6,14 @@
         "name": "Digital Transformation Agency",
         "lifeEvents": [],
         "websites":[
-            "www.dta.gov.au"
+            "www.dta.gov.au",
+            "www.homeaffairs.gov.au",
+            "www.humanservices.gov.au",
+            "www.australia.gov.au",
+            "www.passports.gov.au",
+            "www.casa.gov.au",
+            "www.apsc.gov.au",
+            "data.gov.au"
         ]
     },
 

diff --git a/html/observatory/css/style.css b/html/observatory/css/style.css
@@ -5,11 +5,19 @@ html,body {
 	margin: 0px;
 	padding: 0px;
 }
-
+main.au-body {
+	background: #eee !important;
+	padding: 0 20px 0 20px;
+}
+.explanation {
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+}
 .sigma-parent {
 	position: relative;
 	height: 100%;
 	min-height: 800px !important;
+	background: white;
 }
 
 .sigma-expand {
@@ -31,21 +39,16 @@ canvas#sigma_bg_1 {
 }
 
 #attributepane {
-   	display: block;	
-	display: none;
-    position:absolute;
+   	display: none;
     height:auto;
-    bottom:0;
-    top:50%;
-    right:0;
-	width: 240px;
+
 	background-color: #fff;
 	margin: 0;
 	word-wrap: break-word;
 	background-color:rgba(255,255,255,0.8);
-	border: 1px solid #ccc;
 	padding: 0px 18px 0px 18px;	
 	z-index: 1;
+	width: 80%;
 }
 
 
@@ -107,7 +110,8 @@ float: left;
 
 #attributepane .nodeattributes {
 	display:block;
-	height:85%;
+	max-width: 13em;
+	max-height: 400px;
 	overflow-y: scroll;
 	overflow-x: hidden;
 	border-bottom:1px solid #999;
@@ -152,13 +156,12 @@ font-size:14px;
 
 .left-close {
 background-image: url('../images/fancybox_sprite.png');
-margin-left:-37px;
+float: right;
 z-index:99999;
 cursor: pointer;
 padding-left:31px;
 line-height:36px;
 background-repeat: no-repeat;
-margin-bottom:25px;
 font-weight: bold;
 font-size:14px;
 
@@ -331,16 +334,16 @@ margin-left: 5px;
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	width: 240px;
-	height: 80px;
 	position: relative;
-	right: 5%;
+	left: 90%;
 	bottom: 5%;
+width: 60px;
 }
-#zoom .div {
+.z {
+	width: 16px;
 	display: inline-block;
+	cursor:pointer;
 }
-
 .line {
 	font-size: 12px;
 	color: #000;
@@ -428,9 +431,35 @@ display: none;
 }
 #websites li::before {
   content: "\2588 ";  /* Add content: \2022 is the CSS Code/unicode for a square block */
-  color: red; /* Change the color */
   font-weight: bold; /* If you want it to be bold */
   display: inline-block; /* Needed to add space between the bullet and the text */ 
   width: 1em; /* Also needed for space (tweak if needed) */
   margin-left: -1em; /* Also needed for space (tweak if needed) */
 }
+.ui-all {
+	margin-left: 10px;
+}
+/* https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/ */
+.HolyGrail,
+.HolyGrail-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.HolyGrail-nav {
+  order: -1;
+}
+
+@media (min-width: 768px) {
+  .HolyGrail-body {
+    flex-direction: row;
+    flex: 1;
+  }
+  .HolyGrail-content {
+    flex: 1;
+  }
+  .HolyGrail-nav, .HolyGrail-ads {
+    /* 12em is the width of the columns */
+    flex: 0 0 12em;
+  }
+}
diff --git a/html/observatory/images/fancybox_loading.gif b/html/observatory/images/fancybox_loading.gif
diff --git a/html/observatory/images/sprite.png b/html/observatory/images/sprite.png
diff --git a/html/observatory/index.html b/html/observatory/index.html
@@ -2,9 +2,9 @@
     <!-- forked from https://github.com/oxfordinternetinstitute/InteractiveVis/tree/gh-pages -->
 <head>
 <meta charset="utf-8">
-<meta http-equiv="refresh" content="0;URL=netindex.html?config=config_augov.json">
+<meta http-equiv="refresh" content="0;URL=netindex.html?config=config_augov.json#www.australia.gov.au">
 </head>
 <body>
-This page has moved. <a href="netindex.html?config=config_augov.json">Please click here if you are not automatically redirected to the new page.</a>
+This page has moved. <a href="netindex.html?config=config_augov.json#www.australia.gov.au">Please click here if you are not automatically redirected to the new page.</a>
 </body>
 </html>
diff --git a/html/observatory/js/fancybox/jquery.fancybox.css b/html/observatory/js/fancybox/jquery.fancybox.css