+
-
@@ -41,31 +41,27 @@ export default class Explore extends Vue {
position: relative;
display: grid;
grid-template-areas:
+ "exit void"
"items stats"
"containers containers";
- grid-template-rows: 1fr 0.25fr;
+ grid-template-rows: 100px 1fr 0.25fr;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
max-width: 1500px;
margin: auto;
- overflow: hidden;
}
.character-items {
background: #222;
grid-area: items;
display: grid;
- grid-template-columns: repeat(3, 1fr);
- grid-template-rows: repeat(100, 1fr);
+ grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+ grid-template-rows: repeat(10, 1fr);
justify-items: center;
align-items: start;
-}
-
-@media (max-width: 800px) {
- .character-items {
- grid-template-columns: repeat(2, 1fr);
- }
+ overflow-x: hidden;
+ overflow-y: scroll;
}
.character-items > .item-view {
@@ -89,8 +85,24 @@ export default class Explore extends Vue {
}
.profile-exit {
- position: absolute;
- top: 0;
- left: 0;
+ grid-area: exit;
+ width: 100%;
+ padding: 4pt;
+ flex: 0 1;
+ background: #333;
+ border-color: #666;
+ border-style: outset;
+ user-select: none;
+ color: #eee;
+ font-size: 36px;
+}
+
+.profile-exit:hover {
+ background: #444;
+}
+
+.profile-exit:active {
+ background: #666;
+ border-style: inset;
}