Skip to content

Commit 7e6902c

Browse files
DaneEverittDaneEveritt
committed
Adjustments to the UI
1 parent c772376 commit 7e6902c

File tree

2 files changed

+53
-51
lines changed

2 files changed

+53
-51
lines changed

‎resources/assets/scripts/components/server/Server.vue‎

Lines changed: 42 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,53 @@
66
<div class="spinner spinner-xl spinner-thick blue"></div>
77
</div>
88
</div>
9-
<div class="m-6 flex flex-no-shrink rounded animate fadein" v-else>
10-
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
11-
<div class="mr-6">
12-
<div class="p-6 text-center bg-white border rounded">
13-
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
14-
<span class="text-grey-dark text-sm">{{server.node}}</span>
9+
<div v-else>
10+
<div class="m-6 flex flex-no-shrink rounded animate fadein">
11+
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
12+
<div class="mr-6">
13+
<div class="p-6 text-center bg-white border rounded">
14+
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
15+
<span class="text-grey-dark text-sm">{{server.node}}</span>
16+
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
17+
</div>
1518
</div>
16-
<power-buttons class="mt-6 p-4 text-center bg-white border rounded"/>
17-
<div class="mt-6 p-4 bg-white border rounded">
18-
<progress-bar title="Memory" percent="33"></progress-bar>
19-
<progress-bar title="CPU" percent="80" class="mt-4"></progress-bar>
20-
<progress-bar title="Disk" percent="97" class="mt-4"></progress-bar>
19+
<div class="mt-6 sidenav mr-6 bg-white border rounded">
20+
<router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
21+
<terminal-icon class="h-4"></terminal-icon> Console
22+
</router-link>
23+
<router-link :to="{ name: 'server-files' }">
24+
<folder-icon class="h-4"></folder-icon> Files
25+
</router-link>
26+
<router-link :to="{ name: 'server-subusers' }">
27+
<users-icon class="h-4"></users-icon> Subusers
28+
</router-link>
29+
<router-link :to="{ name: 'server-schedules' }">
30+
<calendar-icon class="h-4"></calendar-icon> Schedules
31+
</router-link>
32+
<router-link :to="{ name: 'server-databases' }">
33+
<database-icon class="h-4"></database-icon> Databases
34+
</router-link>
35+
<router-link :to="{ name: 'server-allocations' }">
36+
<globe-icon class="h-4"></globe-icon> Allocations
37+
</router-link>
38+
<router-link :to="{ name: 'server-settings' }">
39+
<settings-icon class="h-4"></settings-icon> Settings
40+
</router-link>
2141
</div>
2242
</div>
23-
<div class="sidenav">
24-
<router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
25-
<terminal-icon style="height: 1em;"></terminal-icon>
26-
Console
27-
</router-link>
28-
<router-link :to="{ name: 'server-files' }">
29-
<folder-icon style="height: 1em;"></folder-icon>
30-
Files
31-
</router-link>
32-
<router-link :to="{ name: 'server-subusers' }">
33-
<users-icon style="height: 1em;"></users-icon>
34-
Subusers
35-
</router-link>
36-
<router-link :to="{ name: 'server-schedules' }">
37-
<calendar-icon style="height: 1em;"></calendar-icon>
38-
Schedules
39-
</router-link>
40-
<router-link :to="{ name: 'server-databases' }">
41-
<database-icon style="height: 1em;"></database-icon>
42-
Databases
43-
</router-link>
44-
<router-link :to="{ name: 'server-allocations' }">
45-
<globe-icon style="height: 1em;"></globe-icon>
46-
Allocations
47-
</router-link>
48-
<router-link :to="{ name: 'server-settings' }">
49-
<settings-icon style="height: 1em;"></settings-icon>
50-
Settings
51-
</router-link>
43+
<div class="h-full w-full">
44+
<div class="mb-6 bg-white border rounded" v-if="$router.currentRoute.name !== 'server'">
45+
<div class="flex">
46+
<progress-bar title="Memory" percent="33" class="flex-1 p-4 pb-6"></progress-bar>
47+
<progress-bar title="CPU" percent="80" class="flex-1 p-4 pb-6"></progress-bar>
48+
<progress-bar title="Disk" percent="97" class="flex-1 p-4 pb-6"></progress-bar>
49+
</div>
50+
</div>
51+
<div class="bg-white p-6 rounded border border-grey-light">
52+
<router-view></router-view>
53+
</div>
5254
</div>
5355
</div>
54-
<div class="bg-white p-6 rounded border border-grey-light h-full w-full">
55-
<router-view></router-view>
56-
</div>
5756
</div>
5857
</div>
5958
</template>

‎resources/assets/styles/components/navigation.css‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,20 @@
4242
}
4343

4444
.sidenav {
45-
@apply .mb-2;
45+
@apply .py-2;
4646

4747
a {
48-
@apply .block .py-3 .px-8 .text-grey-darkest .no-underline;
48+
@apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
4949

50-
&:hover {
51-
@apply .border-l-4 .border-blue-lightest;
52-
}
50+
&:hover, &.router-link-exact-active {
51+
@apply .border-grey-light .bg-grey-lightest;
5352

54-
&.router-link-exact-active {
55-
@apply .text-blue .border-l-4 .border-blue;
56-
}
53+
border-left: 1px solid transparent;
54+
border-right: 1px solid transparent;
55+
}
56+
57+
&.router-link-exact-active + a:hover {
58+
border-top: 1px solid transparent;
59+
}
5760
}
5861
}

0 commit comments

Comments
 (0)