LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Closes #198

Browse source
This commit is contained in:
ポール ウェッブ 2018-12-12 11:15:27 -06:00
parent b2b015b719
commit 19d8913465
4 changed files with 36 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/components/client/glossary-scripts.js
View file

@ -4,8 +4,3 @@
// Add page-specific styling // Add page-specific styling
document.querySelector("body").classList.add("glossary"); document.querySelector("body").classList.add("glossary");
// Toggle sidebar
document.querySelector("[data-action='toggle glossary sidebar']").onclick = () => {
document.querySelector("body").classList.toggle("sidebar-closed");
};

5
app/components/glossary-toc.js
View file

@ -22,7 +22,9 @@ export default (state, emit, markdown) => {
const title = item.match(titleRegex)[0].replace(">", "").replace("<", ""); const title = item.match(titleRegex)[0].replace(">", "").replace("<", "");
collectionOfTocElements.push(` collectionOfTocElements.push(`
<li><a href="${slugify(id)}" title="Go to '${title}'">${title}</a></li> <li>
<a href="${slugify(id)}" title="Go to '${title}'">${title}</a>
</li>
`); `);
} }
@ -30,7 +32,6 @@ export default (state, emit, markdown) => {
<ul class="component--glossary-toc"> <ul class="component--glossary-toc">
${collectionOfTocElements.join("")} ${collectionOfTocElements.join("")}
</ul> </ul>
<button class="component--glossary-toc-toggle" data-action="toggle glossary sidebar" type="button">Toggle</button>
`; `;
}; };

2
app/sass/pages/_api.scss
View file

@ -52,7 +52,7 @@
background-color: $lbry-white; background-color: $lbry-white;
border-right: 1px solid $lbry-gray-1; border-right: 1px solid $lbry-gray-1;
float: left; // float: left;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;

112
app/sass/partials/_glossary.scss
View file

@ -1,8 +1,10 @@
// sass-lint:disable no-important
// Refactor of entire CSS is sorely needed
.glossary { .glossary {
&:not(.sidebar-closed) {
main { main {
width: calc(100vw - 250px); width: calc(100vw - 200px);
margin-left: 250px; margin-left: 200px;
} }
.page__header-wrap, .page__header-wrap,
@ -12,100 +14,40 @@
margin-left: 1rem; margin-left: 1rem;
} }
} }
.component--glossary-toc-toggle {
&:not(.noncompliant-fix) {
left: calc(250px - 25px);
}
&.noncompliant-fix {
@media (min-width: 901px) {
left: calc(250px - 65px);
}
@media (max-width: 900px) {
left: calc(250px - 45px);
}
}
}
}
&.sidebar-closed {
@media (max-width: 1230px) {
.page__header {
margin-left: 1rem;
}
}
.component--glossary-toc {
left: -250px;
}
.component--glossary-toc-toggle {
&:not(.noncompliant-fix) {
left: 0;
}
&.noncompliant-fix {
@media (min-width: 901px) {
left: -40px;
}
@media (max-width: 900px) {
left: -20px;
}
}
}
}
} }
.component--glossary-toc { .component--glossary-toc {
width: 250px; height: calc(100vh - 4rem); width: 200px; height: calc(100vh - 4rem);
top: 4rem; left: 0; bottom: 0; left: 0;
background-color: $lbry-white; background-color: $lbry-white;
border-right: 1px solid $lbry-gray-2; border-right: 1px solid $lbry-gray-1;
font-size: 0.8rem; // TODO: Why was !important here? font-size: 0.8rem;
line-height: 1.33;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
padding-top: 1rem; // TODO: Why was !important here? padding-top: 0.25rem !important;
position: fixed; // TODO: Why was !important here? padding-left: 0 !important;
position: fixed;
z-index: 1; z-index: 1;
li:last-of-type { li {
list-style-type: none !important;
&:hover {
background-color: $lbry-gray-2;
}
&:last-of-type {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
}
.component--glossary-toc-toggle { a {
background-color: $lbry-gray-1; padding: 0.25rem 0.5rem 0.25rem 0.75rem;
font-size: 0.7rem; background-image: none !important;
position: absolute; color: inherit !important;
text-orientation: upright; display: block !important;
text-transform: uppercase; text-shadow: none !important;
writing-mode: vertical-rl;
z-index: 1;
&:not(.noncompliant-fix) {
width: 25px; height: 104px;
top: 4rem;
}
&.noncompliant-fix {
transform: rotate(90deg);
@media (min-width: 901px) {
width: 105px; height: 25px;
top: 103px;
letter-spacing: 2px;
}
@media (max-width: 900px) {
width: 65px; height: 25px;
top: 83px;
letter-spacing: 1px;
} }
} }
} }