Rewrite web front-end using React

This is a big commit, some font-end function are still working, including manage, error handle, as others.
2021-11-21 17:30:43 +08:00
parent d556bbe0c8
commit e170c8b842
38 changed files with 38580 additions and 19880 deletions
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -0,0 +1,94 @@
+html {
+  font-size: 1em;
+}
+body {
+  margin: auto;
+  margin-top: 1rem;
+}
+.base {
+  display: grid;
+  grid-row-gap: 1em;
+}
+.header {
+  color: white;
+  background-color: rgb(63, 81, 181);
+  box-shadow: 0 0 8px #393939;
+  border-radius: 6px 6px 0 0;
+}
+.title {
+  margin-left: 1em;
+  display: flex;
+  align-items: center;
+}
+.title-text {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.logo {
+  width: 39px;
+  height: 39px;
+  border-radius: 6px;
+}
+.nav {
+  display: flex;
+  justify-content: space-evenly;
+}
+.nav-link {
+  color: rgb(229, 232, 245);
+  padding: 1em;
+}
+a.unset {
+  color: unset;
+  text-decoration: unset;
+}
+a.active {
+  color: deeppink;
+  background-color: lightgray;
+  border-radius: 0.39em 0.39em 0 0;
+}
+.audio-player {
+  height: 39px;
+  width: 100%;
+}
+td.clickable {
+  cursor: pointer;
+}
+div.clickable {
+  cursor: pointer;
+}
+div.page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+div.search_toolbar {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  width: 100%;
+}
+div.feedback {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+button.refresh {
+  width: 100%;
+}
+td,
+th {
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
+}
+dialog {
+  border: solid;
+}
+.player-options {
+  display: flex;
+}
+.ffmpeg-config {
+  display: flex;
+  justify-content: space-between;
+}