Moving towards a footer archive

4 years ago · fe14443be3
3 changed files with 30 additions and 19 deletions
--- a/voicegardens/static/styles.css
+++ b/voicegardens/static/styles.css
@ -1,19 +1,35 @@
 /* Custom CSS styles */

-html,
 body {
  height: 100%;
  margin: 0px;
  overflow: hidden;
 }

-body {
+canvas {
+  display: block;
+}
+
+#footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  height: 20px;
+  width: 100%;
+  background-color: white;
+  text-align: left;
+}
+
+#footer * {
  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  padding: 0;
 }

-canvas {
-  display: block;
+#footer ul {
+  list-style: none;
+  padding-left: 5px;
+}
+
+#footer ul li {
+  display: inline;
 }
--- a/voicegardens/static/voicegardens.js
+++ b/voicegardens/static/voicegardens.js
@ -31,7 +31,6 @@ var archiveButton;
 var playButton;
 var recordButton;
 var stopButton;
-var viewArchiveButton;

 // Time-out used to stop a recording in case the user forgets to stop it
 // themselves. It also gurantees to turn off the mic in case of some unknown
@ -103,13 +102,6 @@ function archive() {
  });
 }

-function showArchive() {
-  /**
-   * Set URL to view archive. Called by the `archiveButton`.
-   **/
-  window.location.href = "/archive";
-}
-
 function setupRecording() {
  /**
   * Setup logic for sound recording.
@ -137,10 +129,6 @@ function setupRecording() {
  archiveButton = createButton("archive");
  archiveButton.position(10, 110);
  archiveButton.mousePressed(archive);
-
-  viewArchiveButton = createButton("view archive");
-  viewArchiveButton.position(10, 145);
-  viewArchiveButton.mousePressed(showArchive);
 }

 function getSoundInfo() {
--- a/voicegardens/templates/index.html
+++ b/voicegardens/templates/index.html
@ -12,6 +12,13 @@
    />
  </head>
  <body>
+    <div id="footer">
+      <ul>
+        <li>Shape 1</li>
+        <li>Shape 2</li>
+      </ul>
+    </div>
+
    <script src="/static/p5js/p5.min.js" charset="utf-8"></script>
    <script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script>
    <script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>