Skip to content

Commit 9b70f18

Browse files
author
Jessica Lord
committed
Merge pull request electron#99 from electron/new-starter-pages
[WIP] New Starter Page
2 parents c29ce4d + 18cd16b commit 9b70f18

File tree

21 files changed

+433
-169
lines changed

21 files changed

+433
-169
lines changed

‎assets/css/about.css

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
/* Welcome ------------------------ */
2+
3+
.about {
4+
--about-space: 4rem;
5+
6+
position: absolute;
7+
display: flex;
8+
top: 0;
9+
left: 0;
10+
right: 0;
11+
bottom: 0;
12+
z-index: 1;
13+
overflow-x: hidden;
14+
overflow-y: auto;
15+
padding: 0;
16+
background-color: hsl(0,0%,98%);
17+
pointer-events: none;
18+
visibility: hidden;
19+
opacity: 0;
20+
transform: scale(1.1);
21+
transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
22+
}
23+
.about.show {
24+
pointer-events: auto;
25+
visibility: visible;
26+
opacity: 1;
27+
transform: scale(1);
28+
transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;
29+
}
30+
31+
.about-wrapper {
32+
margin: auto;
33+
}
34+
35+
.about-header {
36+
padding: var(--about-space) 0;
37+
border-bottom: 1px solid hsl(0,0%,88%);
38+
}
39+
40+
.about-logo {
41+
display: block;
42+
margin: 0 auto;
43+
width: 320px; /* TODO: Adjust asset to this size */
44+
max-width: 100%;
45+
}
46+
47+
.about-sections {
48+
max-width: 680px;
49+
padding: 0 var(--about-space);
50+
}
51+
52+
.about-section {
53+
margin: var(--about-space) 0;
54+
}
55+
56+
.about h2 {
57+
text-align: center;
58+
margin: 0 0 1em 0;
59+
font-size: 1.5em;
60+
}
61+
62+
.about .about-code h2 {
63+
color: hsl(330, 65%, 55%);
64+
}
65+
66+
.about .play-along h2 {
67+
color: hsl(222, 53%, 50%);
68+
}
69+
70+
.about-button {
71+
display: block;
72+
margin: 0 auto;
73+
padding: .4em 1.2em;
74+
font: inherit;
75+
font-size: 1.6em;
76+
color: inherit;
77+
border: 2px solid;
78+
border-radius: 4px;
79+
background-color: transparent;
80+
}
81+
.about-button:focus {
82+
outline: none;
83+
border-color: hsl(0,0%,88%);
84+
}
85+
86+
footer.about-section {
87+
text-align: center;
88+
}
89+
90+
:root {
91+
--rainbow-button-width: 180px;
92+
--rainbow-button-height: 60px;
93+
--rainbow-color-1: hsl(116, 30%, 36%);
94+
--rainbow-color-2: hsl(194, 60%, 36%);
95+
--rainbow-color-3: hsl(222, 53%, 50%);
96+
--rainbow-color-4: hsl(285, 47%, 46%);
97+
--rainbow-color-5: hsl(330, 65%, 48%);
98+
--rainbow-color-6: hsl( 36, 77%, 34%);
99+
}
100+
101+
.rainbow-button-wrapper {
102+
display: inline-block;
103+
width: var(--rainbow-button-width);
104+
height: var(--rainbow-button-height);
105+
position: relative;
106+
overflow: hidden;
107+
border-radius: 4px;
108+
}
109+
110+
.rainbow-button-wrapper:before {
111+
display: block;
112+
position: absolute;
113+
z-index: 2;
114+
top: 0;
115+
left: 0;
116+
width: 1000px;
117+
height: var(--rainbow-button-height);
118+
background: #CCC;
119+
background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 17%, var(--rainbow-color-3) 33%, var(--rainbow-color-4) 50%, var(--rainbow-color-5) 67%, var(--rainbow-color-6) 83%, var(--rainbow-color-1) 100%);
120+
background-position: 600px 0;
121+
transition: all 0.5s;
122+
content: "";
123+
}
124+
125+
.rainbow-button-wrapper button {
126+
display: block;
127+
width: var(--rainbow-button-width);
128+
height: var(--rainbow-button-height);
129+
position: absolute;
130+
z-index: 3;
131+
top: 0;
132+
left: 0;
133+
color: white;
134+
border: none;
135+
cursor: pointer;
136+
}
137+
138+
.rainbow-button-wrapper:hover:before {
139+
background-position: 1400px 0;
140+
}
141+
142+
@media (min-width: 940px) {
143+
.about-header {
144+
align-self: center;
145+
padding: var(--about-space);
146+
border-right: 1px solid hsl(0,0%,88%);
147+
border-bottom: none;
148+
}
149+
.about-wrapper {
150+
display: flex;
151+
}
152+
}

‎assets/css/content.css

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
/* content */
22

3+
.main-content {
4+
visibility: hidden;
5+
opacity: 0;
6+
}
7+
8+
.main-content.show {
9+
visibility: visible;;
10+
opacity: 1;
11+
}
12+
13+
314
.content {
415
flex: 1;
516
position: relative;
@@ -50,31 +61,6 @@
5061
}
5162

5263

53-
/* About */
54-
55-
.content-item.about header img {
56-
display: block;
57-
margin: 2rem auto;
58-
max-width: 100%;
59-
}
60-
61-
.content-item.about h2 {
62-
margin: 0 0 1em 0;
63-
font-size: 1.5em;
64-
}
65-
66-
@media (min-width: 940px) {
67-
.columns {
68-
-webkit-column-count: 2;
69-
-webkit-column-gap: 1.6em;
70-
}
71-
.columns p + h3 {
72-
-webkit-column-break-before: always;
73-
}
74-
}
75-
76-
77-
7864
/* Section */
7965

8066
.content-item > section:first-of-type {

‎assets/css/nav.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
/* Nav */
22

3+
.section-nav {
4+
visibility: hidden;
5+
opacity: 0;
6+
}
7+
8+
.section-nav.show {
9+
visibility: visible;;
10+
opacity: 1;
11+
}
12+
313
.nav {
414
width: 340px;
515
overflow-x: hidden;

‎assets/demo-btns.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
var storage = require('electron-json-storage')
2+
13
var demoBtns = document.querySelectorAll('.js-container-target')
24
// Listen for demo button clicks
35
Array.prototype.forEach.call(demoBtns, function (btn) {
46
btn.addEventListener('click', function (event) {
57
event.target.parentElement.classList.toggle('active')
68

79
// Save currently active demo button in localStorage
8-
storage.set('activeDemoButtonId', event.target.getAttribute('id'))
10+
storage.set('activeDemoButtonId', event.target.getAttribute('id'), function (err) {
11+
if (err) return console.error(err)
12+
})
913
})
1014
})
1115

‎assets/imports.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,9 @@ var links = document.querySelectorAll('link[rel="import"]')
33
Array.prototype.forEach.call(links, function (link) {
44
var template = link.import.querySelector('.task-template')
55
var clone = document.importNode(template.content, true)
6-
document.querySelector('.content').appendChild(clone)
6+
if (link.href.match('about.html')) {
7+
document.querySelector('body').appendChild(clone)
8+
} else {
9+
document.querySelector('.content').appendChild(clone)
10+
}
711
})

‎assets/nav.js

Lines changed: 70 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,81 @@
1-
const storage = require('electron-json-storage')
1+
var storage = require('electron-json-storage')
2+
3+
// Default to the view that was active the last time the app was open
4+
storage.get('activeSectionButtonId', function (err, id) {
5+
if (err) return console.error(err)
6+
7+
if (id && id.length) {
8+
showMainContent()
9+
document.getElementById(id).click()
10+
} else {
11+
activateDefaultSection()
12+
displayAbout()
13+
}
14+
})
215

316
document.body.addEventListener('click', function (event) {
4-
// Ignore clicks that don't have a target view
5-
if (!event.target.dataset.view) return
17+
if (event.target.dataset.section) {
18+
handleSectionTrigger(event)
19+
} else if (event.target.dataset.modal) {
20+
handleModalTrigger(event)
21+
} else if (event.target.classList.contains('modal-hide')) {
22+
hideAllModals()
23+
}
24+
})
625

7-
// Hide currently active button and view
8-
removeClass('is-selected')
9-
removeClass('show')
26+
function handleSectionTrigger (event) {
27+
hideAllSectionsAndDeselectButtons()
1028

1129
// Highlight clicked button and show view
1230
event.target.classList.add('is-selected')
13-
const viewId = event.target.dataset.view + '-view'
14-
document.getElementById(viewId).classList.add('show')
31+
32+
// Display the current section
33+
let sectionId = event.target.dataset.section + '-section'
34+
document.getElementById(sectionId).classList.add('show')
1535

1636
// Save currently active button in localStorage
17-
storage.set('activeSectionButtonId', event.target.getAttribute('id'))
18-
})
37+
let buttonId = event.target.getAttribute('id')
38+
storage.set('activeSectionButtonId', buttonId, function (err) {
39+
if (err) return console.error(err)
40+
})
41+
}
1942

20-
// Default to the view that was active the last time the app was open
21-
storage.get('activeSectionButtonId', function (err, id) {
22-
if (err) return console.error(err)
23-
if (id && id.length) document.getElementById(id).click()
24-
})
43+
function activateDefaultSection () {
44+
document.getElementById('button-windows').click()
45+
}
46+
47+
function showMainContent () {
48+
document.querySelector('.section-nav').classList.add('show')
49+
document.querySelector('.content').classList.add('show')
50+
}
51+
52+
function handleModalTrigger (event) {
53+
hideAllModals()
54+
let modalId = event.target.dataset.modal + '-modal'
55+
console.log('modalId', modalId)
56+
document.getElementById(modalId).classList.add('show')
57+
}
58+
59+
function hideAllModals () {
60+
let modals = document.querySelectorAll('.modal.show')
61+
Array.prototype.forEach.call(modals, function (modal) {
62+
modal.classList.remove('show')
63+
})
64+
showMainContent()
65+
}
66+
67+
function hideAllSectionsAndDeselectButtons () {
68+
let sections = document.querySelectorAll('.content-item.show')
69+
Array.prototype.forEach.call(sections, function (section) {
70+
section.classList.remove('show')
71+
})
72+
73+
let buttons = document.querySelectorAll('.nav-link.is-selected')
74+
Array.prototype.forEach.call(buttons, function (button) {
75+
button.classList.remove('is-selected')
76+
})
77+
}
2578

26-
function removeClass (className) {
27-
let el = document.querySelector('.' + className)
28-
if (el) el.classList.remove(className)
79+
function displayAbout () {
80+
document.querySelector('#about-modal').classList.add('show')
2981
}

0 commit comments

Comments
 (0)