Skip to content

Commit

Permalink
Fixed size of X button on drawer. Fixed some text
Browse files Browse the repository at this point in the history
  • Loading branch information
@rjsalvadorr
rjsalvadorr committed Oct 8, 2018
1 parent b158c15 commit 7661910
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 76 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"start": "npm run build && npm run serve",
"serve": "vue-cli-service lint && vue-cli-service serve",
"build": "vue-cli-service lint && vue-cli-service build",
"start": "npm run serve",
"lint": "vue-cli-service lint"
},
"dependencies": {
Expand Down
29 changes: 8 additions & 21 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
<p class="app__description">
A visual reference for guitar chord voicings,
built and updated by <a href="http://rj-salvador.com" target="_blank">RJ Salvador</a>.
Source code <a href="https://github.com/rjsalvadorr/guitarragrams" target="_blank">can be seen here</a>.
Source code can be seen at <a href="https://github.com/rjsalvadorr/guitarragrams" target="_blank">GitHub</a>.
If you like this kind of nerdy guitar stuff, I have more things <a href="http://www.rj-salvador.com/tags/music/" target="_blank">here</a>.
</p>
</div>
<div class="seven columns">
<ul class="app__notes">
<li>
<span>
Click the help tab to see the table of contents and legend.
Click the help tab (on the left) to see the table of contents and legend.
</span>
</li>
<li>
Expand All @@ -28,6 +28,11 @@
These chord patterns are meant to be usable on any position on the fretboard.
</span>
</li>
<li>
<span>
Planned features: chord playback, diagram filtering/sorting, left-hand mode, alternate tunings.
</span>
</li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -76,18 +81,11 @@

<hr>

<Slide
@openMenu="handleOpenMenu"
@closeMenu="handleCloseMenu"
>
<DrawerPanel />
</Slide>
<DrawerPanel />
</div>
</template>

<script>
import { Slide } from "vue-burger-menu";
import PatternGroup from "./components/PatternGroup.vue";
import FretboardMarker from "./components/FretboardMarker.vue";
import DrawerPanel from "./components/DrawerPanel.vue";
Expand All @@ -107,7 +105,6 @@ import seventhsUpper from "./data/7ths-upper.json";
export default {
name: "app",
components: {
Slide,
PatternGroup,
FretboardMarker,
DrawerPanel
Expand All @@ -128,16 +125,6 @@ export default {
seventhsUpper: seventhsUpper
}
};
},
methods: {
handleOpenMenu: function() {
document.querySelector(".bm-menu").classList.add("bm-menu--open");
document.querySelector(".bm-menu").classList.remove("bm-menu--closed");
},
handleCloseMenu: function() {
document.querySelector(".bm-menu").classList.add("bm-menu--closed");
document.querySelector(".bm-menu").classList.remove("bm-menu--open");
}
}
};
</script>
Expand Down
124 changes: 72 additions & 52 deletions src/components/DrawerPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,94 @@
<template>
<div class="rj-menu__wrapper">
<h3 class="rj-menu__heading rj-menu__heading--first">Legend</h3>
<div class="legend-row legend-row--1">
<div class="legend-unit">
<span class="legend-unit__label">Root</span>
<div class="legend-unit__icon marker active marker--root" />
<Slide
@openMenu="handleOpenMenu"
@closeMenu="handleCloseMenu"
>
<div class="rj-menu__wrapper">
<h3 class="rj-menu__heading rj-menu__heading--first">Legend</h3>
<div class="legend-row legend-row--1">
<div class="legend-unit">
<span class="legend-unit__label">Root</span>
<div class="legend-unit__icon marker active marker--root" />
</div>
<div class="legend-unit">
<span class="legend-unit__label">3rd</span>
<div class="legend-unit__icon marker active marker--3rd" />
</div>
<div class="legend-unit">
<span class="legend-unit__label">5th</span>
<div class="legend-unit__icon marker active marker--5th" />
</div>
</div>
<div class="legend-unit">
<span class="legend-unit__label">3rd</span>
<div class="legend-unit__icon marker active marker--3rd" />
<div class="legend-row legend-row--2">
<div class="legend-unit">
<span class="legend-unit__label">7th</span>
<div class="legend-unit__icon marker active marker--7th" />
</div>
<div class="legend-unit">
<span class="legend-unit__label">9th</span>
<div class="legend-unit__icon marker active marker--9th" />
</div>
</div>
<div class="legend-unit">
<span class="legend-unit__label">5th</span>
<div class="legend-unit__icon marker active marker--5th" />
</div>
</div>
<div class="legend-row legend-row--2">
<div class="legend-unit">
<span class="legend-unit__label">7th</span>
<div class="legend-unit__icon marker active marker--7th" />
</div>
<div class="legend-unit">
<span class="legend-unit__label">9th</span>
<div class="legend-unit__icon marker active marker--9th" />
</div>
</div>

<h3 class="rj-menu__heading">Contents</h3>
<ol class="rj-menu__contents">
<li>
<a class="rj-menu__link" href="#open-voicings">
<span>Open voicings</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#melodic-voicings">
<span>Melodic voicings</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#four-string-patterns">
<span>Four-string patterns</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#seventh-chord-patterns">
<span>7th chord patterns</span>
</a>
</li>
</ol>
</div>
<h3 class="rj-menu__heading">Contents</h3>
<ol class="rj-menu__contents">
<li>
<a class="rj-menu__link" href="#open-voicings">
<span>Open voicings</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#melodic-voicings">
<span>Melodic voicings</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#four-string-patterns">
<span>Four-string patterns</span>
</a>
</li>
<li>
<a class="rj-menu__link" href="#seventh-chord-patterns">
<span>7th chord patterns</span>
</a>
</li>
</ol>
</div>
</Slide>
</template>

<script>
import { Slide } from "vue-burger-menu";
export default {
name: "DrawerPanel",
props: {
customId: String
},
components: {
Slide
},
methods: {
handleOpenMenu: function() {
document.querySelector(".bm-menu").classList.add("bm-menu--open");
document.querySelector(".bm-menu").classList.remove("bm-menu--closed");
},
handleCloseMenu: function() {
document.querySelector(".bm-menu").classList.add("bm-menu--closed");
document.querySelector(".bm-menu").classList.remove("bm-menu--open");
}
}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
<style lang="scss">
.cross-style {
right: 8px;
right: 10px;
color: #ffffff;
.bm-cross {
background-color: #ffffff;
height: 20px !important;
background-color: #ffffff !important;
}
}
Expand Down

0 comments on commit 7661910

Please sign in to comment.