From 96bf90a9c830f9ed8f30d3d625c1a292c56e8f4b Mon Sep 17 00:00:00 2001 From: Nancy Date: Wed, 7 Nov 2018 10:22:52 -0700 Subject: [PATCH 1/8] added random (but not repeated) album art on splash --- index.html | 11 ----- playlist.html | 40 ++++++++++++++++++ script.js | 36 ++++++++++++++++ splash.html | 38 +++++++++++++++++ .../style.scssc | Bin 0 -> 5175 bytes style/css/style.css | 22 ++++++++++ style/css/style.css.map | 7 +++ style/scss/style.scss | 23 ++++++++++ 8 files changed, 166 insertions(+), 11 deletions(-) delete mode 100644 index.html create mode 100644 playlist.html create mode 100644 script.js create mode 100644 splash.html create mode 100644 style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc create mode 100644 style/css/style.css create mode 100644 style/css/style.css.map create mode 100644 style/scss/style.scss diff --git a/index.html b/index.html deleted file mode 100644 index 8e0abfd..0000000 --- a/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/playlist.html b/playlist.html new file mode 100644 index 0000000..0c720f7 --- /dev/null +++ b/playlist.html @@ -0,0 +1,40 @@ + + + + + playlist + + + + + + + + + + + + + + +
+
+

pick an album to add its tracks to the bin

+
+
+ +
+
+ +
+
+ + +
+
+ Copyright 2018: Nancy Butler +
+ +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..60f509c --- /dev/null +++ b/script.js @@ -0,0 +1,36 @@ +//generate 3 random numbers between 0 and 5 to decide which albums to display +var randomIndexArr = []; +var randomIndex = (Math.floor(Math.random() * 5)) +randomIndexArr.push(randomIndex) +while(randomIndex == randomIndexArr[0]){ + randomIndex = (Math.floor(Math.random() * 5)) +} +randomIndexArr.push(randomIndex) +while(randomIndex == randomIndexArr[0]||randomIndex == randomIndexArr[1]){ + randomIndex = (Math.floor(Math.random() * 5)) +} +randomIndexArr.push(randomIndex) + +//get array of album objects +fetch("https://lit-fortress-6467.herokuapp.com/object") + .then((resource)=>resource.json()) + .then(function(data){ + var albumArr = data.results + var albumPreviewsEl = document.querySelector("#albumPreviews") + //run for loop 3 times to get 3 image elements + for(var i = 0; i < 4; i++){ + var imgEl = document.createElement("img") + //pick album using indexes from randomIndexArr + imgEl.setAttribute("src", `images/${albumArr[randomIndexArr[i]].cover_art}`) + imgEl.setAttribute("id", albumArr[randomIndexArr[i]].artist) + imgEl.classList.add("albumArt") + albumPreviewsEl.appendChild(imgEl) + } + + + + + + + + }) diff --git a/splash.html b/splash.html new file mode 100644 index 0000000..b8dc84c --- /dev/null +++ b/splash.html @@ -0,0 +1,38 @@ + + + + + splash + + + + + + + + + + + + + + + + +
+
+
+

track bin

+ +
+
+
+
+
+
+
+ Copyright 2018: Nancy Butler +
+
+ + diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc new file mode 100644 index 0000000000000000000000000000000000000000..c7a5725e16066d859860a29126c0ff72189f413b GIT binary patch literal 5175 zcmb7I+in{-5Ved}me!Un%Xd2$!9gxAdw<(?p6ou`+k3Y6+}+)O z?z+2s+=ZX^Gq3&9ed+Q2{TH3R_Wp|(-1(#uk+mZ)NeDTPIVa@XC`!MHI(&xAvUX4S zotTI3ol&8I&rxWOI4p+$@5=|9)m|F-Wm0}~Od723#R>1Ua4(6-W_H05_jx;wVnSX= zLEs(n9|k;Z^9rf4fCnc$PTrRza(h%*$xYE2+`l)rFM__$mDF@5b!$}Wjn4xfrd6;w z^a8HzrPX6HC!ZvJugzW9_C?4=8Qkv*pQEe`1}1}(@4UBDY$x7oPHntmZbzhY(qOT7}z^)Qi(rKLQmSw#Z?Wh*U)36m5V7Gc4+M6Q07~ z8slL{9-$j@lim^zT#Y8WU@C+lic=oDc#tk+KiOZh!IC`iEz3T-R;BBa(O0IohgJ@~ zbFjIXw3B2fNiTiAjepA!E_yd2&CKkB{8k{(S71nTnWQ|ZfLSq+=wS2lPA>}hPUwa0 z%bm9(?F~+j(m}Vo)AzkgUnFU!8I?j*V($5^n;%?d2|(0BoLc8z9E$KXiRf~ft{@~1 zOTCjsOwck?$0GV+9QBdIby`RIPWQMt?WNL~X?EuM17NlG^r#(+eyVchYXPD5{0ebN=xQ{K+7z&$u2I9)BE7@b>0P!#?~4gC&-&nGE4d6)?}Ai9ehzV% zKze-69$lfYQml`x$RsIX5Zks+%qk1WY8J(UBRS1-^VyC%Vk|2wPuZ&0UPjIHqZL_)PNL4GB&rk9>541|w3ZbQI-8XTI#;E2fJTeXV|c50|DsEmG=G#8 zLwPZlB`&?I52KD;Pt!uG3bvb*xYC{=Qj(tZK~BZFK!jU{j`SfAkv>AU(a&s3NgN;3 zFX$GU;Eb5-NJ6Nj#?`6{pS*ON?$~@NQegOCD{wRa*gK66?l<%WPb~j)Q`mQUUz4z^ ztY&YuDmy^CL+H-m3p^3NjvzfknXL3`l*!6y6FBHp5cm41j)s`IIriXdj=emLI&wWW z_A?L{gFUWHl*X_hDnsMAJ5Wl_dXn3iz#90P3SrLE8r)&(0bjIVZADv4;$C7-yCpyp^#?hWv zam&%3hie)-g1EXS&5INmv~2|n?b0vS4RsBt4R>w}EB&ejjK4D-kznU9cDLH~`Ng=i zjS*)X;NHA81y|QlyGVg?)>fdM{mr^zPWdvz?c5et`dtYaXBW_&t&V_xjxE2~=jnFj z4}t=S7e>5Zkf5qcj;lNB%Hm31q`-J>E6`s5p}j_dWqpGUac&DM{iy_u*LBYqr{NZi zM?sdMA-YcoD(oE_Y3O4@(4YaC0vRg zxLUDp9BXk!3LK5Ttw7OZ^3#$fF|V(%`H>sLCd(x)q1)V&vYeIv(c0_~?H(iY*-TzH z;y-I~yORvJ#o2Ay;$Fqq4nyms!_aFVUi)R6tXVo5V(sQcgc_N5NO>4_Q)5H~a=Ma`vo;haG#=L>V=zk!CiPQFxY*Go*>F9v|2(pER@Xjypqb5gyA9 zh>vCK_yB*J&AcX}m3^t~BN(D{8)bAZkfx+PDllx(4?jAxuHv^J`(pvtbCY@5N_{NY GJ^mM`FSV!u literal 0 HcmV?d00001 diff --git a/style/css/style.css b/style/css/style.css new file mode 100644 index 0000000..4cf117d --- /dev/null +++ b/style/css/style.css @@ -0,0 +1,22 @@ +html { + height: 100%; } + +body { + min-height: 100%; } + +#mainContent { + height: 100vh; } + +#albumPreviews { + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; } + #albumPreviews img { + padding: 10px; } + +.albumArt { + max-width: 300px; + max-height: 300px; } + +/*# sourceMappingURL=style.css.map */ diff --git a/style/css/style.css.map b/style/css/style.css.map new file mode 100644 index 0000000..dc4b6b4 --- /dev/null +++ b/style/css/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,kBAAK;IACH,OAAO,EAAE,IAAI;;AAGjB,SAAS;EACP,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,KAAK", +"sources": ["../scss/style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/style/scss/style.scss b/style/scss/style.scss new file mode 100644 index 0000000..3978927 --- /dev/null +++ b/style/scss/style.scss @@ -0,0 +1,23 @@ +html{ + height: 100%; +} +body{ + min-height: 100%; +} +#mainContent{ + height: 100vh; +} + +#albumPreviews{ + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + & img{ + padding: 10px; + } +} +.albumArt{ + max-width: 300px; + max-height: 300px; +} From b7dcd668467ccc1106352e0b7e6903d4dee4231d Mon Sep 17 00:00:00 2001 From: Nancy Date: Wed, 7 Nov 2018 15:21:26 -0700 Subject: [PATCH 2/8] added individual album track viewer --- playlist.html | 32 +++- playlistScript.js | 170 ++++++++++++++++++ splash.html | 12 +- script.js => splashScript.js | 5 +- .../style.scssc | Bin 5175 -> 15209 bytes style/css/style.css | 60 ++++++- style/css/style.css.map | 2 +- style/scss/style.scss | 61 ++++++- 8 files changed, 312 insertions(+), 30 deletions(-) create mode 100644 playlistScript.js rename script.js => splashScript.js (93%) diff --git a/playlist.html b/playlist.html index 0c720f7..35f5077 100644 --- a/playlist.html +++ b/playlist.html @@ -10,22 +10,40 @@ - + + + - + -
-
+
+ -
+
-
- +
+
+

Add tracks from:

+
+ Ghost in the Machine
+ The Police + +
+
+
+ available tracks: +
+
+
+ playlist: +
+ runtime: +
diff --git a/playlistScript.js b/playlistScript.js new file mode 100644 index 0000000..7332bb9 --- /dev/null +++ b/playlistScript.js @@ -0,0 +1,170 @@ +var albumShelfEl = document.querySelector("#albumShelf") +var allTracksEl = document.querySelector("#allTracks") + +var adeleTracks = [ + {name: "Rolling in the Deep", + length: "3:49",}, + {name: "Rumour Has It", + length: "3:44",}, + {name: "Turning Tables", + length: "4:11",}, + {name: "Dont You Remember", + length: "4:04",}, + {name: "Set Fire to the Rain", + length: "4:02",}, + {name: "He Wont Go", + length: "4:38",}, + {name: "Take it All", + length: "3:49",}, + {name: "I'll Be Waiting", + length: "4:02",}, + {name: "One and Only", + length: "5:39",}, + {name: "Lovesong", + length: "5:17",}, + {name: "Someone Like You", + length: "4:44",}, + {name: "I found a Boy", + length: "3:37",} +] +var policeTracks = [ + {name: "Spirits in the Material World", + length: "2:59",}, + {name: "Every Little Thing She Does is Magic", + length: "4:22",}, + {name: "Invisible Sun", + length: "3:44",}, + {name: "Hungry for You", + length: "2:53",}, + {name: "Demolition Man", + length: "5:57",}, + {name: "Too Much Information", + length: "3:43",}, + {name: "Rehumanize Yourself", + length: "3:10",}, + {name: "One World (Not Three)", + length: "4:47",}, + {name: "Omega Man", + length: "2:48",}, + {name: "Secret Journey", + length: "3:34",}, + {name: "Darkness", + length: "3:14",} +] +var pinkFloydTracks = [ + {name: "Cluster One", + length: "5:56"}, + {name: 'What Do You Want from Me', + length: "4:21"}, + {name: "Poles Apart", + length: "7:03"}, + {name: "Marooned", + length: "5:29"}, + {name: "A Great Day for Freedom", + length: "4:17"}, + {name: "Wearing the Inside Out", + length: "6:49"}, + {name: "Take it Back", + length: "6:12"}, + {name: "Coming Back to Life", + length: "6:19"}, + {name: "Keep Talking", + length: "6:10"}, + {name: "Lost for Words", + length: "5:13"}, + {name: "High Hopes", + length: "8:34"} +] +var blackUhuruTracks = [ + {name: "Youth of Eglington", + length: "5:00"}, + {name: "Sponji Reggae", + length: "4:56"}, + {name: "Sistren", + length: "4:34"}, + {name: "Journey", + length: "5:21"}, + {name: "Utterance", + length: "3:42"}, + {name: "Puff She Puff", + length: "5:08"}, + {name: "Rockstone", + length: "4:38"}, + {name: "Carbine", + length: "6:05"}, +] +var mjTracks = [ + {name: "Wanna Be Startin' Somethin'", + length: "6:03"}, + {name: "Baby Be Mine", + length: "4:20"}, + {name: "The Girl is Mine", + length: "3:42"}, + {name: "Thriller", + length: "5:57"}, + {name: "Beat It", + length: "4:18"}, + {name: "Billie Jean", + length: "4:54"}, + {name: "Human Nature", + length: "4:06"}, + {name: "P.Y.T.(Pretty Young Thing)", + length: "3:59"}, + {name: "The Lady in My Life", + length: "5:00"}, +] + + +//get array of album objects +fetch("https://lit-fortress-6467.herokuapp.com/object") + .then((resource)=>resource.json()) + .then(function(data){ + var albumArr = data.results + for(var i = 0; i < albumArr.length; i++){ + //add appropriate tracks for each album + switch(albumArr[i].title){ + case "Ghost in the Machine": + albumArr[i].tracks = policeTracks; + break; + case "Red": + albumArr[i].tracks = blackUhuruTracks; + break; + case "The Division Bell": + albumArr[i].tracks = pinkFloydTracks + break; + case "Thriller": + albumArr[i].tracks = mjTracks + break; + case "21": + albumArr[i].tracks = adeleTracks + } + //make elements for each album cover + var albumEl = document.createElement("img") + albumEl.setAttribute("src", `images/${albumArr[i].cover_art}`) + albumEl.setAttribute("alt", `album art for ${albumArr[i].title}`) + albumEl.setAttribute("id", albumArr[i].title) + albumShelfEl.appendChild(albumEl) + + //add event listeners for each album object + albumEl.addEventListener("click", function(){ + //get associated object + var albumName = this.id + var albumObj = albumArr.find(function(obj){ + return obj.title == albumName + }) + document.querySelector("#selectedAlbumInfo").innerHTML = ` + ${albumObj.title}
+ ${albumObj.artist}
+ + ` + var trackList = document.createElement("ol") + for(var i = 0; i < albumObj.tracks.length; i++){ + var indivTrack = document.createElement("li") + indivTrack.innerHTML = `${albumObj.tracks[i].name}: ${albumObj.tracks[i].length}` + trackList.appendChild(indivTrack) + } + allTracksEl.appendChild(trackList) + + }) + } + }) diff --git a/splash.html b/splash.html index b8dc84c..12388df 100644 --- a/splash.html +++ b/splash.html @@ -15,19 +15,17 @@ - +
-
-
+
+

track bin

- + choose tracks
-
-
-
+
diff --git a/script.js b/splashScript.js similarity index 93% rename from script.js rename to splashScript.js index 60f509c..14e2b63 100644 --- a/script.js +++ b/splashScript.js @@ -18,17 +18,16 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") var albumArr = data.results var albumPreviewsEl = document.querySelector("#albumPreviews") //run for loop 3 times to get 3 image elements - for(var i = 0; i < 4; i++){ + for(var i = 0; i < 3; i++){ var imgEl = document.createElement("img") //pick album using indexes from randomIndexArr imgEl.setAttribute("src", `images/${albumArr[randomIndexArr[i]].cover_art}`) imgEl.setAttribute("id", albumArr[randomIndexArr[i]].artist) - imgEl.classList.add("albumArt") albumPreviewsEl.appendChild(imgEl) } - + console.log(data.results) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index c7a5725e16066d859860a29126c0ff72189f413b..bca19bae9483f23781d3328ec0776225f3ab130e 100644 GIT binary patch literal 15209 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 S!~xm4cFS6B_nagUI`a>quj|qP diff --git a/style/css/style.css b/style/css/style.css index 4cf117d..7788ef7 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -8,15 +8,61 @@ body { height: 100vh; } #albumPreviews { - overflow: hidden; + justify-content: space-around; + height: 100%; + padding-top: 1.5%; } + #albumPreviews img { + padding: 0.5%; + max-height: 300px; + flex-grow: 1; } + +.row-center { + height: 100%; } + +.col-center { + height: 100vh; display: flex; flex-direction: column; - align-items: center; } - #albumPreviews img { - padding: 10px; } + align-items: center; + justify-content: center; } + +.navbar-fixed-bottom { + display: flex; + justify-content: center; } + +.container-fluid { + max-width: 1000px; } + +#header { + min-height: 10%; + display: flex; + justify-content: center; } + +#albumShelf { + margin-left: 0; + margin-right: 0; + display: flex; + justify-content: space-between; + max-height: 20%; + overflow: auto; } + #albumShelf img { + max-width: 150px; + max-height: 150px; + padding: 0; + flex-grow: 1; } + +.selectedAlbumCover { + max-height: 150px; } + +.col-sm-4 { + height: 100%; } + +#allTracks, #chosenTracks { + border: 1px solid black; + min-height: 95%; } -.albumArt { - max-width: 300px; - max-height: 300px; } +#trackBins { + margin-top: 5%; + height: 35%; } /*# sourceMappingURL=style.css.map */ diff --git a/style/css/style.css.map b/style/css/style.css.map index dc4b6b4..811e394 100644 --- a/style/css/style.css.map +++ b/style/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,kBAAK;IACH,OAAO,EAAE,IAAI;;AAGjB,SAAS;EACP,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,KAAK", +"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,eAAe,EAAE,YAAY;EAC7B,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,kBAAK;IACH,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC;;AAGhB,WAAW;EACT,MAAM,EAAE,IAAI;;AAEd,WAAW;EACT,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;;AAEzB,oBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,gBAAgB;EACd,SAAS,EAAE,MAAM;;AAGnB,OAAO;EACL,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,WAAW;EACT,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,GAAG;EACf,QAAQ,EAAE,IAAI;EACd,eAAK;IACH,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;;AAIhB,mBAAmB;EACjB,UAAU,EAAE,KAAK;;AAEnB,SAAS;EACP,MAAM,EAAE,IAAI;;AAEd,yBAAyB;EACvB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,GAAG;;AAEjB,UAAU;EACR,UAAU,EAAE,EAAE;EACd,MAAM,EAAE,GAAG", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/style/scss/style.scss b/style/scss/style.scss index 3978927..806aada 100644 --- a/style/scss/style.scss +++ b/style/scss/style.scss @@ -9,15 +9,66 @@ body{ } #albumPreviews{ - overflow: hidden; + justify-content: space-around; + height: 100%; + padding-top: 1.5%; + & img{ + padding: 0.5%; + max-height: 300px; + flex-grow: 1; + } +} +.row-center{ + height: 100%; +} +.col-center{ + height: 100vh; display: flex; flex-direction: column; align-items: center; + justify-content: center; +} +.navbar-fixed-bottom{ + display: flex; + justify-content: center; +} + +.container-fluid{ + max-width: 1000px; +} + +#header{ + min-height: 10%; + display: flex; + justify-content: center; +} + +#albumShelf{ + margin-left: 0; + margin-right: 0; + display: flex; + justify-content: space-between; + max-height: 20%; + overflow: auto; & img{ - padding: 10px; + max-width: 150px; + max-height: 150px; + padding: 0; + flex-grow: 1; } } -.albumArt{ - max-width: 300px; - max-height: 300px; + +.selectedAlbumCover{ + max-height: 150px; +} +.col-sm-4{ + height: 100%; +} +#allTracks, #chosenTracks{ + border: 1px solid black; + min-height: 95%; +} +#trackBins{ + margin-top: 5%; + height: 35%; } From 50f2a082e4f666170554551c5aab4716829c8a9b Mon Sep 17 00:00:00 2001 From: Nancy Date: Wed, 7 Nov 2018 16:46:47 -0700 Subject: [PATCH 3/8] added track list selection mechanism and runtime calculator --- playlist.html | 12 +++- playlistScript.js | 64 ++++++++++++++++-- .../style.scssc | Bin 15209 -> 18234 bytes style/css/style.css | 10 +++ style/css/style.css.map | 2 +- style/scss/style.scss | 20 ++++++ 6 files changed, 97 insertions(+), 11 deletions(-) diff --git a/playlist.html b/playlist.html index 35f5077..c8581dc 100644 --- a/playlist.html +++ b/playlist.html @@ -37,12 +37,18 @@

pick an album to add its tracks to the bin

available tracks: -
+
+
    +
+
playlist: -
- runtime: +
+
    +
+
+ runtime:
diff --git a/playlistScript.js b/playlistScript.js index 7332bb9..5e49644 100644 --- a/playlistScript.js +++ b/playlistScript.js @@ -1,5 +1,7 @@ var albumShelfEl = document.querySelector("#albumShelf") var allTracksEl = document.querySelector("#allTracks") +var allTracksListEl = document.querySelector("#allTracksList") +var chosenTracksListEl = document.querySelector("#chosenTrackList") var adeleTracks = [ {name: "Rolling in the Deep", @@ -114,6 +116,21 @@ var mjTracks = [ length: "5:00"}, ] +/* format of playlist willbe: +[ + {album: + track: + length:}, + {album: + track: + length: + } + ..etc +] +*/ +var playlist = [] +//runtime in seconds +var totalRuntime = 0; //get array of album objects fetch("https://lit-fortress-6467.herokuapp.com/object") @@ -145,26 +162,59 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") albumEl.setAttribute("id", albumArr[i].title) albumShelfEl.appendChild(albumEl) - //add event listeners for each album object + //add event listeners for each album cover albumEl.addEventListener("click", function(){ + //if there's already something in the bin, remove it + while(allTracksListEl.childNodes[0]){ + allTracksListEl.removeChild(allTracksListEl.childNodes[0]) + } //get associated object var albumName = this.id var albumObj = albumArr.find(function(obj){ return obj.title == albumName }) + + //change left-hand album info area and update runtime document.querySelector("#selectedAlbumInfo").innerHTML = ` ${albumObj.title}
${albumObj.artist}
` - var trackList = document.createElement("ol") + //make a list element to store tracks in album bin + allTrackListEl = document.createElement("ol") for(var i = 0; i < albumObj.tracks.length; i++){ - var indivTrack = document.createElement("li") - indivTrack.innerHTML = `${albumObj.tracks[i].name}: ${albumObj.tracks[i].length}` - trackList.appendChild(indivTrack) - } - allTracksEl.appendChild(trackList) + //makeli's of tracks and runtime + var indivTrackEl = document.createElement("li") + //attach the length of song as class to use for total runtime later + indivTrackEl.classList.add(`${albumObj.tracks[i].length}`) + indivTrackEl.innerHTML = `${albumObj.tracks[i].name}: ${albumObj.tracks[i].length}` + + //add individual li's to ol of album tracks + allTracksListEl.appendChild(indivTrackEl) + + //add event listener for each track to add it to other bin when user selects it + indivTrackEl.addEventListener("click", function(){ + var chosenIndivTrackEl = this .cloneNode(true) + chosenTracksListEl.appendChild(chosenIndivTrackEl) + //get runtime of track from class, convert to seconds, add to total runtime + var runtime = this.classList[0] + //runtime is in format mm:ss convert to seconds and add to totalRuntime + var mins = runtime.slice(0, runtime.indexOf(":")) + var secs = runtime.slice(runtime.indexOf(":")+1, runtime.length) + totalRuntime += parseInt(mins*60)+parseInt(secs) + + //convert total to mm:ss and change totalruntime in html to match + var totalRuntimeMin = `${Math.floor(totalRuntime/60)}:${(totalRuntime%60)}` + document.querySelector("#runtimeSpan").innerHTML = `runtime: ${totalRuntimeMin}` + + }) + + + + + + } }) } }) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index bca19bae9483f23781d3328ec0776225f3ab130e..aec22e7586f1e11dd1db86153917c86ba8fd4c45 100644 GIT binary patch delta 2908 zcmb7GTW=dh6vmt2G;23@64#02#@^U%6S=j$j&Jc!DI3u?Els1QO`SllYkS?SaJ-Q( zEfwnJg%<=Z=)8c0DEtAW(kBoS>LXGgDj^|2LX^h>68``(Gv3{a9an+}OEbxLzH{a~ z-<;X!*T1=EizQ>3n8=rt1+lEC>0G9enl2~Pxnv?YlgpM8rE)o!QwvJAm`LYxnU7+V zHs8bim$5gb!&j7gU6Ph+swzpZ={q}WwXvX=R41BTwVw~g5VrayU#&zWHLqpnGbXbd`fINnR zvLAZluiNI}sdF0c#`(k?8Wu5Rj{fjc(2=hnjTw=1IFj*@oeQ2u$KboZadqZFCD z&jM-57I=C|M_EH$Z#+UoR4Xb`y>4lUW{`dLC8A1;_kwlAiI$od+B6|MkC_0Ti>vTS z>J03rM&XNu2d|I9FNsn3F(pE1`b}6)dt6MPi#Rq&^ns7lp^3Z zFLOV`8=fs&o>(F+5Djy1nC};v`1+6MN9KDFK%+ZVRBpR^u z_?GE4m`#q%)YK9^1nK>8bOJ>Q<7LYNEeBl294;$6*$t5{p6P~TE~mKtJs$6EV>$?n z&XGGt2AK==S`n5b7tL~HZh!@ogJBU`mmKYNdM+NR={MS@hu+vGBcx7eh*BvucZA)V zdRX!2N3x@;db`8J+B^rV-9 z%N@CvF@`yP8D5rOx@bYNj+gx{8yr3qp1=GqsNTT<8FKnOtG5y4!5b)>H+aO&)^V6N5to z)}QDN8q(Ix-Y3>tySqmv!oa z515+kbP^gwGIy^R-t)`_H#!n+;6!Y~Y=F%Z>WX2BHXw1x>wLfxZNTFreuqIMbD#IZ z+StsggXN0)c2uo)nKPRmHEiMx>zlG1m zswX=){l@Tx!_W+PgGz@g3Py}tswnWQH`Eow@4*B{yzbwa0EEIz2dzOSbI&XhNU^P_ zf6L4)b5B_?tEe*+S10ACLd1&pr553b-(M z@8=7AEzPg+9gjD8NZ;WFJo)kSCJFd$L;NisNB+;}0D6&_+8_3UQN!<<4KCz`Z*w8h j^gP1Vn9d@V3BnG3;%z*^wQ delta 920 zcmZuvJ#W)c6jhuwO-)3gHffu0l9p5z@ptUFuM#gH2ggb(Ayq7>5^;bwqL2ZEgb))8 z6B68^Ol*uGD#QWxQg!Ym(fN%si%p7LiN@U}Xco$X7x( z?A6v{_Ry&f_m#7xH4qnJUzx8Qwh5*G91p-Id^7+X66$8DdBk*c%(PeKJ=66`I2wYF z3pNcx*r#5aUI^@n9W$Td(+US?G$ZdES->HZe2|?3{ZervhKf7zrj(3-qgoF9Hq+XO z2s7U&1a2RyV&(%Kv_YsY!0p<3c&RMG)v4pKrOd)FWf`*OCD>8j_|CU~8#XR?aa7jwH?ggiL6J#DUbCCcY zTu+OdIiO}*@UFhd{0YDPT6e=4q1)f7+__cJ9 Date: Thu, 8 Nov 2018 10:10:51 -0700 Subject: [PATCH 4/8] added remove track and clear all track functionality --- playlist.html | 2 +- playlistScript.js | 54 ++++++++++++------ .../style.scssc | Bin 18234 -> 18907 bytes style/css/style.css | 3 + style/css/style.css.map | 2 +- style/scss/style.scss | 4 ++ 6 files changed, 46 insertions(+), 19 deletions(-) diff --git a/playlist.html b/playlist.html index c8581dc..fd8573f 100644 --- a/playlist.html +++ b/playlist.html @@ -52,7 +52,7 @@

pick an album to add its tracks to the bin

- +
diff --git a/playlistScript.js b/playlistScript.js index 5e49644..bf486c1 100644 --- a/playlistScript.js +++ b/playlistScript.js @@ -129,8 +129,8 @@ var mjTracks = [ ] */ var playlist = [] -//runtime in seconds -var totalRuntime = 0; +//playlist runtime in seconds +var runTime = 0; //get array of album objects fetch("https://lit-fortress-6467.herokuapp.com/object") @@ -194,27 +194,47 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") //add event listener for each track to add it to other bin when user selects it indivTrackEl.addEventListener("click", function(){ + + //add event listener to line item in chosen bin to remove on click var chosenIndivTrackEl = this .cloneNode(true) + chosenIndivTrackEl.addEventListener("click", function(){ + //get runtime of track from class, convert to seconds, remove from total runtime + var trackRunTime = this.classList[0] + //runtime is in format mm:ss convert to seconds and subtract from runTime + var mins = trackRunTime.slice(0, trackRunTime.indexOf(":")) + var secs = trackRunTime.slice(trackRunTime.indexOf(":")+1, trackRunTime.length) + runTime = runTime - (parseInt(mins*60)+parseInt(secs)) + //convert total to mm:ss and change runTime in html to match + var runTimeMin = `${Math.floor(runTime/60)} minutes ${(runTime%60)} seconds` + document.querySelector("#runtimeSpan").innerHTML = `runtime: ${runTimeMin}` + + //remove track li from ol + this.parentNode.removeChild(this) + }) + //add chosen track line item to ol in playlist bin chosenTracksListEl.appendChild(chosenIndivTrackEl) //get runtime of track from class, convert to seconds, add to total runtime - var runtime = this.classList[0] - //runtime is in format mm:ss convert to seconds and add to totalRuntime - var mins = runtime.slice(0, runtime.indexOf(":")) - var secs = runtime.slice(runtime.indexOf(":")+1, runtime.length) - totalRuntime += parseInt(mins*60)+parseInt(secs) - - //convert total to mm:ss and change totalruntime in html to match - var totalRuntimeMin = `${Math.floor(totalRuntime/60)}:${(totalRuntime%60)}` - document.querySelector("#runtimeSpan").innerHTML = `runtime: ${totalRuntimeMin}` + var trackRunTime = this.classList[0] + //runtime is in format mm:ss convert to seconds and add to runTime + var mins = trackRunTime.slice(0, trackRunTime.indexOf(":")) + var secs = trackRunTime.slice(trackRunTime.indexOf(":")+1, trackRunTime.length) + runTime += parseInt(mins*60)+parseInt(secs) + //convert total to mm:ss and change runTime in html to match + var runTimeMin = `${Math.floor(runTime/60)} minutes ${(runTime%60)} seconds` + document.querySelector("#runtimeSpan").innerHTML = `runtime: ${runTimeMin}` }) - - - - - - } }) } }) + + //event listener for clear tracks button removes all elements from chosen list and from playlist + var clearButtonEl = document.querySelector("#clearTracksBtn") + clearButtonEl.addEventListener("click", function(){ + while(chosenTracksListEl.childNodes[0]){ + chosenTracksListEl.removeChild(chosenTracksListEl.childNodes[0]) + } + document.querySelector("#runtimeSpan").innerHTML = `runtime: 0` + + }) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index aec22e7586f1e11dd1db86153917c86ba8fd4c45..edfaa468d6d0d91cd240c78f6b922889f3852fc9 100644 GIT binary patch delta 1437 zcmZux&rcIU7|pJ2p<65~lmacb(3TW6mThUfTL$UWSPfAVNm`&kjO=!oKw_*vq6ZU| zn~54Dei#1&?*vbtSh*Kb`UnqL75b5*pYj!~4v5 ztc(VwCdzrxEJ8?JhzRS=JH|~Ha+lDYgif`9`_r*wK6JE+f<2_rg~m3<7!4tyZ019j z<1nX$xiL_20QRz}=n@)fqER;rSk+6Uy5Huay8+rku^X(M8&)g@%r83Z3S#Uyo-#dJb}(OH#bw$O+(-_=5BYq!(qXwmPF=Q81y+<5t_s`A z+{tRI`6?kcm*Z`%R@>^T5XhCnwGQqY!LVp+kdH^;A@X@x>owSn`}-a+vo-jc3kp^t z<~Lzz_H4A?!CNQ1qV1XP%!^X!hGSYL&JN9vd5ekHA(RX%7CYvjcZs-qUF#h~pFe>~z(veC7^-lFPy??DMd|R5P$Y(De$AmQ4jRidx z5#~QQpdL`*@jRKu4zUIi8@0vgZh}rhp&O0~nz;Wz&sXN40lSky!D7e!H@KKT!|8PL z0Zj>H^)4SX_c3@f<(0km80)Q@tdpB;F57RiP7E>|I$XxfVWXoZgJ4GNmJImpk95Td z|6oGHesRFbUJwdDo#Bc_hWSCK-LE~v`hha$53yqEQMAFS5^bn8^Q#QM4R;F@@V4OP ZN;@A5QHMzXqe!?X2-fd%=Sy*!`wN+~S`YvL delta 1059 zcmZva&2AD=6vs2;sO=1iwa_UrEh7V!rV(UH`IuflE`*RK)kPBvq#cG23kj>nM7P8T z(3<9KTv=bC?asJq;sZ1;H3s_#K7hu{?Q||BEG9Yk13LjrCq4X(V(bW26uCgI>=tx}A3VrJgj5)Nw4r`A(}JQ_wYJxSQ6vdAO1T zP@z>nJ%E8e1KrK-JG;mW4-6H)Z|-tcxO%z{dq|8{kvop&`&Igp^3fsk%_9FHQts2% zQvV)WzB$1$dZE^k_m-xHmiit?Q-eZ8o2r=^)4Ywyu4lqnW4NJ+wh`u^!@F!ntxx3C zNzR-zQinfTtvF4?az+zw6u^F@Vg<#ox5m81g6j~_m5l9-`KI8g35qqmN)gz>p^bEbpXyhdyiGg{t8Y!W9nYZAn6IGL5;Z$70qCJ;1; zmZ5G?)YCK!K?6pp-?POVFhXq`Vg3ky6t+}rBF7>*4;|DNa2{={hUHkGFUYPFmSe$1 zSdnZa%zqZZ^k;xCDxu~?Sd)bLoUqX;NMG>3oF~cxXy3UV=PplKViPV_6w!9W{26>J zmbn(a1+*%Xs!|Hma~M99yl|G+Bxc{D+=o#Ke4!A$3CQre;E}w}T5b3xYqTeh^#Y6X z+>mY1CcDe9<64Bvg0Mn{G5>qYi)!5f!2Bfy%RxVV7|tsjFhdibl*8QG`A#_`oPXNN GasL5cfCLBt diff --git a/style/css/style.css b/style/css/style.css index 5cd98dc..d882469 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -62,6 +62,9 @@ body { min-height: 95%; } #allTracks li:hover { + color: blue; } + +#chosenTracks li:hover { color: red; } #trackBins { diff --git a/style/css/style.css.map b/style/css/style.css.map index 20cf8c0..547b716 100644 --- a/style/css/style.css.map +++ b/style/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,eAAe,EAAE,YAAY;EAC7B,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,kBAAK;IACH,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC;;AAGhB,WAAW;EACT,MAAM,EAAE,IAAI;;AAEd,WAAW;EACT,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;;AAEzB,oBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,gBAAgB;EACd,SAAS,EAAE,MAAM;;AAGnB,OAAO;EACL,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,WAAW;EACT,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,GAAG;EACf,QAAQ,EAAE,IAAI;EACd,eAAK;IACH,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;;AAIhB,mBAAmB;EACjB,UAAU,EAAE,KAAK;;AAInB,SAAS;EACP,MAAM,EAAE,IAAI;;AAId,yBAAyB;EACvB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,GAAG;;AAGjB,mBAAmB;EACjB,KAAK,EAAE,GAAG;;AAIZ,UAAU;EACR,UAAU,EAAE,EAAE;EACd,MAAM,EAAE,GAAG;;AAIb,UAAU;EACR,UAAU,EAAE,EAAE;EACd,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,iBAAQ;IACN,YAAY,EAAE,GAAG", +"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,eAAe,EAAE,YAAY;EAC7B,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,kBAAK;IACH,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC;;AAGhB,WAAW;EACT,MAAM,EAAE,IAAI;;AAEd,WAAW;EACT,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;;AAEzB,oBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,gBAAgB;EACd,SAAS,EAAE,MAAM;;AAGnB,OAAO;EACL,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,WAAW;EACT,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,GAAG;EACf,QAAQ,EAAE,IAAI;EACd,eAAK;IACH,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;;AAIhB,mBAAmB;EACjB,UAAU,EAAE,KAAK;;AAInB,SAAS;EACP,MAAM,EAAE,IAAI;;AAId,yBAAyB;EACvB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,GAAG;;AAGjB,mBAAmB;EACjB,KAAK,EAAE,IAAI;;AAGb,sBAAsB;EACpB,KAAK,EAAE,GAAG;;AAIZ,UAAU;EACR,UAAU,EAAE,EAAE;EACd,MAAM,EAAE,GAAG;;AAIb,UAAU;EACR,UAAU,EAAE,EAAE;EACd,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,iBAAQ;IACN,YAAY,EAAE,GAAG", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/style/scss/style.scss b/style/scss/style.scss index 7a48684..c4cc4f6 100644 --- a/style/scss/style.scss +++ b/style/scss/style.scss @@ -74,6 +74,10 @@ body{ } #allTracks li:hover{ + color: blue; +} + +#chosenTracks li:hover{ color: red; } From c310001d930d22703171a78a6e93fb416ea92b79 Mon Sep 17 00:00:00 2001 From: Nancy Date: Thu, 8 Nov 2018 10:50:00 -0700 Subject: [PATCH 5/8] added submit playlist functionality --- playlist.html | 2 +- playlistScript.js | 28 ++++++++++++++++++++++++---- 2 files changed, 25 insertions(+), 5 deletions(-) diff --git a/playlist.html b/playlist.html index fd8573f..f10a612 100644 --- a/playlist.html +++ b/playlist.html @@ -53,7 +53,7 @@

pick an album to add its tracks to the bin

- +
Copyright 2018: Nancy Butler diff --git a/playlistScript.js b/playlistScript.js index bf486c1..2de5aa3 100644 --- a/playlistScript.js +++ b/playlistScript.js @@ -118,11 +118,9 @@ var mjTracks = [ /* format of playlist willbe: [ - {album: - track: + {track: length:}, - {album: - track: + {track: length: } ..etc @@ -238,3 +236,25 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") document.querySelector("#runtimeSpan").innerHTML = `runtime: 0` }) + + //stop default submit behavior and use post request to send playlist + document.querySelector("#submitBtn").addEventListener("click", function(event){ + event.preventDefault() + for(var i = 1; i < chosenTracksListEl.childNodes.length; i++){ + var trackSubmit = chosenTracksListEl.childNodes[i].innerText + var title = trackSubmit.slice(0,trackSubmit.indexOf(":")) + var length = trackSubmit.slice(trackSubmit.indexOf(":")+2, trackSubmit.length) + var trackObj = { + "track": title, + "length": length + } + playlist.push(title) + } + console.log(playlist) + //send playlist with POST request and console log the response + fetch('https://lit-fortress-6467.herokuapp.com/post', { + method: 'post', + body: JSON.stringify(playlist) + }) + .then((response)=>console.log("POST response: "+response)) + }) From ec711a0ca8d6faf9ec379cbc0a5f9463b42904be Mon Sep 17 00:00:00 2001 From: Nancy Date: Thu, 8 Nov 2018 13:29:24 -0700 Subject: [PATCH 6/8] added color scheme --- playlist.html | 6 +- playlistScript.js | 17 ++- splash.html | 2 +- .../style.scssc | Bin 18907 -> 37381 bytes style/css/style.css | 86 +++++++++++--- style/css/style.css.map | 2 +- style/scss/style.scss | 105 +++++++++++++++--- 7 files changed, 182 insertions(+), 36 deletions(-) diff --git a/playlist.html b/playlist.html index f10a612..f166312 100644 --- a/playlist.html +++ b/playlist.html @@ -14,7 +14,7 @@ - + @@ -30,9 +30,9 @@

pick an album to add its tracks to the bin

Add tracks from:

- Ghost in the Machine
+
diff --git a/playlistScript.js b/playlistScript.js index 2de5aa3..9983c81 100644 --- a/playlistScript.js +++ b/playlistScript.js @@ -233,28 +233,39 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") while(chosenTracksListEl.childNodes[0]){ chosenTracksListEl.removeChild(chosenTracksListEl.childNodes[0]) } - document.querySelector("#runtimeSpan").innerHTML = `runtime: 0` + runTime = 0; + document.querySelector("#runtimeSpan").innerHTML = `runtime: ` }) //stop default submit behavior and use post request to send playlist document.querySelector("#submitBtn").addEventListener("click", function(event){ event.preventDefault() + //clear old playlist values + playlist = []; + //iterate through each li of track names for(var i = 1; i < chosenTracksListEl.childNodes.length; i++){ var trackSubmit = chosenTracksListEl.childNodes[i].innerText var title = trackSubmit.slice(0,trackSubmit.indexOf(":")) var length = trackSubmit.slice(trackSubmit.indexOf(":")+2, trackSubmit.length) + //could send this object to send track length and title var trackObj = { "track": title, "length": length } + //add titles to playlist array playlist.push(title) } - console.log(playlist) //send playlist with POST request and console log the response fetch('https://lit-fortress-6467.herokuapp.com/post', { method: 'post', body: JSON.stringify(playlist) }) - .then((response)=>console.log("POST response: "+response)) + .then((resource)=>resource.text()) + .then(function(data){ + console.log(data) + if(data[0] == "S"){ + alert("Playlist submitted!") + } + }) }) diff --git a/splash.html b/splash.html index 12388df..48b96e3 100644 --- a/splash.html +++ b/splash.html @@ -14,7 +14,7 @@ - + diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index edfaa468d6d0d91cd240c78f6b922889f3852fc9..7d115f245bbca8b602a58b9ba70e44fcdb874307 100644 GIT binary patch literal 37381 zcmcg#Ymi*WRrcN_`NVEdYuV$KCE2o8JNwY zyZiL%>AN!{nUqRZd+v09ect`Pcka-UL*>HZBlEM>>hjF|(WA3RkIpa0)us94@zLYu z`6I`w^Oa*ObJf}S$kKA*or7t3&8bSW8HT4DaU6z^rfKV;v>K0uqhfhAsZ|?s{mj8M z+-(iL{nB`osRaPs6YA`SnH`mNI}- z%Z+5crCWO-X~m67Z73WT=PI?0I1O*$#U8__VJPv2qLFgAMWpMkB&|0uUImpZtyZIX zaVQ*Y#MNXtESv=y>Pde%v;@_X@vu;-t*=(#!A{YL*Bfy&uD2>!ePMEBPx(lBW@fHG z8bT&(Nj-*g+eI_oXe`HzjY|D2ursdMkq<#T_;e^76U|no(OO(jn`t<~i=0fG3AQj0 z6#;KVq$?}UxCOjy5plgLt3=nxAERrN8=&Qtq=w3CE;pOg&DMoldkR!Z9Q#( zj*R{m)B`ZsJy5ZEq1lSp1_7o4hFh4tb$T^ji>K?A`tpV8dz04c#?q&d{daZJy zmNZ*g6B2z4bW*7;_Fi#ZG{NADX!XS>D~)Kfg8bQ5r~w;b(r1n@zS01QG4u&q+9p6*hHAE69? z3NoA|5#qzk@%)k!VbBp_5ST6+5s2SLm;2x7icug8r$@0DES2EZ<0egK%igP5P0Eziy!SIiGP%nvi>k?P324}zFy z5X5||8_n+n=0||}6=HsNrhN2>*8GUW{0L(nsgBJ1Ac%Pe;dYlBSuZ$-85sUP)4wn| zwAxy$p=O~sS+6vjadi=Yf)qKax{A0KFSpVL_G@cvl~eIYHsbnnJP28GEnZuS8_hHQ zrpG;H3hQzM(XIIV9vAEsbQZN(mm1DWUFVj%yB4oOFF1q=lsFxeeRy-dvK*Ho9gad? z25y=gOOFGm@=w_VHq&UbKiUK7-BEf!sJY*`J5q({x^lEzgGo$DcMUX7Ept1ao}BTzUR9)$kE9g3(i z#;H~VIx^@wKrb`p@?KdB`X+4e!g?HzB~{Q{vXaD&a8gupII&!5fpL>MbkOUIV8sLm zF;E7D9&;2l1|n=V3PNh97ATrat_rsa7$mJPHZQ;c<$O3;kDuh-qYrP;j~DKe#`Gvx z^gYX}jA|Cb@ofC%siQhz#lPtLgswwf_o$XtJZ0dy$+qLDU{Q}JPp8rTvFK(QD@$qh zg4FaaX>?#v`fPMC^YCaY^Wo@F=B%dZG%9!-wqGtsGneC%vNB>QoLM&X*v6a>DdT)- zD=^GZ8qF&o8(T~2Q(ixd4!1i~bR;?&9Yg-NYo#d#Z$$=(CY-h@ z0%pmp1VM z9nhzqWG5`Ev-1xWC%D`~wowNhD2YFW5bI#yvavH#J^oQu@0x_!UxeE_5a4q#O9w?+k6V25det3dH0`u@%oFcX|@ns3qf zWdp{O%k5TX+_q<}f+JJtT%O-K`}E0>iKL*eke zxeGKyg8-x`!DM+8x?r6*{e81?h5~fJ=T_ToKdyDClIA$HLA@$cMWc9c-1`8?_8dUl zJ}C4VdtnLFYdZd~m=VEnpJBpSf0yQ5^!?PJaTVFt-?67sTiRGV*@(|2@sn~jAj-FY zB&4;sx7R5q6TRCTMkdPMvNB>Q9B%IkPzKo>DK@6z{p8NaH<~bdx&WO9xpZ3=*d~Xd zQx&<2)NcRlv=){9uY)$PG3rEWuTj0%{yqS*KL;@OpC$WaiCv}%9{h?K5zHC;cj@kI zyh)jEwzqDX#CfA%YKpq~!oc+Pg?vERpB!iWw2y?U8otI;?EKXnLxZu1hPn z8G2~u&|x#gCXugqM7|z4pyZAe^>bbW`v6E}4q!xnj6}u~dD&etBZBu?BI}WCVP7d( zJ1d2C19c$PLs_#}XeM=W%FwL+>FwU_urvoA%Vuc~EmEN6uZr zlg@B5H_YHAi;7L25pIC8R1+y0EMz^vAce$;a*`YeDSI8HjNNZIe?M&4U!g1Y>fuXP86Cu*?CBS#5i4oVUF%$}#x5CLk4AS)w= z!r=*FFDR3S2uM-vWC@|$Az@A*xlb!mWq^Iq1oe?fk>`4Y!v{bqi~|^V`2pDrOXT&D ziWw37xyN1hYR*OQ#{|b!#LW+r$L`D@oyaWhR467lUx}q~&2xt50I zX`Kr%Yw&-IR+uvNEzky;8mSJ0e;)vungbY9{}0&)OXQhaF(ZPX8dHhoU`wD&khnW!+OH?3aRULlm7X=4}j$607mZXNp37beGHddF(ZN- zJaTWX)RMFHDcI9q%VunCquyaFdo!UAIzk@=9;nwtszV>|10bO}fDyV(LSu=%UQaP2 zf*Fs{-OcNA1)p*Rp8`H;Mu(Ky_Vrua2S9>z03-OFBsi9!AtSf8VnzffjNsIL->f+o z!9P=u;EB)9-`5HlX{(j4b?C=cA|KDISxlyT&*;~hzFSsC428op z`ZQ>UGCERFGuwlarszKd6C0h;FDu2BwF*^ID?=N!X^K>b6z2mV<8uIG{Kv`oSRyaQ zDP~0QgfTvedxc&<;|M+je2~{8)xqn103k;d04;n&gBkk^(l`(4DIYNof}de);D|rWOxo>4F4Kg3QN$yjHf%r zj0nE&G5oydTm)YrIIbt#@FROx;|gr+bh3B0bO{4OQ@EHM>)p(-&Y;XJDLMv6kuJ16l0kdZlnG4glGDp-P+-no$# zGa~pCV`NHemzBjsN8Auvr!05%;f2Tr827#T7Fm_#2P7SD3{kNAL*v zpe&A5hb-;`Ai+6+5&Yjsa4bQt#O3|@ zXeSn_J!Y_g2j+0J>-BXX5b1ye865=gFyVwH^0s0XQzCfBJBS&*TysoIAc8+2mGX>W zC$#^c@!K7}r#c$H$;w4I)`kCJ4TqX6!G{C4FY@oue8mG#~&8=SDHE_^#1Y|to0C@zK$nyxrln8D$9zogf3g&OZ5nccfG=D>?!~D$$Ktgi>BlK+~G?vJl zzbR%!aJvy2y(L?r13$CWBOxxO4b>yzLH-zyXreB{g4}wBM@tR3 z#}LEGzI(v(K5n@R+ED%doDYZsoU>;F{27W!ERnbPh`#|-BKSp5fS=Gt6u~bL9Cug< z@KBu;&8~sq!Bp@)c@qQ=cP&horw^=xlRSm9xmrmrXqM8IQsrDFso`yql01IUEFGAZ zWBw!Ia1$>8wD_^L1nRlUi^@ zONV!4Wn@vY$$PO!pe)ry%3T`ULRr1j3TR>Guy+CUQO6A)g=VN9LyAvQ+xjsd03Gk( z0LBfDksDx%ynakEBZA|W8|Z$!W1Q!Se995|6mUT2caZ8ZH}nCJ$Q;0kd>@I7CGvVQ z#f%8<_lUgt2`%3+<+LN~X{l`;m)3e$V+L884;u&VK3)k)?<#e zk4gEoX_4xXz;t9rfS{BfdYKRVaIZ7HA>z_mX*C~??u+h^9>8g@ zuQHdky|Oo+eL!S%&V@1hH^}H%BG1L~H(*KxuX~I>)`Bbi*;RahOpj-4G9@@?+APJD zW;~U6#-;CfO#XgoldOZ(EqcV@AD8+7NC6zcDByQU0a$`^CQoRJ84>)hr2u^(d1PO> ziX$~CecpT-cJTGUO*o+EW$WA@&^8mn_Xv)AjD0%y5h{NRmFJ^kyZn7r{#R*| z#n*!Db@cH=S%}2d_ux&R6CFbpmbkKGox5@>7L&!^0}a+%)pED2j2H@s2ihX&mX_&| zqE*@~(5%BimpxSeuvVg)7JfLhs73Ks+hzwo0GiVv903^jy5U{M0kK4$dnsl_PL<`PH(HN-f+~NbJ@I_Ek%jM)2A3m+UBmRD^GIKB2j5U0fxy0?2 zy}88)M8@Y_7~|hf#>WzQOYHcYTw=e+7@u;>qPCd`wh|l<5{&%^N3yl_>FER6=~ok(Cic;qdGdGyajHrO5Vf{4#FauQ&=@fhNeukfJe` z*SCBCI9mWCQ4aO%Nr9A2N{MaLIce{XF52AEtw!z(WL~jBov;m0J zjk>e(FSPgoNOTThL?5IG#1b@Z=b|fSL@?B^nV@mimVGMry%9>6zs*WZtM`zkEh4P! zZV?SlUn6x11<)1w0TTqs2BIO3Xb?&K)y?_4^>J7&m zHlQ6^3_*$(MZJOG1E7T>4q&|D2zdjRpwz;>K`|qOqsAMkV`*v5MX;aXxSs5FgLNwZ zLyAM5Ozn>7>gfYGN6?4Ea=V)g8dr5U7eFB52Pre+C0D*4&e_yX|}lN$1ZWhWf5E6L+=rKK7uTPllX!;6mfE<$TGUqOnu-L??o z1E8?w0LK4et$0GY3zoWOVRF(gBvpJ2|bGf)_n_bZ~{<{xL@Z9|Jzf+mY(v?LGh!oC6ra-yp%UM4q=R zX5gI<9>K?!((_Zz)k-z*G|X<82gj{a8UD?|fr!#9{LhK`ryVUk4NOr8Aa&5Vf!F*# z0MY^nFk1LM(gK#q3jxK92!7vaf%?3sH0L5%CODoU?LKTjo+X8?sZzYM0(ZolrIoY+ z`4E=BT1gAul$zVA^|^+I2X?n6$-P=j)UVw{{aUG(I9(e&@%C=k$StRL>wEf2x;I(d z9m)+TX5=ugJA9fTU~dK!Zq=J*wTnsL)2ah)6Uf(rcGo5y*}*m^d7E#8OnXd6g!o|5 zHkqK0&RFH0G(2MtfuwN=IdNdumM{B-jC~*1KCe1Vcz{!<37ce#>iJio{8$vZ5}L3~ z==Re)ie(WxuEocznl%v&z&s+m!A&ET&Ku>h4h->GK6G@mjq<){T!lOX3ZeW3zuUV2 z-UQ~yuoS^Dj3UM@MPQMJRF^j9^sqz(WB+)6z&tCEcrQx zk^e)M{8%J6E)`2~L&eBXqYH3L6PLGHh}?hdxSU{9SLok+2~BUO_+0PNX?4U{d-Leb zN^BmTUGYGM?FWT}f9vR!wIMK{!$6mW6P?dNc`G`Rr10oAI@`VmfzjFa5IFdhwyEwf zKLzbs-6xXNygrZOk4`U^<((YMc<1LVU&11}(WzJy!7m%{eA}Y))2<#q4V;h>`;hDu zon8z}evV<}|C%K~7RilH#gYhKHS$~0`J9#j4qsY`+-vI)}XBlXE>@@gM(N;e=@C$;13-{+L^Gk{eZe|l6S@t zw5$e1s$gdR&-QNqK}x5xHdy|%XnsjJ=Km~cz%oCQlwi6ve-|%?hqfJKVM|s5L6Q>4 z=84pcHA-_Dj%5u0W6Mlfg!X(L!z^9qYv8-&vv5eF0w>mg1lACQ5Ya+NA!dJb%jOKi%brFm^h@`)_A=|vz zyZNnbBWr`@Uqtgu!ZH7gpaIMLNK(vnY5s1q&5N$#u_Y_pAlYrU@nTuohGQASKWv!^ zi{xe-#hM6C`V4Pc7Xhs9P3UeDE0N~hZ1Z_n{Le#iE8BblNKdxeDt=aDnwNTaGb_u; z+TdX?p_@s`K4&wni(uVBB>lY&S?1;5&2MEHSsN_>GMZl!j`?2(4Or$!l47Mx^LLYFUUm(S zEm>Ix$!@cZ7t6{r9LpH~b<0dxBsa?_)uEG`08I;o`pr|XpA%d#vg$t5&V_$Rno!^Ir+X46@0~I z|0~cQZDjW$N%`8Z0xyQ80*+x+@Gq7Mut?r6w&Vd=62ZTER4{ra(tp*J{;R+T?UVH( zNlD8uy%)oho?{s4|JRZpi{vIN#gYiF8Zxd(W8qh{1S0sZg~+4F?xpq~f|oK)tv4WQ z8W#?hY${wympAwcaL7FFsiEvb(^d;bMjk}<*LqJtuzsZzgshDyPLsgG=1sC45)#4e zkaWcs&sz}mZERuQl2A_G`WhI|O7uwboY8+~n68oRn?7(B&K5M1D!zwl2|fVbgtPSP zrAauDupUq5@1nn|4XsDLuR=qX#gR1aQiiZkx`4^g#{M)pR8Q;KPkbZdHMiB*pcyMY zAlWHEycibe9K!@iG(?FQi{z#U#gYhaGXdh4Uv9aO{9V4Itncft4!+KHfFz~J%~xx@ zSe7n0meIw7mM*YJt}Ya7B6!H7i%n1b{HQB@uksBlVT8(!TC0;B{cd+Vw!P+g%SYmZb=eWfbudOA%OvhM~@2L9r%+ zhDQ+{4-FjAdy;f!;9$x9bZCdW_kC};>UskhrtAv8Uz^-*Ix>Hk>cz0s#4(JTe#uf3 z7RlWlQ7nnzS)(TGx-j+0ByYAZ_gaWNvD;nhF4l>fi}kr5|J$@jdsB|XH{VsnGCf|- zhm4_nG+7(ud=rJ0gwvzF3A(d-G$bkEpvBlo{0e)RZ@T{SO=ylT5y01P?Mw82fAL~i z{=zYgzr1Bx7mJXPPFN|HMDQ)+FFo`y-7lWJKs4K{o{I`QY+j;{ml`?_inVGq$ za8oNj-_j3{A30X7RNx_ey79F2JU+Y}&o9AqdmA4><_^!z&mDv3a2-Kol;_HGvorWi zy*?bu&CHf(=Z@nu^}bekHak;3dIZW9R$FVei-l4tyLuRw@Wbm-;Zgy=^^MQzn`}wa+(vUeuMVF!x$|E1iafa} z0JATqONZ6faunF+WB8)&63URhwg~t)cSuZRN!KhCrl-4mQ?K%3`I6jBedfiq;B}Ey zsC*({-KrjS))#xzXNICbd>NMDU6}Ytzd|xB;oBndiRJmW8SyQG_%nBY`EtSRu?i!_ z9Tr2D!xFr)Ei2$gM+XgJQ!tBGuZ{|py4grI!&R?Wx+t0Rg4&5Rt8)noV{{fgFMmNG zJHU;M9)ojaz?+`V0)`U^{)6<(RTtWdWT;xh)Si(g`WX$?SJF6a8%AZvr>EgOfHxAhKQib$W wTh8o!F-m5!mocsxv3|(oNk1ofE)~>zc)y+ks1@6Om`%{MI-~UAmfKJNA1THFVE_OC literal 18907 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 diff --git a/style/css/style.css b/style/css/style.css index d882469..9f76fb5 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -2,7 +2,10 @@ html { height: 100%; } body { - min-height: 100%; } + min-height: 100%; + background-color: #060113; + color: #968daa; + font-family: 'Rajdhani', sans-serif; } #mainContent { height: 100vh; } @@ -36,7 +39,15 @@ body { #header { min-height: 10%; display: flex; - justify-content: center; } + justify-content: center; + background-color: #120239; } + +.navbar-fixed-bottom { + background-color: #120239; + align-items: center; } + +#albumPreviews img { + border: 1px solid #210761; } #albumShelf { margin-left: 0; @@ -49,24 +60,20 @@ body { max-width: 150px; max-height: 150px; padding: 0; - flex-grow: 1; } + margin: 5px; + flex-grow: 1; + border: 1px solid #210761; + transition: border 0.5s ease-in; } + #albumShelf img:hover { + border: 1px solid #e5ce4b; } .selectedAlbumCover { - max-height: 150px; } + max-height: 150px; + border: 1px solid #e5ce4b; } .col-sm-4 { height: 100%; } -#allTracks, #chosenTracks { - border: 1px solid black; - min-height: 95%; } - -#allTracks li:hover { - color: blue; } - -#chosenTracks li:hover { - color: red; } - #trackBins { margin-top: 5%; height: 35%; } @@ -78,4 +85,55 @@ body { #inputArea button { margin-right: 10%; } +#allTracks, #chosenTracks { + border: 1px solid black; + min-height: 95%; + background-color: #030321; + border: 1px solid black; + box-shadow: inset 0 0 30px 2px black; } + +#allTracks li, #chosenTracks li { + color: #968daa; + transition: color 0.75s ease-in; } + +#allTracks li:hover { + color: #e5ce4b; + transition: color 0.1s; } + +#chosenTracks li:hover { + color: #353438; + transition: color 0.1s; } + +@-moz-keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +@-webkit-keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +@keyframes fadeIn { + from { + color: #e5ce4b; } + to { + color: #968daa; } } +#chosenTracks li { + -webkit-animation: fadeIn 1s; + -moz-animation: fadeIn 1s; + animation: fadeIn 1s; } + +.btn-primary, .btn-primary:focus { + background-image: none; + background-color: #210761; + border: none; + color: #e5ce4b; + transition: color 0.5s ease-in, background-color 0.5s ease-in; } + +.btn-primary:hover { + background-image: none; + background-color: #e5ce4b; + color: #210761; } + /*# sourceMappingURL=style.css.map */ diff --git a/style/css/style.css.map b/style/css/style.css.map index 547b716..e07b811 100644 --- a/style/css/style.css.map +++ b/style/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;;AAElB,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,eAAe,EAAE,YAAY;EAC7B,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,kBAAK;IACH,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC;;AAGhB,WAAW;EACT,MAAM,EAAE,IAAI;;AAEd,WAAW;EACT,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;;AAEzB,oBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,gBAAgB;EACd,SAAS,EAAE,MAAM;;AAGnB,OAAO;EACL,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,WAAW;EACT,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,GAAG;EACf,QAAQ,EAAE,IAAI;EACd,eAAK;IACH,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,SAAS,EAAE,CAAC;;AAIhB,mBAAmB;EACjB,UAAU,EAAE,KAAK;;AAInB,SAAS;EACP,MAAM,EAAE,IAAI;;AAId,yBAAyB;EACvB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,GAAG;;AAGjB,mBAAmB;EACjB,KAAK,EAAE,IAAI;;AAGb,sBAAsB;EACpB,KAAK,EAAE,GAAG;;AAIZ,UAAU;EACR,UAAU,EAAE,EAAE;EACd,MAAM,EAAE,GAAG;;AAIb,UAAU;EACR,UAAU,EAAE,EAAE;EACd,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,iBAAQ;IACN,YAAY,EAAE,GAAG", +"mappings": "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", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/style/scss/style.scss b/style/scss/style.scss index c4cc4f6..1fcf517 100644 --- a/style/scss/style.scss +++ b/style/scss/style.scss @@ -1,8 +1,19 @@ +$backgroundColor: #060113; +$textColor: #968daa; +$addTextColor: #e5ce4b; +$rmvTextColor: #353438; +$binColor: #030321; +$bannerBG: #120239; +$btnColor: #210761; + html{ height: 100%; } body{ min-height: 100%; + background-color: $backgroundColor; + color: $textColor; + font-family: 'Rajdhani', sans-serif; } #mainContent{ height: 100vh; @@ -41,8 +52,20 @@ body{ min-height: 10%; display: flex; justify-content: center; + background-color: $bannerBG; +} +.navbar-fixed-bottom{ + background-color: $bannerBG; + align-items: center; +} + +#albumPreviews img { + border: 1px solid $btnColor; } + + +//horizontal display of available albums #albumShelf{ margin-left: 0; margin-right: 0; @@ -54,12 +77,19 @@ body{ max-width: 150px; max-height: 150px; padding: 0; + margin: 5px; flex-grow: 1; + border: 1px solid $btnColor; + transition: border 0.5s ease-in; + &:hover{ + border: 1px solid $addTextColor; + } } } .selectedAlbumCover{ max-height: 150px; + border: 1px solid $addTextColor; } //columns each containing bin and desc. @@ -67,20 +97,6 @@ body{ height: 100%; } -//bin elements -#allTracks, #chosenTracks{ - border: 1px solid black; - min-height: 95%; -} - -#allTracks li:hover{ - color: blue; -} - -#chosenTracks li:hover{ - color: red; -} - //row containing both bins and album preview info #trackBins{ margin-top: 5%; @@ -96,3 +112,64 @@ body{ margin-right: 10%; } } + +//bin elements +#allTracks, #chosenTracks{ + border: 1px solid black; + min-height: 95%; + background-color: $binColor; + border: 1px solid black; + box-shadow: inset 0 0 30px 2px black; +} + + +//hover effects for song titles +#allTracks li, #chosenTracks li{ + color: $textColor; + transition: color 0.75s ease-in; +} + +#allTracks li:hover{ + color: $addTextColor; + transition: color 0.1s; +} + +#chosenTracks li:hover{ + color: $rmvTextColor; + transition: color 0.1s; +} +@-moz-keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +@-webkit-keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +@keyframes fadeIn { + from {color:$addTextColor;} + to {color:$textColor;} +} + +#chosenTracks li { + -webkit-animation: fadeIn 1s; + -moz-animation: fadeIn 1s; + animation: fadeIn 1s; +} + +.btn-primary, .btn-primary:focus{ + //get rid of bootstrap "shape" + background-image: none; + background-color: $btnColor; + border: none; + color: $addTextColor; + transition: color 0.5s ease-in, background-color 0.5s ease-in; +} + +.btn-primary:hover{ + background-image:none; + background-color: $addTextColor; + color: $btnColor; +} From 569ba564cc04dec86f3b19103cf234c8c1db8c1d Mon Sep 17 00:00:00 2001 From: Nancy Date: Thu, 8 Nov 2018 13:58:18 -0700 Subject: [PATCH 7/8] improved album resizing --- playlistScript.js | 7 +++--- .../style.scssc | Bin 37381 -> 37971 bytes style/css/style.css | 19 ++++++++--------- style/css/style.css.map | 2 +- style/scss/style.scss | 20 +++++++++++------- 5 files changed, 26 insertions(+), 22 deletions(-) diff --git a/playlistScript.js b/playlistScript.js index 9983c81..e6a62a5 100644 --- a/playlistScript.js +++ b/playlistScript.js @@ -154,9 +154,10 @@ fetch("https://lit-fortress-6467.herokuapp.com/object") albumArr[i].tracks = adeleTracks } //make elements for each album cover - var albumEl = document.createElement("img") - albumEl.setAttribute("src", `images/${albumArr[i].cover_art}`) - albumEl.setAttribute("alt", `album art for ${albumArr[i].title}`) + var albumEl = document.createElement("div") + albumEl.innerHTML = `album art for ${albumArr[i].title}` + // albumEl.setAttribute("src", `images/${albumArr[i].cover_art}`) + // albumEl.setAttribute("alt", `album art for ${albumArr[i].title}`) albumEl.setAttribute("id", albumArr[i].title) albumShelfEl.appendChild(albumEl) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index 7d115f245bbca8b602a58b9ba70e44fcdb874307..bb84768d531ff3d70e3bd34875ad40a08346b794 100644 GIT binary patch delta 8066 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 X+u5|E#6iA#k}i-BBu$-uuqEPuVrCoS delta 8123 zcmbtZYjjlA753abNM=4LkN(^wJo~3R_#9LKF*!t_D}nRa2|W_ zZ|`sK^SEc;xgd<374nMn%km3NrDY{WEiIb^CFSKs<>e)tLoJ(1DnsR!g(YPbEhWK< z*5a0;P}!!-d4+y>!WM6`?g;MA+tt?6w-tsmlcNHKh44+K6E6E5X1nO_6jP^&&bCtc z$l=2=ANZVh+gX86h|}7VAef$PF2xoqNWwW`@?HNVAy?sWP62rXx-;ysv8MFl89T{G zuxmyE`IrqYUo;PXz_A<9m0Li*Wn=G;c;Sm#Uie4ufJKPXK&s)P+3wtG1eitvqN2n! zDM?J1ri$5xqE#}ZgB7ByQ%sH*QzYS~$=7GTM#xM!G`m2U6$R~{lT<^0UICc{ z6L}eeI|?43l?^oruYhZ4W20}Ag{wGB`=eA;dE&Mc@M6YRwhjC?Fw!Vp+q6>d{K+DBPQ_yL|RFN%o|-qY6!*UL-bk0~CQU*Uu7 zRJ&k`hTRqU#5{SvBAqxBI>i#37`Hxli7%`uT<}%p>_n#q+&~k-T(7C}d8Xa!dPOvs zh51gmnQEZEBveLYI3@6PWis5TawNJmxjRw9&1?olUzYn;o3-2~m36S1qb;-{2}`5l z(-J$pQWb!AM1A3|f<(6u$9!<7+its?8(D>_a^cbzE8Gpy(0#W(c1N&hOIrsn1{WM# z=z{TT2h`88f^UWghUfTT^9(!bfEVTz2%XW;pRx!R&UKhMIjiB56d#PtWdvLHbHLS% ziPZ?km>8m9S!)(r#G3VSouWBjv~-G#OroVNmX-8knuaM|yJN-pRpK4%Zxfd+@x=v{ zzO!wOTJOpNU4wR~YHY57uIjQZBN@&()o{bxk^?@h_BI>Irg3{H>(_FUjf;=2x>|9m zxNH$FJ|ktFGgKK!!t^MVgWt`=^0V7*%|kY>d8jR-=Q#?MU{wP*=10e}s`(ZCb?)t?5enut;@@w*MeyQ0Q(hz8 zRh(^&>>oCZX*^d!+8=jVdLQ z@D|sj#N&cp?1VWB%$8g}u@Y`{B&RytYPs5zd^4FLVkTZJf7^K8<(e9#ZfAv86`MT&Ge)+l!?=9HiO6MvUp_|dp%>T7D1S9+lqJK6GDhMAgDf1Y~@EC$nSC|5|wYi3Jcm^wx2jN<+bB4AJ7#Yj%l#nE0QH&<7T?Lxd_$9%{6El7Pvgj2aGtrKJMXwj%^ z!wq_TnFqGj-9_5r)w=4ub~*fZ44*Z_!*34@za3`QukvhD9Z3QKXlH-`$p`+Yod6r{t zXH+Z3B;h#&s@qj$Nf_mdloMM7)paYYu+T2o>kF+D3X5EDb>#xmMVStC$xL@4)2tcJ zbQfCXg+_ZexH3HrYU@ip-Krl7WG zB5-;TCrR53dcZToXDGvQdZ2lR%koc-(*p%rZnI)Y5^l!8Tcs87*eZ8cZv*{q)pp4+X& z3JV%$kvQmRNQeEa7sAyBM_~3h-KvoHw1$kTh{hCaywwtT<)pjrV*KQ$uXr;yN zkt=NvyuEfd4t?v*247=JKpn;cWXaZv@s}#NtK2mwp==%5bc` z(4FJ540Ei#So9{vjwFmAlpW|7>528;tbGx1`w)&FgtV7MZ$}Wj)?wxl``|{G%konW zv5$VqniOS8c!XiZRVS$wItLrhdK!P!L|PVs_RPClKm)^sO@X4n+i|%R_3u#k$$_hghv3r;pN|-d>3BT^^}AdN8+34okjB}lr_i|3h{jO#0rW{m2f2}yW}F?LjSTBYcy9HZ8i88Z~qF?N(Oc18zxlrg4Q zlZ2;?7(1eZOTy3;7VIzEN69h9R(+q@dQ9Qv80F;{<;8If-Q&kCpOpF=gzH;4LGMk8zK$M5reMneGJJj&gFG z1yHxsY(1_7aGVBkoCaV!9v;APxLj$+3x*l`hg|UT&TL3(cfx1*Zd)o#lB-pI$}+{ZtMY2D~Zk9q(v`b)N^lLsNc^Dr#lQ4B~ljO-{OoJMO$ z7>$4)%QUX*2%`}gjXAn9prVXMkqbh`2%2b1&f@r3oW0tX$mG9%Dtg!2KK8{lM%ZXx55>^<+r-4g?6sC(g z0Oxk6{s{aDrosik=xv8*yXACz*R4;--kz{@oWL+>I;!;*eS)Q8PzOcDlvL0rOT~U8 zS5K%sNkUhIK2OD%mWnYY6=O6NV=NV8XkWJ`$8Jf*m6|Vxr)ZHRe652#1>XKNvtm&auE)V0 z{q^3{k#$3PngNqy z4KEJReL(*9cy!R`KNpF5E*zD1+0N`Wl+*#AW2s-R13t%q6@!vc$AGmDl7STOcqI5Z zqUjFNarOht#6eSvT5eQ8hdE9ku@ahenB(;0#7q=JlF-aRzd6M2hp=EE>~eD+t;yHH z1p|hcn{J)u^YZ0}>afdA4_dw#o=1ziZRP^b*02wse+~Gd;h;U?pw7evys(Ib%CK*p z;dp~%>x{~YB=~iztg_hg|KY*qWP;u9CfFwOX1*zrOen=WK}&OjZJ84Yqbtn`cxiY8 z{N;et#$P(f(2xO`{%|&Vc{2a-SHfi4(L-dt{s&`*atcZPaew|DNU%A`M~(vj(zZ9BH~V?&l_zoA!U21*ONcGGEj6#j63 YR+9XaVpV3TIs-r6|M2AB9tg(%2UF7jy#N3J diff --git a/style/css/style.css b/style/css/style.css index 9f76fb5..e052046 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -33,9 +33,6 @@ body { display: flex; justify-content: center; } -.container-fluid { - max-width: 1000px; } - #header { min-height: 10%; display: flex; @@ -53,19 +50,21 @@ body { margin-left: 0; margin-right: 0; display: flex; - justify-content: space-between; - max-height: 20%; - overflow: auto; } + justify-content: center; + height: 25%; + overflow: hidden; } #albumShelf img { - max-width: 150px; - max-height: 150px; + height: 150px; padding: 0; - margin: 5px; - flex-grow: 1; border: 1px solid #210761; transition: border 0.5s ease-in; } #albumShelf img:hover { border: 1px solid #e5ce4b; } + #albumShelf div { + flex-grow: 1; + padding: 5px; + display: flex; + justify-content: center; } .selectedAlbumCover { max-height: 150px; diff --git a/style/css/style.css.map b/style/css/style.css.map index e07b811..87ee370 100644 --- a/style/css/style.css.map +++ b/style/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAQA,IAAI;EACF,MAAM,EAAE,IAAI;;AAEd,IAAI;EACF,UAAU,EAAE,IAAI;EAChB,gBAAgB,EAbA,OAAO;EAcvB,KAAK,EAbK,OAAO;EAcjB,WAAW,EAAE,sBAAsB;;AAErC,YAAY;EACV,MAAM,EAAE,KAAK;;AAGf,cAAc;EACZ,eAAe,EAAE,YAAY;EAC7B,MAAM,EAAE,IAAI;EACZ,WAAW,EAAE,IAAI;EACjB,kBAAK;IACH,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,CAAC;;AAGhB,WAAW;EACT,MAAM,EAAE,IAAI;;AAEd,WAAW;EACT,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;;AAEzB,oBAAoB;EAClB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;;AAGzB,gBAAgB;EACd,SAAS,EAAE,MAAM;;AAGnB,OAAO;EACL,UAAU,EAAE,GAAG;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,gBAAgB,EAjDP,OAAO;;AAmDlB,oBAAoB;EAClB,gBAAgB,EApDP,OAAO;EAqDhB,WAAW,EAAE,MAAM;;AAGrB,kBAAmB;EACjB,MAAM,EAAE,iBAAmB;;AAM7B,WAAW;EACT,WAAW,EAAE,CAAC;EACd,YAAY,EAAE,CAAC;EACf,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,UAAU,EAAE,GAAG;EACf,QAAQ,EAAE,IAAI;EACd,eAAK;IACH,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,OAAO,EAAE,CAAC;IACV,MAAM,EAAE,GAAG;IACX,SAAS,EAAE,CAAC;IACZ,MAAM,EAAE,iBAAmB;IAC3B,UAAU,EAAE,mBAAmB;IAC/B,qBAAO;MACL,MAAM,EAAE,iBAAuB;;AAKrC,mBAAmB;EACjB,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,iBAAuB;;AAIjC,SAAS;EACP,MAAM,EAAE,IAAI;;AAId,UAAU;EACR,UAAU,EAAE,EAAE;EACd,MAAM,EAAE,GAAG;;AAIb,UAAU;EACR,UAAU,EAAE,EAAE;EACd,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,QAAQ;EACzB,iBAAQ;IACN,YAAY,EAAE,GAAG;;AAKrB,yBAAyB;EACvB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,GAAG;EACf,gBAAgB,EAnHP,OAAO;EAoHhB,MAAM,EAAE,eAAe;EACvB,UAAU,EAAE,wBAAwB;;AAKtC,+BAA+B;EAC7B,KAAK,EA9HK,OAAO;EA+HjB,UAAU,EAAE,mBAAmB;;AAGjC,mBAAmB;EACjB,KAAK,EAlIQ,OAAO;EAmIpB,UAAU,EAAE,UAAU;;AAGxB,sBAAsB;EACpB,KAAK,EAtIQ,OAAO;EAuIpB,UAAU,EAAE,UAAU;;AAExB,sBAGC;EAFG,IAAK;IAAC,KAAK,EA3IA,OAAO;EA4IlB,EAAG;IAAC,KAAK,EA7ID,OAAO;AAgJnB,yBAGC;EAFG,IAAK;IAAC,KAAK,EAhJA,OAAO;EAiJlB,EAAG;IAAC,KAAK,EAlJD,OAAO;AAqJnB,iBAGC;EAFG,IAAK;IAAC,KAAK,EArJA,OAAO;EAsJlB,EAAG;IAAC,KAAK,EAvJD,OAAO;AA0JnB,gBAAiB;EACb,iBAAiB,EAAE,SAAS;EAC5B,cAAc,EAAE,SAAS;EACzB,SAAS,EAAE,SAAS;;AAGxB,gCAAgC;EAE9B,gBAAgB,EAAE,IAAI;EACtB,gBAAgB,EA9JP,OAAO;EA+JhB,MAAM,EAAE,IAAI;EACZ,KAAK,EApKQ,OAAO;EAqKpB,UAAU,EAAE,iDAAiD;;AAG/D,kBAAkB;EAChB,gBAAgB,EAAC,IAAI;EACrB,gBAAgB,EA1KH,OAAO;EA2KpB,KAAK,EAvKI,OAAO", +"mappings": "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", "sources": ["../scss/style.scss"], "names": [], "file": "style.css" diff --git a/style/scss/style.scss b/style/scss/style.scss index 1fcf517..064e58e 100644 --- a/style/scss/style.scss +++ b/style/scss/style.scss @@ -45,7 +45,7 @@ body{ } .container-fluid{ - max-width: 1000px; + //max-width: 1000px; } #header{ @@ -70,21 +70,25 @@ body{ margin-left: 0; margin-right: 0; display: flex; - justify-content: space-between; - max-height: 20%; - overflow: auto; + justify-content: center; + height: 25%; + overflow: hidden; & img{ - max-width: 150px; - max-height: 150px; + height: 150px; padding: 0; - margin: 5px; - flex-grow: 1; + //flex-grow: 1; border: 1px solid $btnColor; transition: border 0.5s ease-in; &:hover{ border: 1px solid $addTextColor; } } + & div{ + flex-grow: 1; + padding: 5px; + display: flex; + justify-content: center; + } } .selectedAlbumCover{ From 2f56809edb7b7c6ac46ca70b1abba2d4643d4a7b Mon Sep 17 00:00:00 2001 From: Nancy Date: Thu, 8 Nov 2018 14:06:21 -0700 Subject: [PATCH 8/8] Fixed scrollbar on album bin --- .../style.scssc | Bin 37971 -> 37967 bytes style/css/style.css | 2 +- style/css/style.css.map | 2 +- style/scss/style.scss | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) diff --git a/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc b/style/.sass-cache/208a20bc46f6bb470820bfd01bde55c05dcdc82f/style.scssc index bb84768d531ff3d70e3bd34875ad40a08346b794..f2c44671b80aec7ea363a14ba367fa028c963d3b 100644 GIT binary patch delta 101 zcmcb-g6aGUCOu<4Gd%+?LqkhLBO?<_Q$vF!Q&S_8lq5rgv=qzaB%r8aqIrsiNs_Tq zTB5~9y`AQ)oQb6+`IFz7n@oNzAwSvCLTR#!r10i4i|zi5Z#V08OlM&MDcF3vr-K~; D3gsbN delta 104 zcmX@Vg6Z-KCOu<4Gd%;Yl#~>6OEY7`WD6rpbF-u*qqHQGBvbR$ zn0fL>y`AQ4+!>iEDXEhilY}S#Ggo4in5<~wz$mdf$>O9x