Skip to content
This repository has been archived by the owner on Mar 27, 2023. It is now read-only.

Commit

Permalink
[ui] fixing demos that were causing responsive horizontal scroll on w…
Browse files Browse the repository at this point in the history 
…ebsite (#170)

Tested in:
✔︎ Chrome

Closes: #35

Signed-off-by: Scott Mathis <[email protected]>
  • Loading branch information
@mathisscott
mathisscott authored Nov 30, 2016
1 parent a0c0757 commit bb890fa
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 94 deletions.
125 changes: 75 additions & 50 deletions src/clarity/color/demo/color-luminance.demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,108 +6,133 @@

<section class="colordemo-luminance">
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12 col-md-6">
<table class="table">
<thead>
<tr><th class="left">Test Color</th>
<th>Luminance</th>
<th>Expected</th>
<tr>
<th class="left">Color</th>
<th class="left">Result</th>
</tr>
</thead>
<tbody>
<tr class="white-test">
<td class="left">#FFF</td>
<td><div class="all-L"></div></td>
<td>1.00</td>
<td class="left">
<div>Actual: <span class="all-L"></span></div>
<div>Expected: 1.00</div>
</td>
</tr>
<tr class="alt-test">
<td class="left">#FF9999</td>
<td><div class="all-L"></div></td>
<td>0.4634</td>
<td class="left">
<div>Actual: <span class="all-L"></span></div>
<div>Expected: .4634</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12 col-md-6">
<table class="table">
<thead>
<tr><th class="left">Test Color</th>
<th>Red L</th>
<th>Expected</th>
<th>Red C</th>
<th>Expected</th>
<tr>
<th class="left">Test Color</th>
<th class="left">Red L</th>
<th class="left">Red C</th>
</tr>
</thead>
<tbody>
<tr class="white-test">
<td class="left">#FFF</td>
<td><div class="red-L"></div></td>
<td>0.2126</td>
<td><div class="red-C"></div></td>
<td>1.00</td>
<td class="left">
<div>A: <span class="red-L"></span></div>
<div>E: .2126</div>
</td>
<td class="left">
<div>A: <span class="red-C"></span></div>
<div>E: 1.00</div>
</td>
</tr>
<tr class="alt-test">
<td class="left">#FF9999</td>
<td><div class="red-L"></div></td>
<td>0.2126</td>
<td><div class="red-C"></div></td>
<td>1.00</td>
<td class="left">
<div>A: <span class="red-L"></span></div>
<div>E: .2126</div>
</td>
<td class="left">
<div>A: <span class="red-C"></span></div>
<div>E: 1.00</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12 col-md-6">
<table class="table">
<thead>
<tr><th class="left">Test Color</th>
<th>Green L</th>
<th>Expected</th>
<th>Green C</th>
<th>Expected</th>
<tr>
<th class="left">Color</th>
<th class="left">Green L</th>
<th class="left">Green C</th>
</tr>
</thead>
<tbody>
<tr class="white-test">
<td class="left">#FFF</td>
<td><div class="green-L"></div></td>
<td>0.7152</td>
<td><div class="green-C"></div></td>
<td>1.00</td>
<td class="left">
<div>A: <span class="green-L"></span></div>
<div>E: .7152</div>
</td>
<td class="left">
<div>A: <span class="green-C"></span></div>
<div>E: 1.00</div>
</td>
</tr>
<tr class="alt-test">
<td class="left">#FF9999</td>
<td><div class="green-L"></div></td>
<td>0.2278</td>
<td><div class="green-C"></div></td>
<td>0.3185</td>
<td class="left">
<div>A: <span class="green-L"></span></div>
<div>E: .2278</div>
</td>
<td class="left">
<div>A: <span class="green-C"></span></div>
<div>E: .3185</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12 col-md-6">
<table class="table">
<thead>
<tr><th class="left">Test Color</th>
<th>Blue L</th>
<th>Expected</th>
<th>Blue C</th>
<th>Expected</th>
<tr>
<th class="left">Color</th>
<th class="left">Blue L</th>
<th class="left">Blue C</th>
</tr>
</thead>
<tbody>
<tr class="white-test">
<td class="left">#FFF</td>
<td><div class="blue-L"></div></td>
<td>0.0722</td>
<td><div class="blue-C"></div></td>
<td>1.00</td>
<td class="left">
<div>A: <span class="blue-L"></span></div>
<div>E: .0722</div>
</td>
<td class="left">
<div>A: <span class="blue-C"></span></div>
<div>E: 1.00</div>
</td>
</tr>
<tr class="alt-test">
<td class="left">#FF9999</td>
<td><div class="blue-L"></div></td>
<td>0.0223</td>
<td><div class="blue-C"></div></td>
<td>0.3185</td>
<td class="left">
<div>A: <span class="blue-L"></span></div>
<div>E: .0223</div>
</td>
<td class="left">
<div>A: <span class="blue-C"></span></div>
<div>E: .3185</div>
</td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions src/clarity/tables/demo/tables-basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,33 +10,33 @@
<th>Decimal</th>
<th>Hexadecimal</th>
<th>Binary</th>
<th>Roman Numeral</th>
<th class="hidden-xs-down">Roman Numeral</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>I</td>
<td class="hidden-xs-down">I</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>101</td>
<td>V</td>
<td class="hidden-xs-down">V</td>
</tr>
<tr>
<td>10</td>
<td>A</td>
<td>1010</td>
<td>X</td>
<td class="hidden-xs-down">X</td>
</tr>
<tr>
<td>15</td>
<td>F</td>
<td>1111</td>
<td>XV</td>
<td class="hidden-xs-down">XV</td>
</tr>
</tbody>
</table>
Expand Down
20 changes: 10 additions & 10 deletions src/clarity/tables/demo/tables-compact-noborder.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,35 @@
<thead>
<tr>
<th class="left">Monster</th>
<th>Home</th>
<th class="hidden-xs-down">Home</th>
<th>Likes Cookies</th>
<th class="left">Fun to Play With</th>
<th class="left hidden-xs-down">Fun to Play With</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Wolfman</td>
<td>Nondisclosed countryside</td>
<td class="hidden-xs-down">Nondisclosed countryside</td>
<td>Sometimes</td>
<td class="left">Not really</td>
<td class="left hidden-xs-down">Not really</td>
</tr>
<tr>
<td class="left">Mothra</td>
<td>Tropical island</td>
<td class="hidden-xs-down">Tropical island</td>
<td>No</td>
<td class="left">Only if you have a flashlight</td>
<td class="left hidden-xs-down">Only if you have a flashlight</td>
</tr>
<tr>
<td class="left">Oscar the Grouch</td>
<td>Sesame Street</td>
<td class="hidden-xs-down">Sesame Street</td>
<td>No</td>
<td class="left">No</td>
<td class="left hidden-xs-down">No</td>
</tr>
<tr>
<td class="left">Cookie Monster</td>
<td>Sesame Street</td>
<td class="hidden-xs-down">Sesame Street</td>
<td>Definitely yes</td>
<td class="left">Only if you have no cookies</td>
<td class="left hidden-xs-down">Only if you have no cookies</td>
</tr>
</tbody>
</table>
Expand Down
20 changes: 10 additions & 10 deletions src/clarity/tables/demo/tables-compact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,35 @@
<thead>
<tr>
<th class="left">Monster</th>
<th>Home</th>
<th class="hidden-xs-down">Home</th>
<th>Likes Cookies</th>
<th class="left">Fun to Play With</th>
<th class="left hidden-xs-down">Fun to Play With</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Wolfman</td>
<td>Nondisclosed countryside</td>
<td class="hidden-xs-down">Nondisclosed countryside</td>
<td>Sometimes</td>
<td class="left">Not really</td>
<td class="left hidden-xs-down">Not really</td>
</tr>
<tr>
<td class="left">Mothra</td>
<td>Tropical island</td>
<td class="hidden-xs-down">Tropical island</td>
<td>No</td>
<td class="left">Only if you have a flashlight</td>
<td class="left hidden-xs-down">Only if you have a flashlight</td>
</tr>
<tr>
<td class="left">Oscar the Grouch</td>
<td>Sesame Street</td>
<td class="hidden-xs-down">Sesame Street</td>
<td>No</td>
<td class="left">No</td>
<td class="left hidden-xs-down">No</td>
</tr>
<tr>
<td class="left">Cookie Monster</td>
<td>Sesame Street</td>
<td class="hidden-xs-down">Sesame Street</td>
<td>Definitely yes</td>
<td class="left">Only if you have no cookies</td>
<td class="left hidden-xs-down">Only if you have no cookies</td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions src/clarity/tables/demo/tables-leftcell.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,33 +9,33 @@
<tr>
<th class="left">Wizard</th>
<th>Allegiance</th>
<th>Triwizard Champion?</th>
<th class="hidden-xs-down">Triwizard Champion?</th>
<th>Can Cast Fireball</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Harry</td>
<td>Gryffindor</td>
<td>Yes</td>
<td class="hidden-xs-down">Yes</td>
<td>No</td>
</tr>
<tr>
<td class="left">Gandalf</td>
<td>Hobbits</td>
<td>Maybe?</td>
<td class="hidden-xs-down">Maybe?</td>
<td>I don't think so...</td>
</tr>
<tr>
<td class="left">Obi-Wan Kenobi</td>
<td>Republic/Rebellion</td>
<td>No</td>
<td class="hidden-xs-down">No</td>
<td>No</td>
</tr>
<tr>
<td class="left">Merlin</td>
<td>King Arthur</td>
<td>Probably invented the tournament</td>
<td class="hidden-xs-down">Probably invented the tournament</td>
<td>Solid maybe</td>
</tr>
</tbody>
Expand Down
8 changes: 4 additions & 4 deletions src/clarity/tables/demo/tables-multiline.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,24 @@
<thead>
<tr>
<th class="left">Name</th>
<th>A/B</th>
<th class="hidden-xs-down">A/B</th>
<th class="left">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">Beetlejuice</td>
<td>B</td>
<td class="hidden-xs-down">B</td>
<td class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<tr>
<td class="left">Mytzlplk</td>
<td>A</td>
<td class="hidden-xs-down">A</td>
<td class="left">Excepteur sint occaecat cupidatat non proident.</td>
</tr>
<tr>
<td class="left">Q</td>
<td>A</td>
<td class="hidden-xs-down">A</td>
<td class="left">Ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
</tr>
</tbody>
Expand Down
Loading

0 comments on commit bb890fa

Please sign in to comment.