Skip to content

Commit 6167ab4

Browse files
fantasaifantasai
committed
Improve visibility: collapse example -- one less flexbox, better indentation, @media only applies to 2-column code, and restore order because it's interesting. :)
1 parent f608f85 commit 6167ab4

4 files changed

Lines changed: 39 additions & 27 deletions

File tree

‎css3-flexbox/Overview.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1057,7 +1057,7 @@ <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3>
10571057

10581058
<div id=visibility-collapse-example>
10591059
<!-- No, don't look at this source code, look at the other source code. -->
1060-
<article> Interesting Stuff to Read </article> <nav>
1060+
<nav>
10611061
<ul>
10621062
<li id=nav-about><a href="#nav-about">About</a>
10631063
<ul>
@@ -1086,7 +1086,7 @@ <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3>
10861086
<li><a href="#">Events</a>
10871087
</ul>
10881088
</ul>
1089-
</nav></div>
1089+
</nav> <article> Interesting Stuff to Read </article></div>
10901090
</figure>
10911091

10921092
<pre>
@@ -1098,20 +1098,20 @@ <h3 id=visibility-collapse><span class=secno>4.3. </span> Collapsed Items</h3>
10981098
<!-- --> #main {
10991099
<!-- --> flex: 1; /* <a
11001100
href="#flexibility">Main takes up all remaining space</a> */
1101+
<!-- --> order: 1 /* <a
1102+
href="#order-property">Place it after (to the right of) the navigation</a> */
11011103
<!-- --> min-width: 12em; /* <a
11021104
href="#min-size-opt">Optimize main content area sizing</a> */
11031105
<!-- --> }
1104-
<!-- --> /* set up the menus as flexboxes so that visibility:collapse
1105-
<!-- --> will work properly */
1106-
<!-- --> nav > ul,
1107-
<!-- --> nav > ul > li {
1108-
<!-- --> display: flex;
1109-
<!-- --> flex-flow: column;
1110-
<!-- --> }
1111-
<!-- --> /* dynamically collapse submenus when not targetted */
1112-
<!-- --> nav > ul > li:not(:target):not(:hover) > ul {
1113-
<!-- --> visibility: collapse;
1114-
<!-- --> }
1106+
<!-- --> }
1107+
<!-- --> /* menu items use flex layout so that visibility:collapse will work */
1108+
<!-- --> nav > ul > li {
1109+
<!-- --> display: flex;
1110+
<!-- --> flex-flow: column;
1111+
<!-- --> }
1112+
<!-- --> /* dynamically collapse submenus when not targetted */
1113+
<!-- --> nav > ul > li:not(:target):not(:hover) > ul {
1114+
<!-- --> visibility: collapse;
11151115
<!-- --> }
11161116
<!-- -->&lt;/style>
11171117
<!-- -->…

‎css3-flexbox/Overview.src.html‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -736,9 +736,6 @@ <h3 id='visibility-collapse'>
736736
<figcaption>Sample rendering for example code below</figcaption>
737737
<div id="visibility-collapse-example">
738738
<!-- No, don't look at this source code, look at the other source code. -->
739-
<article>
740-
Interesting Stuff to Read
741-
</article>
742739
<nav>
743740
<ul>
744741
<li id="nav-about"><a href="#nav-about">About</a>
@@ -761,6 +758,9 @@ <h3 id='visibility-collapse'>
761758
</ul>
762759
</ul>
763760
</nav>
761+
<article>
762+
Interesting Stuff to Read
763+
</article>
764764
</div>
765765
</figure>
766766

@@ -771,19 +771,18 @@ <h3 id='visibility-collapse'>
771771
<!-- --> header + div { display: flex; }
772772
<!-- --> #main {
773773
<!-- --> flex: 1; /* <a href="#flexibility">Main takes up all remaining space</a> */
774+
<!-- --> order: 1 /* <a href="#order-property">Place it after (to the right of) the navigation</a> */
774775
<!-- --> min-width: 12em; /* <a href="#min-size-opt">Optimize main content area sizing</a> */
775776
<!-- --> }
776-
<!-- --> /* set up the menus as flexboxes so that visibility:collapse
777-
<!-- --> will work properly */
778-
<!-- --> nav > ul,
779-
<!-- --> nav > ul > li {
780-
<!-- --> display: flex;
781-
<!-- --> flex-flow: column;
782-
<!-- --> }
783-
<!-- --> /* dynamically collapse submenus when not targetted */
784-
<!-- --> nav > ul > li:not(:target):not(:hover) > ul {
785-
<!-- --> visibility: collapse;
786-
<!-- --> }
777+
<!-- --> }
778+
<!-- --> /* menu items use flex layout so that visibility:collapse will work */
779+
<!-- --> nav > ul > li {
780+
<!-- --> display: flex;
781+
<!-- --> flex-flow: column;
782+
<!-- --> }
783+
<!-- --> /* dynamically collapse submenus when not targetted */
784+
<!-- --> nav > ul > li:not(:target):not(:hover) > ul {
785+
<!-- --> visibility: collapse;
787786
<!-- --> }
788787
<!-- -->&lt;/style>
789788
<!-- -->&hellip;

‎css3-flexbox/issues-lc-2012.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,3 +218,10 @@ <h1>CSS Flexible Box Layout Level 3 Disposition of Comments for 2012-06-12 LCWD<
218218
Comment: <a href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0385.html">http://lists.w3.org/Archives/Public/www-style/2012Jul/0385.html</a>
219219
Closed: Accepted
220220
</pre>
221+
<pre class="open" id="issue-22">
222+
Issue 22. <a href="#issue-21">#</a>
223+
Summary: Missing 'order' edit to &lt;integer>
224+
From: Daniel Holbert
225+
Comment: <a href="http://www.w3.org/mid/50096C12.3010908@mozilla.com">http://www.w3.org/mid/50096C12.3010908@mozilla.com</a>
226+
Open
227+
</pre>

‎css3-flexbox/issues-lc-2012.txt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,3 +161,9 @@ From: fantasai
161161
Comment: http://lists.w3.org/Archives/Public/www-style/2012Jul/0385.html
162162
Closed: Accepted
163163
----
164+
Issue 22.
165+
Summary: Missing 'order' edit to <integer>
166+
From: Daniel Holbert
167+
Comment: http://www.w3.org/mid/50096C12.3010908@mozilla.com
168+
Open
169+
----

0 commit comments

Comments
 (0)