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

Merge pull request #166 from lbryio/164-toggle-fix

Browse source 
Closes #164
This commit is contained in:
netop:// ウェッブ 2018-10-01 10:36:26 -05:00 committed by GitHub
commit f675d5623a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/dist/scripts/app.js vendored
View file

@ -14,6 +14,12 @@ $(function () {
// Browsers not Firefox do not yet support `text-orientation` and/or `writing-mode`
if (!/Firefox[/\s](\d+\.\d+)/.test(navigator.userAgent))
document.querySelector(".component--glossary-toc-toggle").classList.add("noncompliant-fix");
if ( // Toggle beta message if ( // Toggle beta message
localStorage.getItem("hide lbry alert") && localStorage.getItem("hide lbry alert") &&
localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason

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

@ -14,17 +14,47 @@
} }
.component--glossary-toc-toggle { .component--glossary-toc-toggle {
left: calc(250px - 25px); &: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 { &.sidebar-closed {
@media (max-width: 1230px) {
.page__header {
margin-left: 1rem;
}
}
.component--glossary-toc { .component--glossary-toc {
left: -250px; left: -250px;
} }
.component--glossary-toc-toggle { .component--glossary-toc-toggle {
left: 0; &:not(.noncompliant-fix) {
left: 0;
}
&.noncompliant-fix {
@media (min-width: 901px) {
left: -40px;
}
@media (max-width: 900px) {
left: -20px;
}
}
} }
} }
} }
@ -50,13 +80,34 @@
} }
.component--glossary-toc-toggle { .component--glossary-toc-toggle {
width: 25px; height: 104px; background-color: mix($gray, $white, 30%);
font-size: 0.7rem; font-size: 0.7rem;
position: absolute; position: absolute;
text-orientation: upright; text-orientation: upright;
text-transform: uppercase; text-transform: uppercase;
top: 4rem;
writing-mode: vertical-rl; writing-mode: vertical-rl;
z-index: 1; 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;
letter-spacing: 2px;
top: 103px;
}
@media (max-width: 900px) {
width: 65px; height: 25px;
letter-spacing: 1px;
top: 83px;
}
}
} }