Skip to content
This repository was archived by the owner on May 16, 2022. It is now read-only.

Commit fc9662e

Browse files
davipaturydavipatury
committed
material design icons
1 parent 01580b1 commit fc9662e

File tree

8 files changed

+2328
-2317
lines changed

8 files changed

+2328
-2317
lines changed

‎package-lock.json

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

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
"@fortawesome/free-solid-svg-icons": "^5.1.0",
1717
"@fortawesome/vue-fontawesome": "^0.1.0",
1818
"buefy": "^0.6.6",
19-
"bulma": "^0.7.1",
2019
"snekfetch": "^4.0.4",
2120
"vue": "^2.5.2",
2221
"vue-localstorage": "^0.6.2",

‎src/assets/main.scss

+32-13
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,42 @@
1-
@import "~bulma/sass/utilities/initial-variables";
2-
@import "~bulma/sass/utilities/functions";
1+
// Import Bulma's core
2+
@import "~bulma/sass/utilities/_all";
33

4+
// Customization
5+
6+
// Colors
47
$blurple: #7289DA;
58
$blurple-invert: findColorInvert($blurple);
6-
79
$greyple: #99AAB5;
810
$greyple-invert: findColorInvert($greyple);
9-
1011
$dark-but-not-black: #2C2F33;
1112
$dark-but-not-black-invert: findColorInvert($dark-but-not-black);
12-
1313
$not-quite-black: #23272A;
1414
$not-quite-black-invert: findColorInvert($not-quite-black);
1515

16-
$family-sans-serif: "Montserrat", sans-serif;
17-
1816
$primary: $blurple;
1917
$primary-invert: $blurple-invert;
18+
19+
// Setup $colors to use as bulma classes (e.g. 'is-dark')
20+
$colors: (
21+
"white": ($white, $black),
22+
"black": ($black, $white),
23+
"light": ($light, $light-invert),
24+
"dark": ($dark, $dark-invert),
25+
"primary": ($primary, $primary-invert),
26+
"info": ($info, $info-invert),
27+
"success": ($success, $success-invert),
28+
"warning": ($warning, $warning-invert),
29+
"danger": ($danger, $danger-invert)
30+
);
31+
32+
// Fonts
33+
$family-sans-serif: "Montserrat", sans-serif;
2034
$family-primary: $family-sans-serif;
2135

36+
// Body
2237
$body-background-color: #18191c;
2338

24-
$link: $blurple;
25-
$link-hover: $white;
26-
39+
// Navbar
2740
$navbar-background-color: $not-quite-black;
2841
$navbar-item-hover-background-color: $not-quite-black;
2942
$navbar-item-active-background-color: $not-quite-black;
@@ -35,14 +48,20 @@ $navbar-dropdown-item-hover-color: $link;
3548
$navbar-dropdown-item-color: $white;
3649
$navbar-divider-background-color: $dark-but-not-black;
3750

51+
// Footer
3852
$footer-background-color: $dark-but-not-black;
3953

40-
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,900,900i');
54+
// Links
55+
$link: $blurple;
56+
$link-hover: $white;
4157

58+
// Global styles
4259
.round {
4360
border-radius: 100%;
4461
}
4562

46-
@import "~bulma/bulma";
63+
// Import Bulma and Buefy styles and custom font
64+
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,900,900i');
65+
@import url('https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css');
66+
@import "~bulma";
4767
@import "~buefy/src/scss/buefy";
48-

‎src/components/Navbar.vue

+14-27
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,45 @@
55
<router-link to="/" class="navbar-item">
66
SWITCHBLADE
77
</router-link>
8-
<a class="navbar-burger" v-on:click="burger" data-target="navMenu" role="button" aria-label="menu" aria-expanded="false">
8+
<a class="navbar-burger" v-on:click="burger" role="button" aria-label="menu" aria-expanded="false">
99
<span aria-hidden="true"></span>
1010
<span aria-hidden="true"></span>
1111
<span aria-hidden="true"></span>
1212
</a>
1313
</div>
14-
<div class="navbar-menu" id="navMenu">
14+
<div class="navbar-menu" ref="navMenu">
1515
<div class="navbar-start">
1616
<router-link to="/contributors" class="navbar-item">
1717
<span>Contributors</span>
1818
</router-link>
1919
</div>
2020
<div class="navbar-end">
21-
<div v-if="!!discord.user" class="navbar-item has-dropdown" id="navDropdown">
22-
<div class="navbar-link is-flex" v-on:click="dropdown" data-target="navDropdown">
23-
<span class="icon user-pic">
21+
<div v-if="!!discord.user" class="navbar-item has-dropdown" ref="navDropdown">
22+
<div class="navbar-link is-flex" v-on:click="dropdown">
23+
<figure class="image is-24x24 user-pic">
2424
<img class="round" :src="discord.user.displayAvatarURL" />
25-
</span>
25+
</figure>
2626
<span>{{ discord.user.username }}</span>
2727
</div>
2828
<div class="navbar-dropdown is-boxed">
2929
<router-link to="/dashboard" class="navbar-item">
30-
<span class="icon">
31-
<fai icon="tachometer-alt" />
32-
</span>
30+
<b-icon icon="view-dashboard" custom-size="mdi-18px" />
3331
<span>Dashboard</span>
3432
</router-link>
3533
<hr class="navbar-divider">
3634
<a class="navbar-item" v-on:click="logout">
37-
<span class="icon">
38-
<fai icon="sign-out-alt" />
39-
</span>
35+
<b-icon icon="logout-variant" custom-size="mdi-18px" />
4036
<span>Logout</span>
4137
</a>
4238
</div>
4339
</div>
44-
<a v-else class="navbar-item is-flex" v-on:click="login">
40+
<a v-else class="navbar-item" v-on:click="login">
4541
<template v-if="discord.logging">
46-
<span class="icon">
47-
<fai icon="spinner" spin />
48-
</span>
42+
<b-icon icon="loading" custom-size="mdi-18px" />
4943
<span>Logging in...</span>
5044
</template>
5145
<template v-else>
52-
<span class="icon">
53-
<fai icon="sign-in-alt" />
54-
</span>
46+
<b-icon icon="login-variant" custom-size="mdi-18px" />
5547
<span>Login</span>
5648
</template>
5749
</a>
@@ -72,13 +64,12 @@ export default {
7264
methods: {
7365
burger (event) {
7466
const $burger = event.target.closest('.navbar-burger')
75-
const $target = document.getElementById($burger.dataset.target)
67+
const $target = this.$refs.navMenu
7668
$burger.classList.toggle('is-active')
7769
$target.classList.toggle('is-active')
7870
},
79-
dropdown (event) {
80-
const $dropdown = event.target.closest('.navbar-link')
81-
const $target = document.getElementById($dropdown.dataset.target)
71+
dropdown () {
72+
const $target = this.$refs.navDropdown
8273
$target.classList.toggle('is-active')
8374
},
8475
@@ -107,8 +98,4 @@ export default {
10798
.user-pic {
10899
margin-right: 0.6rem;
109100
}
110-
111-
.navbar-start {
112-
font-size: 15px;
113-
}
114101
</style>

‎src/main.js

-7
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import Vue from 'vue'
22

33
import App from './App'
44
import router from './router'
5-
import { library } from '@fortawesome/fontawesome-svg-core'
6-
import { faGithub } from '@fortawesome/free-brands-svg-icons'
7-
import { faCogs, faEnvelope, faLanguage, faLifeRing, faSignInAlt, faSignOutAlt, faSpinner, faTachometerAlt } from '@fortawesome/free-solid-svg-icons'
8-
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
95

10-
library.add(faCogs, faEnvelope, faGithub, faLanguage, faLifeRing, faSignInAlt, faSignOutAlt, faSpinner, faTachometerAlt)
11-
12-
Vue.component('fai', FontAwesomeIcon)
136
Vue.config.productionTip = false
147

158
/* eslint-disable no-new */

‎src/oauth/User.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,12 @@ export default class User {
1616
this.mfaEnabled = data.mfa_enabled
1717
}
1818

19+
get tag () {
20+
return `${this.username}#${this.discriminator}`
21+
}
22+
1923
get avatarURL () {
20-
return this.avatar ? `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}.png?size=2048` : null
24+
return this.avatar ? `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}${this.avatar.startsWith('a_') ? '.gif' : '.png?size=2048'}` : null
2125
}
2226

2327
get defaultAvatarURL () {

‎src/pages/Contributors.vue

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div class="contributors">
33
<section class="hero is-primary" v-if="response">
44
<div class="hero-body">
55
<div class="container text-container">
@@ -16,10 +16,10 @@
1616
<h1 class="title is-spaced">{{role.roleName}}</h1>
1717
<div class="columns is-multiline is-centered">
1818
<div class="column is-2 has-text-centered" v-for="contributor in role.people" v-bind:key="contributor.user.id">
19-
<figure>
20-
<img :src="`https://cdn.discordapp.com/avatars/${contributor.user.id}/${contributor.user.avatar}.jpg`" class="round is-unselectable">
19+
<figure class="image is-128x128 contributor-avatar">
20+
<img :src="contributor.user.displayAvatarURL" class="round is-unselectable">
2121
</figure>
22-
<span class="contributor-name">{{contributor.user.username}}#{{contributor.user.discriminator}}</span>
22+
<span class="contributor-name">{{contributor.user.tag}}</span>
2323
</div>
2424
</div>
2525
</section>
@@ -31,6 +31,7 @@
3131

3232
<script>
3333
import snekfetch from 'snekfetch'
34+
import User from '../oauth/User'
3435
3536
export default {
3637
name: 'Contributors',
@@ -44,31 +45,45 @@ export default {
4445
},
4546
mounted: function () {
4647
snekfetch.get(`${process.env.BLADEY_API_ROOT}/contributors`).then(({body}) => {
47-
this.response = body
48+
this.response = body.map(r => {
49+
r.people = r.people.map(c => {
50+
c.user = new User(c.user)
51+
return c
52+
})
53+
return r
54+
})
4855
})
4956
}
5057
}
5158
</script>
5259

5360
<style scoped>
54-
.hero-body > .container > .title {
61+
.contributors {
5562
font-family: 'Montserrat', sans-serif;
63+
color: white;
64+
}
65+
66+
.contributors .title {
67+
color: white;
68+
}
69+
70+
.hero-body > .container > .title {
5671
font-weight: 900;
5772
font-style: italic;
5873
font-size: 50px;
59-
color: white;
6074
}
6175
6276
.role-section .title {
63-
font-family: 'Montserrat', sans-serif;
6477
font-size: 40px;
65-
color: white;
6678
}
6779
6880
.contributor-name {
69-
font-family: 'Montserrat', sans-serif;
70-
font-weight: 600;
71-
color: white;
81+
font-weight: 500;
7282
word-wrap: break-word;
7383
}
84+
85+
.contributor-avatar {
86+
margin: auto;
87+
margin-bottom: 0.5rem;
88+
}
7489
</style>

‎src/pages/Homepage.vue

+15-21
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
11
<template>
2-
<div class="container">
3-
<section class="section introduction">
4-
<div class="container has-text-centered">
5-
<img src="../assets/logo.svg" class="logo" width="128" height="128">
6-
<h1 class="title is-centered has-text-white">The last bot you'll ever need.</h1>
7-
<div class="buttons is-centered">
8-
<a class="button is-large is-rounded" href="http://support.switchblade.xyz/" target="_blank">
9-
<span class="icon">
10-
<fai class="fab" icon="life-ring" />
11-
</span>
12-
<span>Join our support server</span>
13-
</a>
14-
<a class="button is-large is-primary is-rounded" href="http://invite.switchblade.xyz/" target="_blank">
15-
<span class="icon">
16-
<fai class="fab" icon="envelope" />
17-
</span>
18-
<span>Invite to your server</span>
19-
</a>
20-
</div>
2+
<section class="section introduction">
3+
<div class="container has-text-centered">
4+
<img src="../assets/logo.svg" class="logo" width="128" height="128">
5+
<h1 class="title has-text-white">The last bot you'll ever need.</h1>
6+
<div class="buttons is-centered">
7+
<a class="button is-large is-rounded" href="http://support.switchblade.xyz/" target="_blank">
8+
<b-icon icon="lifebuoy" />
9+
<span>Join our support server</span>
10+
</a>
11+
<a class="button is-large is-primary is-rounded" href="http://invite.switchblade.xyz/" target="_blank">
12+
<b-icon icon="email" />
13+
<span>Invite to your server</span>
14+
</a>
2115
</div>
22-
</section>
23-
</div>
16+
</div>
17+
</section>
2418
</template>
2519

2620
<script>

0 commit comments

Comments
 (0)