UI layout for atlas revamp
This commit is contained in:
fin444
parent
29cc29d307
commit
2b6c924aee
4 changed files with 137 additions and 99 deletions
|
|
@ -1,32 +1,74 @@
|
||||||
.searchbox {
|
/* type selectors */
|
||||||
grid-column: 1;
|
|
||||||
padding: 0%;
|
#type-box {
|
||||||
display: grid;
|
cursor: pointer;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
overflow: auto;
|
||||||
width: 100%;
|
}
|
||||||
gap: 5px;
|
#type-box > div {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% / 12);
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.items {
|
.type-selected {
|
||||||
grid-column: 1;
|
background-color: #0a0;
|
||||||
padding: 0%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
width: 100%;
|
|
||||||
gap: 5px;
|
|
||||||
grid-template-rows: masonry;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemsearch {
|
/* rarity selectors */
|
||||||
padding: 0%;
|
|
||||||
display: grid;
|
#rarity-box {
|
||||||
grid-template-columns: 1fr;
|
cursor: pointer;
|
||||||
width: 100%;
|
width: 58.33%;
|
||||||
gap: 5px;
|
text-align: center;
|
||||||
|
}
|
||||||
|
#rarity-box > div {
|
||||||
|
width: calc(100% / 7);
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
#rarity-box > div > b {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
#rarity-box > div.rarity-selected > b {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchinput {
|
#rarity-normal { color: #FFFFFF; }
|
||||||
width: 100%;
|
#rarity-normal.rarity-selected { background-color: #FFFFFF; }
|
||||||
max-width: 200px;
|
#rarity-unique { color: #FFFF55; }
|
||||||
|
#rarity-unique.rarity-selected { background-color: #FFFF55; }
|
||||||
|
#rarity-set { color: #55FF55; }
|
||||||
|
#rarity-set.rarity-selected { background-color: #55FF55; }
|
||||||
|
#rarity-rare { color: #FF55FF; }
|
||||||
|
#rarity-rare.rarity-selected { background-color: #FF55FF; }
|
||||||
|
#rarity-legendary { color: #55FFFF; }
|
||||||
|
#rarity-legendary.rarity-selected { background-color: #55FFFF; }
|
||||||
|
#rarity-fabled { color: #FF5555; }
|
||||||
|
#rarity-fabled.rarity-selected { background-color: #FF5555; }
|
||||||
|
#rarity-mythic { color: #AA00AA; }
|
||||||
|
#rarity-mythic.rarity-selected { background-color: #AA00AA; }
|
||||||
|
|
||||||
|
/* filters */
|
||||||
|
.reorder-filter {
|
||||||
|
height: 75%;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.asc-icon {
|
||||||
|
opacity: 0.25;
|
||||||
|
width: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.desc-icon {
|
||||||
|
opacity: 0.25;
|
||||||
|
width: 1rem;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
img.asc-sel {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
135
items/index.html
135
items/index.html
|
|
@ -18,6 +18,7 @@
|
||||||
<link rel="stylesheet" href="../css/sq2bs.css">
|
<link rel="stylesheet" href="../css/sq2bs.css">
|
||||||
<link rel="stylesheet" href="../css/sidebar.css">
|
<link rel="stylesheet" href="../css/sidebar.css">
|
||||||
<link rel="stylesheet" href="../css/wynnstyles.css">
|
<link rel="stylesheet" href="../css/wynnstyles.css">
|
||||||
|
<link rel="stylesheet" href="../css/items.css">
|
||||||
</head>
|
</head>
|
||||||
<body class = "text-light d-flex justify-content-center" id = "body">
|
<body class = "text-light d-flex justify-content-center" id = "body">
|
||||||
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
<div id="main-sidebar" class="sidebar dark-7 dark-shadow">
|
||||||
|
|
@ -32,99 +33,83 @@
|
||||||
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
<a href = "https://discord.gg/CGavnAnerv" target = "_blank"><img src = "../media/icons/discord.png" alt = "WB Discord" title = "WB Discord"><b>WB Discord</b></a>
|
||||||
</div>
|
</div>
|
||||||
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
<div class = "container py-5 vh-100 mx-0 mx-lg-auto scaled-font">
|
||||||
<div class = "col">
|
<div class = "row">
|
||||||
<div class = "row">
|
<div class = "row">
|
||||||
<div class = "col text-end">
|
<div class = "col text-end">
|
||||||
<a href = "../items_adv/">Advanced Item Search</a>
|
<a href = "../items_adv/">Advanced Item Search</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "row">
|
<div class = "col-auto" style = "width: 12.5%;"></div>
|
||||||
|
<div class = "col-lg-4">
|
||||||
<div class = "row">
|
<div class = "row">
|
||||||
<div class = "col-lg-3 col-sm-12">
|
<div class = "col-lg col-sm-12">
|
||||||
<div class = "col fw-bold">Name:</div>
|
<div class = "col fw-bold">Name:</div>
|
||||||
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
|
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style="width: 100%!important;" type="text" id="item-name-choice" name="item-name-choice" placeholder="Item name (case insensitive)"/>
|
||||||
<p class="error col"></p>
|
|
||||||
</div>
|
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Category:</div>
|
|
||||||
<input class="col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-category-choice" name="item-category-choice" placeholder="ALL"/>
|
|
||||||
<datalist id="category-items">
|
|
||||||
<option value="ALL">
|
|
||||||
<option value="armor">
|
|
||||||
<option value="helmet">
|
|
||||||
<option value="chestplate">
|
|
||||||
<option value="leggings">
|
|
||||||
<option value="boots">
|
|
||||||
<option value="accessory">
|
|
||||||
<option value="ring">
|
|
||||||
<option value="bracelet">
|
|
||||||
<option value="necklace">
|
|
||||||
<option value="weapon">
|
|
||||||
<option value="wand">
|
|
||||||
<option value="spear">
|
|
||||||
<option value="bow">
|
|
||||||
<option value="dagger">
|
|
||||||
<option value="relik">
|
|
||||||
</datalist>
|
|
||||||
<p class="error"></p>
|
|
||||||
</div>
|
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Rarity:</div>
|
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="item-rarity-choice" name="item-rarity-choice" placeholder="ANY"/>
|
|
||||||
<datalist id = "rarity-items">
|
|
||||||
<option value="ANY">
|
|
||||||
<option value="Normal">
|
|
||||||
<option value="Unique">
|
|
||||||
<option value="Set">
|
|
||||||
<option value="Rare">
|
|
||||||
<option value="Legendary">
|
|
||||||
<option value="Fabled">
|
|
||||||
<option value="Mythic">
|
|
||||||
<option value="Sane">
|
|
||||||
</datalist>
|
|
||||||
<p class="error col-auto"></p>
|
|
||||||
</div>
|
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Level Range:</div>
|
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" type="text" id="item-level-choice" name="item-level-choice" placeholder = "1-106"/>
|
|
||||||
<p class="error col-auto"></p>
|
<p class="error col-auto"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "row">
|
<div class = "row">
|
||||||
<div class = "col-lg-3 col-sm-12">
|
<div class = "col-lg col-sm-12">
|
||||||
<div class = "col fw-bold">Filter 1:</div>
|
<div class = "col"><span class = "fw-bold">Type:</span> <span style = "cursor: pointer; float: right;"><span>All</span> <span>None</span></span></div>
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter1-choice" name="filter1-choice" placeholder="ANY"/>
|
<div id = "type-box">
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 0 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 9.09091% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 18.1818% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 27.2727% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 36.3636% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 45.4545% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 54.5455% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 63.6364% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 72.7273% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 81.8182% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 90.9091% 0;"></div>
|
||||||
|
<div class = "item-display-new-toggleable" style = "background-image: url('../media/items/old.png'); background-position: 100% 0;"></div>
|
||||||
|
</div>
|
||||||
<p class="error col-auto"></p>
|
<p class="error col-auto"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Filter 2:</div>
|
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter2-choice" name="filter2-choice" placeholder="ANY"/>
|
|
||||||
<p class="error col-auto"></p>
|
|
||||||
</div>
|
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Filter 3:</div>
|
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter3-choice" name="filter3-choice" placeholder="ANY"/>
|
|
||||||
<p class="error col-auto"></p>
|
|
||||||
</div>
|
|
||||||
<div class = "col-lg-3 col-sm-12">
|
|
||||||
<div class = "col fw-bold">Filter 4:</div>
|
|
||||||
<input class = "border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" id="filter4-choice" name="filter4-choice" placeholder="ANY"/>
|
|
||||||
<p class="error col-auto"></p>
|
|
||||||
</div>
|
|
||||||
<datalist id = "filter-items"></datalist>
|
|
||||||
</div>
|
</div>
|
||||||
<div class = "row">
|
<div class = "row">
|
||||||
<div class = "col-auto">
|
<div class = "col-lg col-sm-12">
|
||||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "doItemSearch()">
|
<div class = "col"><span class = "fw-bold">Rarity:</span> <span style = "cursor: pointer; float: right;"><span>All</span> <span>None</span></span></div>
|
||||||
Search!
|
<div id = "rarity-box">
|
||||||
</button>
|
<!-- unfortunately they must be stacked up like this because newlines are considered spaces and muck up the organization -->
|
||||||
|
<div id = "rarity-normal"><b>N</b></div><div id = "rarity-unique"><b>U</b></div><div id = "rarity-set"><b>S</b></div><div id = "rarity-rare"><b>R</b></div><div id = "rarity-legendary"><b>L</b></div><div id = "rarity-fabled"><b>F</b></div><div id = "rarity-mythic"><b>M</b></div>
|
||||||
|
</div>
|
||||||
|
<p class="error col-auto"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class = "col-auto">
|
</div>
|
||||||
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetItemSearch()">
|
</div>
|
||||||
Reset
|
<div class = "col-lg-5">
|
||||||
</button>
|
<div class = "col fw-bold">Filters:</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col">
|
||||||
|
<img src = "../media/icons/3-lines.svg" class = "reorder-filter" />
|
||||||
|
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style = "width: 25ch!important; display: inline-block;" type="text" placeholder="Filter"/>
|
||||||
|
<img src = "../media/icons/triangle.svg" class = "asc-icon asc-sel" />
|
||||||
|
<img src = "../media/icons/triangle.svg" class = "desc-icon" />
|
||||||
|
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style = "width: 6ch!important; display: inline-block;" type="text" placeholder="-∞"/>
|
||||||
|
to
|
||||||
|
<input class = "col border-dark text-light dark-5 rounded scaled-font form-control form-control-sm" style = "width: 6ch!important; display: inline-block;" type="text" placeholder="∞"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col fw-bold" style = "cursor: pointer; padding-top: 5px;">
|
||||||
|
+ Add Filter
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class = "row">
|
||||||
|
<div class = "col-auto" style = "width: 12.5%;"></div>
|
||||||
|
<div class = "col-auto">
|
||||||
|
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "search-button" onclick = "doItemSearch()">
|
||||||
|
Search!
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class = "col-auto">
|
||||||
|
<button class = "button rounded scaled-font fw-bold text-light dark-5" id = "reset-button" onclick = "resetItemSearch()">
|
||||||
|
Reset
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "row box-title justify-content-center" id = "summary">
|
<div class = "row box-title justify-content-center" id = "summary">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
8
media/icons/3-lines.svg
Normal file
8
media/icons/3-lines.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="15px" height="15px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
|
||||||
|
fill="white"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 575 B |
3
media/icons/triangle.svg
Normal file
3
media/icons/triangle.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.167 252.791">
|
||||||
|
<path fill="#fff" d="M.353 252.437L252.083.707l251.731 251.73"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 143 B |
Loading…
Reference in a new issue