mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
#24 floating side menu
This commit is contained in:
Daniel
parent
6eb4e55a1b
commit
c2088dadc6
|
|
@ -1 +1 @@
|
|||
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}@media only screen and (min-width:975px){.collection{margin-top:5px;margin-right:5px;margin-left:5px}}@media only screen and (min-width:975px){.collection>.left{font-family:Roboto,Arial,sans-serif;float:left;width:30%}.collection>.right{font-family:Roboto,Arial,sans-serif;float:right;width:70%}.collection #buttons{margin:0 0 2% 1%}.collection #buttons,.collection .button,.collection input[type=button],.collection input[type=text]{border-radius:5px;border-color:transparent;text-align:center;outline:none}.collection input[type=text]{margin-bottom:2px}.collection .centeredCheckBox,.collection input[type=text]{width:220px}.collection .text-entry{display:flex;justify-content:center;align-items:center}.collection .text-entry input:focus{outline:none}.collection .card{text-align:left;display:flex;border:1px solid #aeaeae}.collection .card .left,.collection .card .right,.collection .card .stats{padding-top:4px}.collection .card .bigger{text-align:center;font-weight:700}.collection .card .energy{display:flex;width:20px!important}.collection .card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.collection .card .right{float:left;width:calc(100% - 322px);border-left:2px solid #aeaeae;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.collection .creature .right{width:calc(100% - 366px)}.collection .creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px}.collection .SearchForm{padding-top:3px;font-family:Roboto,Arial,sans-serif}.collection .searchName{display:flex;justify-content:center;align-items:center;padding:2%;font-size:16pt}.collection .centeredCheckBox{margin:0 auto;text-align:left}.collection .centeredSpacing{display:flex;justify-content:space-between}.collection .setBox{width:80%;float:right}.collection #sets{width:80%}.collection .centeredButtons{display:flex;justify-content:center;align-items:center}.collection #search{width:25%;margin:2%;border-radius:5px;border-color:transparent;text-align:center}.collection .minMax{display:flex;justify-content:space-between;margin:0 auto;width:50%;text-align:right}.collection .brainwashed{border-radius:3px;background-color:#dcdddf;color:#000!important}.collection .chieftain,.collection .flavortext{font-style:italic}.collection .mull input{margin-left:0;margin-top:1px}.collection .Collapsible__contentInner input,.collection .mull input{vertical-align:middle}.collection .Collapsible__contentInner .centeredCheckBox{width:50%}.collection .tribes{width:96%;text-align:center}.collection .and,.collection .disciplines{text-align:center}.collection .and{vertical-align:text-bottom;width:15%;border-radius:5px;border-color:transparent;margin:2%}}.collection .disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.collection .mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.collection .card .icon14,.collection .card .icon16,.collection .card .icon20,.collection .card .icon24{vertical-align:middle}.collection .thumb{width:100px;height:98px}.collection .card .thumb{float:left}.collection .attack .bp{vertical-align:middle}.collection .Collapsible{margin-bottom:5px;margin-top:5px;width:96%}.collection .Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px;font-weight:700;white-space:pre}.collection .Collapsible__trigger:hover{background-color:red}.collection .Collapsible__trigger:after{content:"^";position:absolute;right:10px;top:10px;display:block;transition:transform .4s}.collection .Collapsible__trigger.is-open:after{transform:rotate(180deg);right:5px;top:5px}.collection .Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.collection .Collapsible__contentInner{margin-top:5px}.collection .left{position:relative}.collection .card_img{position:absolute;width:100%;z-index:2;left:-11px}.collection .card_img .hidden{display:none;max-height:0}.collection .card_img img{max-width:250px;max-height:350px}.collection .entries{text-align:left;width:100%}.collection .entries input[type=button]{margin:0 0 2% 1%}.collection .list-nav-top{display:flex}.collection .extended .fullcard{max-width:250px;max-height:350px}.collection hr{width:96%;margin-inline-start:0}.collection .none{display:inline}.collection .none>span{top:-3px;position:relative}.collection label{user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}
|
||||
.icon14{height:14px;padding-bottom:2px}.icon16{height:16px}.icon20{height:20px}.icon24{height:24px}.bigger{font-size:14px}.name{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}.name .subname:before{content:"\a ";white-space:pre}.name .subname{font-size:13px;padding-bottom:4px;display:inherit}@media only screen and (min-width:975px){.collection{margin-top:5px;margin-right:5px;margin-left:5px}}@media only screen and (min-width:975px){.collection>.left{font-family:Roboto,Arial,sans-serif;float:left;width:30%}.collection>.right{font-family:Roboto,Arial,sans-serif;float:right;width:70%}.collection .left>.fixed{position:fixed;top:0;overflow-y:auto;height:100vh;width:calc(30% - 30px)}.collection #buttons{margin:0 0 2% 1%}.collection #buttons,.collection .button,.collection input[type=button],.collection input[type=text]{border-radius:5px;border-color:transparent;text-align:center;outline:none}.collection input[type=text]{margin-bottom:2px}.collection .centeredCheckBox,.collection input[type=text]{width:220px}.collection .text-entry{display:flex;justify-content:center;align-items:center}.collection .text-entry input:focus{outline:none}.collection .card{text-align:left;display:flex;border:1px solid #aeaeae}.collection .card .left,.collection .card .right,.collection .card .stats{padding-top:4px}.collection .card .bigger{text-align:center;font-weight:700}.collection .card .energy{display:flex;width:20px!important}.collection .card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.collection .card .right{float:left;width:calc(100% - 322px);border-left:2px solid #aeaeae;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.collection .creature .right{width:calc(100% - 366px)}.collection .creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px}.collection .SearchForm{padding-top:3px;font-family:Roboto,Arial,sans-serif}.collection .searchName{display:flex;justify-content:center;align-items:center;padding:2%;font-size:16pt}.collection .centeredCheckBox{margin:0 auto;text-align:left}.collection .centeredSpacing{display:flex;justify-content:space-between}.collection .setBox{width:80%;float:right}.collection #sets{width:80%}.collection .centeredButtons{display:flex;justify-content:center;align-items:center}.collection #search{width:25%;margin:2%;border-radius:5px;border-color:transparent;text-align:center}.collection .minMax{display:flex;justify-content:space-between;margin:0 auto;width:50%;text-align:right}.collection .brainwashed{border-radius:3px;background-color:#dcdddf;color:#000!important}.collection .chieftain,.collection .flavortext{font-style:italic}.collection .mull input{margin-left:0;margin-top:1px}.collection .Collapsible__contentInner input,.collection .mull input{vertical-align:middle}.collection .Collapsible__contentInner .centeredCheckBox{width:50%}.collection .tribes{width:96%;text-align:center}.collection .and,.collection .disciplines{text-align:center}.collection .and{vertical-align:text-bottom;width:15%;border-radius:5px;border-color:transparent;margin:2%}}.collection .disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.collection .mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.collection .card .icon14,.collection .card .icon16,.collection .card .icon20,.collection .card .icon24{vertical-align:middle}.collection .thumb{width:100px;height:98px}.collection .card .thumb{float:left}.collection .attack .bp{vertical-align:middle}.collection .Collapsible{margin-bottom:5px;margin-top:5px;width:96%}.collection .Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px;font-weight:700;white-space:pre}.collection .Collapsible__trigger:hover{background-color:red}.collection .Collapsible__trigger:after{content:"^";position:absolute;right:10px;top:10px;display:block;transition:transform .4s}.collection .Collapsible__trigger.is-open:after{transform:rotate(180deg);right:5px;top:5px}.collection .Collapsible__trigger.is-disabled{opacity:.5;background-color:grey}.collection .Collapsible__contentInner{margin-top:5px}.collection .card_img{position:absolute;width:100%;z-index:2;left:-11px}.collection .card_img .hidden{display:none;max-height:0}.collection .card_img img{max-width:250px;max-height:350px}.collection .entries{text-align:left;width:100%}.collection .entries input[type=button]{margin:0 0 2% 1%}.collection .list-nav-top{display:flex}.collection .extended .fullcard{max-width:250px;max-height:350px}.collection hr{width:96%;margin-inline-start:0}.collection .none{display:inline}.collection .none>span{top:-3px;position:relative}.collection label{user-select:none;-webkit-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-o-user-select:none;-moz-user-select:none}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,26 +6,28 @@ import CardList from './List';
|
|||
import SearchForm from './search/index.js';
|
||||
import './collection.scss'
|
||||
|
||||
|
||||
// https://mobx.js.org/refguide/object.html
|
||||
// TODO
|
||||
const fixedStyles = observable({
|
||||
fixed: {},
|
||||
style: {},
|
||||
get fixed() {return this.style},
|
||||
get isFixed() {return (Object.entries(this.style).length !== 0)},
|
||||
setFixed(height) {
|
||||
this.fixed = {
|
||||
if (window.matchMedia("(min-width: 975px)").matches)
|
||||
this.style = {
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: "31px",
|
||||
overflowY: "auto",
|
||||
height: `${height}`,
|
||||
width: "calc(30% - 30px)",
|
||||
height: `${height}px`,
|
||||
width: "calc(30% - 20px)",
|
||||
}
|
||||
},
|
||||
removeFixed() {
|
||||
this.fixed = {}
|
||||
}
|
||||
removeFixed() {this.style = {}}
|
||||
}, {
|
||||
setFixed: action,
|
||||
removeFixed: action
|
||||
}, {
|
||||
deep: false
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -37,7 +39,7 @@ export default class Home extends React.Component {
|
|||
@observable ext = false;
|
||||
@observable content = [];
|
||||
@observable card_img = API.card_back;
|
||||
fixedStyles = autorun(() => fixedStyles.fixed);
|
||||
@observable fixedStyles;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
|
@ -72,22 +74,34 @@ export default class Home extends React.Component {
|
|||
handleScroll = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (window.pageYOffset >= 220) {
|
||||
// console.log(this.fixedStyles);
|
||||
console.log(window.pageYOffset, window.innerHeight) //window.innerHeight- window.pageYOffset
|
||||
if (window.pageYOffset > window.innerHeight) {
|
||||
// this.fixedStyles.fixed =
|
||||
// TODO variable to see if scroll has happend
|
||||
// Fix with height of viewport
|
||||
// When nearing the end of the screen (if page offset is higher then height)
|
||||
// reduce height by difference so that it doesn't leak into footer
|
||||
// Fix the side menu in place when scrolling down
|
||||
if (window.pageYOffset >= 235) {
|
||||
const
|
||||
h = document.documentElement,
|
||||
b = document.body,
|
||||
st = 'scrollTop',
|
||||
sh = 'scrollHeight',
|
||||
ch = 'clientHeight';
|
||||
const percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h[ch]) * 100;
|
||||
const sm = document.getElementById("side-menu");
|
||||
|
||||
// When nearing the end of the screen
|
||||
// (if element height offset is higher then height of screen)
|
||||
// reduce height by difference so that it doesn't leak into footer
|
||||
if (percent >= 88) {
|
||||
let exp = h[ch] - (h[ch] * (percent - 85) / 100);
|
||||
fixedStyles.setFixed(exp);
|
||||
}
|
||||
else {
|
||||
// this.fixedStyles = fixedStyles(window.innerHeight + "px");
|
||||
// Fix with height of viewport when changed
|
||||
else if (sm[sh] >= h[ch]){
|
||||
fixedStyles.setFixed(window.innerHeight);
|
||||
}
|
||||
else if (!fixedStyles.isFixed) {
|
||||
fixedStyles.setFixed(window.innerHeight);
|
||||
}
|
||||
}
|
||||
else {
|
||||
// this.fixedStyles = {};
|
||||
else if (fixedStyles.isFixed) {
|
||||
fixedStyles.removeFixed();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -95,7 +109,7 @@ export default class Home extends React.Component {
|
|||
return (
|
||||
<div className={"collection " + (this.ext ? "extended" : "short")}>
|
||||
<div className="left">
|
||||
<div style={fixedStyles}>
|
||||
<div id="side-menu" style={fixedStyles.fixed}>
|
||||
<ImagePreview url={API.base_image + this.card_img} ref={n => {if (n) this.changeImage = n.getInstance().changeImage}} />
|
||||
<SearchForm handleContent={this.handleContent.bind(this)} {...this.props} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user