fix: css cleanup of nav-related variables (#1786)

* fix: css cleanup of nav-related variables

* changed my mind on this margin
This commit is contained in:
Nolan Lawson 2020-05-20 07:07:47 -07:00 committed by GitHub
parent f080148aad
commit bedb636182
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 39 additions and 28 deletions

View file

@ -19,7 +19,8 @@
<style>
.main-nav {
border-bottom: 1px solid var(--nav-border);
box-sizing: border-box;
border-bottom: var(--nav-border-bottom) solid var(--nav-border);
background: var(--nav-bg);
position: fixed;
left: 0;

View file

@ -42,7 +42,7 @@
.nav-indicator {
width: 100%;
height: 1px;
height: var(--nav-indicator-height);
background: var(--nav-a-border);
transform-origin: left;
}
@ -82,11 +82,12 @@
}
.nav-link-label {
font-size: 16px;
font-size: var(--nav-font-size);
line-height: var(--nav-icon-size);
color: var(--nav-text-color);
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
overflow: visible;
text-overflow: ellipsis;
}

View file

@ -15,8 +15,8 @@
}
:global(.nav-link-svg-wrapper, .nav-link-svg) {
width: var(--nav-icon-width);
height: var(--nav-icon-height);
width: var(--nav-icon-size);
height: var(--nav-icon-size);
}
.nav-link-badge {

View file

@ -25,7 +25,7 @@
:global(.compose-box-button-sticky, .compose-box-button-fixed) {
z-index: 5000;
top: calc(var(--main-content-pad-top) + var(--sticky-pad-top));
top: calc(var(--nav-total-height));
}
</style>
<script>

View file

@ -20,11 +20,10 @@
import { listStore } from './listStore'
import { getScrollContainer } from '../../_utils/scrollContainer'
import { observe } from 'svelte-extras'
import { mark, stop } from '../../_utils/marks'
function getScrollTopOffset () {
const style = getComputedStyle(document.documentElement)
return parseInt(style.getPropertyValue('--main-content-pad-top'), 10) +
parseInt(style.getPropertyValue('--status-pad-v'), 10)
return document.getElementById('main-nav').getBoundingClientRect().height
}
export default {
@ -59,9 +58,12 @@
const element = document.getElementById(`list-item-${scrollToItem}`)
requestAnimationFrame(() => {
console.log('scrolling element into view')
element.scrollIntoView(true)
mark('scrollToElement')
const scrollTopOffset = getScrollTopOffset()
element.scrollIntoView(true)
console.log('scrollTopOffset', scrollTopOffset)
getScrollContainer().scrollTop -= scrollTopOffset
stop('scrollToElement')
this.fire('initialized')
})
} else {

View file

@ -31,14 +31,11 @@ main {
max-width: 100%;
padding: 0;
box-sizing: border-box;
margin: 30px auto 15px;
margin: 0 auto var(--main-margin-bottom);
background: var(--main-bg);
border: 1px solid var(--main-border);
border: var(--main-border-size) solid var(--main-border);
border-radius: 1px;
min-height: 70vh;
@media (max-width: 767px) {
margin: 5px auto 15px;
}
}
footer {

View file

@ -16,34 +16,44 @@
//
// Nav and .main-content offset. This is important for things like the sticky header (ComposeStickyButton.html)
// as well as deciding how to scroll to the nth item in a list (List.html).
//
--nav-font-size: 1rem;
--nav-indicator-height: 1px;
--nav-border-bottom: 1px;
--nav-icon-pad-v: 15px;
--nav-icon-pad-h: 20px;
--nav-icon-width: 20px;
--nav-icon-height: 20px;
--main-content-pad-top: 42px;
--sticky-pad-top: 10px;
--nav-icon-size: 20px;
--nav-total-height: calc(
(var(--nav-icon-pad-v) * 2) +
var(--nav-icon-size) +
var(--nav-indicator-height) +
var(--nav-border-bottom)
);
--main-content-gap-top: 20px;
--main-content-pad-top: calc(
var(--nav-total-height) +
var(--main-content-gap-top)
);
--main-margin-bottom: 15px;
--main-border-size: 1px;
@media (max-width: 991px) {
--nav-icon-pad-v: 20px;
--nav-icon-pad-h: 10px;
--nav-icon-width: 25px;
--nav-icon-height: 25px;
--main-content-pad-top: 52px;
--nav-icon-size: 25px;
}
@media (max-width: 767px) {
--main-content-pad-top: 62px;
--sticky-pad-top: 0px;
--main-content-gap-top: 0px;
}
@media (max-width: 240px) {
--nav-icon-pad-v: 10px;
--nav-icon-pad-h: 0px;
--main-content-pad-top: 42px;
--sticky-pad-top: 0px;
}
//