feat: pull css out and show min ilvl
This commit is contained in:
parent
f35a532633
commit
bbe79fd49d
|
|
@ -0,0 +1,231 @@
|
|||
:root {
|
||||
--background: #2C2F34;
|
||||
--text: #A0A0A0;
|
||||
--local-duty-text: #E6A73A;
|
||||
--cross-duty-text: #79C7EC;
|
||||
--gold-text: #FFC240;
|
||||
--light-blue-text: #5BE2FF;
|
||||
--green-text: #37DE99;
|
||||
--meta-text: #D3EEE9;
|
||||
--ui-text: #EEE1C5;
|
||||
--text-bright: #FFF;
|
||||
|
||||
--row-background: #2C2F34;
|
||||
--row-background-alternate: #373A3E;
|
||||
|
||||
--slot-background: #868180;
|
||||
--slot-empty: #AAA3A2;
|
||||
--tank-blue: #455CCB;
|
||||
--healer-green: #487B39;
|
||||
--dps-red: #813B3C;
|
||||
--icon-gold: #ECB7A2;
|
||||
|
||||
/*--slot-empty: #ADA99C;*/
|
||||
/*--tank-blue: #4A5DC6;*/
|
||||
/*--healer-green: #4A7939;*/
|
||||
/*--dps-red: #7E3938;*/
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body > .listing {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background-color: var(--row-background);
|
||||
}
|
||||
|
||||
body > .listing .left {
|
||||
flex: 2 0 0;
|
||||
}
|
||||
|
||||
body > .listing .middle {
|
||||
flex: 1 0 0 ;
|
||||
}
|
||||
|
||||
body > .listing:nth-child(2n) {
|
||||
background-color: var(--row-background-alternate);
|
||||
}
|
||||
|
||||
body > .listing .description {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
body > .listing .stat {
|
||||
color: var(--meta-text);
|
||||
}
|
||||
|
||||
body > .listing .duty {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
body > .listing .duty.cross {
|
||||
color: var(--cross-duty-text);
|
||||
}
|
||||
|
||||
body > .listing .duty.local {
|
||||
color: var(--local-duty-text);
|
||||
}
|
||||
|
||||
body > .listing .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 1em;
|
||||
|
||||
color: var(--meta-text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body > .listing .meta > .item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
body > .listing .meta > .item .icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
fill: var(--text);
|
||||
margin-left: .5em;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
body > .listing .party {
|
||||
margin-top: .5em;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 2em);
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
body > .listing .party > .total {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
body > .listing .party > .slot {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: 1px solid currentColor;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
body > .listing .party > .slot:not(.filled).dps.tank {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 50%,
|
||||
var(--dps-red) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot:not(.filled).dps.healer {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--healer-green) 0%,
|
||||
var(--healer-green) 50%,
|
||||
var(--dps-red) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot:not(.filled).tank.healer {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 50%,
|
||||
var(--healer-green) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot:not(.filled).tank.healer.dps {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 33%,
|
||||
var(--healer-green) 33%,
|
||||
var(--healer-green) 66%,
|
||||
var(--dps-red) 66%
|
||||
);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot:not(.filled).dps {
|
||||
background-color: var(--dps-red);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.filled {
|
||||
background-color: var(--slot-background);
|
||||
border-color: var(--icon-gold);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.empty {
|
||||
background-color: var(--slot-empty);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.dps {
|
||||
background-color: var(--dps-red);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.healer {
|
||||
background-color: var(--healer-green);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.tank {
|
||||
background-color: var(--tank-blue);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--icon-gold);
|
||||
}
|
||||
|
||||
body > .listing .party > .slot.filled:not(.dps):not(.healer):not(.tank) > svg {
|
||||
fill: #C6C6C6;
|
||||
}
|
||||
|
||||
/* Really, this could be 26em */
|
||||
@media (max-width: 30em) {
|
||||
body > .listing {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
body > .listing > :not(:first-child) {
|
||||
margin-top: .5em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
body > .listing .meta {
|
||||
flex-grow: 1;
|
||||
|
||||
margin-left: 0;
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
body > .listing .meta > .item {
|
||||
align-self: unset;
|
||||
}
|
||||
|
||||
body > .listing .meta > .item .icon {
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
body > .listing .meta > .item > .text {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
button, input, select {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit
|
||||
}
|
||||
|
||||
img, video {
|
||||
height: auto;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1em 1em 0;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
#![feature(try_blocks, iter_intersperse)]
|
||||
#![feature(try_blocks)]
|
||||
|
||||
use anyhow::Context;
|
||||
use std::borrow::Cow;
|
||||
|
|
|
|||
16
src/web.rs
16
src/web.rs
|
|
@ -77,6 +77,8 @@ fn assets() -> BoxedFilter<(impl Reply, )> {
|
|||
.and(warp::path("assets"))
|
||||
.and(
|
||||
icons()
|
||||
.or(minireset())
|
||||
.or(listings_css())
|
||||
)
|
||||
.boxed()
|
||||
}
|
||||
|
|
@ -88,6 +90,20 @@ fn icons() -> BoxedFilter<(impl Reply, )> {
|
|||
.boxed()
|
||||
}
|
||||
|
||||
fn minireset() -> BoxedFilter<(impl Reply, )> {
|
||||
warp::path("minireset.css")
|
||||
.and(warp::path::end())
|
||||
.and(warp::fs::file("./assets/minireset.css"))
|
||||
.boxed()
|
||||
}
|
||||
|
||||
fn listings_css() -> BoxedFilter<(impl Reply, )> {
|
||||
warp::path("listings.css")
|
||||
.and(warp::path::end())
|
||||
.and(warp::fs::file("./assets/listings.css"))
|
||||
.boxed()
|
||||
}
|
||||
|
||||
fn index() -> BoxedFilter<(impl Reply, )> {
|
||||
let route = warp::path::end()
|
||||
.map(|| warp::redirect(Uri::from_static("/listings")));
|
||||
|
|
|
|||
|
|
@ -4,56 +4,7 @@
|
|||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<style>
|
||||
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
||||
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: 100%;
|
||||
font-weight: normal
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
button, input, select {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit
|
||||
}
|
||||
|
||||
img, video {
|
||||
height: auto;
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 0
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1em 1em 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/assets/minireset.css"/>
|
||||
{%- block head %}{% endblock %}
|
||||
</head>
|
||||
<body>{% block body %}{% endblock %}</body>
|
||||
|
|
|
|||
|
|
@ -5,245 +5,13 @@ Remote Party Finder
|
|||
{%- endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
:root {
|
||||
--background: #2C2F34;
|
||||
--text: #A0A0A0;
|
||||
--local-duty-text: #E6A73A;
|
||||
--cross-duty-text: #79C7EC;
|
||||
--gold-text: #FFC240;
|
||||
--light-blue-text: #5BE2FF;
|
||||
--green-text: #37DE99;
|
||||
--meta-text: #D3EEE9;
|
||||
--ui-text: #EEE1C5;
|
||||
--text-bright: #FFF;
|
||||
|
||||
--row-background: #2C2F34;
|
||||
--row-background-alternate: #373A3E;
|
||||
|
||||
--slot-background: #868180;
|
||||
--slot-empty: #AAA3A2;
|
||||
--tank-blue: #455CCB;
|
||||
--healer-green: #487B39;
|
||||
--dps-red: #813B3C;
|
||||
--icon-gold: #ECB7A2;
|
||||
|
||||
/*--slot-empty: #ADA99C;*/
|
||||
/*--tank-blue: #4A5DC6;*/
|
||||
/*--healer-green: #4A7939;*/
|
||||
/*--dps-red: #7E3938;*/
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
font-family: sans-serif;
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
body > div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
background-color: var(--row-background);
|
||||
}
|
||||
|
||||
body > div .left {
|
||||
flex: 1 0 0;
|
||||
}
|
||||
|
||||
body > div:nth-child(2n) {
|
||||
background-color: var(--row-background-alternate);
|
||||
}
|
||||
|
||||
body > div .description {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
body > div .duty {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
body > div .duty.cross {
|
||||
color: var(--cross-duty-text);
|
||||
}
|
||||
|
||||
body > div .duty.local {
|
||||
color: var(--local-duty-text);
|
||||
}
|
||||
|
||||
body > div .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
margin-left: 1em;
|
||||
|
||||
color: var(--meta-text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
body > div .meta > .item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
/*body > div .meta > .item > .text {*/
|
||||
/* align-self: center;*/
|
||||
/*}*/
|
||||
|
||||
body > div .meta > .item .icon {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
fill: var(--text);
|
||||
margin-left: .5em;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
body > div .party {
|
||||
margin-top: .5em;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 2em);
|
||||
gap: .5em;
|
||||
|
||||
/*display: flex;*/
|
||||
/*flex-direction: row;*/
|
||||
/*flex-wrap: wrap;*/
|
||||
/*align-items: center;*/
|
||||
/*margin-top: .5em;*/
|
||||
}
|
||||
|
||||
body > div .party > .total {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
body > div .party > .slot {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: 1px solid currentColor;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
body > div .party > .slot:not(.filled).dps.tank {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 50%,
|
||||
var(--dps-red) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > div .party > .slot:not(.filled).dps.healer {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--healer-green) 0%,
|
||||
var(--healer-green) 50%,
|
||||
var(--dps-red) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > div .party > .slot:not(.filled).tank.healer {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 50%,
|
||||
var(--healer-green) 50%
|
||||
);
|
||||
}
|
||||
|
||||
body > div .party > .slot:not(.filled).tank.healer.dps {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
var(--tank-blue) 0%,
|
||||
var(--tank-blue) 33%,
|
||||
var(--healer-green) 33%,
|
||||
var(--healer-green) 66%,
|
||||
var(--dps-red) 66%
|
||||
);
|
||||
}
|
||||
|
||||
body > div .party > .slot:not(.filled).dps {
|
||||
background-color: var(--dps-red);
|
||||
}
|
||||
|
||||
/* background: linear-gradient(to top, #FF44AD, #CD60B2); */
|
||||
|
||||
body > div .party > .slot.filled {
|
||||
background-color: var(--slot-background);
|
||||
border-color: var(--icon-gold);
|
||||
}
|
||||
|
||||
body > div .party > .slot.empty {
|
||||
background-color: var(--slot-empty);
|
||||
}
|
||||
|
||||
body > div .party > .slot.dps {
|
||||
background-color: var(--dps-red);
|
||||
}
|
||||
|
||||
body > div .party > .slot.healer {
|
||||
background-color: var(--healer-green);
|
||||
}
|
||||
|
||||
body > div .party > .slot.tank {
|
||||
background-color: var(--tank-blue);
|
||||
}
|
||||
|
||||
body > div .party > .slot > svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--icon-gold);
|
||||
}
|
||||
|
||||
body > div .party > .slot.filled:not(.dps):not(.healer):not(.tank) > svg {
|
||||
fill: #C6C6C6;
|
||||
}
|
||||
|
||||
/* Really, this could be 26em */
|
||||
@media (max-width: 30em) {
|
||||
body > div {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
body > div .meta {
|
||||
flex-grow: 1;
|
||||
|
||||
margin-top: .5em;
|
||||
margin-left: 0;
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
body > div .meta > .item {
|
||||
align-self: unset;
|
||||
}
|
||||
|
||||
body > div .meta > .item .icon {
|
||||
order: 1;
|
||||
margin-left: 0;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
body > div .meta > .item > .text {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/assets/listings.css"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
{% for container in containers %}
|
||||
{% let listing = container.listing.borrow() %}
|
||||
<div data-id="{{ listing.id }}" data-updated-minutes="{{ container.since_updated().num_minutes() }}">
|
||||
<div class="listing" data-id="{{ listing.id }}" data-updated-minutes="{{ container.since_updated().num_minutes() }}">
|
||||
<div class="left">
|
||||
{% let duty_class %}
|
||||
{% if listing.is_cross_world() %}
|
||||
|
|
@ -291,6 +59,12 @@ Remote Party Finder
|
|||
<div class="total">{{ listing.slots_filled() }}/{{ listing.slots_available }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="stat">
|
||||
<div class="name">Min IL</div>
|
||||
<div class="value">{{ listing.min_item_level }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right meta">
|
||||
<div class="item creator">
|
||||
<span class="text">{{ listing.name.full_text() }} @ {{ listing.home_world_string() }}</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue