cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
							<rml>
<head>
	<title>Flex 06 - Player list</title>
	<link type="text/rcss" href="../../style.rcss"/>
	<meta name="Reference" content="The reference is also implemented using flexbox. However, the header and footer is explicitly set to 'flex: none', so that their size is always fixed. The player list uses 'flex: 1' so that it expands to the remaining available space. Being explicit like here is generally recommended practice, since it may avoid unnecessary content-based sizing which can impact performance." />
	<style>
		body {
			box-sizing: border-box;
			height: 50%;
			top: 20%;
			left: 55%;
			min-width: 450dp;
			min-height: 250dp;
			padding: 30dp 0 0 0;
			border: 1px #a0a0a0;
		}

		scrollbarvertical sliderbar, scrollbarvertical slidertrack {
			border-width: 0;
		}

		handle#title {
			width: auto;
			height: auto;
			display: block;
			top: 0;
			right: 0;
			left: 0;
			bottom: auto;
			cursor: move;
			background-color: #a0a0a0;
			padding: 5dp 20dp;
			font-weight: bold;
			font-size: 1.25em;
		}

		handle#resizer {
			width: 12dp;
			height: 12dp;
			background: #a0a0a0;
		}

		input.text {
			box-sizing: border-box;
			width: 100%;
			padding: 10dp;
			border: 1dp #bbb;
			border-radius: 3dp;
			font-size: 1.1em;
			line-height: 1.4;
			cursor: text;
		}

		#contents {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			height: 100%;
			padding: 20dp;
		}

		#panel_info {
			flex: none;
			display: flex;
			justify-content: space-between;
			font-size: .95em;
		}

		#players {
			flex: 1;
			margin: 15dp 0;
			overflow: auto;
			border: 1px #bbb;
		}

		#footer {
			flex: none;
		}

		table thead tr {
			font-weight: bold;
			padding-bottom: 1dp;
		}

		table td {
			padding: 14dp 4dp;
		}

		table td.data_column {
			width: 70dp;
			text-align: center;
		}

		table tbody td.data_column {
			font-size: .9em;
		}

		table td.tag_column {
			width: 90dp;
		}
	</style>
</head>

<body>
<handle id="title" move_target="#document">Player List</handle>

<div id="contents">
	<div id="panel_info">
		<div>Server: Europe #56763</div>
		<div>Players: 99</div>
	</div>

	<div id="players">
		<table>
			<thead>
			<tr>
				<td class="data_column">ID</td>
				<td class="tag_column">Player Tag</td>
				<td></td>
				<td class="data_column">Ping</td>
				<td class="data_column">Score</td>
			</tr>
			</thead>

			<tbody>
			<tr>
				<td class="data_column">10</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">11</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">12</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">13</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">14</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">15</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">16</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">17</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">18</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">19</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			<tr>
				<td class="data_column">20</td>
				<td>tag</td>
				<td>Player name</td>
				<td class="data_column">55 ms</td>
				<td class="data_column">108</td>
			</tr>
			</tbody>
		</table>
	</div>

	<div id="footer">
		<input type="text"/>
	</div>
</div>

<handle size_target="#document" id="resizer"/>
</body>
</rml>