Skip to content

Commit 1a2dcea

Browse files
jlukicjlukic
committed
Docs: make all the dimension examples consistent
1 parent 8d2abb1 commit 1a2dcea

File tree

44 files changed

+595
-300
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+595
-300
lines changed

‎docs/src/examples/query/dimensions/query-bounds/page.css‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
.box {
1111
position: relative;
12-
width: 120px;
12+
width: 150px;
1313
height: 80px;
1414
padding: 15px;
1515
margin: 10px;
@@ -19,12 +19,13 @@
1919
transition: all 0.3s ease;
2020
text-align: center;
2121
line-height: 80px;
22-
}
2322

24-
.box.resized {
25-
width: 180px;
26-
height: 120px;
27-
line-height: 120px;
23+
&.resized {
24+
width: 280px;
25+
height: 120px;
26+
line-height: 120px;
27+
}
28+
2829
}
2930

3031

@@ -35,4 +36,8 @@ p {
3536

3637
p span {
3738
font-weight: bold;
38-
}
39+
}
40+
b {
41+
font-weight: bold;
42+
color: var(--primary-text-color);
43+
}

‎docs/src/examples/query/dimensions/query-bounds/page.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
<div class="box">Sample element</div>
55
</div>
66

7-
<p>Top: <span class="top"></span>px</p>
8-
<p>Left: <span class="left"></span>px</p>
9-
<p>Width: <span class="width"></span>px</p>
10-
<p>Height: <span class="height"></span>px</p>
11-
<p>Right: <span class="right"></span>px</p>
12-
<p>Bottom: <span class="bottom"></span>px</p>
7+
<p>Top: <span class="top"></span><b>px</b></p>
8+
<p>Left: <span class="left"></span><b>px</b></p>
9+
<p>Width: <span class="width"></span><b>px</b></p>
10+
<p>Height: <span class="height"></span><b>px</b></p>
11+
<p>Right: <span class="right"></span><b>px</b></p>
12+
<p>Bottom: <span class="bottom"></span><b>px</b></p>
1313

1414
<ui-button class="resize">Resize element</ui-button>

‎docs/src/examples/query/dimensions/query-dimensions/page.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,8 @@ p {
5959
p span {
6060
font-weight: bold;
6161
color: var(--blue-60);
62-
}
62+
}
63+
b {
64+
font-weight: bold;
65+
color: var(--primary-text-color);
66+
}

‎docs/src/examples/query/dimensions/query-dimensions/page.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,25 @@
88
<ui-button class="add-content">Toggle content</ui-button>
99

1010
<h3>Position</h3>
11-
<p>Top: <span class="top"></span>px</p>
12-
<p>Left: <span class="left"></span>px</p>
13-
<p>Page Top: <span class="page-top"></span>px</p>
14-
<p>Page Left: <span class="page-left"></span>px</p>
11+
<p>Top: <span class="top"></span><b>px</b></p>
12+
<p>Left: <span class="left"></span><b>px</b></p>
13+
<p>Page Top: <span class="page-top"></span><b>px</b></p>
14+
<p>Page Left: <span class="page-left"></span><b>px</b></p>
1515

1616
<h3>Width Dimensions</h3>
17-
<p>Width (content): <span class="width"></span>px</p>
18-
<p>Inner Width (+ padding): <span class="inner-width"></span>px</p>
19-
<p>Outer Width (+ border): <span class="outer-width"></span>px</p>
20-
<p>Margin Width (+ margin): <span class="margin-width"></span>px</p>
17+
<p>Width (content): <span class="width"></span><b>px</b></p>
18+
<p>Inner Width (+ padding): <span class="inner-width"></span><b>px</b></p>
19+
<p>Outer Width (+ border): <span class="outer-width"></span><b>px</b></p>
20+
<p>Margin Width (+ margin): <span class="margin-width"></span><b>px</b></p>
2121

2222
<h3>Height Dimensions</h3>
23-
<p>Height (content): <span class="height"></span>px</p>
24-
<p>Inner Height (+ padding): <span class="inner-height"></span>px</p>
25-
<p>Outer Height (+ border): <span class="outer-height"></span>px</p>
26-
<p>Margin Height (+ margin): <span class="margin-height"></span>px</p>
23+
<p>Height (content): <span class="height"></span><b>px</b></p>
24+
<p>Inner Height (+ padding): <span class="inner-height"></span><b>px</b></p>
25+
<p>Outer Height (+ border): <span class="outer-height"></span><b>px</b></p>
26+
<p>Margin Height (+ margin): <span class="margin-height"></span><b>px</b></p>
2727

2828
<h3>Scroll Dimensions</h3>
29-
<p>Scroll Width: <span class="scroll-width"></span>px</p>
30-
<p>Scroll Height: <span class="scroll-height"></span>px</p>
31-
<p>Scroll Top: <span class="scroll-top"></span>px</p>
32-
<p>Scroll Left: <span class="scroll-left"></span>px</p>
29+
<p>Scroll Width: <span class="scroll-width"></span><b>px</b></p>
30+
<p>Scroll Height: <span class="scroll-height"></span><b>px</b></p>
31+
<p>Scroll Top: <span class="scroll-top"></span><b>px</b></p>
32+
<p>Scroll Left: <span class="scroll-left"></span><b>px</b></p>

‎docs/src/examples/query/dimensions/query-height/page.css‎

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,61 @@
11
.container {
2-
padding: 20px;
3-
margin: 15px 0;
4-
background: var(--standard-5);
5-
border: var(--border);
2+
padding: var(--padding);
3+
margin: var(--vertically-spaced);
4+
background: var(--angled-gradient) var(--yellow-background-color);
5+
color: var(--yellow-text-color);
6+
border: 2px solid var(--yellow-border-color);
67
border-radius: var(--border-radius);
8+
font-weight: bold;
79
}
810

911
.content {
10-
padding: 15px;
12+
padding: var(--padding);
1113
background: var(--standard-10);
1214
border-radius: var(--border-radius);
1315
line-height: 1.6;
1416
}
1517

1618
.box {
1719
height: 100px;
18-
padding: 15px;
19-
margin: 15px 0;
20-
background: var(--standard-15);
21-
border: var(--border);
20+
padding: var(--padding);
21+
margin: var(--vertically-spaced);
22+
background: var(--angled-gradient) var(--yellow-background-color);
23+
color: var(--yellow-text-color);
24+
border: 2px solid var(--yellow-border-color);
2225
border-radius: var(--border-radius);
26+
text-align: center;
27+
align-content: center;
28+
font-weight: bold;
29+
font-size: var(--large);
2330
transition: height 0.3s ease;
2431
}
2532

26-
p {
27-
margin: 8px 0;
28-
font-family: monospace;
29-
}
30-
31-
p span {
33+
.measurements {
34+
background: var(--standard-5);
35+
border: var(--border);
36+
padding: var(--padding);
37+
border-radius: var(--border-radius);
3238
font-weight: bold;
39+
font-size: var(--large);
40+
41+
.parts {
42+
font-size: var(--medium);
43+
margin-top: var(--margin);
44+
color: var(--standard-40);
45+
border-top: var(--border);
46+
padding-top: var(--padding);
47+
}
48+
49+
p {
50+
margin: 3px 0;
51+
font-family: Monospace;
52+
span {
53+
font-weight: bold;
54+
color: var(--primary-text-color);
55+
}
56+
b {
57+
font-weight: bold;
58+
color: var(--primary-text-color);
59+
}
60+
}
3361
}

‎docs/src/examples/query/dimensions/query-height/page.html‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
<p>Get and set element height</p>
2-
31
<div class="container">
42
<div class="content">Dynamic height content</div>
53
</div>
64

75
<div class="box">Fixed height element</div>
86

9-
<p>Container height: <span class="outer"></span>px</p>
10-
<p>Content height: <span class="inner"></span>px</p>
11-
<p>Fixed height: <span class="fixed"></span>px</p>
7+
<div class="measurements">
8+
<p>Box Height: <span class="box-height">-</span><b>px</b></p>
9+
<div class="parts">
10+
<p>Original: <span class="original-height">-</span><b>px</b></p>
11+
<p>After .height(150): <span class="new-height">-</span><b>px</b></p>
12+
<p>Container: <span class="container-height">-</span><b>px</b></p>
13+
<p>Content: <span class="content-height">-</span><b>px</b></p>
14+
</div>
15+
</div>

‎docs/src/examples/query/dimensions/query-height/page.js‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
import { $ } from '@semantic-ui/query';
22

3-
// Get initial heights
4-
$('.outer').text($('.container').height());
5-
$('.inner').text($('.content').height());
6-
$('.fixed').text($('.box').height());
3+
// Get dimensions
4+
const getHeights = () => {
5+
// Get current height
6+
const originalHeight = $('.box').height();
7+
$('.original-height').text(originalHeight);
78

8-
// Set new height on box element
9-
$('.box').height(150);
9+
// Set height to 150px and get the new value
10+
$('.box').height(150);
11+
const newHeight = $('.box').height();
12+
$('.box-height').text(newHeight);
13+
$('.new-height').text(newHeight);
14+
15+
// Compare with other elements
16+
const containerHeight = $('.container').height();
17+
const contentHeight = $('.content').height();
18+
$('.container-height').text(containerHeight);
19+
$('.content-height').text(contentHeight);
20+
};
21+
22+
requestAnimationFrame(getHeights);

‎docs/src/examples/query/dimensions/query-innerheight/page.css‎

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
11
.box {
2-
width: 200px;
3-
height: 80px;
4-
padding: 15px;
5-
margin: 20px 0;
6-
background: var(--success-color);
7-
color: white;
8-
text-align: center;
9-
line-height: 80px;
10-
border: 3px solid var(--standard-30);
2+
width: 300px;
3+
height: 200px;
4+
padding: var(--padding);
5+
margin: var(--vertically-spaced);
6+
background: var(--angled-gradient) var(--yellow-background-color);
7+
color: var(--yellow-text-color);
8+
border: 2px solid var(--yellow-border-color);
119
border-radius: var(--border-radius);
10+
text-align: center;
11+
align-content: center;
12+
font-weight: bold;
13+
font-size: var(--large);
1214
}
1315

1416
.measurements {
1517
background: var(--standard-5);
18+
border: var(--border);
1619
padding: var(--padding);
1720
border-radius: var(--border-radius);
21+
font-weight: bold;
22+
font-size: var(--large);
23+
24+
.parts {
25+
font-size: var(--medium);
26+
margin-top: var(--margin);
27+
color: var(--standard-40);
28+
border-top: var(--border);
29+
padding-top: var(--padding);
30+
}
1831

1932
p {
20-
margin: 5px 0;
21-
font-family: monospace;
22-
33+
margin: 3px 0;
34+
font-family: Monospace;
2335
span {
2436
font-weight: bold;
25-
color: var(--success-color);
37+
color: var(--primary-text-color);
38+
}
39+
b {
40+
font-weight: bold;
41+
color: var(--primary-text-color);
2642
}
2743
}
2844
}

‎docs/src/examples/query/dimensions/query-innerheight/page.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<p>Get element inner height (content + padding)</p>
2-
31
<div class="box">
42
Content Area
53
</div>
64

75
<div class="measurements">
8-
<p>Height: <span class="height">-</span>px</p>
9-
<p>Inner Height: <span class="inner-height">-</span>px</p>
10-
<p>Difference: <span class="difference">-</span>px (padding)</p>
6+
<p>Inner Height: <span class="inner-height">-</span><b>px</b></p>
7+
<div class="parts">
8+
<p>Height: <span class="height">-</span><b>px</b></p>
9+
<p>Padding: <span class="padding">-</span><b>px</b></p>
10+
<p>Formula: height + padding = innerHeight</p>
11+
</div>
1112
</div>

‎docs/src/examples/query/dimensions/query-innerheight/page.js‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { $ } from '@semantic-ui/query';
22

3-
$(document).ready(() => {
3+
// Get dimensions
4+
const getDimensions = () => {
45
const box = $('.box');
56

6-
// Get dimensions
7-
const height = box.height();
7+
// innerHeight() includes content height plus padding
88
const innerHeight = box.innerHeight();
9-
const difference = innerHeight - height;
9+
$('.inner-height').text(innerHeight);
1010

11-
// Display measurements
11+
// Calculate the components
12+
const height = box.height();
13+
const padding = innerHeight - height;
1214
$('.height').text(height);
13-
$('.inner-height').text(innerHeight);
14-
$('.difference').text(difference);
15-
debugger;
16-
});
15+
$('.padding').text(padding);
16+
};
17+
18+
requestAnimationFrame(getDimensions);

0 commit comments

Comments
 (0)