From c504543f26df874c81b5af89976b4a88d8dab988 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Mon, 1 Jun 2020 21:21:29 +0200 Subject: [PATCH] add comments section -> songPanel.js --- .../index/indexPanel/panels/songPanel.js | 106 +++++++++++++++++- src/styles/songPanel.scss | 73 +++++++++++- 2 files changed, 171 insertions(+), 8 deletions(-) diff --git a/src/pages/index/indexPanel/panels/songPanel.js b/src/pages/index/indexPanel/panels/songPanel.js index 053838c..e3d275c 100644 --- a/src/pages/index/indexPanel/panels/songPanel.js +++ b/src/pages/index/indexPanel/panels/songPanel.js @@ -7,7 +7,8 @@ const SongPanel = () => { useEffect( () => generateTitleCode() ) useEffect( () => setTextHeight() ) - const [openDescription, setOpen] = useState(-1) + const [openDescription, setOpenDescription] = useState(-1) + const [openComments, setOpenComments] = useState(false) // ANSI: ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟ @@ -36,6 +37,26 @@ const SongPanel = () => { document.getElementById('songText').style = 'height: ' + (textDivHeight - 50) + 'px;' } + const activeCommentDiv = () => { + let commentsDiv = document.getElementById('comments') + let commentAddInput = document.getElementById('commentAddInput') + let commentAddButton = document.getElementById('commentAddButton') + if ( openComments ) { + commentAddInput.placeholder = 'type comment (or click to exit)' + commentsDiv.style = 'height: ' + ((window.innerHeight / 2) - 50) + 'px;' + commentAddInput.style = 'width: 60%;' + commentAddButton.style = 'display: block;' + setOpenComments( !openComments ) + } + else { + commentAddInput.placeholder = '(click to show comments)' + commentsDiv.style = 'height: 0px;' + commentAddInput.style = 'width: 100%;' + commentAddButton.style = 'display: none;' + setOpenComments( !openComments ) + } + } + let exampleText = [ '[Zwrotka Rzukk]\n', 'Znam wielu co robią zajebistą muzykę, kolego,\n', @@ -116,6 +137,54 @@ const SongPanel = () => { } } + let exampleComments = [ + { + ip: '192.168.0.1', + city: 'Rzeszów', + text: 'Ciekawe' + }, + { + ip: '192.168.1.10', + city: 'Arłamów', + text: 'ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + ] + return (
@@ -146,7 +215,7 @@ const SongPanel = () => { 
 setOpen( -1 ) : () => setOpen( key )}
+                                                        onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
                                                         dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
                                                     
 {
                                                     
 setOpen( -1 ) : () => setOpen( link )}
+                                                        onClick={ openDescription === link ? () => setOpenDescription( -1 ) : () => setOpenDescription( link )}
                                                         dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
@@ -178,7 +247,7 @@ const SongPanel = () => { 
 setOpen( -1 ) : () => setOpen( key )}
+                                                        onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
                                                         dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
                                                     
 {
                                             )
                                         }
                                     }
-                                    else
+                                    else {
                                         return (
                                             
                                                 {row}
                                             

                                         )
+                                    }
                                 }
                             ) 
                         }
@@ -204,6 +274,32 @@ const SongPanel = () => {
+
+ { exampleComments.map( (comment, key) => { + return ( +
+
+ { comment.ip + ' ( ' + comment.city + ' )' } +
+
+ { comment.text } +
+
+ ) + } + ) + } +
+
+ activeCommentDiv() }> + +
+ Add comment +
+
diff --git a/src/styles/songPanel.scss b/src/styles/songPanel.scss index 7aafecb..61807d7 100644 --- a/src/styles/songPanel.scss +++ b/src/styles/songPanel.scss @@ -39,11 +39,13 @@ #songText { width: 95%; - overflow: hidden; overflow-y: scroll; padding-right: 5%; margin-bottom: 50px; + -ms-overflow-style: none; + scrollbar-width: none; + .textSection { width: 100%; height: auto; @@ -81,10 +83,75 @@ } } + #songText::-webkit-scrollbar { + display: none; + } + #songComments { width: 90%; - height: auto; - padding: 5%; + height: 50%; + padding-right: 5%; + margin-top: 50px; + + #comments { + height: 0px; //420px + overflow-y: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + transition-duration: 0.5s; + + .commentDiv { + width: 100%; + height: auto; + padding-bottom: 20px; + + .commentInfo { + padding-bottom: 10px; + } + + .commentText { + margin-left: 20px; + } + } + } + + #comments::-webkit-scrollbar { + display: none; + } + + #commentAdd { + width: 100%; + height: 50px; + display: flex; + + input { + width: 100%; + padding-right: 5%; + padding-left: 5%; + height: 50px; + color: rgba(172,36,36,1); + font-family: Ubuntu; + background-color: black; + border: solid 1px rgba(172,36,36,1); + } + + input::placeholder { + font-family: Ubuntu; + color: rgba(172,36,36,1); + } + + #commentAddButton { + width: 25%; + height: 32.5px; + padding-top: 18.5px; + margin-left: 5%; + display: none; + + font-size: 12px; + text-align: center; + border: solid 1px rgba(172,36,36,1); + } + } } #albumSongs {