buttons

com-480-data-visualization · Jun 1, 2024 · 9008bc2 · 9008bc2
1 parent 8d94f7e
commit 9008bc2
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 23 deletions.
diff --git a/Milestone3/csvManipulator.js b/Milestone3/csvManipulator.js
@@ -848,6 +848,11 @@ function toggleDiscImage(action, discID){
     }
 }
 
+function toggleSongArtist(action, button){
+
+
+}
+
 
 
 

diff --git a/Milestone3/index.html b/Milestone3/index.html
@@ -29,11 +29,17 @@
         </div>
 
         <div id="main-content">
+
             <div id="list-area">
+                <div id="list-title-area">
+                    <button class=" list-options-button header-text-large" id="set-list-button" onclick="toggleSongArtist(this)">Set List</button>
+
+                    <button class="list-options-button header-text-large" id="artist-button" onclick="toggleSongArtist(this)">Artist List</button>
+                </div>
                 <div id="list-title" >
-                    <div class="header-text-frame header-text-large header-text-frame-shadow">Set List</div>
                     <hr class="custom-line">
                 </div>
+
                 <div id="song-container" class="song-container-scrollable">
                     <!-- Songs will be dynamically loaded into this container -->
                 </div>
@@ -129,13 +135,10 @@
         </div>
 
 
-
+        
         <div id="bottom-box-container">
-            <div class="reset-all-container">
-                <button class="reset-button" onclick="resetAllFilters()">Reset All Filters</button>
-            </div>
-
             <div id="controls-container">
+
                 <div id="small-button-grid-container" class="soundboard">
                     <div id="small-button-grid-container">
                         <div id="controls-column" class="controls-column">
@@ -166,7 +169,11 @@ <h3 class="soundboard-title header-text-frame">SORT MACHINE</h3>
                             </div>
                         </div>
                     </div>
+
                 </div>
+
+
+
 
                 <div id="dj-controls">
                     <div class="disc-container">
@@ -221,12 +228,12 @@ <h3 class="soundboard-title header-text-frame">SORT MACHINE</h3>
                         <button class="reset-button" onclick="resetTempoFilter()">Reset</button>
                     </div>
                 </div>
-
-                <div class="button-container">
-                    <button id="toggle-song-artist" style="height: 100px; width: 100px;" onclick="toggleSongArtist(this)">Toggle Song/Artist</button>
-                </div>
-            </div>   
+            </div> 
+            <button class="reset-button reset-button-all" onclick="resetAllFilters()">Reset All Filters</button>
+
         </div>
+
+
 
 
     </div>

diff --git a/Milestone3/styles.css b/Milestone3/styles.css
@@ -58,6 +58,30 @@ body {
     font-style: italic;
 }
 
+.list-options-button {
+    padding: 3px;
+    margin: 10px;
+    width:max-content;
+    height:max-content;
+    background-color: var(--primary-color);
+    text-align: center;
+    border: 1px solid var(--tertiary-color);
+    border-radius: 5px;
+    justify-content: center;
+    font-weight: bold;
+    box-shadow: 3px 3px var(--tertiary-color);
+
+}
+
+.list-options-button:hover {
+    background-color: var(--accent-color); /* Button color from your color scheme */
+    border: 1px solid var(--tertiary-color); /* Button border from your color scheme */
+    box-shadow: 3px 3px var(--secondary-color);
+    border-radius: 5px;
+
+    cursor: pointer; /* Changes the cursor to signify a clickable element */
+}
+
 .container {
     display: grid;
     grid-template-rows: auto 1fr auto;
@@ -159,15 +183,24 @@ body {
     background-color: var(--box-background);
     border: 2px solid var(--tertiary-color);
     text-align: center;
+    border-radius: 6px;
     display: flex;
     flex-direction: column;
 }
 
-#list-title {
-    flex: 0 0 auto; /* Make the title non-flexible */
-    text-align: center; /* Center the title */
+#list-title-area{
+    display:flex; 
+    flex-direction: row;
+    justify-content:space-evenly
+}
+
+.item.hover{
+    background-color: var(--accent-color);
+    box-shadow: 1px 1px var(--accent-color);
+    border-radius: 5px;
 }
 
+
 .song-container-scrollable {
     width: 100%;
     flex: 1 1 auto; /* Allow the song container to grow */
@@ -328,15 +361,6 @@ body {
     height: 480px;
 }
 
-#bottom-box-container{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 0px;
-    margin-top: -100px;
-}
-
 .reset-all-container{
     align-self:end;
     padding-right: 120px;
@@ -351,6 +375,19 @@ body {
     margin: 20px auto; /* Center container and add spacing */
 }
 
+/*whole bottom area */
+#bottom-box-container{
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: left;
+    gap: 0px;
+    margin-top: -100px;
+    /* move entire bottom box */
+    margin-left: 55px; 
+
+}
+
 .reset-button {
     background-color: var(--secondary-color);
     color: var(--text-color-light);
@@ -361,6 +398,12 @@ body {
     border-radius: 20px;
     box-shadow: 2px 2px var(--accent-color);
     gap: 30px;
+    width: max-content; 
+}
+.reset-button-all{
+    height: min-content; 
+    margin-left: 180px; 
+    margin-top:-48px;  
 }
 
 .reset-button:hover{
-Original file line number
+Diff line change
@@ Expand Up / @@ -848,6 +848,11 @@ function toggleDiscImage(action, discID){ @@
         }
     }
+    function toggleSongArtist(action, button){
+    }
@@ Expand Down @@