diff --git a/atoms/index.css b/atoms/index.css index 5885d62..8b67d54 100644 --- a/atoms/index.css +++ b/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; - -moz-transition: background-color 0.3s ease; - -ms-transition: background-color 0.3s ease; - transition: background-color 0.3s ease; + -webkit-transition: background-color 0.3s ease, opacity 0.3s ease; + -moz-transition: background-color 0.3s ease, opacity 0.3s ease; + -ms-transition: background-color 0.3s ease, opacity 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%; diff --git a/atoms/index.html b/atoms/index.html index e99e075..162ccd6 100644 --- a/atoms/index.html +++ b/atoms/index.html @@ -14,14 +14,37 @@
-

Settings

-

Background Theme

-

Display Theme

-

Electron Configuration

-

Units

+
+
?
+
+
Change the color scheme
+

Background Theme:

+
+
+
+
?
+
+
Change the colors of the Periodic Table and the Atoms
+

Display Theme:

+
+
+
+
?
+
+
Change the style of electron configuration
+

Electron Configuration:

+
+
+
+
?
+
+
Change the units for temperature
+

Units:

+
+

Developed by Kenneth Jao and Yaman Qalieh

Github @@ -30,7 +53,7 @@
- diff --git a/atoms/js/buttons.js b/atoms/js/buttons.js index a916221..e064afc 100644 --- a/atoms/js/buttons.js +++ b/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); + } } \ No newline at end of file diff --git a/atoms/js/main.js b/atoms/js/main.js index 130bb0f..b4801db 100644 --- a/atoms/js/main.js +++ b/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 = [];