Merge pull request #7 from cinemascience/looknfeel

Look and feel
cinemascience · Apr 15, 2022 · 8648ca8 · 8648ca8
2 parents 3aa987f + 1e20a88
commit 8648ca8
Show file tree

Hide file tree

Showing 18 changed files with 328 additions and 266 deletions.
diff --git a/cinema/lib/2.2/common.css b/cinema/lib/2.2/common.css
@@ -9,9 +9,11 @@ div.container {
 
 body {
     background-color: #f9f9f9;
+    margin: 0;
 }
 
 header, footer {
+    font-weight: bold;
     padding-left:   1px;
     padding-right:  1px;
     padding-top:    10px;
@@ -22,8 +24,47 @@ header, footer {
     text-align: center;
 }
 
+footer {
+    padding-top:    2px;
+    padding-bottom: 2px;
+}
+
 #header h2 {
 	display: inline-block;
-	margin: initial;
 }
 
+#resultsArea {
+	float: left;
+	left: 0px;
+	right: 0px;
+	width: 100%;
+	padding: 10px;
+	background-color: white;
+}
+
+.imageArea {
+	float: left;
+	position: relative;
+	width: 75%;
+}
+
+.sliderArea {
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1em;
+    font-family: "Geneva";
+    font-align: left;
+	float: left;
+	position: relative;
+	width: 20%;
+}
+
+.cinemaImage {
+	float: left;
+    border: 1px solid black;
+}
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/cinema/lib/2.2/img/cinema_logo_filmreel_named_100px_white.png b/cinema/lib/2.2/img/cinema_logo_filmreel_named_100px_white.png
diff --git a/cinema/simple/2.2/images/empty.png → cinema/lib/2.2/img/empty.png b/cinema/simple/2.2/images/empty.png → cinema/lib/2.2/img/empty.png
diff --git a/cinema/lib/2.2/view.css b/cinema/lib/2.2/view.css
diff --git a/cinema/view/2.2/css/view.css b/cinema/view/2.2/css/view.css
diff --git a/cinema/view/2.2/images/empty.png b/cinema/view/2.2/images/empty.png
diff --git a/cinema/view/2.2/main.js b/cinema/view/2.2/main.js
@@ -1,4 +1,4 @@
-var emptyImage   = 'cinema/view/2.2/images/empty.png';
+var emptyImage   = 'cinema/lib/2.2/img/empty.png';
 var databaseList = 'cinema/view/2.2/databases.json';
 var databaseListType = 'json'
 var AssetName = "FILE"
@@ -186,7 +186,6 @@ function optionSelected()
     dataSets.forEach(function(item, index) {
         q.defer(d3.csv, item + "/data.csv");
     });
-
     q.awaitAll(function(error, results) {
         var values = {};
         results.forEach(function(item, index) {
@@ -222,7 +221,7 @@ function optionSelected()
 
     function updateResults() 
     {
-        // Called when sliders are moced
+        // Called when sliders are moved
         dataResults.forEach(function(result, index) {
             var imgSrcKey = getLookupKey(result.keys, query);
             if (imgSrcKey in result.lookup) {
@@ -296,6 +295,7 @@ function optionSelected()
                     .attr("id", "image_div_" + index.toString())
                     .style("width","" + imageSizeSlider.node().value + "%")
                     .style("text-align","center")
+                    .style("margin","5px")
                     .text(datasetNamestoLoad[index])
 
                 .append("img")

diff --git a/cinema_explorer.html b/cinema_explorer.html
@@ -84,7 +84,7 @@
 <body>
 	<div id="top">
 		<div id="header">
-			<h1>Cinema:Explorer</h1>
+			<h3>Cinema:Explorer</h3>
 			<!--Controls to select and load databases-->
 			<div id="databaseControls">
 				<span id="databaseLabel">Select Database:</span>