settings display and UI renovation

atoms/index.css

@@ -13,6 +13,7 @@ body {
 	font-family: Oswald;
 	font-size: 100%;
 	margin: 0;
+	cursor: default;
 
 	-webkit-transition: background-image ease-in 0.5s;
 	-moz-transition: background-image ease-in 0.5s;
@@ -66,7 +67,16 @@ img {
 }
 
 .desc {
-	font-size: 150%;
+	font-size:110%;
+	display: inline-block;
+	margin-right: 3%;
+	margin-top: 7.5%;
+}
+
+.setting {
+	display: flex;
+	position: relative;
+	margin: 5%;
 }
 
 .option {
@@ -75,11 +85,27 @@ img {
 	font-size: 130%;
 }
 
+.selection {
+	padding: 4px;
+	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
+
+	-webkit-transition: box-shadow 0.3s ease, color 0.7s ease;
+	-moz-transition: box-shadow 0.3s ease, color 0.7s ease;
+	-ms-transition: box-shadow 0.3s ease, color 0.7s ease; 
+	transition: box-shadow 0.3s ease, color 0.7s ease;
+}
+
+.selection:hover {
+	cursor: pointer;
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+}
+
 .dropdown {
 	display: none;
 	opacity: 0;
 	position: absolute;
 	box-shadow: 4px 4px 3px #444;
+	z-index: 50;
 
 	-webkit-transition: opacity 0.3s ease;  
 	-moz-transition: opacity 0.3s ease; 
@@ -94,12 +120,11 @@ img {
     padding: 12px 16px;
     text-decoration: none;
     display: block;
-    z-index:50;
 
-    -webkit-transition: background-color 0.3s ease;  
+    -webkit-transition: background-color 0.3s ease, opacity 0.3s ease;  
-	-moz-transition: background-color 0.3s ease; 
+	-moz-transition: background-color 0.3s ease, opacity 0.3s ease; 
-	-ms-transition: background-color 0.3s ease;
+	-ms-transition: background-color 0.3s ease, opacity 0.3s ease;
-	transition: background-color 0.3s ease; 
+	transition: background-color 0.3s ease, opacity 0.3s ease; 
 }
 
 .dropdown p:hover {
@@ -122,6 +147,7 @@ img {
 	background-color: #b3daff;
 	color: rgba(0,0,0,0);
 	box-shadow: 2px 2px 5px 3px #333;
+	cursor: pointer;
 
 	-webkit-transition: transform 0.2s ease, margin 0.3s ease, color 0.4s ease;  
 	-moz-transition: transform 0.2s ease, margin 0.3s ease, color 0.4s ease; 
@@ -161,7 +187,8 @@ img {
 }
 .settings {
 	margin-left: -40%;
-	width: 13%;
+	width: 30%;
+
 }
 
 .fa {
@@ -169,6 +196,8 @@ img {
 	font-size: 250% !important;
 	color: #585858;
 	margin: 0 1% 3% 1%;
+	cursor: pointer;
+
 	-webkit-transition: color 0.5s ease;
 	-moz-transition: color 0.5s ease;
 	-ms-transition: color 0.5s ease; 
@@ -232,6 +261,62 @@ img {
 	text-shadow: 4px 4px 5px #444;
 }
 
+.help {
+	padding: 1px 1px 5px 2px;
+	margin-right: 3%;
+	margin-top: 7%;
+	text-align:center;
+	width: 20px;
+	height: 20px;
+	box-shadow:inset 0 0 0 99999px rgba(0,0,0,0.2);
+
+	-webkit-transition: box-shadow 0.3s ease;
+	-moz-transition: box-shadow 0.3s ease;
+	-ms-transition: box-shadow 0.3s ease; 
+	transition: box-shadow 0.3s ease;
+}
+
+.help:hover {
+	box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.1);
+}
+
+.helptab {
+	position: absolute;
+	display: none;
+	opacity: 0;
+	margin-top: 16%;
+	margin-left: -9%;
+	border-left: 10px solid transparent;
+	border-right: 10px solid transparent;
+	border-bottom: 15px solid #fefefe;
+
+	-webkit-filter: drop-shadow(4px 0px 3px #444);
+	filter: drop-shadow(4px 0px 3px #444);
+
+	-webkit-transition: opacity 0.3s ease;  
+	-moz-transition: opacity 0.3s ease; 
+	-ms-transition: opacity 0.3s ease;
+	transition: opacity 0.3s ease; 
+}
+
+.helptext {
+	position: absolute;
+	display: none;
+	opacity: 0;
+	border-radius: 7px;
+	margin-top: 20%;
+	margin-left: -13%;
+	padding: 5px;
+	font-size: 90%;
+	background-color: #fefefe;
+	box-shadow: 4px 4px 3px #444;
+
+	-webkit-transition: opacity 0.3s ease;  
+	-moz-transition: opacity 0.3s ease; 
+	-ms-transition: opacity 0.3s ease;
+	transition: opacity 0.3s ease; 
+}
+
 .about {
 	position: absolute;
 	bottom: 3%;

atoms/index.html

@@ -14,14 +14,37 @@
 			<i class="fa fa-close"></i>
 			<div class="legendholder"></div>
 		</div>
-
 		<div class="pulltab second"><p class="tDesc">Settings</p></div>
 		<div class="sidebar settings">
 			<i class="fa fa-close"></i>
-			<div><p class="desc" title="Change the Color Scheme of the site">Background Theme</p><div class=option id="theme"></div></div>
+			<div class="setting">
-			<div><p class="desc" title="Change what color represents in the Periodic Table and the atoms">Display Theme</p><div class=option id="displayTheme"></div></div>
+				<div class="help">?</div>
-			<div><p class="desc" title="Style of Electron Configuration">Electron Configuration</p><div class=option id="elecConf"></div></div>
+				<div class="helptab"></div>
-			<div><p class="desc" title="Units to display Temperatures">Units</p><div class=option id="unit"></div></div>
+				<div class="helptext">Change the color scheme</div>
+				<p class="desc">Background Theme:</p>
+				<div class=option id="theme"></div>
+			</div>
+			<div class="setting">
+				<div class="help">?</div>
+				<div class="helptab"></div>
+				<div class="helptext">Change the colors of the Periodic Table and the Atoms</div>
+				<p class="desc">Display Theme:</p>
+				<div class=option id="displayTheme"></div>
+			</div>
+			<div class="setting">
+				<div class="help">?</div>
+				<div class="helptab"></div>
+				<div class="helptext">Change the style of electron configuration</div>
+				<p class="desc">Electron Configuration:</p>
+				<div class=option id="elecConf"></div>
+			</div>
+			<div class="setting">
+				<div class="help">?</div>
+				<div class="helptab"></div>
+				<div class="helptext">Change the units for temperature</div>
+				<p class="desc">Units:</p>
+				<div class=option id="unit"></div>
+			</div>
 			<div class='about'>
 				<p>Developed by Kenneth Jao and Yaman Qalieh</p>
 				<a class="github" target="_blank" href="https://github.com/ksjdragon/atoms">Github</a>
@@ -30,7 +53,7 @@
 		
 		<div class="workspace"></div>
 	</body>
-	<script type='text/javascript' > 
+	<script type='text/javascript'> 
 		var settings = {};
 		var info;
 		var options = ["theme","displayTheme","elecConf","unit"];
@@ -66,7 +89,7 @@
 		var themeChart = {
 		"pulltab": {'light': '#B3DAFF','dark': '#F33333'},
 		"sidebar": {'light':'#E6F5FF','dark':'#FF5858'} 
-	};
+		};
 	</script>
 
 	<script src="./js/main.js"></script>

atoms/js/buttons.js

@@ -9,4 +9,26 @@ get("fa")[1].onclick = function(){
 
 function open(dom) {
 	dom.style.marginLeft = "0%";
+}
+
+for(var i = 0; i < options.length; i++) {
+	get("help")[i].onclick = function() {
+		var index = options.indexOf(this.parentNode.childNodes[9].id);
+		get("helptext")[index].style.display = "block";
+		get("helptab")[index].style.display = "block";
+		setTimeout(function() {
+			get("helptab")[index].style.opacity = "1";
+			get("helptext")[index].style.opacity = "1";
+		}, 1)
+	}
+
+	get("help")[i].onmouseleave = function() {
+		var index = options.indexOf(this.parentNode.childNodes[9].id);
+		get("helptab")[index].style.opacity = "0";
+		setTimeout(function(){get("helptext")[index].style.opacity = "0";},100);
+		setTimeout(function() {
+			get("helptab")[index].style.display = "none";
+			get("helptext")[index].style.display = "none";
+		}, 300);
+	}
 }

atoms/js/main.js

@@ -26,108 +26,6 @@ function update() {
 	legendChange(dispTheme);
 }
 
-function createTable() {
-    var tbl = document.createElement('table');
-    tbl.style.border = "1px hidden";
-    tbl.className = "normal";
-
-    // Creates table width j, height i
-    for(var i = 0; i < 7; i++) {
-        var tr = tbl.insertRow();
-        for(var j = 0; j < 18; j++) {
-            td = tr.insertCell();
-            td.className = "periodictable";
-        }
-    }
-   	get("sidebar")[0].appendChild(tbl);
-
-   	// Repeat of process above for Lanthanides and Actinides
-   	tbl = document.createElement('table');
-    tbl.className = "extension";
-    for(var i = 0; i < 2; i++) {
-        var tr = tbl.insertRow();
-        for(var j = 0; j < 15; j++) {
-            var td = tr.insertCell();
-            td.className = "periodictable";
-        }
-    }
-   	get("sidebar")[0].appendChild(tbl);
-
-   	// Creates text for the periodic table
-    cells = get("td");
-    for(var i = 0;i < elementCount;i++) {
-    	ele = document.createElement("p");
-    	text = document.createTextNode(i+1); // i+1 to offset 0
-    	ele.appendChild(text);
-    	cells[info["location"][i]].appendChild(ele);
-    	text = document.createTextNode(info["shorthand"][i]);
-    	cells[info["location"][i]].appendChild(text);
-    	cells[info["location"][i]].className = cells[info["location"][i]].className +" atom"; // Adds class to prevent hover animation on blank cells
-    }
-}
-
-/* function keyLegend(theme) {
- 	// Create Table
- 	var tbl = document.createElement('table');
- 	// Class for CSS
- 	tbl.className = "key";
- 	// Get theme
- 	var theme = settings["displayTheme"]; 
-}*/
-
-function createGradientLegend() {
-	// Create Table element
-	var tbl = document.createElement('table');
-	
-	// Adds Class for styling
-	tbl.className = "legend";
-
-	// Gets theme then makes vars for hexes so that repeated table access not necessary
-	var theme = settings["displayTheme"];
-
-	// Filter out non-gradient layouts
-	if (colorChart[theme].length > 2) {
-		//keyLegend(theme);
-		return;
-	}
-
-	var color1 = colorChart[theme][0];
-	var color2 = colorChart[theme][1];
-
-	// Creates a gradient of 101 values wide (j) for good transition
-    var tr = tbl.insertRow();
-    for(var j = 0; j <= 1; j += 0.01) {
-        var td = tr.insertCell();
-        td.className = "legendcell";
-        td.style.backgroundColor = gradientColor(color1, color2 , j);
-    }
-
-    // Adds table to key area
-    get("legendholder").appendChild(tbl);
-}
-
-function getRanges() {
-	// Format of ranges is [Min, Max, Range]
-	for(var i = 1; i < choices[1].length; i++) { // Possible data types are options except for category
-		var option = choices[1][i]; 
-		if(i == 7 || i == 8) {
-			ranges[option] = {};
-			for(var j = 0; j < 3; j++) { // Units for temperatures
-				var unit = choices[3][j];
-				var min = Math.min.apply(null,info[option][unit]);
-				var max = Math.max.apply(null,info[option][unit]);
-				var range = max - min;
-				ranges[option][unit] = [min,max,range];
-			}		
-		} else {
-			var min = Math.min.apply(null,info[option]);
-			var max = Math.max.apply(null,info[option]);
-			var range = max - min;
-			ranges[option] = [min,max,range];
-		}			
-	}
-}
-
 function get(name) {
 	// Condensed format for document.getX
 	var elements = [];