Skip to content

Commit 0ef1ce5

Browse files
PhrancisPhrancis
committed
CSS and other improvements to login page
1 parent 21ad712 commit 0ef1ce5

File tree

1 file changed

+65
-42
lines changed

1 file changed

+65
-42
lines changed

‎src/components/Login.vue

Lines changed: 65 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
<template>
22
<div class="login">
33

4-
<!-- LOGIN FORM -->
5-
6-
<h4>Please log in to continue, or see below for instructions and assistance.</h4>
7-
84
<!-- Server status -->
9-
<div>
5+
<h4>Server Status</h4>
6+
<div class="server-status">
107
<table>
118
<!-- Should these be dynamically loaded? -->
129
<tr>
@@ -20,29 +17,34 @@
2017
</tr>
2118
<tr v-for="server in serverOptions" v-if="server.name !== 'Other...'">
2219
<td>{{server.name}}</td>
23-
<td>{{server.isOnline}}</td>
24-
<td>{{server.userCount}} users</td>
20+
<td>{{server.isOnline ? "true" : "false"}}</td>
21+
<td>{{!server.userCount ? '-' : `${server.userCount} ${server.userCount === 1 ? 'user' : 'users'}`}}</td>
2522
<td>
26-
<ul>
23+
<ul class="server-mod-list">
2724
<li v-for="key in server.availableMods">
28-
<router-link :to="'/cards?server=' + server.address + '&mod=' + key">
25+
<router-link :to='`/cards?server=${server.address}&mod=${key}`'>
2926
{{ key }}
3027
</router-link>
3128
</li>
3229
</ul>
3330
</td>
34-
<td>{{server.gamesRunning}} games</td>
35-
<td>{{server.ais}} AIs</td>
36-
<td>{{server.latency}} ms</td>
31+
<td>{{!server.gamesRunning ? '-' : `${server.gamesRunning} ${server.gamesRunning === 1 ? 'game' : 'games'}`}}</td>
32+
<td>{{!server.ais ? '-' : `${server.ais} ${server.ais === 1 ? 'AI' : 'AIs'}`}}</td>
33+
<td>{{! server.latency ? '-' : `${server.latency} ms`}}</td>
3734
</tr>
3835
</table>
39-
<input @click="refreshServers()" :disabled="refreshing" type="button" value="Refresh"/>
36+
<input @click="refreshServers()" :disabled="refreshing" type="button" value="Refresh" class="btn btn-navbar" style="margin-top: 10px;"/>
4037
<p v-if="refreshing">Refreshing...</p>
4138
</div>
4239

40+
<!-- LOGIN FORM -->
41+
<h4>Please log in to continue, or see below for instructions and assistance.</h4>
42+
4343
<form name="login_information" id="login_information" class="login-form">
4444
<div class="form-group">
45-
<label for="server" aria-label="Server">Server:</label>
45+
<label for="server" aria-label="Server" class="server-label">
46+
Server:
47+
</label>
4648
<select v-model="server" name="server" id="server" class="form-control">
4749
<option v-for="server in serverOptions" :value="server.address">{{server.name}}</option>
4850
</select>
@@ -57,7 +59,9 @@
5759
</div>
5860
</div>
5961
<div class="form-group">
60-
<label for="username">Username:</label>
62+
<label for="username" class="username-label">
63+
Username:
64+
</label>
6165
<input v-model="username" name="username" id="username" type="text" class="form-control" placeholder="Enter name..." />
6266
</div>
6367
<div class="form-group">
@@ -67,37 +71,37 @@
6771

6872
<!-- WELCOME AND HELP LINK -->
6973

70-
<h3>Getting started</h3>
74+
<div class="welcome-information">
75+
<h3>Getting started</h3>
7176

72-
<p>To begin playing, first select the server you would like to connect to:</p>
73-
<ul>
74-
<li><strong>Local Host: </strong>Select this if you are hosting a local game server on your own machine.</li>
75-
<li><strong>dwarftowers.com: </strong><a href="http://www.dwarftowers.com">dwarftowers.com</a> server hosted by our development team.</li>
76-
<li><strong>zomis.net: </strong><a href="http://www.zomis.net/">Zomis Productions</a> server hosted by our development team.</li>
77-
<li><strong>Other: </strong> Enter a server address manually.</li>
78-
</ul>
79-
<p>Then enter a user name and click <strong>Log in</strong>.</p>
80-
<p style="font-style: italic;">Note: You can expand the Server Console below if you would like to see server messages.</p>
77+
<p>To begin playing, first select the server you would like to connect to:</p>
78+
<ul>
79+
<li><strong>Official Server: </strong>A public server hosted by the Cardshifter development team.</li>
80+
<li><strong>Local Host: </strong>Select this if you are hosting a local game server on your own machine.</li>
81+
<li><strong>Other: </strong> Enter a server address manually.</li>
82+
</ul>
83+
<p>Then enter a user name and click <strong>Log in</strong>.</p>
8184

82-
<h3 class="cyborg-font" style="font-weight: bold;">Cyborg Chronicles</h3>
83-
<p class="cyborg-font">A dystopian, cyberpunk themed game featuring human factions, war machines and interplanetary conflict.</p>
84-
<ul>
85-
<li><h4 class="cyborg-font"><a href=#>Game rules</a></h4></li>
86-
<li><h4 class="cyborg-font"><a href=#>Cards</a></h4></li>
87-
</ul>
85+
<h3 class="cyborg-font" style="font-weight: bold;">Cyborg Chronicles</h3>
86+
<p class="cyborg-font">A dystopian, cyberpunk themed game featuring human factions, war machines and interplanetary conflict.</p>
87+
<!-- <ul>
88+
<li><h4 class="cyborg-font"><a href=#>Game rules</a></h4></li>
89+
<li><h4 class="cyborg-font"><a href=#>Cards</a></h4></li>
90+
</ul> -->
8891

89-
<h3 class="mythos-font" style="font-weight: bold;">MYTHOS</h3>
90-
<p class="mythos-font">Magical and Mythical Creatures clash while Gods, Goddesses and Heroes of Legend fight for human worship.</p>
91-
<ul>
92-
<li><h4 class="mythos-font"><a href=#>Game rules</a></h4></li>
93-
<li><h4 class="mythos-font"><a href=#>Cards</a></h4></li>
94-
</ul>
95-
<h3 style="text-decoration: underline;">About Cardshifter</h3>
92+
<h3 class="mythos-font" style="font-weight: bold;">MYTHOS</h3>
93+
<p class="mythos-font">Magical and Mythical Creatures clash while Gods, Goddesses and Heroes of Legend fight for human worship.</p>
94+
<!-- <ul>
95+
<li><h4 class="mythos-font"><a href=#>Game rules</a></h4></li>
96+
<li><h4 class="mythos-font"><a href=#>Cards</a></h4></li>
97+
</ul> -->
98+
<!-- <h3 style="text-decoration: underline;">About Cardshifter</h3> -->
9699

97-
<ul>
98-
<li><h4><a href="http://stats.zomis.net/io-web">Official Website</a></h4></li>
99-
<li><h4><a href="https://github.com/Cardshifter">On GitHub</a></h4></li>
100-
</ul>
100+
<ul>
101+
<!-- <li><h4><a href="http://stats.zomis.net/io-web">Official Website</a></h4></li> -->
102+
<li><h4><a href="https://github.com/Cardshifter">On GitHub</a></h4></li>
103+
</ul>
104+
</div>
101105
</div>
102106
</template>
103107

@@ -258,4 +262,23 @@ export default {
258262
width: 30%;
259263
margin: auto;
260264
}
265+
.server-status {
266+
font-size: 0.8em;
267+
padding-bottom: 10px;
268+
}
269+
.server-mod-list {
270+
font-size: 0.9em;
271+
padding : 0;
272+
margin: 0;
273+
list-style-type: none;
274+
}
275+
.server-label {
276+
font-size: 0.8em;
277+
}
278+
.username-label {
279+
font-size: 0.8em;
280+
}
281+
.welcome-information {
282+
font-size: 0.8em;
283+
}
261284
</style>

0 commit comments

Comments
 (0)