84 lines
5.1 KiB
Plaintext
84 lines
5.1 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Servers</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; margin-top: 10dp; }
|
|
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.side { flex: 0 0 34%; margin-left: 18dp; }
|
|
.bar { display: flex; flex-direction: row; align-items: center; min-height: 36dp; margin-bottom: 6dp; }
|
|
.bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
|
|
.bar .search input.text { display: block; width: 100%; }
|
|
.bar .chip { margin-left: 6dp; }
|
|
.chip.on { border-color: #f2b13c; color: #f2b13c; }
|
|
.table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; }
|
|
.table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
|
|
.table .c3 { width: 90dp; }
|
|
.table .c4 { width: 80dp; margin-right: 0; }
|
|
.table .head span { cursor: pointer; }
|
|
.table .head span:hover { color: #5cc8f0; }
|
|
.table .head span.sorted { color: #f2b13c; }
|
|
.table .row.old { color: #5d6e80; }
|
|
.table .row.full .c3 { color: #e05a4f; }
|
|
.table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
|
|
.facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
|
|
.desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="serverlist">
|
|
<div class="win-head">
|
|
<span class="title">{{ title }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="bar">
|
|
<div class="search"><input class="text" type="text" data-value="search" placeholder="Search name or address" maxlength="48"/></div>
|
|
<span class="chip" data-class-on="hide_full" data-action="toggle" data-arg="full">Hide full</span>
|
|
<span class="chip" data-class-on="hide_locked" data-action="toggle" data-arg="locked">Hide locked</span>
|
|
<span class="chip" data-class-on="known_only" data-action="toggle" data-arg="known">My servers</span>
|
|
</div>
|
|
<div class="split">
|
|
<div class="colm">
|
|
<div class="table" style="flex: 1;">
|
|
<div class="head">
|
|
<span class="c1" data-class-sorted="sort == 1 || sort == -1" data-action="sort" data-arg="1">Server</span>
|
|
<span class="c2">Address</span>
|
|
<span class="c3" data-class-sorted="sort == 2 || sort == -2" data-action="sort" data-arg="2">Players</span>
|
|
<span class="c4" data-class-sorted="sort == 3 || sort == -3" data-action="sort" data-arg="3">Ping</span>
|
|
</div>
|
|
<div class="body">
|
|
<div class="empty" data-if="rows.size == 0">No servers yet. {{ status }}</div>
|
|
<div class="row" data-for="r : rows" data-class-selected="r.selected" data-class-old="r.old" data-class-full="r.full" data-action="pick" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.name }}<span class="tag" data-if="r.locked">LOCK</span><span class="tag" data-if="r.known">CHAR</span></span>
|
|
<span class="c2">{{ r.address }}</span>
|
|
<span class="c3">{{ r.players }}</span>
|
|
<span class="c4">{{ r.ping }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm side">
|
|
<div data-if="has_pick">
|
|
<div class="pick-name">{{ pick_name }}</div>
|
|
<div class="facts">{{ pick_facts }}</div>
|
|
</div>
|
|
<div class="desc" data-if="has_pick">{{ pick_text }}</div>
|
|
<div class="hint" data-if="!has_pick">Pick a server. A double click joins it.</div>
|
|
<div class="actions" style="margin-top: 12dp;">
|
|
<div class="btn primary" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
|
|
<div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<div class="btn" data-action="back">Back</div>
|
|
<span class="status">{{ status }}</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|