Skip to content

Commit

Permalink
Merge #249
Browse files Browse the repository at this point in the history 
249: Fixes header to top of page, and stops sidebar from influencing page height r=tcr a=tcr



Co-authored-by: Tim Ryan <[email protected]>
  • Loading branch information
@bors @tcr
bors[bot] and tcr committed Jan 20, 2019
2 parents 2ecd6a1 + e8bf2df commit d7519ab
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 90 deletions.
21 changes: 11 additions & 10 deletions edit-frontend/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -417,16 +417,17 @@ export class EditorFrame extends React.Component {
<div id="edit-sidebar" className={this.state.sidebarExpanded ? 'expanded' : ''}>
<div id="edit-sidebar-inner">
<div id="edit-sidebar-inner-inner">
<div id="recently-viewed">
<p><span id="edit-sidebar-new"><button onClick={_ => {
window.location.href = '/?from='; // TODO this is a hack
}}>New</button></span>Recently Viewed</p>
<div id="recently-viewed-list">{
recentlyViewed().map((doc) => (
<div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
))
}</div>
<div id="edit-sidebar-inner-inner"></div>
<div id="edit-sidebar-scrollable">
<div id="recently-viewed">
<p><span id="edit-sidebar-new"><button onClick={_ => {
window.location.href = '/?from='; // TODO this is a hack
}}>New</button></span>Recently Viewed</p>
<div id="recently-viewed-list">{
recentlyViewed().map((doc) => (
<div><a href={doc.path} title={'/' + doc.path}>{doc.path}</a></div>
))
}</div>
</div>
</div>
<div id="edit-sidebar-footer">
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>.
Expand Down
7 changes: 0 additions & 7 deletions edit-frontend/styles/edit-text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,10 +253,3 @@ span.Link:hover::before {
padding: 2px 5px;
color: white;
}

// Debugging

// Spans should never be successive.
span + span {
outline: thin solid #32a1ce;
}
154 changes: 81 additions & 73 deletions edit-frontend/styles/layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,24 @@ body {
height: 100%;

#edit-layout {
flex: 1;
display: flex;
flex-direction: row;
overflow: auto;
flex-grow: 1;

#edit-sidebar {
width: 0;
display: flex;
overflow: visible;
flex-direction: column;
align-self: stretch;

// When expanded, expand #edit-sidebar-inner.
&.expanded {
#edit-sidebar-inner {
width: 300px;
}
#edit-sidebar-inner {
width: 0;
}
&.expanded #edit-sidebar-inner {
width: 300px;
}

#edit-sidebar-inner {
Expand All @@ -45,98 +48,103 @@ body {
background: #eee;
z-index: 1000;
border-right: 1px #999 solid;

display: flex;
flex: 1;
flex-direction: column;
height: 100%;

width: 0;

// To fix all contents at 300px even when animating the drawer
// opening, this inner item re-fixes the width at 300px.
#edit-sidebar-inner-inner {
box-sizing: border-box;
width: 300px;
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;

#recently-viewed {
padding: 1px 20px;
flex: 1;
overflow: auto;
}

#edit-sidebar-footer {
flex: 0;
margin: 0 15px;
}
// Scrollable contents inside here.
}
}
}

#edit-sidebar-footer {
border-top: 1px solid #ccc;
padding: 9px 10px 17px;
text-align: center;
font-size: 0.9em;
opacity: 0.6;
}
#edit-outer {
flex: 1;
overflow: auto;
}
}
}

#recently-viewed {
p {
font-size: 1.2em;
margin: 1.3em 0 0.5em;
font-weight: 500;
color: #444;
}
// Edit sidebar styling
#edit-sidebar {
#edit-sidebar-footer {
flex: 0;
margin: 0 15px;
border-top: 1px solid #ccc;
padding: 9px 10px 17px;
text-align: center;
font-size: 0.9em;
opacity: 0.6;
}

#edit-sidebar-new {
float: right;
margin-top: -4px;

button {
border: 1px solid #aaa;
background: #fff;
font-size: 12px;
padding: 5px 10px;
text-transform: uppercase;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
}
#edit-sidebar-scrollable {
overflow: auto;
flex-grow: 1;

#recently-viewed-list:empty::after {
content: 'No documents to display.';
#recently-viewed {
padding: 1px 20px;
margin-bottom: 20px;

p {
font-size: 1.2em;
margin: 1.3em 0 0.5em;
font-weight: 500;
color: #444;
}

#edit-sidebar-new {
float: right;
margin-top: -4px;

button {
border: 1px solid #aaa;
background: #fff;
font-size: 12px;
padding: 5px 10px;
text-transform: uppercase;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
}

#recently-viewed-list > * {
a { text-decoration: none; }
&:hover a { text-decoration: underline; }
#recently-viewed-list:empty::after {
content: 'No documents to display.';
}

a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
#recently-viewed-list > * {
a { text-decoration: none; }
&:hover a { text-decoration: underline; }

padding: 0.5em 0 0.25em 0.4em;
a {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

font-size: 18px;
&:not(:hover) {
color: #000000;
}
}
padding: 0.5em 0 0.25em 0.4em;

a::before {
content: '\01F4CB';
margin-right: 13px;
filter: grayscale(60%) contrast(130%);
opacity: 0.8;
font-size: 18px;
&:not(:hover) {
color: #000000;
}
}
}
}

#edit-outer {
flex: 1;
overflow: auto;
a::before {
content: '\01F4CB';
margin-right: 13px;
filter: grayscale(60%) contrast(130%);
opacity: 0.8;
}
}
}
}
}
Expand Down

0 comments on commit d7519ab

Please sign in to comment.