ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved styling of tutorial and generated music playlist display.

Browse Source
This commit is contained in:
Harrison Deng 2022-04-19 17:14:40 -05:00
parent 622a85828c
commit b16dc05a54
9 changed files with 47 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/tasks.json vendored
View File

@ -30,7 +30,8 @@
"npm: watch:docs", "npm: watch:docs",
"npm: watch:lib", "npm: watch:lib",
"npm: serve:docs" "npm: serve:docs"
] ],
"problemMatcher": []
} }
] ]
} }

2
package.json
View File

@ -10,7 +10,7 @@
"build:dev": "webpack --config webpack.dev.cjs", "build:dev": "webpack --config webpack.dev.cjs",
"test:junit": "mocha tests/** --reporter mocha-junit-reporter --reporter-options mochaFile=./junit/test_results.xml", "test:junit": "mocha tests/** --reporter mocha-junit-reporter --reporter-options mochaFile=./junit/test_results.xml",
"test:console": "mocha tests/**", "test:console": "mocha tests/**",
"watch:docs": "nodemon --watch dist/ --watch tutorials/ --watch src/ --exec 'npm run docs' -e js,mjs,json,htm,html,xml,markdown,md,xhtml --ignore ./tutorials/assets/js/audioshowkit.js", "watch:docs": "nodemon --watch dist/ --watch tutorials/ --watch src/ --exec 'npm run docs' -e js,mjs,json,htm,html,xml,markdown,md,xhtml,css --ignore ./tutorials/assets/js/audioshowkit.js",
"watch:lib": "webpack --watch --config webpack.dev.cjs", "watch:lib": "webpack --watch --config webpack.dev.cjs",
"serve:docs": "cd ./docs && live-server", "serve:docs": "cd ./docs && live-server",
"build": "npm run build:dev", "build": "npm run build:dev",

7
src/player/MusicPlaylist.js
View File

@ -1,8 +1,6 @@
import "../styles/music-playlist.css";
import Music from "./Music.js"; import Music from "./Music.js";
/** /**
* A playlist that holds a multitude of musics in the form of {@link Music}. * A playlist that holds a multitude of musics in the form of {@link Music}.
*/ */
@ -206,7 +204,6 @@ export default class MusicPlaylist {
generatePlaylistElement() { generatePlaylistElement() {
const element = document.createElement("table"); const element = document.createElement("table");
element.createTHead().innerText = "Playlist";
const headers = element.insertRow(); const headers = element.insertRow();
const musicHeader = document.createElement("th"); const musicHeader = document.createElement("th");
musicHeader.innerText = "Music"; musicHeader.innerText = "Music";
@ -239,6 +236,8 @@ export default class MusicPlaylist {
element.rows[old + 1].classList.remove("active"); element.rows[old + 1].classList.remove("active");
element.rows[current + 1].classList.add("active"); element.rows[current + 1].classList.add("active");
}); });
element.classList.add("music-playlist");
return element; return element;
} }

23
src/styles/music-playlist.css Normal file
View File

@ -0,0 +1,23 @@
table.music-playlist {
border-collapse: collapse;
background-color: white;
border-width: 2px;
border-style: solid;
}
table.music-playlist tr th {
border-left-style: none;
border-right-style: none;
background-color: lightgray;
}
table.music-playlist tr td {
border-left-style: none;
border-right-style: none;
}
table.music-playlist .active {
background-color: gray;
color: white;
}

4
tutorials/MusicPlayer.html
View File

@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="./assets/css/prism.css" /> <link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script>
</head> </head>
<body> <body>
<script src="./assets/js/audioshowkit.js"></script>
<div> <div>
<h1>Creating a Music Player</h1> <h1>Creating a Music Player</h1>
<p>One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.</p> <p>One of the most basic principles behind AudioShowKit is the {@link MusicPlayer}. The song player acts as an easy way for developers to set up a list of songs with simple generated controls while exposing more complex events if needed.</p>

2
tutorials/MusicPlaylist.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="./assets/css/prism.css" /> <link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script> <script src="./assets/js/audioshowkit.js"></script>
</head> </head>

2
tutorials/VisMusicPlayer.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="./assets/css/prism.css" /> <link rel="stylesheet" href="./assets/css/main.css" />
<script src="./assets/js/prism.js" defer></script> <script src="./assets/js/prism.js" defer></script>
<script src="./assets/js/audioshowkit.js"></script> <script src="./assets/js/audioshowkit.js"></script>
</head> </head>

14
tutorials/assets/css/main.css Normal file
View File

@ -0,0 +1,14 @@
@import url("./prism.css");
.result {
background-repeat: repeat;
background-image: url("../textures/45degree_fabric.webp");
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2.5rem;
border-radius: 5px;
box-shadow: inset;
}

BIN
tutorials/assets/textures/45degree_fabric.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB