Skip to content

Commit eb76d13

Browse files
blakeembreyblakeembrey
committed
Fix layout at smaller screen sizes
Uses flex wrap and two containers to automatically flow under the other element when size is too small.
1 parent 2b83e5b commit eb76d13

File tree

2 files changed

+172
-150
lines changed

2 files changed

+172
-150
lines changed

‎dist/main/atom/views/mainPanelView.js

Lines changed: 85 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -39,97 +39,107 @@ var MainPanelView = (function (_super) {
3939
tabindex: '-1'
4040
}, function () {
4141
_this.div({
42-
class: 'layout horizontal atomts-panel-header',
43-
style: '-webkit-user-select: none; align-items: center',
42+
class: 'layout horizontal',
43+
style: '-webkit-user-select: none; flex-wrap: wrap',
4444
dblclick: 'toggle'
4545
}, function () {
4646
_this.span({
47-
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select:none',
48-
click: 'toggle'
49-
}, function () {
50-
_this.span({ class: "icon-microscope" });
51-
_this.span({ style: 'font-weight:bold' }, " TypeScript ");
52-
});
53-
_this.div({
54-
class: 'btn-group',
55-
style: 'margin-left: 8px'
56-
}, function () {
57-
btn('error', panelHeaders.error, 'selected');
58-
btn('build', panelHeaders.build);
59-
btn('references', panelHeaders.references);
60-
});
61-
_this.div({
62-
style: 'cursor: pointer;',
63-
click: 'clickedCurrentTsconfigFilePath'
47+
class: 'layout horizontal atomts-panel-header',
48+
style: 'align-items: center'
6449
}, function () {
6550
_this.span({
66-
style: 'margin-left: 10px;',
67-
outlet: 'tsconfigInUse'
51+
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 16px',
52+
click: 'toggle'
53+
}, function () {
54+
_this.span({ class: 'icon-microscope' });
55+
_this.span({ style: 'font-weight: bold' }, 'TypeScript');
6856
});
69-
});
70-
_this.div({
71-
style: 'overflow-x: visible; white-space: nowrap;'
72-
}, function () {
73-
_this.span({
74-
style: 'margin-left:10px; transition: color 1s',
75-
outlet: 'fileStatus'
57+
_this.div({
58+
class: 'btn-group',
59+
style: 'margin-left: 6px; flex: 1 0 auto'
60+
}, function () {
61+
btn('error', panelHeaders.error, 'selected');
62+
btn('build', panelHeaders.build);
63+
btn('references', panelHeaders.references);
7664
});
7765
});
78-
_this.div({
79-
class: 'heading-summary flex',
80-
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
81-
outlet: 'summary'
82-
});
83-
_this.progress({
84-
class: 'inline-block build-progress',
85-
style: 'display: none; color: red',
86-
outlet: 'buildProgress'
87-
});
8866
_this.span({
89-
class: 'section-pending',
90-
outlet: 'sectionPending',
91-
click: 'showPending'
67+
class: 'layout horizontal atomts-panel-header',
68+
style: 'align-items: center; flex: 1 1 auto'
9269
}, function () {
93-
_this.span({
94-
outlet: 'txtPendingCount',
95-
style: 'cursor: pointer; margin-right: 7px;',
70+
_this.div({
71+
style: 'cursor: pointer;',
72+
click: 'clickedCurrentTsconfigFilePath'
73+
}, function () {
74+
_this.span({
75+
outlet: 'tsconfigInUse'
76+
});
9677
});
97-
_this.span({
98-
class: 'loading loading-spinner-tiny inline-block',
99-
style: 'cursor: pointer; margin-right: 7px;'
78+
_this.div({
79+
style: 'overflow-x: visible; white-space: nowrap;'
80+
}, function () {
81+
_this.span({
82+
style: 'margin-left: 10px; transition: color 1s',
83+
outlet: 'fileStatus'
84+
});
10085
});
101-
});
102-
_this.div({
103-
class: 'heading-buttons'
104-
}, function () {
105-
_this.span({
106-
class: 'heading-fold icon-unfold',
107-
style: 'cursor: pointer; margin-right:10px',
108-
outlet: 'btnFold',
109-
click: 'toggle'
86+
_this.div({
87+
class: 'heading-summary flex',
88+
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
89+
outlet: 'summary'
90+
});
91+
_this.progress({
92+
class: 'inline-block build-progress',
93+
style: 'display: none; color: red',
94+
outlet: 'buildProgress'
11095
});
11196
_this.span({
112-
class: 'heading-fold icon-sync',
113-
style: 'cursor: pointer',
114-
outlet: 'btnSoftReset',
115-
click: 'softReset'
97+
class: 'section-pending',
98+
outlet: 'sectionPending',
99+
click: 'showPending'
100+
}, function () {
101+
_this.span({
102+
outlet: 'txtPendingCount',
103+
style: 'cursor: pointer; margin-left: 5px',
104+
});
105+
_this.span({
106+
class: 'loading loading-spinner-tiny inline-block',
107+
style: 'cursor: pointer; margin-left: 5px'
108+
});
109+
});
110+
_this.div({
111+
class: 'heading-buttons',
112+
style: 'margin-left: 5px'
113+
}, function () {
114+
_this.span({
115+
class: 'heading-fold icon-unfold',
116+
style: 'cursor: pointer; margin-right: 10px',
117+
outlet: 'btnFold',
118+
click: 'toggle'
119+
});
120+
_this.span({
121+
class: 'heading-fold icon-sync',
122+
style: 'cursor: pointer',
123+
outlet: 'btnSoftReset',
124+
click: 'softReset'
125+
});
116126
});
117127
});
118-
});
119-
_this.div({
120-
class: 'panel-body atomts-panel-body',
121-
outlet: 'errorBody',
122-
style: 'overflow-y: auto; display: none'
123-
});
124-
_this.div({
125-
class: 'panel-body atomts-panel-body',
126-
outlet: 'buildBody',
127-
style: 'overflow-y: auto; display: none'
128-
});
129-
_this.div({
130-
class: 'panel-body atomts-panel-body',
131-
outlet: 'referencesBody',
132-
style: 'overflow-y: auto; display: none'
128+
_this.div({
129+
class: 'panel-body atomts-panel-body',
130+
outlet: 'errorBody',
131+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
132+
});
133+
_this.div({
134+
class: 'panel-body atomts-panel-body',
135+
outlet: 'buildBody',
136+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
137+
});
138+
_this.div({
139+
class: 'panel-body atomts-panel-body',
140+
outlet: 'referencesBody',
141+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
142+
});
133143
});
134144
});
135145
};

‎lib/main/atom/views/mainPanelView.ts

Lines changed: 87 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -49,108 +49,120 @@ export class MainPanelView extends view.View<any> {
4949
class: 'atomts atomts-main-panel-view native-key-bindings',
5050
tabindex: '-1'
5151
}, () => {
52-
this.div({
53-
class: 'layout horizontal atomts-panel-header',
54-
style: '-webkit-user-select: none; align-items: center',
55-
dblclick: 'toggle'
52+
this.div({
53+
class: 'layout horizontal',
54+
style: '-webkit-user-select: none; flex-wrap: wrap',
55+
dblclick: 'toggle'
56+
}, () => {
57+
this.span({
58+
class: 'layout horizontal atomts-panel-header',
59+
style: 'align-items: center'
60+
}, () => {
61+
this.span({
62+
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 16px',
63+
click: 'toggle'
64+
}, () => {
65+
this.span({ class: 'icon-microscope' });
66+
this.span({ style: 'font-weight: bold' }, 'TypeScript');
67+
});
68+
69+
this.div({
70+
class: 'btn-group',
71+
style: 'margin-left: 6px; flex: 1 0 auto'
72+
}, () => {
73+
btn('error', panelHeaders.error, 'selected')
74+
btn('build', panelHeaders.build)
75+
btn('references', panelHeaders.references)
76+
});
77+
});
78+
79+
this.span({
80+
class: 'layout horizontal atomts-panel-header',
81+
style: 'align-items: center; flex: 1 1 auto'
5682
}, () => {
83+
this.div({
84+
style: 'cursor: pointer;',
85+
click: 'clickedCurrentTsconfigFilePath'
86+
}, () => {
5787
this.span({
58-
style: 'cursor: pointer; color: rgb(0, 148, 255); -webkit-user-select:none',
59-
click: 'toggle'
60-
}, () => {
61-
this.span({ class: "icon-microscope" });
62-
this.span({ style: 'font-weight:bold' }, " TypeScript ");
63-
});
64-
65-
this.div({
66-
class: 'btn-group',
67-
style: 'margin-left: 8px'
68-
},
69-
() => {
70-
btn('error', panelHeaders.error, 'selected')
71-
btn('build', panelHeaders.build)
72-
btn('references', panelHeaders.references)
73-
});
74-
75-
this.div({
76-
style: 'cursor: pointer;',
77-
click: 'clickedCurrentTsconfigFilePath'
78-
}, () => {
79-
this.span({
80-
style: 'margin-left: 10px;',
81-
outlet: 'tsconfigInUse'
82-
});
88+
outlet: 'tsconfigInUse'
8389
});
90+
});
8491

85-
this.div({
86-
style: 'overflow-x: visible; white-space: nowrap;'
87-
}, () => {
88-
this.span({
89-
style: 'margin-left:10px; transition: color 1s', // Added transition to make it easy to see *yes I just did this compile*.
90-
outlet: 'fileStatus'
91-
});
92+
this.div({
93+
style: 'overflow-x: visible; white-space: nowrap;'
94+
}, () => {
95+
this.span({
96+
style: 'margin-left: 10px; transition: color 1s', // Added transition to make it easy to see *yes I just did this compile*.
97+
outlet: 'fileStatus'
9298
});
99+
});
100+
101+
this.div({
102+
class: 'heading-summary flex',
103+
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
104+
outlet: 'summary'
105+
});
106+
107+
this.progress({
108+
class: 'inline-block build-progress',
109+
style: 'display: none; color: red',
110+
outlet: 'buildProgress'
111+
});
93112

94-
this.div({
95-
class: 'heading-summary flex',
96-
style: 'margin-left: 5px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis',
97-
outlet: 'summary'
113+
this.span({
114+
class: 'section-pending',
115+
outlet: 'sectionPending',
116+
click: 'showPending'
117+
}, () => {
118+
this.span({
119+
outlet: 'txtPendingCount',
120+
style: 'cursor: pointer; margin-left: 5px',
98121
});
99122

100-
this.progress({
101-
class: 'inline-block build-progress',
102-
style: 'display: none; color: red',
103-
outlet: 'buildProgress'
123+
this.span({
124+
class: 'loading loading-spinner-tiny inline-block',
125+
style: 'cursor: pointer; margin-left: 5px'
104126
});
127+
});
105128

129+
this.div({
130+
class: 'heading-buttons',
131+
style: 'margin-left: 5px'
132+
}, () => {
106133
this.span({
107-
class: 'section-pending',
108-
outlet: 'sectionPending',
109-
click: 'showPending'
110-
}, () => {
111-
this.span({
112-
outlet: 'txtPendingCount',
113-
style: 'cursor: pointer; margin-right: 7px;',
114-
});
115-
this.span({
116-
class: 'loading loading-spinner-tiny inline-block',
117-
style: 'cursor: pointer; margin-right: 7px;'
118-
});
134+
class: 'heading-fold icon-unfold',
135+
style: 'cursor: pointer; margin-right: 10px',
136+
outlet: 'btnFold',
137+
click: 'toggle'
119138
});
120139

121-
this.div({
122-
class: 'heading-buttons'
123-
}, () => {
124-
this.span({
125-
class: 'heading-fold icon-unfold',
126-
style: 'cursor: pointer; margin-right:10px',
127-
outlet: 'btnFold',
128-
click: 'toggle'
129-
});
130-
this.span({
131-
class: 'heading-fold icon-sync',
132-
style: 'cursor: pointer',
133-
outlet: 'btnSoftReset',
134-
click: 'softReset'
135-
});
136-
});
140+
this.span({
141+
class: 'heading-fold icon-sync',
142+
style: 'cursor: pointer',
143+
outlet: 'btnSoftReset',
144+
click: 'softReset'
145+
});
137146
});
147+
});
148+
138149
this.div({
139150
class: 'panel-body atomts-panel-body',
140151
outlet: 'errorBody',
141-
style: 'overflow-y: auto; display: none'
152+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
142153
});
143154
this.div({
144155
class: 'panel-body atomts-panel-body',
145156
outlet: 'buildBody',
146-
style: 'overflow-y: auto; display: none'
157+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
147158
});
148159
this.div({
149160
class: 'panel-body atomts-panel-body',
150161
outlet: 'referencesBody',
151-
style: 'overflow-y: auto; display: none'
162+
style: 'overflow-y: auto; flex: 1 0 100%; display: none'
152163
});
153164
});
165+
});
154166
}
155167

156168

0 commit comments

Comments
 (0)