uploading audio files and displaying them in a list

1 files changed, 53 insertions, 0 deletions

diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index 2805cb0..c6ef115 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -146,6 +146,59 @@
   width: 5.5rem; 
 }
 
+/* Upload area */
+
+.box .uploadButton {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.uploadButton input[type=file] {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+}
+.audioList .audioItem {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.125rem 0;
+}
+.audioList .playButton {
+  background: transparent;
+  border: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  opacity: 0.8;
+}
+.audioList .title {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  overflow: hidden;
+  flex: 1;
+}
+.audioList .title div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: pre;
+  width: 100%;
+}
+.audioList .audioItem:hover {
+  background: rgba(255,255,255,0.2);
+}
+.audioList .audioItem:hover .title {
+  color: #fff;
+}
+.audioList .audioItem:hover .playButton {
+  opacity: 1.0;
+}
+
 /* Graph handles */
 
 .handle {