Skip to content

Commit e8bf2df

Browse files
tcrtcr
committed
Fixes header to top of page, fixes sidebar from causing page height to grow
1 parent 2ecd6a1 commit e8bf2df

3 files changed

Lines changed: 92 additions & 90 deletions

File tree

‎edit-frontend/src/app/app.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -417,16 +417,17 @@ export class EditorFrame extends React.Component {
417417
<div id="edit-sidebar" className={this.state.sidebarExpanded ? 'expanded' : ''}>
418418
<div id="edit-sidebar-inner">
419419
<div id="edit-sidebar-inner-inner">
420-
<div id="recently-viewed">
421-
<p><span id="edit-sidebar-new"><button onClick={_ => {
422-
window.location.href = '/?from='; // TODO this is a hack
423-
}}>New</button></span>Recently Viewed</p>
424-
<div id="recently-viewed-list">{
425-
recentlyViewed().map((doc) => (
426-
<div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
427-
))
428-
}</div>
429-
<div id="edit-sidebar-inner-inner"></div>
420+
<div id="edit-sidebar-scrollable">
421+
<div id="recently-viewed">
422+
<p><span id="edit-sidebar-new"><button onClick={_ => {
423+
window.location.href = '/?from='; // TODO this is a hack
424+
}}>New</button></span>Recently Viewed</p>
425+
<div id="recently-viewed-list">{
426+
recentlyViewed().map((doc) => (
427+
<div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
428+
))
429+
}</div>
430+
</div>
430431
</div>
431432
<div id="edit-sidebar-footer">
432433
Read more at <a href="http://docs.edit.io">docs.edit.io</a>.<br />Or contribute to <a href="http://github.com/tcr/edit-text">edit-text on Github</a>.

‎edit-frontend/styles/edit-text.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -253,10 +253,3 @@ span.Link:hover::before {
253253
padding: 2px 5px;
254254
color: white;
255255
}
256-
257-
// Debugging
258-
259-
// Spans should never be successive.
260-
span + span {
261-
outline: thin solid #32a1ce;
262-
}

‎edit-frontend/styles/layout.scss‎

Lines changed: 81 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,24 @@ body {
2121
height: 100%;
2222

2323
#edit-layout {
24-
flex: 1;
2524
display: flex;
2625
flex-direction: row;
26+
overflow: auto;
27+
flex-grow: 1;
2728

2829
#edit-sidebar {
2930
width: 0;
3031
display: flex;
3132
overflow: visible;
3233
flex-direction: column;
34+
align-self: stretch;
3335

3436
// When expanded, expand #edit-sidebar-inner.
35-
&.expanded {
36-
#edit-sidebar-inner {
37-
width: 300px;
38-
}
37+
#edit-sidebar-inner {
38+
width: 0;
39+
}
40+
&.expanded #edit-sidebar-inner {
41+
width: 300px;
3942
}
4043

4144
#edit-sidebar-inner {
@@ -45,98 +48,103 @@ body {
4548
background: #eee;
4649
z-index: 1000;
4750
border-right: 1px #999 solid;
51+
4852
display: flex;
49-
flex: 1;
5053
flex-direction: column;
54+
height: 100%;
5155

52-
width: 0;
53-
56+
// To fix all contents at 300px even when animating the drawer
57+
// opening, this inner item re-fixes the width at 300px.
5458
#edit-sidebar-inner-inner {
55-
box-sizing: border-box;
5659
width: 300px;
5760
display: flex;
5861
flex: 1;
5962
flex-direction: column;
63+
overflow: auto;
6064

61-
#recently-viewed {
62-
padding: 1px 20px;
63-
flex: 1;
64-
overflow: auto;
65-
}
66-
67-
#edit-sidebar-footer {
68-
flex: 0;
69-
margin: 0 15px;
70-
}
65+
// Scrollable contents inside here.
7166
}
7267
}
68+
}
7369

74-
#edit-sidebar-footer {
75-
border-top: 1px solid #ccc;
76-
padding: 9px 10px 17px;
77-
text-align: center;
78-
font-size: 0.9em;
79-
opacity: 0.6;
80-
}
70+
#edit-outer {
71+
flex: 1;
72+
overflow: auto;
73+
}
74+
}
75+
}
8176

82-
#recently-viewed {
83-
p {
84-
font-size: 1.2em;
85-
margin: 1.3em 0 0.5em;
86-
font-weight: 500;
87-
color: #444;
88-
}
77+
// Edit sidebar styling
78+
#edit-sidebar {
79+
#edit-sidebar-footer {
80+
flex: 0;
81+
margin: 0 15px;
82+
border-top: 1px solid #ccc;
83+
padding: 9px 10px 17px;
84+
text-align: center;
85+
font-size: 0.9em;
86+
opacity: 0.6;
87+
}
8988

90-
#edit-sidebar-new {
91-
float: right;
92-
margin-top: -4px;
93-
94-
button {
95-
border: 1px solid #aaa;
96-
background: #fff;
97-
font-size: 12px;
98-
padding: 5px 10px;
99-
text-transform: uppercase;
100-
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
101-
cursor: pointer;
102-
}
103-
}
89+
#edit-sidebar-scrollable {
90+
overflow: auto;
91+
flex-grow: 1;
10492

105-
#recently-viewed-list:empty::after {
106-
content: 'No documents to display.';
93+
#recently-viewed {
94+
padding: 1px 20px;
95+
margin-bottom: 20px;
96+
97+
p {
98+
font-size: 1.2em;
99+
margin: 1.3em 0 0.5em;
100+
font-weight: 500;
101+
color: #444;
102+
}
103+
104+
#edit-sidebar-new {
105+
float: right;
106+
margin-top: -4px;
107+
108+
button {
109+
border: 1px solid #aaa;
110+
background: #fff;
111+
font-size: 12px;
112+
padding: 5px 10px;
113+
text-transform: uppercase;
114+
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
115+
cursor: pointer;
107116
}
117+
}
108118

109-
#recently-viewed-list > * {
110-
a { text-decoration: none; }
111-
&:hover a { text-decoration: underline; }
119+
#recently-viewed-list:empty::after {
120+
content: 'No documents to display.';
121+
}
112122

113-
a {
114-
display: block;
115-
text-overflow: ellipsis;
116-
white-space: nowrap;
117-
overflow: hidden;
123+
#recently-viewed-list > * {
124+
a { text-decoration: none; }
125+
&:hover a { text-decoration: underline; }
118126

119-
padding: 0.5em 0 0.25em 0.4em;
127+
a {
128+
display: block;
129+
text-overflow: ellipsis;
130+
white-space: nowrap;
131+
overflow: hidden;
120132

121-
font-size: 18px;
122-
&:not(:hover) {
123-
color: #000000;
124-
}
125-
}
133+
padding: 0.5em 0 0.25em 0.4em;
126134

127-
a::before {
128-
content: '\01F4CB';
129-
margin-right: 13px;
130-
filter: grayscale(60%) contrast(130%);
131-
opacity: 0.8;
135+
font-size: 18px;
136+
&:not(:hover) {
137+
color: #000000;
132138
}
133139
}
134-
}
135-
}
136140

137-
#edit-outer {
138-
flex: 1;
139-
overflow: auto;
141+
a::before {
142+
content: '\01F4CB';
143+
margin-right: 13px;
144+
filter: grayscale(60%) contrast(130%);
145+
opacity: 0.8;
146+
}
147+
}
140148
}
141149
}
142150
}

0 commit comments

Comments
 (0)