diff --git a/client/views/public.ejs b/client/views/public.ejs
index e286ec42dd56167f30a3a6eec2747d0a7522814c..16d386de4c2680a04666b27857d1d5b1fbf0b17b 100644
--- a/client/views/public.ejs
+++ b/client/views/public.ejs
@@ -4,27 +4,28 @@
<meta charset="UTF-8">
<title>Lektor App</title>
<link rel="stylesheet" href="/bootstrap-4.5.2-dist/css/bootstrap.min.css" type="text/css">
+ <link rel="stylesheet" href="/css/public.css" type="text/css">
</head>
- <body style="overflow: hidden; height: 100vh;">
- <div class="container-fluid" style="display: flex; flex-direction: column; height: 100%;">
- <div class="row" style="flex-grow: 1; min-height: 15vh;">
+ <body>
+ <div id="mainFrame" class="container-fluid">
+ <div id="headerBar" class="row">
<div class="card text-center">
<h2>
Public interface
</h2>
</div>
</div>
- <div class="row" style="flex-grow: 5; overflow: hidden; flex-basis: auto;">
- <div class="col" style="overflow-y: scroll; height: 100%;">
+ <div id="panelWrapper" class="row">
+ <div id="mainList" class="col">
<% karas.forEach(function(kara){ %>
- <div class="card shadow" style="border-radius: 25px; margin-bottom: 10px; margin-top: 10px;">
- <div class="card-header" style="border-radius: 25px 25px 0 0;">
+ <div class="card shadow karaCard" >
+ <div class="card-header karaCardHeader">
<h3>
<%- kara.source_name + " - " + kara.song_type + " - " + kara.song_name %>
</h3>
</div>
- <div class="card-body">
+ <div class="card-body karaCardBody">
<h3>
<%- kara.author_name %><br/>
<%- kara.language %><br/>
diff --git a/instance/index.html b/instance/index.html
index 8f29f830c372089e7080ce04bd3cf36422b607c9..451c88ba3c97c72b68b4603c24bb913ccf7b589c 100644
--- a/instance/index.html
+++ b/instance/index.html
@@ -4,9 +4,11 @@
<meta charset="UTF-8">
<title>Lektor App</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
- <link rel="stylesheet" href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css">
+
<script src="../style/jquery/jquery-3.5.1.js"></script>
<script src="../style/bootstrap-4.5.2-dist/js/bootstrap.min.js"></script>
+ <link rel="stylesheet" href="../style/bootstrap-4.5.2-dist/css/bootstrap.min.css">
+ <link rel="stylesheet" href="../style/css/instance.css">
<script src="./main.js"></script>
<style>
::-webkit-scrollbar {
@@ -14,27 +16,27 @@
}
</style>
</head>
- <body style="overflow: hidden; height: 100vh;">
- <div class="container-fluid" style="height: 100%; display: flex; flex-direction: column; padding-bottom: 10px">
- <div class="row" style="flex-basis: auto; height: 150px;">
- <div class="card" style="width: 100%;">
- <div class="card-header text-center" style="-webkit-user-select: none; -webkit-app-region: drag;">
+ <body>
+ <div id="mainFrame" class="container-fluid">
+ <div id="headerBar" class="row">
+ <div id="headerCard" class="card">
+ <div id="headerTitle" class="card-header text-center">
<h2 class="text-center">
LektorApp Admin Interface
</h2>
</div>
- <div class="card-body text-center">
+ <div id="headerBody" class="card-body text-center">
<button id="closeButton" type="button" class="btn btn-outline-primary">
Quit LektorApp
</button>
</div>
</div>
</div>
- <div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; flex-grow: 1; overflow: hidden; padding-top: 20px; padding-bottom: 20px;">
- <div id="karaList" class="col" style="height: 100%; overflow-y: scroll;">
+ <div id="panelWrapper" class="row">
+ <div id="panelLeft" class="col panel">
</div>
- <div id="playingList" class="col" style="height: 100%; overflow-y: scroll;">
+ <div id="panelRight" class="col panel">
</div>
</div>
diff --git a/instance/main.js b/instance/main.js
index e6d9475e827646b813e7301baf1cf5e674aa39b5..2dbff4a7242ccfabf9c1a2223fd1b3ca36496ad5 100644
--- a/instance/main.js
+++ b/instance/main.js
@@ -20,6 +20,6 @@ function karaList(karas){
}
karaList += '<div class="card shadow" style="margin: 5px; border-radius: 10px; margin: 20px 0px 20px 0px;"><div class="card-body">' + kara.source_name + ' - ' + kara.song_name + '</div></div>';
});
- document.getElementById("karaList").innerHTML = karaList;
- document.getElementById("playingList").innerHTML = playingList;
+ document.getElementById("panelLeft").innerHTML = karaList;
+ document.getElementById("panelRight").innerHTML = playingList;
}
\ No newline at end of file
diff --git a/style/css/instance.css b/style/css/instance.css
new file mode 100644
index 0000000000000000000000000000000000000000..54ec9dba44a37d6bb47421b4d2f30c0a0b25b121
--- /dev/null
+++ b/style/css/instance.css
@@ -0,0 +1,52 @@
+
+
+
+
+body{
+ overflow: hidden;
+ height: 100vh;
+}
+
+#mainFrame {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ padding-bottom: 10px;
+}
+
+#headerBar{
+ flex-basis: auto;
+ height: 150px;
+}
+
+
+
+#headerCard{
+ width: 100%;
+}
+
+#headerTitle{
+ -webkit-user-select: none;
+ -webkit-app-region: drag;
+}
+
+
+
+
+
+#panelWrapper{
+ width: 100%;
+ margin-left: 0px;
+ margin-right: 0px;
+ flex-grow: 1;
+ overflow: hidden;
+ padding-top: 20px;
+ padding-bottom: 20px;
+}
+
+
+.panel{
+ height: 100%;
+ overflow-y: scroll;
+}
+
diff --git a/style/css/public.css b/style/css/public.css
new file mode 100644
index 0000000000000000000000000000000000000000..bb12dd0859abef81ec15efacd6f89c0441ddcf88
--- /dev/null
+++ b/style/css/public.css
@@ -0,0 +1,39 @@
+
+
+body{
+ overflow: hidden;
+ height: 100vh;
+}
+
+#mainFrame{
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
+
+#headerBar{
+ flex-grow: 1;
+ min-height: 15vh;
+}
+
+
+#panelWrapper{
+ flex-grow: 5;
+ overflow: hidden;
+ flex-basis: auto;
+}
+
+#mainList{
+ overflow-y: scroll;
+ height: 100%;
+}
+
+.karaCard{
+ border-radius: 25px;
+ margin-bottom: 10px;
+ margin-top: 10px;
+}
+
+.karaCardHeader{
+ border-radius: 25px 25px 0 0;
+}
\ No newline at end of file