settings display and UI renovation
This commit is contained in:
ksjdragon
parent
e823566773
commit
bed99eebb8
@ -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%;
|
||||
|
||||
@ -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><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><p class="desc" title="Style of Electron Configuration">Electron Configuration</p><div class=option id="elecConf"></div></div>
|
||||
<div><p class="desc" title="Units to display Temperatures">Units</p><div class=option id="unit"></div></div>
|
||||
<div class="setting">
|
||||
<div class="help">?</div>
|
||||
<div class="helptab"></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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
102
atoms/js/main.js
102
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 = [];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user