ZorgCC/psina-avatar-frontend
2
0
Fork 0
mirror of https://github.com/ZorgCC/psina-avatar-frontend.git synced 2025-06-24 10:09:26 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #2 from ZorgCC/develop

Browse Source 
header and login page
This commit is contained in:
Aleksei Tsybin 2022-02-25 21:56:02 +03:00 committed by GitHub
commit 8b6c982396
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 238 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -25,6 +25,8 @@
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1",
"sass": "^1.49.8",
"sass-loader": "^12.6.0",
"vue-template-compiler": "^2.6.14"
}
}

BIN
public/dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

2
public/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="icon" href="<%= BASE_URL %>dog.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title><%= htmlWebpackPlugin.options.title %></title>

2
src/App.vue
View File

@ -1 +1 @@
<template> <div id="app"> <div class="container"> <b-navbar> <template #start> <b-navbar-item href="#"> Home </b-navbar-item> <b-navbar-dropdown label="Info"> <b-navbar-item href="#"> About </b-navbar-item> <b-navbar-item href="#"> Contact </b-navbar-item> </b-navbar-dropdown> </template> <template #end> <b-navbar-item tag="div"> <div class="buttons"> <a class="button is-light"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </b-navbar-item> </template> </b-navbar> <div class="notification is-primary"> This container is <strong>centered</strong> on desktop and larger viewports. </div> <div class="card"> <div class="card-content"> <div class="content"> Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoquаe penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sequi. </div> <footer class="card-footer"> <a href="#" class="card-footer-item">Save</a> <a href="#" class="card-footer-item">Edit</a> <a href="#" class="card-footer-item">Delete</a> </footer> </div> </div> <b-table :data="data" :columns="columns"></b-table> </div> </div> </template> <script> export default { data() { return { data: [ { id: 1, first_name: 'Jesse', last_name: 'Simmons', date: '2016-10-15 13:43:27', gender: 'Male', }, { id: 2, first_name: 'John', last_name: 'Jacobs', date: '2016-12-15 06:00:53', gender: 'Male', }, { id: 3, first_name: 'Tina', last_name: 'Gilbert', date: '2016-04-26 06:26:28', gender: 'Female', }, { id: 4, first_name: 'Clarence', last_name: 'Flores', date: '2016-04-10 10:28:46', gender: 'Male', }, { id: 5, first_name: 'Anne', last_name: 'Lee', date: '2016-12-06 14:38:38', gender: 'Female', }, ], columns: [ { field: 'id', label: 'ID', width: '40', numeric: true, }, { field: 'first_name', label: 'First Name', }, { field: 'last_name', label: 'Last Name', }, { field: 'date', label: 'Date', centered: true, }, { field: 'gender', label: 'Gender', }, ], } }, } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } nav { padding: 30px; } nav a { font-weight: bold; color: #2c3e50; } nav a.router-link-exact-active { color: #42b983; } </style>
<template> <div id="app"> <div class="container"> <HeaderComponent /> <router-view></router-view> </div> </div> </template> <script> import HeaderComponent from '@/components/HeaderComponent' export default { components: { HeaderComponent }, data() { return {} }, } </script>

BIN
src/assets/dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

11
src/assets/scss/main.scss Normal file
View File

@ -0,0 +1,11 @@
@import "~bulma/sass/utilities/_all";
$navbar-item-hover-color: orange;
$navbar-height: 4.5rem;
$navbar-item-img-max-height: 4rem;
$input-focus-border-color: orange;
$button-focus-border-color: orange;
$button-hover-border-color: orange;
@import "~bulma";
@import "~buefy/src/scss/buefy";

91
src/components/HeaderComponent.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<b-navbar transparent shadow active>
<template #brand>
<b-navbar-item tag="router-link" :to="{ name: 'home' }" class="p-0">
<img src="../assets/dog.png" alt="psina" />
</b-navbar-item>
</template>
<template #start>
<b-navbar-item
class="is-link"
exact-active-class="home-active"
tag="router-link"
:to="{ name: 'home' }"
onclick="this.blur()"
>
Home
</b-navbar-item>
<b-navbar-item
href="https://github.com/ZorgCC/psina-avatar-server/wiki"
rel="noopener noreferrer"
target="_blank"
onclick="this.blur()"
>
Docs
</b-navbar-item>
<b-navbar-item
href="https://github.com/ZorgCC/psina-avatar-server"
rel="noopener noreferrer"
target="_blank"
onclick="this.blur()"
>
Source</b-navbar-item
>
</template>
<template #end>
<b-navbar-item tag="div">
<div class="buttons">
<router-link
class="button is-light has-background-white is-rounded"
:to="{ name: 'settings' }"
>
<!-- TODO create route setting -->
<b-icon
:class="{ 'home-active': isAuth }"
class="settings-hover"
icon="cog"
></b-icon>
</router-link>
<b-button
v-if="isAuth"
class="button is-light is-rounded"
active-class="login-active"
@click="isAuth = false"
>
Log out
</b-button>
<router-link
v-else
class="button is-light is-rounded"
active-class="login-active"
:to="{ name: 'login' }"
>
Log in
</router-link>
</div>
</b-navbar-item>
</template>
</b-navbar>
</template>
<script>
export default {
name: 'HeaderComponent',
data() {
return {
isAuth: false,
}
},
}
</script>
<style lang="scss" scoped>
.home-active {
color: orange;
}
.login-active {
border-color: orange !important;
}
.settings-hover:hover {
color: orange;
}
</style>

2
src/main.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import './assets/scss/main.scss'
Vue.config.productionTip = false
Vue.use(Buefy)

29
src/router/index.js
View File

@ -4,24 +4,25 @@ import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
// {
// path: '/',
// name: 'home',
// component: HomeView,
// },
// {
// path: '/about',
// name: 'about',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () =>
// import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
// },
{
path: '/',
name: 'home',
component: () => import('../views/HomeView'),
},
{
path: '/login',
name: 'login',
component: () => import('../views/LoginView.vue'),
},
]
const router = new VueRouter({
routes,
})
// router.beforeEach((to, from, next) => {
// if (to.name !== 'login') next({ name: 'login' })
// else next()
// })
export default router

11
src/views/HomeView.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<h2>home</h2>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
<style scoped></style>

70
src/views/LoginView.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="columns is-centered">
<div class="column is-two-fifths">
<div class="hero is-fullheight-with-navbar">
<div class="hero-body">
<form
class="content"
style="width: 100%; transform: translateY(-50%)"
>
<p v-if="!isValid" class="has-text-danger has-text-centered">
Incorrect username or password! Please try again!
</p>
<b-field
label-position="on-border"
:type="{ 'is-danger': !isValid }"
>
<template #label>
<span class="has-text-grey">Username</span>
</template>
<b-input
rounded
icon="account"
value="johnsilver"
@focus="isValid = true"
></b-input>
</b-field>
<b-field
label-position="on-border"
:type="{ 'is-danger': !isValid }"
>
<template #label>
<span class="has-text-grey">Password</span>
</template>
<b-input
rounded
icon="lock"
value="123"
type="password"
@focus="isValid = true"
></b-input>
</b-field>
<div class="buttons is-right">
<b-button
class="m-0"
rounded
onclick="this.blur()"
@click.prevent="isValid = !isValid"
>
Log in
</b-button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'LoginView',
data() {
return {
isValid: true,
}
},
}
</script>
<style scoped lang="scss"></style>

10
webpack.config.js Normal file
View File

@ -0,0 +1,10 @@
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
},
],
},
}

28
yarn.lock
View File

@ -2096,7 +2096,7 @@ charcodes@^0.2.0:
resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
chokidar@^3.5.3:
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
version "3.5.3"
resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -3538,6 +3538,11 @@ ignore@^5.2.0:
resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
immutable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
import-fresh@^3.0.0, import-fresh@^3.2.1:
version "3.3.0"
resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -3854,7 +3859,7 @@ kind-of@^6.0.2:
resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
klona@^2.0.5:
klona@^2.0.4, klona@^2.0.5:
version "2.0.5"
resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@ -5133,6 +5138,23 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass-loader@^12.6.0:
version "12.6.0"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
dependencies:
klona "^2.0.4"
neo-async "^2.6.2"
sass@^1.49.8:
version "1.49.8"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
schema-utils@^2.6.5:
version "2.7.1"
resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@ -5327,7 +5349,7 @@ sockjs@^0.3.21:
uuid "^8.3.2"
websocket-driver "^0.7.4"
source-map-js@^1.0.2:
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==