mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-22 01:34:20 -05:00
fix collapsible bug, portal text
This commit is contained in:
Daniel
parent
b65959ed3d
commit
fd798e2dd4
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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}.portal .navbar h1{font-size:16px}.portal .navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.portal .navbar li{float:left}.portal .navbar .dropbtn,.portal .navbar li a{display:inline-block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none}.portal .navbar .dropdown:hover .dropbtn,.portal .navbar li a:hover{background-color:red}.portal .navbar li.dropdown{display:inline-block}.portal .navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.portal .navbar .dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.portal .navbar .dropdown:hover .dropdown-content{display:block}.portal .magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.portal .search .results div{padding-bottom:10px}.portal .search .results a{font-size:16px;line-height:20px}.portal .entry{font-size:1.2em}.portal .entry .title{font-weight:700;font-size:16px}.portal .entry .left{float:left;width:100px}.portal .entry .right{float:right;width:86%}.portal .entry .left .title{text-align:left;padding-bottom:10px}.portal .entry .icon14,.portal .entry .icon16,.portal .entry .icon20,.portal .entry .icon24{vertical-align:middle}.portal .entry .entry_content{min-height:550px;height:calc(100vh - 300px);overflow-y:auto;width:100%;position:relative}.portal .entry .entry_content .entry_splash{padding-bottom:4px}.portal .entry .entry_content .entry_splash img{max-width:100%}.portal .entry .entry_content .entry_splash .arrow{position:absolute;color:#f1f1f1;font-size:40px;font-weight:700;width:100%;top:95%}.portal .entry .entry_content .entry_body{position:relative;max-width:100%;padding-bottom:4px;display:flex;flex-wrap:wrap}.portal .entry .entry_content .entry_body hr{margin:0}.portal .entry .entry_content .entry_body .title{min-width:100%}.portal .entry .entry_content .entry_body .title hr{margin-top:8px}.portal .entry .entry_content .entry_body .column>div,.portal .entry .entry_content .entry_body .nocolumn>div{padding:8px}.portal .entry .entry_content .entry_body .column:nth-child(2){flex-grow:1;text-align:left;min-width:0;width:30%}.portal .entry .entry_content .entry_body .column:last-child{flex-grow:2;min-width:0;flex:60%;border-left:1px solid #fff}.portal .entry .entry_content .entry_body .ability{white-space:pre-line;word-wrap:break-all}.portal .entry .entry_content .entry_body div{white-space:pre-line}.portal .entry .entry_content::-webkit-scrollbar{width:1px}.portal .entry .cat_title{text-align:left;background-color:#1a1a1a;font-weight:700;font-size:16px;padding-top:1px;padding-left:4px}.portal .entry .entry_nav{background-color:#1a1a1a;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.portal .entry .entry_nav .nav_item{display:inline-block;margin-right:3px;margin-left:3px}.portal .entry .entry_nav .nav_item img{min-width:96px;height:100px}.portal .entry.base_path .cat_title,.portal .entry.base_path .entry_nav{background-color:inherit}.portal .entry.base_path .cat_title{padding-top:1em;padding-bottom:1em}.portal .entry.base_path .entry_nav{overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:space-between}.portal .entry.base_path .entry_nav .nav_item{overflow-wrap:break-word;margin:3px;max-width:106px}.portal .entry .modal{position:fixed;z-index:10;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.portal .entry .modal.hidden{display:none}.portal .entry .modal-content{margin:auto;display:block;max-height:calc(100vh - 100px);max-width:90vw}.portal .entry .caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.portal .entry #caption,.portal .entry .modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.portal .entry .close{position:fixed;top:35px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.portal .entry .close:focus,.portal .entry .close:hover{color:#bbb;text-decoration:none;cursor:pointer}
|
||||
.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}.portal .navbar h1{font-size:16px}.portal .navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.portal .navbar li{float:left}.portal .navbar .dropbtn,.portal .navbar li a{display:inline-block;color:#fff;text-align:center;padding:14px 16px;text-decoration:none}.portal .navbar .dropdown:hover .dropbtn,.portal .navbar li a:hover{background-color:red}.portal .navbar li.dropdown{display:inline-block}.portal .navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.portal .navbar .dropdown-content a{color:#fff;padding:12px 16px;text-decoration:none;display:block;text-align:left}.portal .navbar .dropdown:hover .dropdown-content{display:block}.portal .magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.portal .search .results div{padding-bottom:10px}.portal .search .results a{font-size:16px;line-height:20px}.portal .entry{font-size:1.2em}.portal .entry .title{font-weight:700;font-size:16px}.portal .entry .left{float:left;width:100px}.portal .entry .right{float:right;width:86%}.portal .entry .left .title{text-align:left;padding-bottom:10px}.portal .entry .icon14,.portal .entry .icon16,.portal .entry .icon20,.portal .entry .icon24{vertical-align:middle}.portal .entry .entry_content{min-height:550px;height:calc(100vh - 300px);overflow-y:auto;width:100%;position:relative}.portal .entry .entry_content .entry_splash{padding-bottom:4px}.portal .entry .entry_content .entry_splash img{max-width:100%}.portal .entry .entry_content .entry_splash .arrow{position:absolute;color:#f1f1f1;font-size:40px;font-weight:700;width:100%;top:95%}.portal .entry .entry_content .entry_body{position:relative;max-width:100%;padding-bottom:4px;display:flex;flex-wrap:wrap}.portal .entry .entry_content .entry_body hr{margin:0}.portal .entry .entry_content .entry_body .title{min-width:100%}.portal .entry .entry_content .entry_body .title hr{margin-top:8px}.portal .entry .entry_content .entry_body .column>div,.portal .entry .entry_content .entry_body .nocolumn>div{padding:8px}.portal .entry .entry_content .entry_body .column:nth-child(2){flex-grow:1;text-align:left;min-width:0;width:30%}.portal .entry .entry_content .entry_body .column:last-child{flex-grow:2;min-width:0;flex:60%;border-left:1px solid #fff}.portal .entry .entry_content .entry_body .ability{white-space:pre-line;word-wrap:break-all}.portal .entry .entry_content .entry_body div{white-space:pre-line}.portal .entry .entry_content::-webkit-scrollbar{width:1px}.portal .entry .cat_title{text-align:left;background-color:#1a1a1a;font-weight:700;font-size:16px;padding-top:1px;padding-left:4px}.portal .entry .entry_nav{background-color:#1a1a1a;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.portal .entry .entry_nav .nav_item{display:inline-block;margin-right:3px;margin-left:3px;min-width:96px}.portal .entry .entry_nav .nav_item img{height:100px}.portal .entry.base_path .cat_title,.portal .entry.base_path .entry_nav{background-color:inherit}.portal .entry.base_path .cat_title{padding-top:1em;padding-bottom:1em}.portal .entry.base_path .entry_nav{overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:space-between;position:relative}.portal .entry.base_path .entry_nav .nav_item{margin:3px;max-width:106px;white-space:normal;overflow-wrap:break-word;display:flex;justify-content:flex-end;flex-direction:column}.portal .entry .modal{position:fixed;z-index:10;padding-top:50px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.portal .entry .modal.hidden{display:none}.portal .entry .modal-content{margin:auto;display:block;max-height:calc(100vh - 100px);max-width:90vw}.portal .entry .caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.portal .entry #caption,.portal .entry .modal-content{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{0%{transform:scale(0)}to{transform:scale(1)}}.portal .entry .close{position:fixed;top:35px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.portal .entry .close:focus,.portal .entry .close:hover{color:#bbb;text-decoration:none;cursor:pointer}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -47,8 +47,9 @@ export default class SearchCollection extends React.Component {
|
|||
}
|
||||
|
||||
handleTriggerClick = (type) => {
|
||||
this.collapsed[type] = !this.collapsed[type];
|
||||
localStorage.setItem("collapsed", JSON.stringify(this.collapsed));
|
||||
let stored_collapse = this.collapsed;
|
||||
stored_collapse[type] = !this.collapsed[type];
|
||||
localStorage.setItem("collapsed", JSON.stringify(stored_collapse));
|
||||
}
|
||||
|
||||
cleanInput = () => {
|
||||
|
|
@ -277,8 +278,8 @@ export default class SearchCollection extends React.Component {
|
|||
<hr />
|
||||
<CollapsibleWrapper
|
||||
type="disciplines"
|
||||
trigger="Disciplines"
|
||||
open={this.collapsed.disciplines}
|
||||
title="Disciplines"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="disciplines">
|
||||
|
|
@ -287,8 +288,8 @@ export default class SearchCollection extends React.Component {
|
|||
</CollapsibleWrapper>
|
||||
<CollapsibleWrapper
|
||||
type="energy"
|
||||
trigger="Energy"
|
||||
open={this.collapsed.energy}
|
||||
title="Energy"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="minMax">
|
||||
|
|
@ -298,8 +299,8 @@ export default class SearchCollection extends React.Component {
|
|||
</CollapsibleWrapper>
|
||||
<CollapsibleWrapper
|
||||
type="bpmc"
|
||||
trigger="Build Points Mugic Counters/Cost"
|
||||
open={this.collapsed.bpmc}
|
||||
title="Build Points Mugic Counters/Cost"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="minMax">
|
||||
|
|
@ -309,8 +310,8 @@ export default class SearchCollection extends React.Component {
|
|||
</CollapsibleWrapper>
|
||||
<CollapsibleWrapper
|
||||
type="types"
|
||||
trigger="Card Type"
|
||||
open={this.collapsed.types}
|
||||
title="Card Type"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="centeredCheckBox">
|
||||
|
|
@ -319,8 +320,8 @@ export default class SearchCollection extends React.Component {
|
|||
</CollapsibleWrapper>
|
||||
<CollapsibleWrapper
|
||||
type="rarity"
|
||||
trigger="Rarity"
|
||||
open={this.collapsed.rarity}
|
||||
title="Rarity"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="centeredCheckBox">
|
||||
|
|
@ -329,8 +330,8 @@ export default class SearchCollection extends React.Component {
|
|||
</CollapsibleWrapper>
|
||||
<CollapsibleWrapper
|
||||
type="sets"
|
||||
trigger="Sets"
|
||||
open={this.collapsed.sets}
|
||||
title="Sets"
|
||||
collapsed={this.collapsed}
|
||||
onClick={this.handleTriggerClick}
|
||||
>
|
||||
<div className="setBox">
|
||||
|
|
@ -351,15 +352,16 @@ export default class SearchCollection extends React.Component {
|
|||
}
|
||||
|
||||
function CollapsibleWrapper(props) {
|
||||
const {type, children, onClick, ...rest} = props;
|
||||
const {type, children, onClick, title, collapsed} = props;
|
||||
|
||||
return (
|
||||
<span onClick={() => onClick(type)} >
|
||||
<Collapsible
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</Collapsible>
|
||||
</span>
|
||||
<Collapsible
|
||||
trigger={title}
|
||||
open={collapsed[type]}
|
||||
onOpen={() => onClick(type)}
|
||||
onClose={() => onClick(type)}
|
||||
>
|
||||
{children}
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
|
@ -226,9 +226,9 @@
|
|||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
min-width: 96px;
|
||||
|
||||
img {
|
||||
min-width: 96px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
|
@ -249,11 +249,17 @@
|
|||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: space-between;
|
||||
position: relative;
|
||||
|
||||
.nav_item {
|
||||
overflow-wrap: break-word;
|
||||
margin: 3px;
|
||||
max-width: 106px;
|
||||
white-space: initial;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user