From 376a2459dc495b3225670184447e55db8a1418d3 Mon Sep 17 00:00:00 2001 From: Alex Garcia Date: Thu, 8 Nov 2018 22:11:25 -0700 Subject: [PATCH] Completed main app page, changed app dimensions. --- src/index.html | 34 +++-- src/index.js | 4 +- src/scripts/main.js | 15 +-- src/styles/main.css | 302 ++++++++------------------------------------ 4 files changed, 70 insertions(+), 285 deletions(-) diff --git a/src/index.html b/src/index.html index bc0a522..22020aa 100644 --- a/src/index.html +++ b/src/index.html @@ -8,35 +8,33 @@ -
+

Concept

ushin – univeral shared information – is a language of compassion.

-
+
-
+

Meaning Shapes

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. :)

-
-

Hover over shapes to see what they mean.

+
+
+

Hover over shapes to see what they mean.

+
-
- - - - - - - - -
- -
-

The Semantic Screen

+
+ + + + + + + +
diff --git a/src/index.js b/src/index.js index 6749fb5..08275b0 100644 --- 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 index e14b94f..177a1dd 100644 --- 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 = "MERITS:
User valuations of how well the focus meets stated needs...";hde();} -// function aOver() {document.getElementById("sm").innerHTML = "ACTIONS:
Proposed and current activities prior to completion or rejection, to-dos, tasks...";hde();} -// function pOver() {document.getElementById("sm").innerHTML = "PEOPLE:
Individuals and their chosen groups, identities, communities, companies...";hde();} -// function fOver() {document.getElementById("sm").innerHTML = "FACTS:
Dates, places, things, documents, experiences, accomplishments, completed or rejected actions...";hde();} -// function oOver() {document.getElementById("sm").innerHTML = "THOUGHTS:
Concepts, beliefs, opinions, analyses, ideas, concerns...";hde();} -// function eOver() {document.getElementById("sm").innerHTML = "FEELINGS:
Sentiments, emotions, states of mind...";hde();} -// function nOver() {document.getElementById("sm").innerHTML = "NEEDS:
Physical, emotional, social, or spiritual necessities for self, group & others...";hde();} -// function tOver() {document.getElementById("sm").innerHTML = "TOPICS:
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("

Hover over shapes to see what they mean.

").css("color", "#9ea"); }); })(jQuery); diff --git a/src/styles/main.css b/src/styles/main.css index 7914c3d..338857d 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -1,343 +1,141 @@ html { - background-color: #755f67; + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; } +html { + background-color: #755f67; +} body { - margin: 30px 30px; + margin: 10px 10px; } header { background-color: #fff5ff; - padding: 10px 10px; -} - -.rounded-border { - border-radius: 2px; - border: solid 1px #fff5ff; } main { background-color: #727c73; - padding: 10px 10px; -} - -.r -{ - font-size:18px; - font-weight:700; -} - -.rr -{ - font-size:16px; -} - -.just -{ - text-align:justify; - margin:auto; -} - -.box -{ - /*width:700px;*/ - /*right:50%;*/ - background-color:#fff5ff; - border-radius:2px; - color:#000; - /*display:0;*/ - /*-webkit-flex-direction:row-reverse;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - text-align:justify; - /*font-size:14px;*/ - /* margin:10px; */ - margin-bottom: 10px; - padding:10px; -} - -.con -{ - /*width:700px;*/ - /*right:50%;*/ - color:#fff5ff; - /*border-radius:2px;*/ - /*border:solid 1px #fff5ff;*/ - /*display:0;*/ - /*-webkit-flex-direction:row-reverse;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - text-align:justify; - /*font-size:14px;*/ - /*margin:10px;*/ - /*padding:10px;*/ } -.subcon -{ - /*width:660px;*/ - /*right:50%;*/ - color:#fff5ff; - /*border-radius:2px;*/ - /*border:solid 1px #fff5ff;*/ - /*display:0;*/ - /*-webkit-flex-direction:row-reverse;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - text-align:justify; - /*font-size:14px;*/ - /*margin:10px;*/ - /*padding:10px;*/ -} - -.subbox -{ - /*width:660px;*/ - /*right:50%;*/ - background-color:#fff5ff; - /*border-radius:2px;*/ - color:#000; - /*display:0;*/ - /*-webkit-flex-direction:row-reverse;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - text-align:justify; - /*font-size:14px;*/ - /*margin:10px;*/ - /*padding:10px;*/ -} - -.subsubbox -{ - /*width:640px;*/ - /*right:50%;*/ - background-color:#fff5ff; - /*border-radius:2px;*/ - color:#000; - /*display:0;*/ - /*-webkit-flex-direction:row-reverse;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - text-align:justify; - /*font-size:14px;*/ - /*margin:10px;*/ - /*padding:10px;*/ -} - -.j -{ - text-align:justify; +.rounded-border { + border-radius: 5px; + border: solid 1px #fff5ff; } -#sm -{ - top:20px; - height:70px; - z-index:10; - -webkit-transition:all .5s; +.default-padding { + padding: 10px 10px; } -.smlabel -{ - color:#9ea; - /*border-radius:5px;*/ - /*border:solid 1px #9ea;*/ - text-align:center; - /*font-size:18px;*/ - position:relative; - top:50px; - z-index:1; - display:block; - /*margin:10px;*/ - /*padding:10px;*/ +.shape-color { + color: #9ea; + border-color: #9ea; } -#sectionbox -{ - background-color:#fff5ff; - /*width:750px;*/ - /*border-radius:4px;*/ - /*box-shadow:5px 5px 5px #222;*/ - color:#000; - /*margin:20px;*/ - /*padding:20px;*/ +.meaning-color { + color: #fff5ff; + border-color: #fff5ff; } -.section -{ - /*width:100px;*/ - /*height:120px;*/ - background-color:#445044; - /*border-radius:2px;*/ - color:#FFF; - /*-webkit-flex-direction:row-reverse;*/ - /*display:inline-flex;*/ - /*flex-direction:column;*/ - /*overflow:auto;*/ - /*margin:10px;*/ - /*padding:10px;*/ +.bottom-margin { + margin-bottom: 10px; } -.section:hover +h1, h2, h3, h4, h5, h6, p { - background-color:#232; - text-decoration:none; - color:#FFF; + font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; + margin: 2px; } -.hov -{ - text-align:center; - color:#FFF; - -webkit-transition:all .5s; - -webkit-filter:none; - /*padding:4px;*/ +#shape-description-area { + min-height: 4.5rem; + width: 100%; + display: table; } - -.hov:hover -{ - -webkit-filter:hue-rotate(180deg); - filter:hue-rotate(180deg); +#shape-description-area #shape-description { + display: table-cell; + vertical-align: middle; + text-align: center; } -#semol -{ - /*width:700px;*/ - /*right:50%;*/ - color:#fff5ff; - border-radius:2px; - border:solid 1px #fff5ff; - background-color:#727c73; - /*margin:10px;*/ - padding:10px; +#shape-area { + position: relative; + margin: 0 auto; + width: 400px; + height: 300px; } -#sem -{ - margin: 0 auto; - position:relative; - width:400px; - height:300px; +#shape-merits { + position: absolute; + left: 150px; + top: 18px; + width: 100px; + height: 100px; } -#merits -{ - position:absolute; - left:150px; - top:18px; - width:100px; - height:100px; - background:url(../images/merits.png); - background-size:cover; -} - -#actions +#shape-actions { position:absolute; right:20px; top:120px; width:80px; height:70px; - background:url(../images/actions.png); - background-size:cover; } -#people +#shape-people { position:absolute; right:50px; top:40px; width:70px; height:75px; - background:url(../images/people.png); - background-size:cover; } -#topics +#shape-topics { position:absolute; right:80px; top:200px; width:70px; height:75px; - background:url(../images/topics.png); - background-size:cover; } -#needs +#shape-needs { position:absolute; left:160px; top:220px; width:80px; height:60px; - background:url(../images/needs.png); - background-size:cover; } -#thoughts +#shape-thoughts { position:absolute; left:21px; top:121px; width:80px; height:70px; - background:url(../images/thoughts.png); - background-size:cover; } -#facts +#shape-facts { position:absolute; left:50px; top:40px; width:70px; height:75px; - background:url(../images/facts.png); - background-size:cover; } -#feelings +#shape-feelings { position:absolute; left:80px; top:200px; width:70px; height:75px; - background:url(../images/feelings.png); - background-size:cover; -} - -.bttn -{ - color:#fff; - background-color:#71967D; - border-radius:4px; - display:flex; - text-decoration:none; - margin:10px; - padding:5px; -} - -.bttn:hover -{ - background-color:#343; - text-decoration:none; - color:#fff; -} - -.big -{ - font-size:24px; - font-weight:700; } - -.just:after -{ - content:""; - display:inline-block; - width:100%; -} -