sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjustments to the UI

This commit is contained in:
Dane Everitt 2018-08-03 21:30:06 -07:00
parent c772376aa7
commit 7e6902cc90
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
2 changed files with 53 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
resources/assets/scripts/components/server/Server.vue
View File

@ -6,54 +6,53 @@
<div class="spinner spinner-xl spinner-thick blue"></div> <div class="spinner spinner-xl spinner-thick blue"></div>
</div> </div>
</div> </div>
<div class="m-6 flex flex-no-shrink rounded animate fadein" v-else> <div v-else>
<div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs"> <div class="m-6 flex flex-no-shrink rounded animate fadein">
<div class="mr-6"> <div class="sidebar border-grey-lighter flex-no-shrink w-1/3 max-w-xs">
<div class="p-6 text-center bg-white border rounded"> <div class="mr-6">
<h3 class="mb-2 text-blue font-medium">{{server.name}}</h3> <div class="p-6 text-center bg-white border rounded">
<span class="text-grey-dark text-sm">{{server.node}}</span> <h3 class="mb-2 text-blue font-medium">{{server.name}}</h3>
<span class="text-grey-dark text-sm">{{server.node}}</span>
<power-buttons class="mt-6 pt-6 text-center border-t border-grey-lighter"/>
</div>
</div> </div>
<power-buttons class="mt-6 p-4 text-center bg-white border rounded"/> <div class="mt-6 sidenav mr-6 bg-white border rounded">
<div class="mt-6 p-4 bg-white border rounded"> <router-link :to="{ name: 'server', params: { id: this.$route.params.id } }">
<progress-bar title="Memory" percent="33"></progress-bar> <terminal-icon class="h-4"></terminal-icon> Console
<progress-bar title="CPU" percent="80" class="mt-4"></progress-bar> </router-link>
<progress-bar title="Disk" percent="97" class="mt-4"></progress-bar> <router-link :to="{ name: 'server-files' }">
<folder-icon class="h-4"></folder-icon> Files
</router-link>
<router-link :to="{ name: 'server-subusers' }">
<users-icon class="h-4"></users-icon> Subusers
</router-link>
<router-link :to="{ name: 'server-schedules' }">
<calendar-icon class="h-4"></calendar-icon> Schedules
</router-link>
<router-link :to="{ name: 'server-databases' }">
<database-icon class="h-4"></database-icon> Databases
</router-link>
<router-link :to="{ name: 'server-allocations' }">
<globe-icon class="h-4"></globe-icon> Allocations
</router-link>
<router-link :to="{ name: 'server-settings' }">
<settings-icon class="h-4"></settings-icon> Settings
</router-link>
</div> </div>
</div> </div>
<div class="sidenav"> <div class="h-full w-full">
<router-link :to="{ name: 'server', params: { id: this.$route.params.id } }"> <div class="mb-6 bg-white border rounded" v-if="$router.currentRoute.name !== 'server'">
<terminal-icon style="height: 1em;"></terminal-icon> <div class="flex">
Console <progress-bar title="Memory" percent="33" class="flex-1 p-4 pb-6"></progress-bar>
</router-link> <progress-bar title="CPU" percent="80" class="flex-1 p-4 pb-6"></progress-bar>
<router-link :to="{ name: 'server-files' }"> <progress-bar title="Disk" percent="97" class="flex-1 p-4 pb-6"></progress-bar>
<folder-icon style="height: 1em;"></folder-icon> </div>
Files </div>
</router-link> <div class="bg-white p-6 rounded border border-grey-light">
<router-link :to="{ name: 'server-subusers' }"> <router-view></router-view>
<users-icon style="height: 1em;"></users-icon> </div>
Subusers
</router-link>
<router-link :to="{ name: 'server-schedules' }">
<calendar-icon style="height: 1em;"></calendar-icon>
Schedules
</router-link>
<router-link :to="{ name: 'server-databases' }">
<database-icon style="height: 1em;"></database-icon>
Databases
</router-link>
<router-link :to="{ name: 'server-allocations' }">
<globe-icon style="height: 1em;"></globe-icon>
Allocations
</router-link>
<router-link :to="{ name: 'server-settings' }">
<settings-icon style="height: 1em;"></settings-icon>
Settings
</router-link>
</div> </div>
</div> </div>
<div class="bg-white p-6 rounded border border-grey-light h-full w-full">
<router-view></router-view>
</div>
</div> </div>
</div> </div>
</template> </template>

19
resources/assets/styles/components/navigation.css
View File

@ -42,17 +42,20 @@
} }
.sidenav { .sidenav {
@apply .mb-2; @apply .py-2;
a { a {
@apply .block .py-3 .px-8 .text-grey-darkest .no-underline; @apply .block .py-3 .px-6 .text-grey-darkest .no-underline .border .border-transparent;
&:hover { &:hover, &.router-link-exact-active {
@apply .border-l-4 .border-blue-lightest; @apply .border-grey-light .bg-grey-lightest;
}
&.router-link-exact-active { border-left: 1px solid transparent;
@apply .text-blue .border-l-4 .border-blue; border-right: 1px solid transparent;
} }
&.router-link-exact-active + a:hover {
border-top: 1px solid transparent;
}
} }
} }