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

[add] full screen art

Browse Source
This commit is contained in:
Daniel
2019-01-03 21:47:37 -05:00
parent e7e5a7b597
commit 48a72f49ca
7 changed files with 185 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/portal/Single/Attack.js
View File

@@ -31,8 +31,8 @@ export default class SingleAttack extends React.Component {
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<div className="title">{attack.gsx$name}</div>
<hr />
<div>
<strong>Attributes:</strong><br />

1
src/components/portal/Single/Battlegear.js
View File

@@ -31,6 +31,7 @@ export default class SingleBattlegear extends React.Component {
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<hr />
<div>

2
src/components/portal/Single/Creature.js
View File

@@ -49,8 +49,8 @@ export default class SingleCreature extends React.Component {
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<div className="title">{creature.gsx$name}</div>
<hr />
<div>
<strong>Appearance:</strong><br />

2
src/components/portal/Single/Location.js
View File

@@ -31,8 +31,8 @@ export default class SingleLocation extends React.Component {
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<div className="title">{location.gsx$name}</div>
<hr />
<div>
<strong>Local Features:</strong><br />

2
src/components/portal/Single/Mugic.js
View File

@@ -49,8 +49,8 @@ export default class SingleMugic extends React.Component {
return (<Single
image={card_data.gsx$splash}
name={card_data.gsx$name}
text={<div>
<div className="title">{mugic.gsx$name}</div>
<hr />
<div>
<strong>Background:</strong><br />

20
src/components/portal/Single/_base.js
View File

@@ -5,16 +5,32 @@ import API from '../../SpreadsheetData';
@inject((stores, props, context) => props) @observer
export default class Single extends React.Component {
@observable fullscreen = false;
expand(e) {
this.fullscreen = true;
}
close(e) {
this.fullscreen = false;
}
render() {
return (<div>
<div className={"modal" + (this.fullscreen?"":" hidden")}>
<span className="close" onClick={this.close.bind(this)}>&times;</span>
<img className="modal-content" src={API.base_image + this.props.image} />
</div>
<div className="splash">
{this.props.image &&
<img src={API.base_image + this.props.image} />
<img onClick={this.expand.bind(this)} src={API.base_image + this.props.image} />
}
</div>
<div className="entry_text">
{this.props.text}
<span className="title">{this.props.name}</span>
{this.props.text &&
this.props.text
}
</div>
</div>);
}

247
src/scss/portal.scss
View File

@@ -1,3 +1,5 @@
.portal {
/* portal css */
.navbar h1 {
font-size: 16px;
}
@@ -67,31 +69,6 @@
width: 18px;
}
.entry .title {
font-weight: bold;
font-size: 16px;
}
.entry .left {
float: left;
width: 100px;
}
.entry .right {
float: right;
width: 86%;
}
.entry .left .title {
text-align: left;
padding-bottom: 10px;
}
.entry .icon14, .entry .icon16,
.entry .icon20, .entry .icon24 {
vertical-align: middle;
}
.search .results div {
padding-bottom: 10px;
}
@@ -101,75 +78,175 @@
line-height: 20px;
}
.portal {
.entry {
font-size: 1.2em;
.entry {
font-size: 1.2em;
.top_content {
min-height: 600px;
height: calc(100vh - 200px);
overflow-y: scroll;
width: 100%;
// position: absolute;
// width: 100%;
.title {
font-weight: bold;
font-size: 16px;
}
.splash {
padding-bottom: 4px;
img {
max-width: 100%;
}
// position: relative;
// z-index: -1;
}
.left {
float: left;
width: 100px;
}
.entry_text {
position: relative;
.right {
float: right;
width: 86%;
}
.left .title {
text-align: left;
padding-bottom: 10px;
}
.icon14, .icon16,
.icon20, .icon24 {
vertical-align: middle;
}
.top_content {
min-height: 600px;
height: calc(100vh - 200px);
overflow-y: scroll;
width: 100%;
// position: absolute;
// width: 100%;
.splash {
padding-bottom: 4px;
img {
max-width: 100%;
}
// /* width */
// ::-webkit-scrollbar {
// width: 10px;
// }
// /* Track */
// ::-webkit-scrollbar-track {
// background: #f1f1f1;
// }
// /* Handle */
// ::-webkit-scrollbar-thumb {
// background: #888;
// }
// /* Handle on hover */
// ::-webkit-scrollbar-thumb:hover {
// background: #555;
// }
// position: relative;
// z-index: -1;
}
.cat_title {
text-align: left;
background-color: #1a1a1a;
font-weight: bold;
font-size: 16px;
padding-top: 1px;
padding-left: 4px;
.entry_text {
position: relative;
max-width: 100%;
}
/* height is 118px */
.bottom_nav {
background-color: #1a1a1a;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
> div {
display: inline-block;
img {
margin-right: 3px;
margin-left: 3px;
}
// /* width */
// ::-webkit-scrollbar {
// width: 10px;
// }
// /* Track */
// ::-webkit-scrollbar-track {
// background: #f1f1f1;
// }
// /* Handle */
// ::-webkit-scrollbar-thumb {
// background: #888;
// }
// /* Handle on hover */
// ::-webkit-scrollbar-thumb:hover {
// background: #555;
// }
}
.cat_title {
text-align: left;
background-color: #1a1a1a;
font-weight: bold;
font-size: 16px;
padding-top: 1px;
padding-left: 4px;
}
/* height is 118px */
.bottom_nav {
background-color: #1a1a1a;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
> div {
display: inline-block;
img {
margin-right: 3px;
margin-left: 3px;
}
}
}
}
/* The Modal (background) */
.modal {
&.hidden {
display: none;
}
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
padding-top: 50px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
// width: 80%;
max-height: calc(100vh - 100px);
max-width: 90vw;
}
/* Caption of Modal Image */
.caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: fixed;
top: 35px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/*end entry*/}
/*end portal css*/}