mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-21 17:24:14 -05:00
[change] style updates
This commit is contained in:
Daniel
parent
0a84f47a48
commit
d763ad37b5
5236
build/bundle.js
5236
build/bundle.js
File diff suppressed because one or more lines are too long
486
build/style.css
486
build/style.css
|
|
@ -1,4 +1,482 @@
|
|||
@media only screen and (min-width: 975px){.pack{max-width:70%}}.packsim input[type=number]::-webkit-inner-spin-button,.packsim input[type=number]::-webkit-outer-spin-button{opacity:1}.pack{height:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:auto}.pack .card{width:150px;height:210px;background-size:cover;box-sizing:content-box;margin:5px;-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-o-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;-moz-transition-property:width,height,-o-transform,background,font-size,opacity,top,left;-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity,top,left;transition-duration:1s,1s,1s,1s,1s,1s,1s,1s}.pack .card:hover{width:250px;height:350px}.pack .stats{height:100%;width:100%;text-align:left}.pack .stats span{position:relative;color:black;display:block;left:10px;font-size:12px}.pack .stats span:nth-of-type(1){top:130px}.pack .stats span:nth-of-type(2){top:128px}.pack .stats span:nth-of-type(3){top:126px}.pack .stats span:nth-of-type(4){top:124px}.pack .stats span:nth-of-type(5){text-align:right;top:125px;left:-11px;font-size:14px}.pack .card:hover .stats span{left:20px;font-size:14px;font-weight:bold}.pack .card:hover .stats span:nth-of-type(1){top:220px}.pack .card:hover .stats span:nth-of-type(2){top:229px}.pack .card:hover .stats span:nth-of-type(3){top:237px}.pack .card:hover .stats span:nth-of-type(4){top:245px}.pack .card:hover .stats span:nth-of-type(5){text-align:right;top:258px;left:-21px;font-size:20px}
|
||||
.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>.left{float:left;width:30%}.collection>.right{float:right;width:70%}.card{text-align:left;display:flex;border:1px solid #AEAEAE}.card .left,.card .right,.card .stats{padding-top:2px}.card .left{vertical-align:text-top;float:left;width:210px;padding-left:4px}.card .right{float:left;width:calc(100% - (100px + 4px + 4px + 4px + 210px));border-left:2px solid #AEAEAE;padding-left:4px;padding-right:4px;padding-bottom:6px;white-space:pre-line}.creature .right{width:calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px))}.creature .stats{vertical-align:text-top;float:left;text-align:right;width:40px;padding-right:4px}.SearchForm{text-align:left}.brainwashed{background-color:#dcdddf;color:black !important}.flavortext,.chieftain{font-style:italic}.disciplines input{width:30px;height:14px;text-align:center;margin-top:2px}.mull input{vertical-align:middle}.mcbp input{width:24px;height:14px;padding:unset;text-align:center;margin-top:2px}.and{vertical-align:text-bottom;padding:0 4px}}.card .icon14,.card .icon16,.card .icon20,.card .icon24{vertical-align:middle}.thumb{width:100px;height:98px}.card .thumb{float:left}.Collapsible{margin-bottom:10px;width:250px}.Collapsible__trigger{background-color:#333;display:block;position:relative;padding-top:5px;padding-bottom:5px;text-indent:5px}.Collapsible__trigger:hover{background-color:red}.Collapsible__trigger:after{content:'^';position:absolute;right:10px;top:10px;display:block;transition:transform 400ms}.Collapsible__trigger.is-open:after{transform:rotateZ(180deg);right:5px;top:5px}.Collapsible__trigger.is-disabled{opacity:0.5;background-color:grey}.left{position:relative}.card_img{position:absolute;width:100%;left:-10px;z-index:2}.card_img .hidden{display:none;max-height:0}.card_img img{max-width:250px;max-height:350px}.entries{text-align:left}.list-nav-top{display:flex}.list-nav-top .ext-button{float:right;margin:auto 0 0 auto}.extended .fullcard{max-width:250px;max-height:350px}
|
||||
.splash{max-width:100%;padding-bottom:10px}.navbar h1{font-size:16px}.navbar ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333}.navbar li{float:left}.navbar li a,.navbar .dropbtn{display:inline-block;color:white;text-align:center;padding:14px 16px;text-decoration:none}.navbar li a:hover,.navbar .dropdown:hover .dropbtn{background-color:red}.navbar li.dropdown{display:inline-block}.navbar .dropdown-content{display:none;position:absolute;background-color:#333;min-width:140px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}.navbar .dropdown-content a{color:white;padding:12px 16px;text-decoration:none;display:block;text-align:left}.navbar .dropdown:hover .dropdown-content{display:block}.magnifying-glass{cursor:pointer;transition:color .2s;z-index:1;vertical-align:middle;fill:currentColor;height:18px;min-width:18px;width:18px}.entry{padding:10px}.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}.search .results a{font-size:16px;line-height:20px}
|
||||
.lore{text-align:left;padding-left:10%;padding-right:10%}.lore .title{margin-top:6px;text-align:center;font-weight:bold;font-size:18px}.lore div{margin:0 0 6px;line-height:22px !important}.donate{margin-bottom:6px}.donate form a{border-bottom:none}@-webkit-keyframes love{to{-webkit-transform:scale(1.1)}}@-moz-keyframes love{to{-moz-transform:scale(1.1)}}@keyframes love{to{transform:scale(1.1)}}.with-love{color:#333}.with-love span,.with-love div{font-size:14px !important;line-height:18px !important}.with-love div{padding-bottom:4px}.with-love .heart{font-size:1.4em;color:#ff79c6;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);transform:scale(0.9);-webkit-animation:love .5s infinite linear alternate-reverse;-moz-animation:love .5s infinite linear alternate-reverse;animation:love .5s infinite linear alternate-reverse}.with-love a{text-decoration:none;border-bottom:1px dotted}
|
||||
@media only screen and (min-width: 975px) {
|
||||
.pack {
|
||||
max-width: 70%; } }
|
||||
|
||||
/* Desktop */
|
||||
.packsim input[type=number]::-webkit-inner-spin-button,
|
||||
.packsim input[type=number]::-webkit-outer-spin-button {
|
||||
opacity: 1; }
|
||||
|
||||
.pack {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
/* Energy */
|
||||
/* Energy */ }
|
||||
.pack .card {
|
||||
width: 150px;
|
||||
height: 210px;
|
||||
background-size: cover;
|
||||
box-sizing: content-box;
|
||||
margin: 5px;
|
||||
-webkit-transition: -webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s,top 1s,left 1s;
|
||||
-webkit-border-radius: 5px;
|
||||
-o-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
|
||||
-o-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
|
||||
-moz-transition-property: width,height,-o-transform,background,font-size,opacity,top,left;
|
||||
-moz-transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s;
|
||||
transition-property: width,height,transform,background,font-size,opacity,top,left;
|
||||
transition-duration: 1s,1s,1s,1s,1s,1s,1s,1s; }
|
||||
.pack .card:hover {
|
||||
width: 250px;
|
||||
height: 350px; }
|
||||
.pack .stats {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: left; }
|
||||
.pack .stats span {
|
||||
position: relative;
|
||||
color: black;
|
||||
display: block;
|
||||
left: 10px;
|
||||
font-size: 12px; }
|
||||
.pack .stats span:nth-of-type(1) {
|
||||
top: 130px; }
|
||||
.pack .stats span:nth-of-type(2) {
|
||||
top: 128px; }
|
||||
.pack .stats span:nth-of-type(3) {
|
||||
top: 126px; }
|
||||
.pack .stats span:nth-of-type(4) {
|
||||
top: 124px; }
|
||||
.pack .stats span:nth-of-type(5) {
|
||||
text-align: right;
|
||||
top: 125px;
|
||||
left: -11px;
|
||||
font-size: 14px; }
|
||||
.pack .card:hover .stats span {
|
||||
left: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold; }
|
||||
.pack .card:hover .stats span:nth-of-type(1) {
|
||||
top: 220px; }
|
||||
.pack .card:hover .stats span:nth-of-type(2) {
|
||||
top: 229px; }
|
||||
.pack .card:hover .stats span:nth-of-type(3) {
|
||||
top: 237px; }
|
||||
.pack .card:hover .stats span:nth-of-type(4) {
|
||||
top: 245px; }
|
||||
.pack .card:hover .stats span:nth-of-type(5) {
|
||||
text-align: right;
|
||||
top: 258px;
|
||||
left: -21px;
|
||||
font-size: 20px; }
|
||||
.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 > .left {
|
||||
float: left;
|
||||
width: 30%; }
|
||||
.collection > .right {
|
||||
float: right;
|
||||
width: 70%; }
|
||||
.card {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
border: 1px solid #AEAEAE; }
|
||||
.card .left,
|
||||
.card .right,
|
||||
.card .stats {
|
||||
padding-top: 2px; }
|
||||
.card .left {
|
||||
vertical-align: text-top;
|
||||
float: left;
|
||||
width: 210px;
|
||||
padding-left: 4px; }
|
||||
.card .right {
|
||||
float: left;
|
||||
width: calc(100% - (100px + 4px + 4px + 4px + 210px));
|
||||
border-left: 2px solid #AEAEAE;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
padding-bottom: 6px;
|
||||
white-space: pre-line; }
|
||||
.creature .right {
|
||||
width: calc(100% - (100px + 4px + 4px + 4px + 210px + 40px + 4px)); }
|
||||
.creature .stats {
|
||||
vertical-align: text-top;
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
padding-right: 4px; }
|
||||
.SearchForm {
|
||||
text-align: left; }
|
||||
.brainwashed {
|
||||
background-color: #dcdddf;
|
||||
color: black !important; }
|
||||
.flavortext,
|
||||
.chieftain {
|
||||
font-style: italic; }
|
||||
.disciplines input {
|
||||
width: 30px;
|
||||
height: 14px;
|
||||
text-align: center;
|
||||
margin-top: 2px; }
|
||||
.mull input {
|
||||
vertical-align: middle; }
|
||||
.mcbp input {
|
||||
width: 24px;
|
||||
height: 14px;
|
||||
padding: unset;
|
||||
text-align: center;
|
||||
margin-top: 2px; }
|
||||
.and {
|
||||
vertical-align: text-bottom;
|
||||
padding: 0 4px; } }
|
||||
|
||||
/* desktop */
|
||||
.card .icon14, .card .icon16,
|
||||
.card .icon20, .card .icon24 {
|
||||
vertical-align: middle; }
|
||||
|
||||
.thumb {
|
||||
width: 100px;
|
||||
height: 98px; }
|
||||
|
||||
.card .thumb {
|
||||
float: left; }
|
||||
|
||||
.Collapsible {
|
||||
margin-bottom: 10px;
|
||||
width: 250px; }
|
||||
|
||||
.Collapsible__trigger {
|
||||
background-color: #333;
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
text-indent: 5px; }
|
||||
|
||||
.Collapsible__trigger:hover {
|
||||
background-color: red; }
|
||||
|
||||
.Collapsible__trigger:after {
|
||||
content: '^';
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
display: block;
|
||||
transition: transform 400ms; }
|
||||
|
||||
.Collapsible__trigger.is-open:after {
|
||||
transform: rotateZ(180deg);
|
||||
right: 5px;
|
||||
top: 5px; }
|
||||
|
||||
.Collapsible__trigger.is-disabled {
|
||||
opacity: 0.5;
|
||||
background-color: grey; }
|
||||
|
||||
.left {
|
||||
position: relative; }
|
||||
|
||||
.card_img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: -10px;
|
||||
z-index: 2; }
|
||||
|
||||
.card_img .hidden {
|
||||
display: none;
|
||||
max-height: 0; }
|
||||
|
||||
.card_img img {
|
||||
max-width: 250px;
|
||||
max-height: 350px; }
|
||||
|
||||
.entries {
|
||||
text-align: left; }
|
||||
|
||||
.list-nav-top {
|
||||
display: flex; }
|
||||
.list-nav-top .ext-button {
|
||||
float: right;
|
||||
margin: auto 0 0 auto; }
|
||||
|
||||
.extended .fullcard {
|
||||
max-width: 250px;
|
||||
max-height: 350px; }
|
||||
.portal {
|
||||
/* portal css */
|
||||
/*.navbar .dropdown-content a:hover {
|
||||
background-color: #f1f1f1
|
||||
}*/
|
||||
/*end portal css*/ }
|
||||
.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 li a, .portal .navbar .dropbtn {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none; }
|
||||
.portal .navbar li a:hover, .portal .navbar .dropdown:hover .dropbtn {
|
||||
background-color: red; }
|
||||
.portal .navbar li.dropdown {
|
||||
display: inline-block; }
|
||||
.portal .navbar .dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/*background-color: #f9f9f9;*/
|
||||
background-color: #333;
|
||||
min-width: 140px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1; }
|
||||
.portal .navbar .dropdown-content a {
|
||||
color: white;
|
||||
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;
|
||||
/* height is 118px */
|
||||
/* The Modal (background) */
|
||||
/* Modal Content (image) */
|
||||
/* Caption of Modal Image */
|
||||
/* Add Animation */
|
||||
/* The Close Button */
|
||||
/*end entry*/ }
|
||||
.portal .entry .title {
|
||||
font-weight: bold;
|
||||
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 .splash {
|
||||
padding-bottom: 4px; }
|
||||
.portal .entry .entry_content .splash img {
|
||||
max-width: 100%; }
|
||||
.portal .entry .entry_content .splash .arrow {
|
||||
position: absolute;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
top: 95%; }
|
||||
.portal .entry .entry_content .entry_text {
|
||||
position: relative;
|
||||
max-width: 100%; }
|
||||
.portal .entry .entry_content::-webkit-scrollbar {
|
||||
width: 1px; }
|
||||
.portal .entry .cat_title {
|
||||
text-align: left;
|
||||
background-color: #1a1a1a;
|
||||
font-weight: bold;
|
||||
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 > div {
|
||||
display: inline-block; }
|
||||
.portal .entry .entry_nav > div img {
|
||||
margin-right: 3px;
|
||||
margin-left: 3px; }
|
||||
.portal .entry .modal {
|
||||
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: black;
|
||||
/* Fallback color */
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
/* Black w/ opacity */ }
|
||||
.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 .modal-content, .portal .entry #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); } }
|
||||
.portal .entry .close {
|
||||
position: fixed;
|
||||
top: 35px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s; }
|
||||
.portal .entry .close:hover,
|
||||
.portal .entry .close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer; }
|
||||
.lore {
|
||||
text-align: left;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%; }
|
||||
|
||||
.lore .title {
|
||||
margin-top: 6px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 18px; }
|
||||
|
||||
.lore div {
|
||||
margin: 0 0 6px;
|
||||
line-height: 22px !important; }
|
||||
|
||||
.donate {
|
||||
margin-bottom: 6px; }
|
||||
|
||||
.donate form a {
|
||||
border-bottom: none; }
|
||||
|
||||
/* With Love */
|
||||
@-webkit-keyframes love {
|
||||
to {
|
||||
-webkit-transform: scale(1.1); } }
|
||||
|
||||
@-moz-keyframes love {
|
||||
to {
|
||||
-moz-transform: scale(1.1); } }
|
||||
|
||||
@keyframes love {
|
||||
to {
|
||||
transform: scale(1.1); } }
|
||||
|
||||
.with-love {
|
||||
color: #333;
|
||||
/*display: inline-block;*/ }
|
||||
|
||||
.with-love span,
|
||||
.with-love div {
|
||||
font-size: 14px !important;
|
||||
line-height: 18px !important; }
|
||||
|
||||
.with-love div {
|
||||
padding-bottom: 4px; }
|
||||
|
||||
.with-love .heart {
|
||||
font-size: 1.4em;
|
||||
color: #ff79c6;
|
||||
-webkit-transform: scale(0.9);
|
||||
-moz-transform: scale(0.9);
|
||||
transform: scale(0.9);
|
||||
-webkit-animation: love .5s infinite linear alternate-reverse;
|
||||
-moz-animation: love .5s infinite linear alternate-reverse;
|
||||
animation: love .5s infinite linear alternate-reverse; }
|
||||
|
||||
.with-love a {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px dotted; }
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
"description": "Chaotic Backup",
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback",
|
||||
"build": "webpack -p"
|
||||
"build": "webpack -d",
|
||||
"v": "webpack -v"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
@ -49,7 +50,7 @@
|
|||
"node-sass": "^4.10.0",
|
||||
"sass-loader": "^7.0.x",
|
||||
"style-loader": "^0.23.1",
|
||||
"webpack": "^3.12.0",
|
||||
"webpack": "^3.11.0",
|
||||
"webpack-dev-server": "^2.11.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,17 @@ import {Loading} from '../Snippets';
|
|||
@inject((stores, props, context) => props) @observer
|
||||
export default class Category extends React.Component {
|
||||
@observable loaded = false;
|
||||
@observable bottom_nav = [];
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.type = props.type.toLowerCase();
|
||||
}
|
||||
|
||||
scrollLeft(amount) {
|
||||
document.getElementsByClassName('bottom_nav')[0].scrollLeft = (amount);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.loaded == false) {
|
||||
API.LoadDB([{'cards': this.type}, {'portal': this.type}])
|
||||
|
|
@ -38,7 +43,6 @@ export default class Category extends React.Component {
|
|||
);
|
||||
};
|
||||
|
||||
let bottom_nav = [];
|
||||
let cat_title = "";
|
||||
let top_content = (<div></div>);
|
||||
|
||||
|
|
@ -55,7 +59,7 @@ export default class Category extends React.Component {
|
|||
else return null;
|
||||
})();
|
||||
|
||||
bottom_nav = ((tribe) ?
|
||||
this.bottom_nav = ((tribe) ?
|
||||
API.portal[this.type].find({'gsx$tribe': tribe})
|
||||
:
|
||||
API.portal[this.type].chain().simplesort('gsx$name').data()
|
||||
|
|
@ -80,7 +84,7 @@ export default class Category extends React.Component {
|
|||
);
|
||||
}
|
||||
else {
|
||||
bottom_nav = API.portal[this.type].data.map((card_portal, i) => {
|
||||
this.bottom_nav = API.portal[this.type].data.map((card_portal, i) => {
|
||||
let card_data = API.cards[this.type].findOne({'gsx$name': card_portal.gsx$name});
|
||||
return create_link(card_portal, card_data, i);
|
||||
});
|
||||
|
|
@ -89,9 +93,9 @@ export default class Category extends React.Component {
|
|||
}
|
||||
|
||||
return (<div className={`entry ${this.type}`}>
|
||||
<div className="top_content">{top_content}</div>
|
||||
<div className="entry_content">{top_content}</div>
|
||||
<div className="cat_title">{cat_title}</div>
|
||||
<div className="bottom_nav">{bottom_nav}</div>
|
||||
<div className="entry_nav">{this.bottom_nav}</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,11 +21,12 @@ export default class Single extends React.Component {
|
|||
<span className="close" onClick={this.close.bind(this)}>×</span>
|
||||
<img className="modal-content" src={API.base_image + this.props.image} />
|
||||
</div>
|
||||
{this.props.image && (
|
||||
<div className="splash">
|
||||
{this.props.image &&
|
||||
{/*<span className="arrow">⇩</span>*/}
|
||||
<img onClick={this.expand.bind(this)} src={API.base_image + this.props.image} />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
<div className="entry_text">
|
||||
<span className="title">{this.props.name}</span>
|
||||
{this.props.text &&
|
||||
|
|
|
|||
|
|
@ -76,12 +76,12 @@ export default class Tribes extends React.Component {
|
|||
});
|
||||
|
||||
return (<div className="entry tribe">
|
||||
<div className="top_content">
|
||||
<div className="entry_content">
|
||||
<Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
|
||||
<Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
|
||||
</div>
|
||||
<div className="cat_title">{path[2]}</div>
|
||||
<div className="bottom_nav">{bottom_nav}</div>
|
||||
<div className="entry_nav">{bottom_nav}</div>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,14 @@ import '../../scss/portal.scss';
|
|||
@inject((stores, props, context) => props) @observer
|
||||
export default class Base extends React.Component {
|
||||
|
||||
componentDidUpdate() {
|
||||
window.scrollTo({
|
||||
top: 220,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="portal">
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
clear:both;
|
||||
}
|
||||
|
||||
.content{
|
||||
.content-inner{
|
||||
width:943px;
|
||||
margin:5px 16px 8px 16px;
|
||||
float:left; clear:both;
|
||||
|
|
|
|||
|
|
@ -106,12 +106,12 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.top_content {
|
||||
min-height: 600px;
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: scroll;
|
||||
.entry_content {
|
||||
min-height: 550px;
|
||||
height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
// position: absolute;
|
||||
position: relative;
|
||||
// width: 100%;
|
||||
|
||||
.splash {
|
||||
|
|
@ -121,6 +121,15 @@
|
|||
}
|
||||
// position: relative;
|
||||
// z-index: -1;
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
top: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry_text {
|
||||
|
|
@ -129,9 +138,9 @@
|
|||
}
|
||||
|
||||
// /* width */
|
||||
// ::-webkit-scrollbar {
|
||||
// width: 10px;
|
||||
// }
|
||||
&::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
// /* Track */
|
||||
// ::-webkit-scrollbar-track {
|
||||
|
|
@ -159,7 +168,7 @@
|
|||
}
|
||||
|
||||
/* height is 118px */
|
||||
.bottom_nav {
|
||||
.entry_nav {
|
||||
background-color: #1a1a1a;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user