Skip to content

Commit f87f6d0

Browse files
mariush2mariush2
committed
changed component library on favour of smaller, element-ui
1 parent 04f17d5 commit f87f6d0

16 files changed

+1544
-988
lines changed

‎.prettierrc

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
trailingComma: "es5",
3-
singleQuote: true,
4-
htmlWhitespaceSensitivity: "ignore",
5-
printWidth: 100
2+
"trailingComma": "es5",
3+
"singleQuote": true,
4+
"htmlWhitespaceSensitivity": "ignore",
5+
"printWidth": 100
66
}

‎package-lock.json

+1,120-689
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-5
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,17 @@
1212
"dependencies": {
1313
"auth0-js": "^9.11.3",
1414
"core-js": "^3.3.2",
15+
"element-ui": "^2.15.0",
1516
"firebase": "^7.16.1",
1617
"lodash": "^4.17.19",
1718
"register-service-worker": "^1.6.2",
1819
"roboto-fontface": "*",
1920
"vue": "^2.6.10",
2021
"vue-router": "^3.1.3",
2122
"vue-tel-input": "^4.0.0",
22-
"vuetify": "^2.1.9",
2323
"vuex": "^3.0.1"
2424
},
2525
"devDependencies": {
26-
"@fortawesome/fontawesome-free": "^5.14.0",
2726
"@vue/cli-plugin-babel": "^4.0.0",
2827
"@vue/cli-plugin-e2e-cypress": "^4.0.0",
2928
"@vue/cli-plugin-eslint": "^4.0.0",
@@ -44,8 +43,6 @@
4443
"prettier": "^1.18.2",
4544
"sass": "^1.23.3",
4645
"sass-loader": "^8.0.0",
47-
"vue-cli-plugin-vuetify": "^1.1.1",
48-
"vue-template-compiler": "^2.6.10",
49-
"vuetify-loader": "^1.3.0"
46+
"vue-template-compiler": "^2.6.10"
5047
}
5148
}

‎src/App.vue

+4-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,12 @@
11
<template>
2-
<v-app>
3-
<template v-if="isAuthenticated">
4-
<router-view></router-view>
5-
</template>
6-
<template v-else>
7-
<Login />
8-
</template>
9-
</v-app>
2+
<div id="app">
3+
<router-view></router-view>
4+
</div>
105
</template>
116

127
<script>
13-
import { mapState } from 'vuex';
14-
15-
import Login from './views/Login.vue';
16-
178
export default {
189
name: 'App',
19-
components: {
20-
Login,
21-
},
22-
computed: mapState({
23-
isAuthenticated: state => state.isAuthenticated,
24-
}),
2510
};
2611
</script>
2712

@@ -46,7 +31,7 @@ export default {
4631
4732
#app,
4833
body {
49-
font-family: 'Comfortaa', sans-serif;
34+
font-family: 'Comfortaa', sans-serif !important;
5035
background: #b65b6b;
5136
}
5237
</style>

‎src/components/Album.vue

+66-43
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<template>
2-
<v-card light elevation="0" height="150px" min-width="360px" width="100%" max-width="450px">
3-
<div class="album-content">
4-
<v-avatar class="album-image ma-3" size="125" tile>
5-
<v-img class="rounded" :src="album.images[0].url"></v-img>
6-
</v-avatar>
7-
<div class="album-text">
8-
<div class="album-name text-truncate">{{ album.name }}</div>
9-
<div class="album-artist text-truncate">
10-
by
11-
<span>{{ album.artists[0].name }}</span>
2+
<el-card shadow="never" class="card">
3+
<div class="card-body">
4+
<div class="album-image">
5+
<el-image fit="fill" :src="album.images[0].url" />
6+
</div>
7+
<div class="album-content">
8+
<div class="album-title">
9+
<h2>{{ album.name }}</h2>
10+
</div>
11+
<div class="album-artist">
12+
<h3>by {{ album.artists[0].name }}</h3>
1213
</div>
1314
<div class="album-info">
14-
{{ album.release_date.substring(0, 4) }}, {{ album.total_tracks }} songs
15+
<h5>
16+
{{ album.release_date.substring(0, 4) }}
17+
<br />
18+
{{ album.total_tracks }} tracks
19+
</h5>
1520
</div>
16-
<v-btn text block elevation="0" small class="mt-4">
17-
<v-icon left>fa-plus</v-icon>
18-
Add to list
19-
</v-btn>
21+
<el-button class="add-button" icon="el-icon-plus">Add</el-button>
2022
</div>
2123
</div>
22-
</v-card>
24+
</el-card>
2325
</template>
2426

2527
<script>
@@ -31,43 +33,64 @@ export default {
3133
required: true,
3234
},
3335
},
36+
methods: {
37+
getFontSize(textLength) {
38+
const baseSize = 9;
39+
if (textLength >= baseSize) {
40+
textLength = baseSize - 2;
41+
}
42+
const fontSize = baseSize - textLength;
43+
return `${fontSize}vw`;
44+
},
45+
},
3446
};
3547
</script>
3648

3749
<style lang="scss" scoped>
38-
.album-content {
50+
.card-body {
3951
display: grid;
40-
grid-template-columns: 1fr 4fr;
41-
width: 100%;
52+
grid-template-columns: 1fr 3fr;
53+
position: relative;
4254
}
4355
44-
.album-text {
45-
padding: 12px;
46-
max-width: 100%;
47-
min-width: 0;
48-
49-
> .album-name {
50-
font-weight: 600;
51-
font-size: 18px;
52-
}
53-
54-
> .album-artist {
55-
font-weight: 200;
56-
font-size: 14px;
57-
58-
> span {
59-
font-weight: 400;
60-
font-size: 16px;
61-
}
62-
}
56+
.card {
57+
max-width: 500px;
58+
width: 100%;
59+
padding: 0;
60+
position: relative;
61+
}
6362
64-
> .album-info {
65-
font-size: 14px;
66-
font-weight: 200;
67-
}
63+
.add-button {
64+
width: 100%;
65+
position: absolute;
66+
bottom: 0;
6867
}
6968
69+
h2,
70+
h3,
71+
h5 {
72+
margin: 0;
73+
font-size: 100%;
74+
}
75+
.album-content {
76+
margin-left: 1rem;
77+
height: 100%;
78+
position: relative;
79+
}
7080
.album-image {
71-
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
81+
width: 165px;
82+
height: 165px;
83+
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
84+
}
85+
.album-title {
86+
width: 100%;
87+
margin-bottom: 5px;
88+
}
89+
.album-artist {
90+
width: 100%;
91+
margin-bottom: 5px;
92+
}
93+
.album-info {
94+
width: 100%;
7295
}
7396
</style>

‎src/components/AlbumSkeleton.vue

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<el-card shadow="never" class="card">
3+
<div class="card-body">
4+
<div class="album-image"></div>
5+
<div class="album-content">
6+
<div class="album-title"></div>
7+
<div class="album-artist"></div>
8+
<div class="album-info"></div>
9+
</div>
10+
</div>
11+
</el-card>
12+
</template>
13+
14+
<style lang="scss" scoped>
15+
$grey: rgba(0, 0, 0, 0.2);
16+
.card-body {
17+
display: grid;
18+
grid-template-columns: 1fr 3fr;
19+
}
20+
21+
.card {
22+
max-width: 500px;
23+
width: 100%;
24+
}
25+
26+
.album-image,
27+
.album-artist,
28+
.album-info,
29+
.album-title {
30+
background: linear-gradient(90deg, $grey, lighten($grey, 35%), $grey);
31+
background-size: 400% 400%;
32+
animation: gradient 2s ease infinite;
33+
}
34+
.album-image {
35+
width: 165px;
36+
height: 165px;
37+
margin-right: 1rem;
38+
}
39+
.album-title {
40+
width: 100%;
41+
min-height: 2.5rem;
42+
margin-bottom: 8px;
43+
}
44+
.album-artist {
45+
width: 100%;
46+
min-height: 1.25rem;
47+
margin-bottom: 10px;
48+
}
49+
.album-info {
50+
width: 100%;
51+
min-height: 12px;
52+
}
53+
54+
@keyframes gradient {
55+
from {
56+
background-position: 0% 0%;
57+
}
58+
to {
59+
background-position: 135% 100%;
60+
}
61+
}
62+
</style>

‎src/components/Searchbar.vue

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<template>
2-
<div>
3-
<v-text-field
2+
<div class="search-input-div">
3+
<el-input
44
v-model="searchString"
55
:placeholder="placeholder"
6+
size="large"
67
clearable
7-
flat
8-
solo
9-
light
10-
elevation="0"
11-
prepend-inner-icon="fa-search"
8+
autofocus
9+
prefix-icon="el-icon-search"
1210
/>
1311
</div>
1412
</template>
@@ -51,3 +49,10 @@ export default {
5149
},
5250
};
5351
</script>
52+
53+
<style scoped>
54+
.search-input-div {
55+
max-width: 500px;
56+
margin: auto;
57+
}
58+
</style>

‎src/firebase.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import * as firebase from 'firebase/app';
2+
import 'firebase/auth';
3+
import 'firebase/firestore';
4+
5+
// firebase init - add your own config here
6+
const firebaseConfig = {
7+
apiKey: '',
8+
authDomain: '',
9+
databaseURL: '',
10+
projectId: '',
11+
storageBucket: '',
12+
messagingSenderId: '',
13+
appId: '',
14+
measurementId: '',
15+
};
16+
firebase.initializeApp(firebaseConfig);
17+
18+
// utils
19+
const db = firebase.firestore();
20+
const auth = firebase.auth();
21+
22+
// collection references
23+
const usersCollection = db.collection('users');
24+
const postsCollection = db.collection('posts');
25+
const commentsCollection = db.collection('comments');
26+
const likesCollection = db.collection('likes');
27+
28+
// export utils/refs
29+
export { db, auth, usersCollection, postsCollection, commentsCollection, likesCollection };

‎src/main.js

+16-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import Vue from 'vue';
22
import App from './App.vue';
3+
import ElementUI from 'element-ui';
4+
import locale from 'element-ui/lib/locale/lang/en';
5+
import './theme.scss';
36
import router from './router';
47
import store from './store';
5-
import vuetify from './plugins/vuetify';
68
import './registerServiceWorker';
9+
import { auth } from './firebase';
710

811
Vue.config.productionTip = false;
912

1013
store.dispatch('refreshAccessToken');
11-
store.dispatch('getUserFromCookie');
1214

13-
new Vue({
14-
router,
15-
store,
16-
vuetify,
17-
render: h => h(App),
18-
}).$mount('#app');
15+
Vue.use(ElementUI, { locale });
16+
17+
let app;
18+
auth.onAuthStateChanged(() => {
19+
if (!app) {
20+
app = new Vue({
21+
router,
22+
store,
23+
render: h => h(App),
24+
}).$mount('#app');
25+
}
26+
});

‎src/plugins/vuetify.js

-22
This file was deleted.

0 commit comments

Comments
 (0)