StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get initial mockup of new server list up

Browse source
This commit is contained in:
Dane Everitt 2018-05-26 17:20:36 -07:00
parent 64175ce35a
commit 9d8830a2d7
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
12 changed files with 201 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

6
resources/assets/scripts/app.js
View file

@ -10,6 +10,7 @@ import { flash } from './mixins/flash';
// Base Vuejs Templates
import Login from './components/auth/Login';
import Base from './components/base/Base';
import ResetPassword from './components/auth/ResetPassword';
window.events = new Vue;
@ -44,7 +45,10 @@ const router = new VueRouter({
return { token: route.params.token, email: route.query.email || '' };
}
},
{ path: '*', redirect: '/auth/login' }
{ name : 'index', path: '/', component: Base },
{ name : 'account', path: '/account', component: Base },
{ name : 'account-api', path: '/account/api', component: Base },
{ name : 'account-security', path: '/account/security', component: Base },
]
});

0
resources/assets/scripts/components/base/Base.vue Normal file
View file

28
resources/assets/scripts/components/errors/Flash.template.js
View file

@ -1,28 +0,0 @@
module.exports = `
<div class="pb-2" v-if="show">
<transition v-if="variant === 'success'">
<div class="p-2 bg-green-dark border-green-darker border items-center text-green-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
<span class="flex rounded-full bg-green uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Success</span>
<span class="mr-2 text-left flex-auto">{{ message }}</span>
</div>
</transition>
<transition v-if="variant === 'danger'">
<div class="p-2 bg-red-dark border-red-darker border items-center text-red-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
<span class="flex rounded-full bg-red uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Error</span>
<span class="mr-2 text-left flex-auto">{{ message }}</span>
</div>
</transition>
<transition v-if="variant === 'info'">
<div class="p-2 bg-blue-dark border-blue-darker border items-center text-blue-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
<span class="flex rounded-full bg-blue uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Info</span>
<span class="mr-2 text-left flex-auto">{{ message }}</span>
</div>
</transition>
<transition v-if="variant === 'warning'">
<div class="p-2 bg-yellow-dark border-yellow-darker border items-center text-yellow-lightest leading-normal rounded flex lg:inline-flex w-full text-sm" role="alert">
<span class="flex rounded-full bg-yellow uppercase px-2 py-1 text-xs font-bold mr-3 leading-none">Warning</span>
<span class="mr-2 text-left flex-auto">{{ message }}</span>
</div>
</transition>
</div>
`;

18
resources/assets/styles/components/animations.css
View file

@ -16,3 +16,21 @@
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes onlineblink {
0% {
@apply .bg-green;
}
100% {
@apply .bg-green-dark;
}
}
@keyframes offlineblink {
0% {
@apply .bg-red;
}
100% {
@apply .bg-red-dark;
}
}

28
resources/assets/styles/components/miscellaneous.css Normal file
View file

@ -0,0 +1,28 @@
code {
@apply .font-mono .px-2 .py-1;
background-color: #eef1f6;
color: #596981;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, .1);
display: inline-block;
}
/**
* Indicators for server online status.
*/
.indicator {
@apply .bg-grey-darker .border .border-grey;
border-radius: 50%;
width: 16px;
height: 16px;
&.online {
@apply .bg-green-dark .border-green;
animation: onlineblink 2s infinite alternate;
}
&.offline {
@apply .bg-green-dark .border-red;
animation: offlineblink 2s infinite alternate;
}
}

28
resources/assets/styles/components/navigation.css Normal file
View file

@ -0,0 +1,28 @@
.nav {
@apply .bg-blue;
height: 48px;
& > .logo {
@apply .mx-8 .font-sans .font-thin .text-2xl .text-white .inline-block .pt-2;
}
& > .menu {
@apply .float-right .mx-8 .inline-block;
& > ul {
@apply .list-reset;
& > li {
@apply .inline-block;
& > a {
@apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm;
padding: 15px;
&:hover {
@apply .bg-blue-dark;
}
}
}
}
}
}

2
resources/assets/styles/main.css
View file

@ -11,6 +11,8 @@
@import "components/authentication.css";
@import "components/buttons.css";
@import "components/forms.css";
@import "components/miscellaneous.css";
@import "components/navigation.css";
@import "components/notifications.css";
@import "components/spinners.css";