Skip to content

Commit 941772e

Browse files
debabratapatradebabratapatra
committed
Make Responsive.
1 parent 2231cde commit 941772e

File tree

5 files changed

+139
-99
lines changed

5 files changed

+139
-99
lines changed

‎src/app/app.component.html‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,46 @@
11

22
<div class="body">
3-
<table>
4-
<tr>
5-
<td class="left-panel">
6-
<ul>
7-
<li>
8-
<a routerLink="basic_tree_grid" routerLinkActive="selected">Basic Tree Grid</a>
9-
</li>
10-
<li>
11-
<a routerLink="add_edit_delete" routerLinkActive="selected">Add, Edit and Delete</a>
12-
</li>
13-
<li>
14-
<a routerLink="/summary_row" routerLinkActive="selected">Summary/Footer Row</a>
15-
</li>
16-
<li>
17-
<a routerLink="cond_row_edit" routerLinkActive="selected">Conditional Row Edit, Delete and CSS Class</a>
18-
</li>
19-
<li>
20-
<a routerLink="custom_view_component" routerLinkActive="selected">Custom View Component</a>
21-
</li>
22-
<li>
23-
<a routerLink="custom_edit_component" routerLinkActive="selected">Custom Editor Component</a>
24-
</li>
25-
<li>
26-
<a routerLink="resolve_row_add" routerLinkActive="selected">Resolve Row Add/Edit/Delete</a>
27-
</li>
28-
<li>
29-
<a routerLink="filter_column" routerLinkActive="selected">Custom Filter</a>
30-
</li>
31-
<li>
32-
<a routerLink="selection" routerLinkActive="selected">Selection</a>
33-
</li>
34-
<li>
35-
<a routerLink="dynamic_children" routerLinkActive="selected">Dynamic Children</a>
36-
</li>
37-
<li>
38-
<a routerLink="specific_expand_collapse" routerLinkActive="selected">Specific Row Collapse/Expand</a>
39-
</li>
40-
<li>
41-
<a routerLink="subgrid" routerLinkActive="selected">Subgrid</a>
42-
</li>
43-
</ul>
44-
</td>
45-
<td class="content">
46-
<router-outlet></router-outlet>
47-
</td>
48-
</tr>
49-
</table>
3+
<div class="left-panel">
4+
<ul>
5+
<li>
6+
<a routerLink="basic_tree_grid" routerLinkActive="selected">Basic Tree Grid</a>
7+
</li>
8+
<li>
9+
<a routerLink="add_edit_delete" routerLinkActive="selected">Add, Edit and Delete</a>
10+
</li>
11+
<li>
12+
<a routerLink="/summary_row" routerLinkActive="selected">Summary/Footer Row</a>
13+
</li>
14+
<li>
15+
<a routerLink="cond_row_edit" routerLinkActive="selected">Conditional Row Edit, Delete and CSS Class</a>
16+
</li>
17+
<li>
18+
<a routerLink="custom_view_component" routerLinkActive="selected">Custom View Component</a>
19+
</li>
20+
<li>
21+
<a routerLink="custom_edit_component" routerLinkActive="selected">Custom Editor Component</a>
22+
</li>
23+
<li>
24+
<a routerLink="resolve_row_add" routerLinkActive="selected">Resolve Row Add/Edit/Delete</a>
25+
</li>
26+
<li>
27+
<a routerLink="filter_column" routerLinkActive="selected">Custom Filter</a>
28+
</li>
29+
<li>
30+
<a routerLink="selection" routerLinkActive="selected">Selection</a>
31+
</li>
32+
<li>
33+
<a routerLink="dynamic_children" routerLinkActive="selected">Dynamic Children</a>
34+
</li>
35+
<li>
36+
<a routerLink="specific_expand_collapse" routerLinkActive="selected">Specific Row Collapse/Expand</a>
37+
</li>
38+
<li>
39+
<a routerLink="subgrid" routerLinkActive="selected">Subgrid</a>
40+
</li>
41+
</ul>
42+
</div>
43+
<div class="content">
44+
<router-outlet></router-outlet>
45+
</div>
5046
</div>

‎src/app/app.component.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ div.body {
33
margin-top: 20px;
44
}
55

6-
td.left-panel {
6+
div.left-panel {
77
width: 25%;
8+
display: inline-block;
89
vertical-align: top;
910
padding-right: 10px;
1011
ul {
@@ -30,8 +31,9 @@ td.left-panel {
3031
}
3132
}
3233

33-
td.content {
34+
div.content {
3435
width: 60%;
36+
display: inline-block;
3537
}
3638

3739
@media only screen and (max-width: 800px) {
@@ -41,4 +43,10 @@ td.content {
4143
div.content {
4244
padding: 1rem 1rem;
4345
}
46+
div.left-panel {
47+
width: 100%;
48+
}
49+
div.content {
50+
width: 100%;
51+
}
4452
}

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
<div class="navigator">
9999
<a href="/" class="navigator-btn">Home</a>
100100
<a href="../docs/" class="navigator-btn" target="_blank">Docs</a>
101-
<a href="https://stackblitz.com/edit/angular-tree-grid" class="navigator-btn" target="_blank">Edit in Stackblitz</a>
101+
<a href="https://stackblitz.com/edit/angular-tree-grid" class="navigator-btn" target="_blank">Edit</a>
102102
<a href="https://curiouslinks.com/about.html" class="navigator-btn">About Me</a>
103103
</div>
104104
</div>

‎src/main.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,32 @@ platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
1313
window['ngRef'] = ref;
1414

1515
// Otherwise, log the boot error
16-
}).catch(err => console.error(err));
16+
}).catch(err => console.error(err));
17+
18+
function updateCodeWidth() {
19+
var windowWidth = window.screen.availWidth;
20+
if(windowWidth > 1100) {
21+
return;
22+
}
23+
var offsetWidth = (<HTMLElement>document.querySelector('td.left-panel')).offsetWidth;
24+
var contentWidth = windowWidth - offsetWidth;
25+
var padding = 20;
26+
var extra = 5;
27+
28+
if(windowWidth > 768) {
29+
padding = 60;
30+
extra = 40;
31+
}
32+
33+
contentWidth = contentWidth - padding - extra;
34+
var codes = document.querySelectorAll('div.code');
35+
36+
codes.forEach(code => {
37+
(<HTMLElement>code).style.width = contentWidth + 'px';
38+
});
39+
}
40+
41+
document.addEventListener("DOMContentLoaded", function(event) {
42+
updateCodeWidth();
43+
window.addEventListener('resize', updateCodeWidth);
44+
});

‎src/styles.css‎

Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,112 @@
11
/* Add application styles & imports to this file! */
22

33
body {
4-
margin: 0;
5-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, Arial, sans-serif;
4+
margin: 0;
5+
font-size: 17px;
6+
line-height: 1.5;
7+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
8+
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, Arial,
9+
sans-serif;
610
}
711

812
h2 {
9-
font-weight: 500;
13+
font-weight: 500;
1014
}
1115

1216
p {
13-
line-height: 1.6;
17+
line-height: 1.6;
1418
}
1519

1620
button {
17-
margin-right: 10px;
18-
background-color: transparent;
19-
border: 1px solid gray;
20-
padding: 6px 10px;
21-
cursor: pointer;
21+
margin-right: 10px;
22+
background-color: transparent;
23+
border: 1px solid gray;
24+
padding: 6px 10px;
25+
cursor: pointer;
2226
}
2327

2428
pre.prettyprint {
25-
border-color: #d1cece !important;
29+
border-color: #d1cece !important;
2630
}
2731

2832
.short-code {
29-
display: inline-block;
30-
background-color: #f9f9f9;
33+
display: inline-block;
34+
background-color: #f9f9f9;
3135
}
3236

3337
button:hover {
34-
border-color: #01475b;
38+
border-color: #01475b;
3539
}
3640

3741
span.code {
38-
padding: 2px 6px;
39-
color: #1f1f1f;
40-
background-color: #f0f0f0;
41-
border-radius: 6px;
42-
font-size: 1rem;
42+
padding: 2px 6px;
43+
color: #1f1f1f;
44+
background-color: #f0f0f0;
45+
border-radius: 6px;
46+
font-size: 1rem;
4347
}
4448

4549
/* Bare bones style for the desired effect */
4650
pre.code {
47-
display: table;
48-
table-layout: fixed;
49-
width: 100%; /* anything but auto, otherwise fixed layout not guaranteed */
50-
white-space: pre-wrap;
51+
display: table;
52+
table-layout: fixed;
53+
width: 100%; /* anything but auto, otherwise fixed layout not guaranteed */
54+
white-space: pre-wrap;
5155
}
5256
pre.code::before {
53-
counter-reset: linenum;
57+
counter-reset: linenum;
5458
}
5559
pre.code span.tr {
56-
display: table-row;
57-
counter-increment: linenum;
60+
display: table-row;
61+
counter-increment: linenum;
5862
}
59-
pre.code span.th { /* used for line numbers */
60-
display: table-cell;
61-
user-select: none;
62-
-moz-user-select: none;
63-
-webkit-user-select: none;
63+
pre.code span.th {
64+
/* used for line numbers */
65+
display: table-cell;
66+
user-select: none;
67+
-moz-user-select: none;
68+
-webkit-user-select: none;
6469
}
6570
pre.code span.th::before {
66-
content: counter(linenum);
67-
text-align: right;
68-
display: block;
71+
content: counter(linenum);
72+
text-align: right;
73+
display: block;
6974
}
7075
pre.code span.th {
71-
width: 4em; /* or whatever the desired width of the numbers column is */
76+
width: 4em; /* or whatever the desired width of the numbers column is */
7277
}
7378
pre.code code {
74-
display: table-cell;
79+
display: table-cell;
7580
}
7681

7782
/* Additional styling demo */
7883
pre.code {
79-
border: solid 1px black;
80-
width: auto;
84+
border: solid 1px black;
85+
width: auto;
8186
}
8287
pre.code span.th {
83-
background: #f0f0f0;
84-
padding: 3px;
85-
padding-top: 0px;
86-
border-right: solid 1px silver;
87-
border-top: solid 1px silver;
88+
background: #f0f0f0;
89+
padding: 3px;
90+
padding-top: 0px;
91+
border-right: solid 1px silver;
92+
border-top: solid 1px silver;
8893
}
8994
pre.code span.th::before {
90-
font-size: 90%;
91-
color: #999;
95+
font-size: 90%;
96+
color: #999;
9297
}
9398
pre.code span.tr.first-row span.th {
94-
border-top: none;
99+
border-top: none;
95100
}
96101
pre.code code {
97-
padding: 3px;
102+
padding: 3px;
98103
}
99104
pre.code span.e code {
100-
background: #f0f8ff;
105+
background: #f0f8ff;
101106
}
102107
pre.code span.th::before {
103-
content: counter(linenum) ".";
108+
content: counter(linenum) ".";
109+
}
110+
div.code {
111+
overflow: auto;
104112
}

0 commit comments

Comments
 (0)