Skip to content

Commit

Permalink
Added notes and solution for Project 5 - Flex Panels Image Gallery
Browse files Browse the repository at this point in the history
  • Loading branch information
@lisaychuang
lisaychuang committed Apr 25, 2018
1 parent 6b0a81d commit 083e95f
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 7 deletions.
65 changes: 60 additions & 5 deletions 05 - Flex Panel Gallery/index-projectnotes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
.panels {
min-height:100vh;
overflow: hidden;
display: flex; /* This defines a flex container */
}

.panel {
Expand All @@ -41,19 +42,50 @@
font-size: 20px;
background-size:cover;
background-position:center;
flex: 1; /* Each panel will evenly distribute the extra space avail in flex container*/
justify-content: center; /* distributes space between and around content items along the main axis of their container. */
align-items: center; /* distributes space between and around flex items along the cross-axis of their container.*/
display: flex; /* nested flex container, stacks items from LEFT to RIGHT by default */
flex-direction: column; /* vertically center flex items */

}


.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
.panel1 { background-image:url(https://images.unsplash.com/photo-1463592177119-bab2a00f3ccb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7d144b56abc418780f8532c44401f042&auto=format&fit=crop&w=1500&q=80); }
.panel2 { background-image:url(https://images.unsplash.com/photo-1483480798629-0a045ab9acdb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=082cdd789edfe8b47c1d51519c9fd74d&auto=format&fit=crop&w=1950&q=80); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1505857231560-ec7df63800e8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3638fb89e1a75e0f300e9a187d6934fa&auto=format&fit=crop&w=1400&q=80); }
.panel4 { background-image:url(https://images.unsplash.com/photo-1484981138541-3d074aa97716?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=809f456e326378d2a814bc660da69ffd&auto=format&fit=crop&w=1950&q=80); }
.panel5 { background-image:url(https://images.unsplash.com/photo-1496850574977-a4607106a874?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f7ccae590c7004d9b8f4ca62f313a71c&auto=format&fit=crop&w=934&q=80); }

/* Flex children for each of the words */
.panel > * {
margin:0;
width: 100%;
transition:transform 0.5s;
flex: 1 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

/* selects all first-child elements inside all elements with .panel class */
.panel > *:first-child {
transform: translateY(-100%); /* Defines a translation, using only the value for the Y-axis */
}

/* when a panel has class .open-active,first-child elements will transition back down on screen */
.panel.open-active > *:first-child {
transform: translateY(0);
}

/* selects all last-child elements inside all elements with .panel class */
.panel > *:last-child {
transform: translateY(100%);
}

/* when a panel has class .open-active, last-child elements will transition back up on screen */
.panel.open-active > *:last-child {
transform: translateY(0);
}

.panel p {
Expand All @@ -66,8 +98,10 @@
font-size: 4em;
}

/* when panels are toggled to OPEN */
.panel.open {
font-size:40px;
flex: 5; /* when a panel is opened, take up 5x as much space in flex container*/
}

</style>
Expand Down Expand Up @@ -103,6 +137,27 @@

<script>

// grab all .panel elements
const panels = document.querySelectorAll('.panel');

function toggleOpen() {
this.classList.toggle('open');
}

// Note we have 2 transitions when a panel is open-active: font-size and flex-grow
// Safari transitionend event.propertyName === flex. Chrome + FF transitionend event.propertyName === flex-grow
function toggleActive(e) {
if(e.propertyName.includes('flex')) {
this.classList.toggle('open-active')
}
}

// add EventListener for mouse click event to each .panel element
panels.forEach(panel => panel.addEventListener('click', toggleOpen));

// add EventListener for mouse click event to each .panel element
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

</script>


Expand Down
25 changes: 23 additions & 2 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,19 @@ Using `classList` is a convenient way to access an element's list of classes (cl
* `add(str)` - add specified class values. If these classes already exist in attribute of the element, then they are ignored.
* `remove(str)` - remove specified class values. Removing a class that does not exist, does NOT throw an error.
* `item(num)` - Return class value by index number
* `toggle( String [, force] )`
When only one argument is present: Toggle class value;
(if class exists then remove it and return false, if not, add class and return true)

When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it.
* `contatins(str)` - checks if specified class value exists
* `replace(oldClass, newClass)` - Replaces an existing class with a new class.

### [setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)

Sets a timer which executes a function or specified piece of code once after the timer expires.

* Wes noted that if you are using the [`transition` property](https://www.w3schools.com/cssref/css3_pr_transition.asp) in CSS, using `setTimeout` in your JS may result in transitions becoming out of sync. For this reason, Wes attaches a listenr on the `transitionend` event
* Wes noted that if you are using the [`transition` property](https://www.w3schools.com/cssref/css3_pr_transition.asp) in CSS, using `setTimeout` in your JS may result in transitions becoming out of sync. For this reason, Wes attaches a listener on the `transitionend` event

* A timeout may also take longer to fire than anticipatd, caused by browser throttling and code execution sequence on single thread apps. [Read more about these potential delays here.](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)

Expand Down Expand Up @@ -209,4 +214,20 @@ The `includes()` method determines whether one string may be found within anothe

### [String.prototype.indexOf()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)

The `indexOf()` method returns the index within the calling `String` object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
The `indexOf()` method returns the index within the calling `String` object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.

## Project 5: Flex Panels Image Gallery

### [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)

Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The key feature of flexbox is the fact that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.

Learn more about Flexbox with Wes through his [Flexbox course](https://flexbox.io/) - a 20 video course series!

#### `display`
A flexbox layout is defined using `display:flex` or `display:inline-flex` on the parent item (e.g. `div`). This element then becomes a `flex container`, and each one of its children becomes a `flex item`.

An element can be both a `flex container` and a `flex item`!

#### `flex`
The `flex` CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. This is a shorthand property that sets `flex-grow`, `flex-shrink`, and `flex-basis`.

0 comments on commit 083e95f

Please sign in to comment.