Skip to content

GitLab

Commit e7bb7d09 authored by matthias.lang's avatar matthias.lang
Browse files

web: beautify UI (colors, column order, filter icon alignment)

parent 3a90de3e
Hide whitespace changes
Inline Side-by-side
webroot/index.html
View file @ e7bb7d09
......@@ -56,23 +56,29 @@
.invalid { color: grey; }
.icon {
line-height: 1em !important;
height: 1em;
width: 1em;
text-align: center;
vertical-align: middle;
padding: 5px;
border-radius: 4px;
border: 1px solid #bbb;
background-color: #bbb;
color: #EEE;
border: 1px solid #b3e0da;
background-color: #b3e0da;
color: #FFF;
}
.icon-active {
background-color: #b3e0da;
border-color: #b3e0da;
background-color: #009682;
border-color: #009682;
color: #FFF;
}
.icon:hover {
background-color: #bbb;
border-color: #bbb;
}
/* TODO: asd*/
.fa {
font-size: 1.33333333em;
......@@ -128,8 +134,9 @@
</form>
<div class="row">
<span v-for="category in filterShow" style="padding-right: 2em">
<b>{{ category.name }}:</b>
<div class="ten columns">
<span v-for="category in filterShow" class="one-third column">
<strong>{{ category.name }}:</strong><br/>
<span v-for="filter in category.filters">
<span @click="filter.buttonState = !filter.buttonState"
class="icon fa"
......@@ -139,6 +146,7 @@
/>
</span>
</span>
</div>
</div>
......@@ -165,16 +173,6 @@
</thead>
<tbody>
<tr v-for="entry in filteredData" style="vertical-align: top">
<td>
<small>
<!--
<span v-if="entry.valid=='valid'" :title="entry.notafter" class="valid">{{ entry.notafterduration }}</span>
<span v-if="entry.valid=='expired'" :title="entry.notafter" class="invalid">{{ entry.notafterduration }}</span>
<span v-if="entry.valid=='revoked'" :title="entry.notafter" class="invalid">{{ entry.notafterduration }}</span>
-->
<span :title="entry.notafter">{{ entry.notafterduration }}</span>
</small>
</td>
<td>
{{entry.cn}} <span v-if="entry.ou">({{entry.ou}})</span></b><br/>
<a v-bind:href="'https://api.ca.kit.edu/redirect/getcert/' + entry.serial">
......@@ -184,6 +182,11 @@
<td>
<span v-for="email in entry.emailaddresses">{{email}} </span> <!-- TODO: -->
</td>
<td>
<small>
<span :title="entry.notafter">{{ entry.notafterduration }}</span>
</small>
</td>
<td>
<i v-if="entry.valid=='valid'" :title="entry.valid" class="fa fa-check good"></i>
<i v-if="entry.valid=='expired'" :title="entry.valid" class="fa fa-times neutral"></i>
......@@ -198,9 +201,9 @@
<i v-if="entry.type=='Server'" class="fa fa-server" :title="entry.type"></i>
</td>
<td>
<i v-if="entry.public=='public'" class="fa fa-eye" :title="entry.public"></i>
<i v-if="entry.public=='private'" class="fa fa-eye-slash" :title="entry.public"></i>
<i v-if="entry.public=='unknown'" class="fa fa-low-vision" :title="entry.public"></i>
<i v-if="entry.public=='public'" class="fa fa-eye" :title="entry.public"></i>
<i v-if="entry.public=='private'" class="fa fa-eye-slash" :title="entry.public"></i>
<i v-if="entry.public=='unknown'" class="fa fa-low-vision" :title="entry.public"></i>
</td>
</tr>
</tbody>
......@@ -225,9 +228,9 @@
el: '#ca-search',
data: {
tableHeaders: [
{'field': 'notafterepoch', 'description': 'Ablaufdatum'},
{'field': 'cn', 'description': 'Name'},
{'field': 'emailaddresses', 'description': 'E-Mail'},
{'field': 'notafterepoch', 'description': 'Ablaufdatum'},
{'field': 'valid', 'description': ''},
{'field': 'type', 'description': ''},
{'field': 'public', 'description': ''},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Imprint