Completed main app page, changed app dimensions.

USHIN-Inc · Nov 9, 2018 · 376a245 · 376a245
1 parent bcf8dd0
commit 376a245
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 285 deletions.
diff --git a/src/index.html b/src/index.html
@@ -8,35 +8,33 @@
 </head>
 <body>
 
-<header class="rounded-border">
+<header class="rounded-border default-padding bottom-margin">
 	<h4>Concept</h4>
 	<p>ushin – univeral shared information – is a language of compassion.</p>
 </header>
 
-<main class="rounded-border">
+<main class="rounded-border default-padding">
 
-	<div class="rounded-border">
+	<div class="rounded-border default-padding bottom-margin meaning-color">
 		<h4>Meaning Shapes</h4>
 		<p>Eight symbols, each in their place, help us create clear, compassionate communication. Though people may use the categories creatively, the meaning shapes help convey a shared sense that everyone understands, not unlike an emoticon. :)</p>
 	</div>
 
-	<div>
-		<p>Hover over shapes to see what they mean.</p>
+	<div class="rounded-border default-padding shape-color" id="shape-description-area">
+		<div id="shape-description">
+			<h4>Hover over shapes to see what they mean.</h4>
+		</div>
 	</div>
 
-	<div>
-		<img class="shape" data-message="<b>ACTIONS:</b><br />Proposed and current activities prior to completion or rejection, to-dos, tasks..." src="images/actions.png">
-		<img class="shape" data-message="<b>FACTS:</b><br />Dates, places, things, documents, experiences, accomplishments, completed or rejected actions..." src="images/facts.png">
-		<img class="shape" data-message="<b>FEELINGS:</b><br />Sentiments, emotions, states of mind..." src="images/feelings.png">
-		<img class="shape" data-message="<b>MERITS:</b><br />User valuations of how well the focus meets stated needs..." src="images/merits.png">
-		<img class="shape" data-message="<b>NEEDS:</b><br />Physical, emotional, social, or spiritual necessities for self, group & others..." src="images/needs.png">
-		<img class="shape" data-message="<b>PEOPLE:</b><br />Individuals and their chosen groups, identities, communities, companies..." src="images/people.png">
-		<img class="shape" data-message="<b>THOUGHTS:</b><br />Concepts, beliefs, opinions, analyses,  ideas, concerns..." src="images/thoughts.png">
-		<img class="shape" data-message="<b>TOPICS:</b><br />Projects, issues, subjects, ideas, matters, protocols, transactions..." src="images/topics.png">
-	</div>
-
-	<div>
-		<p><a href="http://ushin.net/glossary">The Semantic Screen</a></p>
+	<div id="shape-area">
+		<img id="shape-actions" class="shape actions" data-message="<h4>ACTIONS:</h4><p>Proposed and current activities prior to completion or rejection, to-dos, tasks...</p>" src="images/actions.png">
+		<img id="shape-facts" class="shape facts" data-message="<h4>FACTS:</h4><p>Dates, places, things, documents, experiences, accomplishments, completed or rejected actions...</p>" src="images/facts.png">
+		<img id="shape-feelings" class="shape feelings" data-message="<h4>FEELINGS:</h4><p>Sentiments, emotions, states of mind...</p>" src="images/feelings.png">
+		<img id="shape-merits" class="shape merits" data-message="<h4>MERITS:</h4><p>User valuations of how well the focus meets stated needs...</p>" src="images/merits.png">
+		<img id="shape-needs" class="shape needs" data-message="<h4>NEEDS:</h4><p>Physical, emotional, social, or spiritual necessities for self, group & others...</p>" src="images/needs.png">
+		<img id="shape-people" class="shape people" data-message="<h4>PEOPLE:</h4><p>Individuals and their chosen groups, identities, communities, companies...</p>" src="images/people.png">
+		<img id="shape-thoughts" class="shape thoughts" data-message="<h4>THOUGHTS:</h4><p>Concepts, beliefs, opinions, analyses,  ideas, concerns...</p>" src="images/thoughts.png">
+		<img id="shape-topics" class="shape topics" data-message="<h4>TOPICS:</h4><p>Projects, issues, subjects, ideas, matters, protocols, transactions...</p>" src="images/topics.png">
 	</div>
 
 </main>

diff --git a/src/index.js b/src/index.js
@@ -12,8 +12,8 @@ let mainWindow;
 const createWindow = () => {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    minWidth: 1024,
-    minHeight: 768
+    minWidth: 800,
+    minHeight: 600
   });
 
   // and load the index.html of the app.

diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1,18 +1,7 @@
-// 	function hde() {document.getElementById("sm").style.color = "#fbd";}
-// 	function out() {document.getElementById("sm").innerHTML = "Hover over shapes to see what they mean.";document.getElementById("sm").style.color = "#9ea";}
-// 	function mOver() {document.getElementById("sm").innerHTML = "<b>MERITS:</b><br />User valuations of how well the focus meets stated needs...";hde();}
-// 	function aOver() {document.getElementById("sm").innerHTML = "<b>ACTIONS:</b><br />Proposed and current activities prior to completion or rejection, to-dos, tasks...";hde();}
-// 	function pOver() {document.getElementById("sm").innerHTML = "<b>PEOPLE:</b><br />Individuals and their chosen groups, identities, communities, companies...";hde();}
-// 	function fOver() {document.getElementById("sm").innerHTML = "<b>FACTS:</b><br />Dates, places, things, documents, experiences, accomplishments, completed or rejected actions...";hde();}
-// 	function oOver() {document.getElementById("sm").innerHTML = "<b>THOUGHTS:</b><br />Concepts, beliefs, opinions, analyses,  ideas, concerns...";hde();}
-// 	function eOver() {document.getElementById("sm").innerHTML = "<b>FEELINGS:</b><br />Sentiments, emotions, states of mind...";hde();}
-// 	function nOver() {document.getElementById("sm").innerHTML = "<b>NEEDS:</b><br />Physical, emotional, social, or spiritual necessities for self, group & others...";hde();}
-// 	function tOver() {document.getElementById("sm").innerHTML = "<b>TOPICS:</b><br />Projects, issues, subjects, ideas, matters, protocols, transactions...";hde();}
-
 (function($){
 	$('.shape').hover(function(e){
-		console.log(e);
+		$("#shape-description").html(e.target.dataset.message).css("color", "#fbd");
 	}, function(e){
-		console.log(e);
+		$("#shape-description").html("<h4>Hover over shapes to see what they mean.</h4>").css("color", "#9ea");
 	});
 })(jQuery);