Skip to content

Commit 87a3013

Browse files
Gaurav0Gaurav0
authored
Merge pull request #707 from knownasilya/fix/sidebar-layout
Fix/sidebar layout
2 parents 12c179f + 87c1035 commit 87a3013

25 files changed

Lines changed: 523 additions & 307 deletions

‎app/components/gist-header.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import Component from '@ember/component';
22

33
export default Component.extend({
4-
classNames: ['gist-header'],
5-
classNameBindings: ['open'],
6-
tagName: 'nav',
7-
open: true
4+
classNames: ['gist-header']
85
});

‎app/components/saved-twiddles-table.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { filter } from '@ember/object/computed';
22
import Component from '@ember/component';
33

44
export default Component.extend({
5-
5+
classNames: ['saved-twiddles-table'],
6+
67
filteredModel: filter('model', function(gist) {
78
let fileNames = gist.get('files').map(function(file) {
89
return file.get('fileName');

‎app/components/sidebar-layout.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { action } from '@ember/object';
4+
5+
export default class SidebarLayoutComponent extends Component {
6+
@tracked isMobileMenuOpen = true;
7+
8+
@action
9+
updateSidebar(isOpen) {
10+
this.args.onSidebarUpdated(isOpen);
11+
}
12+
}

‎app/components/user-menu.js‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,5 @@ export default Component.extend({
3232
default:
3333
return '';
3434
}
35-
}),
36-
37-
actions: {
38-
signInViaGithub() {
39-
this.signInViaGithub();
40-
},
41-
signOut() {
42-
this.signOut();
43-
},
44-
45-
showTwiddles() {
46-
this.showTwiddles();
47-
}
48-
}
35+
})
4936
});

‎app/controllers/twiddles.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Controller from '@ember/controller';
2+
3+
export default class TwiddlesController extends Controller {
4+
isSidebarOpen = true;
5+
}

‎app/mixins/gist-controller.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import Mixin from '@ember/object/mixin';
22
import { run } from '@ember/runloop';
33

44
export default Mixin.create({
5-
queryParams: ['numColumns', 'fullScreen', 'route', 'openFiles', 'fileTreeShown'],
5+
queryParams: ['numColumns', 'fullScreen', 'route', 'openFiles', 'isSidebarOpen'],
66
numColumns: 1,
77
fullScreen: false,
88
openFiles: "",
9-
fileTreeShown: true,
9+
isSidebarOpen: true,
1010
route: undefined,
1111
applicationUrl: undefined,
1212
unsaved: true,

‎app/routes/gist.js‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,6 @@ export default Route.extend({
112112
this.session.close();
113113
},
114114

115-
showTwiddles() {
116-
this.transitionTo('twiddles');
117-
},
118-
119115
urlChanged(newUrl) {
120116
this.app.postMessage({ newUrl });
121117
},

app/styles/_toolbar.scss renamed to app/styles/_gist-header.scss

Lines changed: 3 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
.toolbar {
1+
.gist-header {
22
display: flex;
33
flex-direction: column;
4+
flex: 1;
45
color: #fff;
56
font-size: $font-size;
67
background: $header-bg;
@@ -96,7 +97,7 @@
9697
}
9798

9899
.ember-jstree {
99-
height: 100%;
100+
height: calc(100% - 50px);
100101
overflow: auto;
101102
}
102103
}
@@ -112,33 +113,6 @@
112113
}
113114
}
114115

115-
.user-menu {
116-
a {
117-
display: block;
118-
}
119-
120-
.user-avatar {
121-
display: inline-block;
122-
width: $topbar-control-height;
123-
height: 100%;
124-
overflow: hidden;
125-
float: left;
126-
margin-right: 5px;
127-
line-height: normal;
128-
border-radius: 3px;
129-
130-
img {
131-
width: $topbar-control-height;
132-
height: $topbar-control-height;
133-
}
134-
135-
&.unauthenticated {
136-
background: url("../images/github32-inverse-faf2ee.svg");
137-
height: 32px;
138-
}
139-
}
140-
}
141-
142116
.main-menu {
143117
text-align: left;
144118

@@ -158,11 +132,6 @@
158132
margin: 10px;
159133
}
160134

161-
.saved-twiddles-header {
162-
color: $bleached-orange;
163-
font-size: $font-size-larger;
164-
}
165-
166135
.indicator {
167136
display: inline;
168137
text-transform: uppercase;
@@ -246,21 +215,6 @@
246215
padding: 0 1em;
247216
}
248217

249-
.sign-in {
250-
cursor: pointer;
251-
padding: 0 .5em;
252-
}
253-
254-
.signing-in {
255-
padding: 0 1em;
256-
height: $topbar-control-height;
257-
line-height: $topbar-control-height - 2;
258-
text-transform: uppercase;
259-
font-weight: bold;
260-
color: $bleached-orange;
261-
border: 1px solid transparent;
262-
}
263-
264218
&.navbar-collapse {
265219
@media (max-width: $screen-md-min) {
266220
background: $header-bg;

‎app/styles/_saved-twiddles.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
.saved-twiddles-sidebar {
2+
height: 100vh;
3+
4+
.sidebar .toggleable-menu {
5+
justify-content: space-between;
6+
}
7+
}
8+
9+
.saved-twiddles-header {
10+
display: flex;
11+
flex-direction: column;
12+
13+
h1 {
14+
font-size: 1.5em;
15+
align-self: center;
16+
color: $bleached-orange;
17+
font-size: $font-size-larger;
18+
}
19+
}
20+
21+
.saved-twiddles-table {
22+
overflow-y: auto;
23+
width: 100%;
24+
}
25+
126
div.table-responsive {
227
margin: 20px auto;
328
}

‎app/styles/_sidebar-layout.scss‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
.sidebar-layout {
2+
display: flex;
3+
min-height: 100vh;
4+
align-items: stretch;
5+
6+
@media (min-width: $screen-md-min) {
7+
min-height: calc(100vh - #{$footer-height});
8+
}
9+
10+
@media (max-width: $screen-md-min) {
11+
flex-direction: column;
12+
}
13+
14+
.sidebar {
15+
width: 25rem;
16+
display: flex;
17+
flex-direction: column;
18+
color: #fff;
19+
font-size: $font-size;
20+
background: $header-bg;
21+
background-image: url(/images/header.svg);
22+
background-position: top center;
23+
background-repeat: no-repeat;
24+
background-size: cover;
25+
26+
@media (min-width: $screen-md-min) {
27+
position: relative;
28+
left: 0;
29+
transition: left 0.2s ease, margin-right 0.2s ease;
30+
31+
&.sidebar-closed {
32+
left: -25rem;
33+
margin-right: -25rem;
34+
}
35+
}
36+
37+
@media (max-width: $screen-md-min) {
38+
padding: 0;
39+
width: 100%;
40+
}
41+
42+
.toggle-mobile {
43+
display: none;
44+
}
45+
46+
@media (max-width: $screen-md-min) {
47+
.toggle-mobile {
48+
display: block;
49+
border: none;
50+
border-radius: 0;
51+
background-color: transparent;
52+
color: white;
53+
54+
&:active:hover {
55+
background-color: transparent;
56+
color: white;
57+
}
58+
}
59+
}
60+
61+
.toggleable-menu {
62+
display: flex;
63+
flex-direction: column;
64+
flex: 1;
65+
}
66+
67+
.menus {
68+
ul {
69+
list-style-type: none;
70+
margin-left: 0;
71+
padding-left: 0;
72+
}
73+
74+
hr {
75+
display: block;
76+
border-color: $burnt-orange;
77+
margin: 1em 0;
78+
}
79+
80+
.dropdown .caret {
81+
position: absolute;
82+
right: 10px;
83+
top: 13px;
84+
}
85+
86+
.dropdown-menu {
87+
.dropdown-submenu > .dropdown-menu {
88+
top: 5px !important;
89+
margin-bottom: -31px;
90+
91+
@media (max-width: $screen-md-min) {
92+
left: 80px;
93+
}
94+
}
95+
}
96+
}
97+
98+
.user-menu {
99+
a {
100+
display: block;
101+
}
102+
103+
.user-avatar {
104+
display: inline-block;
105+
width: $topbar-control-height;
106+
height: 100%;
107+
overflow: hidden;
108+
float: left;
109+
margin-right: 5px;
110+
line-height: normal;
111+
border-radius: 3px;
112+
113+
img {
114+
width: $topbar-control-height;
115+
height: $topbar-control-height;
116+
}
117+
118+
&.unauthenticated {
119+
background: url("../images/github32-inverse-faf2ee.svg");
120+
height: 32px;
121+
}
122+
}
123+
}
124+
125+
.dropdown {
126+
&.open .dropdown-toggle {
127+
background-color: $menu-bg;
128+
border: 1px solid transparent;
129+
}
130+
}
131+
132+
.user-dropdown > .dropdown-toggle {
133+
padding: 0 1em 0 0;
134+
}
135+
136+
.dropdown-toggle, .sign-in {
137+
height: $topbar-control-height;
138+
line-height: $topbar-control-height - 2;
139+
text-transform: uppercase;
140+
font-weight: bold;
141+
color: $bleached-orange;
142+
border: 1px solid transparent;
143+
144+
&:hover, &:focus {
145+
background-color: $menu-hover-bg;
146+
}
147+
}
148+
149+
.dropdown-toggle {
150+
padding: 0 1em;
151+
}
152+
153+
.sign-in {
154+
cursor: pointer;
155+
padding: 0 .5em;
156+
}
157+
158+
.signing-in {
159+
padding: 0 1em;
160+
height: $topbar-control-height;
161+
line-height: $topbar-control-height - 2;
162+
text-transform: uppercase;
163+
font-weight: bold;
164+
color: $bleached-orange;
165+
border: 1px solid transparent;
166+
}
167+
}
168+
169+
.content {
170+
display: flex;
171+
flex: 1;
172+
align-items: stretch;
173+
justify-content: stretch;
174+
}
175+
}

0 commit comments

Comments
 (0)