active verse buttons in progress

jordanlleslie · Nov 3, 2023 · 446524c · 446524c
1 parent c1ef896
commit 446524c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -7,8 +7,14 @@
   </head>
   <body>
       <div id="wrapper">
+
         <div id="poem-container">
-          <h1 class="title">A typical conversation of mine this summer in Taiwan</h1>
+          <div id="button-container">
+            <button><image class="disabled-btn" id="back-button" src="./assets/images/Up.svg"/></button>
+            <button><image id="forward-button" src="./assets/images/Down.svg"/></button>
+          </div>
+          <div id="poem">
+          <h1 class="title">A typical conversation of mine <br>this summer in Taiwan</h1>
           <ul class="verse active-verse" id="verse1">
             <li>Hello, my (English) name is Jordan</li>
             <li>Sorry, my Chinese isn't too good—</li>
@@ -51,12 +57,12 @@ <h1 class="title">A typical conversation of mine this summer in Taiwan</h1>
             <li>As long as we understand each other,</li>
             <li>It doesn't matter how we speak.</li>
           </ul>
-
+        </div>
         </div>
       <div class="svg-container">
         <svg id="svg"></svg>
         <div id="selection-bar">
-          <button id="select-numeracy" class="selection-btn active-button">Numeracy Chart</button>
+          <button id="select-numeracy" class="selection-btn">Numeracy Chart</button>
           <button id="select-pie" class="selection-btn">Pie Chart</button>
         </div>
       </div>

diff --git a/main.js b/main.js
@@ -101,7 +101,7 @@ async function initialize() {
   await loadData();
   await loadImages();
   selectChart();
-  numeracyChartWrapper();
+  // numeracyChartWrapper();
 }
 
 initialize();

diff --git a/styles.css b/styles.css
@@ -26,7 +26,9 @@ p {
 }
 
 #next-statement-btn,
-#prev-statement-btn {
+#prev-statement-btn,
+#forward-button,
+#back-button {
   &:hover {
     opacity: 0.7;
     cursor: pointer;
@@ -86,32 +88,59 @@ li {
   display: flex;
   flex-direction: row;
   width: 100%;
-  min-height: calc(100vh);
+  min-height: calc(100vh - 100);
 }
 
 @media (max-width: 1280px) {
   #wrapper {
     flex-direction: column;
     max-height: calc(50vh);
   }
-  #poem-container {
+  #poem {
     max-height: calc(20vh);
   }
 }
 
 #poem-container {
-  padding: 0 5%;
+  padding-right: 48px;
   flex: 2;
+  background-color: #fffffe;
+  min-width: 640px;
+  display: flex;
+}
+
+#poem {
   overflow: auto;
   max-height: calc(100vh);
-  background-color: #fffffe;
-  min-width: 400px;
 }
 
 #statement-selector {
   font-size: 20px;
 }
 
-#poem-container::-webkit-scrollbar {
+#poem::-webkit-scrollbar {
   display: none;
 }
+
+#button-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#forward-button,
+#back-button {
+  border: none;
+  width: 40px;
+  margin: 16px;
+  /* &:hover {
+    border: 1px solid lightgrey;
+    border-radius: 25%;
+  } */
+}
+
+button {
+  border: none;
+  background: none;
+}