learn-javascript-the-hard-way
/
fsckcss
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Write the notes for Carousel.

Browse Source
master
Zed A. Shaw 4 years ago
parent b7ff702bbd
commit c0326977cd
7 changed files with 82 additions and 47 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      public/build/bundle.css
  2. 76
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 2
      public/code/Carousel.css
  5. 41
      public/code/Carousel.notes.html
  6. 2
      src/demos/Carousel.svelte
  7. 2
      src/thumbs/Carousel.svelte

4
public/build/bundle.css
View File

File diff suppressed because one or more lines are too long

76
public/build/bundle.js
Unescape View File

@ -9069,31 +9069,31 @@ var app = (function () {
t8 = space(); t8 = space();
next = element("next"); next = element("next");
create_component(icon1.$$.fragment); create_component(icon1.$$.fragment);
add_location(h1, file$g, 75, 2, 1217); add_location(h1, file$g, 73, 2, 1159);
attr_dev(img0, "alt", "Stock photo"); attr_dev(img0, "alt", "Stock photo");
if (img0.src !== (img0_src_value = holder(16 * 40, 9 * 40))) attr_dev(img0, "src", img0_src_value); if (img0.src !== (img0_src_value = holder(16 * 40, 9 * 40))) attr_dev(img0, "src", img0_src_value);
attr_dev(img0, "class", "svelte-12uwa5s"); attr_dev(img0, "class", "svelte-15us2jh");
add_location(img0, file$g, 79, 6, 1283); add_location(img0, file$g, 77, 6, 1225);
attr_dev(figcaption0, "class", "svelte-12uwa5s"); attr_dev(figcaption0, "class", "svelte-15us2jh");
add_location(figcaption0, file$g, 80, 6, 1346); add_location(figcaption0, file$g, 78, 6, 1288);
attr_dev(figure0, "class", "active svelte-12uwa5s"); attr_dev(figure0, "class", "active svelte-15us2jh");
add_location(figure0, file$g, 78, 4, 1253); add_location(figure0, file$g, 76, 4, 1195);
attr_dev(img1, "alt", "Stock photo"); attr_dev(img1, "alt", "Stock photo");
if (img1.src !== (img1_src_value = holder(16 * 40, 9 * 40))) attr_dev(img1, "src", img1_src_value); if (img1.src !== (img1_src_value = holder(16 * 40, 9 * 40))) attr_dev(img1, "src", img1_src_value);
attr_dev(img1, "class", "svelte-12uwa5s"); attr_dev(img1, "class", "svelte-15us2jh");
add_location(img1, file$g, 85, 6, 1467); add_location(img1, file$g, 83, 6, 1409);
attr_dev(figcaption1, "class", "svelte-12uwa5s"); attr_dev(figcaption1, "class", "svelte-15us2jh");
add_location(figcaption1, file$g, 86, 6, 1530); add_location(figcaption1, file$g, 84, 6, 1472);
attr_dev(figure1, "class", "svelte-12uwa5s"); attr_dev(figure1, "class", "svelte-15us2jh");
add_location(figure1, file$g, 84, 4, 1452); add_location(figure1, file$g, 82, 4, 1394);
attr_dev(prev, "class", "svelte-12uwa5s"); attr_dev(prev, "class", "svelte-15us2jh");
add_location(prev, file$g, 88, 4, 1582); add_location(prev, file$g, 86, 4, 1524);
attr_dev(next, "class", "svelte-12uwa5s"); attr_dev(next, "class", "svelte-15us2jh");
add_location(next, file$g, 89, 4, 1636); add_location(next, file$g, 87, 4, 1578);
attr_dev(carousel, "class", "svelte-12uwa5s"); attr_dev(carousel, "class", "svelte-15us2jh");
add_location(carousel, file$g, 77, 2, 1238); add_location(carousel, file$g, 75, 2, 1180);
attr_dev(content, "class", "svelte-12uwa5s"); attr_dev(content, "class", "svelte-15us2jh");
add_location(content, file$g, 74, 0, 1205); add_location(content, file$g, 72, 0, 1147);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -16008,7 +16008,7 @@ var app = (function () {
return child_ctx; return child_ctx;
} }
// (83:4) {#each images as image} // (81:4) {#each images as image}
function create_each_block$b(ctx) { function create_each_block$b(ctx) {
let figure; let figure;
let img; let img;
@ -16029,13 +16029,13 @@ var app = (function () {
t2 = text(t2_value); t2 = text(t2_value);
attr_dev(img, "alt", "Stock photo"); attr_dev(img, "alt", "Stock photo");
if (img.src !== (img_src_value = holder(16 * 40, 9 * 40))) attr_dev(img, "src", img_src_value); if (img.src !== (img_src_value = holder(16 * 40, 9 * 40))) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-12uwa5s"); attr_dev(img, "class", "svelte-15us2jh");
add_location(img, file$z, 84, 8, 1462); add_location(img, file$z, 82, 8, 1404);
attr_dev(figcaption, "class", "svelte-12uwa5s"); attr_dev(figcaption, "class", "svelte-15us2jh");
add_location(figcaption, file$z, 85, 8, 1527); add_location(figcaption, file$z, 83, 8, 1469);
attr_dev(figure, "class", "svelte-12uwa5s"); attr_dev(figure, "class", "svelte-15us2jh");
toggle_class(figure, "active", /*image*/ ctx[1] === 1); toggle_class(figure, "active", /*image*/ ctx[1] === 1);
add_location(figure, file$z, 83, 6, 1416); add_location(figure, file$z, 81, 6, 1358);
}, },
m: function mount(target, anchor) { m: function mount(target, anchor) {
insert_dev(target, figure, anchor); insert_dev(target, figure, anchor);
@ -16059,7 +16059,7 @@ var app = (function () {
block, block,
id: create_each_block$b.name, id: create_each_block$b.name,
type: "each", type: "each",
source: "(83:4) {#each images as image}", source: "(81:4) {#each images as image}",
ctx ctx
}); });
@ -16126,15 +16126,15 @@ var app = (function () {
create_component(icon1.$$.fragment); create_component(icon1.$$.fragment);
t4 = space(); t4 = space();
create_component(codeview.$$.fragment); create_component(codeview.$$.fragment);
add_location(h1, file$z, 79, 2, 1350); add_location(h1, file$z, 77, 2, 1292);
attr_dev(prev, "class", "svelte-12uwa5s"); attr_dev(prev, "class", "svelte-15us2jh");
add_location(prev, file$z, 88, 4, 1600); add_location(prev, file$z, 86, 4, 1542);
attr_dev(next, "class", "svelte-12uwa5s"); attr_dev(next, "class", "svelte-15us2jh");
add_location(next, file$z, 89, 4, 1654); add_location(next, file$z, 87, 4, 1596);
attr_dev(carousel, "class", "svelte-12uwa5s"); attr_dev(carousel, "class", "svelte-15us2jh");
add_location(carousel, file$z, 81, 2, 1371); add_location(carousel, file$z, 79, 2, 1313);
attr_dev(content, "class", "svelte-12uwa5s"); attr_dev(content, "class", "svelte-15us2jh");
add_location(content, file$z, 78, 0, 1338); add_location(content, file$z, 76, 0, 1280);
}, },
l: function claim(nodes) { l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option"); throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");

2
public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

2
public/code/Carousel.css
Unescape View File

@ -7,7 +7,6 @@ content {
} }
carousel { carousel {
outline: 2px solid green;
position: relative; position: relative;
} }
@ -19,7 +18,6 @@ carousel figure.active {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
outline: 1px solid red;
} }
carousel figure img { carousel figure img {

41
public/code/Carousel.notes.html
Unescape View File

@ -0,0 +1,41 @@
<p>This is a simple example of doing multiple overlays using the <b>position:absolute</b> trick. You set the outer element <b>carousel</b> to <b>position:relative</b>, then when you set <b>position:absolute</b> on the internal <b>figure</b> elements. When you do that you can set the <b>top/bottom/left/right</b> to 0 and each figure will fill and cover each other.
Finally, you set all of the inactive <b>figure</b> to <b>display:none</b> to remove it from the display, and set the active <b>figure</b> to <b>display:flex</b>.</p>
<p>The <b>next/prev</b> tags are using a similar setting, but they are set to the far left and right using this:</p>
<pre>
<code class="language-css">
carousel next &lbrace;
right: 0;
&rbrace;
carousel prev &lbrace;
left: 0;
&rbrace;
</code>
</pre>
<p>This also demonstrates how to simplify your CSS by removing duplication. The common aspects of the <b>next/prev</b> buttons are placed in a single CSS stanza:</p>
<pre>
<code class="language-css">
carousel next,prev &lbrace;
position: absolute;
bottom: 0;
opacity: 0%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
&rbrace;
</code>
</pre>
<p>This configures the <b>next/prev</b> buttons with all of the common features by using the <b>, (comma)</b> which works as an "or" operation, meaning "this applies to next or prev inside carousel. Then you can set their positions after with a few lines more.</p>
<p>The last part to study is how the <b>figcaption</b> is placed at the bottom for each image. It's using the same setup as the <b>next/prev</b>.</p>
<h2>Using Opacity</h2>
<p>You can use <b>opacity: 0%</b> to make something invisible instead of using <b>display:none</b> or <b>visibility:hidden</b>. The only advantage of <b>opacity</b> over <b>visibility:hidden</b> seems to be that <b>visibility</b> removes the element from accessibility so screen readers won't recognize it. The issue with <b>display:none</b> is it removes the element completely so that it doesn't take up space, which is what we want with the figures but not the next/prev buttons.
</p>

2
src/demos/Carousel.svelte
Unescape View File

@ -17,7 +17,6 @@
} }
carousel { carousel {
outline: 2px solid green;
position: relative; position: relative;
} }
@ -29,7 +28,6 @@
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
outline: 1px solid red;
} }
carousel figure img { carousel figure img {

2
src/thumbs/Carousel.svelte
Unescape View File

@ -13,7 +13,6 @@
} }
carousel { carousel {
outline: 2px solid green;
position: relative; position: relative;
} }
@ -25,7 +24,6 @@
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
outline: 1px solid red;
} }
carousel figure img { carousel figure img {

Write Preview
Loading…
Cancel
Save