Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #27 fix wide screen display bug

Browse Source
This commit is contained in:
Daniel 2019-10-23 13:44:12 -04:00
parent dd3dcf92e7
commit 10a3381a5e
7 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/2.css
View File

@ -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 .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}
.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 #side-menu{position:relative}.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}

2
build/2.js
View File

File diff suppressed because one or more lines are too long

2
build/main.js
View File

File diff suppressed because one or more lines are too long

8
src/components/collection/collection.scss
View File

@ -24,12 +24,8 @@
width: 70%;
}
.left > .fixed {
position: fixed;
top: 0;
overflow-y: auto;
height: 100vh;
width: calc(30% - 30px);
#side-menu {
position: relative;
}
#buttons {

14
src/components/collection/index.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import API from '../SpreadsheetData';
import {observable, action, autorun} from "mobx";
import {observable, action} from "mobx";
import {observer, inject} from 'mobx-react';
import CardList from './List';
import SearchForm from './search/index.js';
@ -12,14 +12,16 @@ const fixedStyles = observable({
get fixed() {return this.style},
get isFixed() {return (Object.entries(this.style).length !== 0)},
setFixed(height) {
if (window.matchMedia("(min-width: 975px)").matches)
if (!window.matchMedia("(min-width: 975px)").matches) return;
let left = document.getElementById('player').getBoundingClientRect().left + 4;
let width = document.querySelector('.collection > .left').getBoundingClientRect().width + 2;
this.style = {
position: "fixed",
top: 0,
left: "31px",
left: `${left}px`,
overflowY: "auto",
height: `${height}px`,
width: "calc(30% - 20px)",
width: `${width}px`,
}
},
removeFixed() {this.style = {}}
@ -50,10 +52,12 @@ export default class Home extends React.Component {
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
window.removeEventListener('resize', this.handleScroll);
}
handleContent(content) {
@ -76,6 +80,8 @@ export default class Home extends React.Component {
// Fix the side menu in place when scrolling down
if (window.pageYOffset >= 235) {
console.log(document.querySelector('.collection > .left').getBoundingClientRect().width);
const
h = document.documentElement,
b = document.body,

2
src/components/index.js
View File

@ -104,7 +104,7 @@ function Base(props) {
<div className="content-area-top-repeat-x">
<div className="content-area-left-repeat-y">
<div className="content-area-right-repeat-y">
<div style={{margin: "0 8px 0 10px"}}>
<div className="content-area-inner-space">
<div id="player">
{children}
</div>

5
src/css/legacy.css
View File

@ -550,6 +550,11 @@
background-repeat:no-repeat;
float:right;
}
.content-area-inner-space {
margin: 0 8px 0 10px;
}
.content-area-repeat-xy2{
width:100%;
float:left; clear:both;