Browse Source

Improved search box, made each comment HTML block retain it's database ID

master
pop1040 4 years ago
parent
commit
c95aecea98
  1. 35
      index.html
  2. 28
      main.css
  3. 2
      main.js

35
index.html

@ -19,24 +19,31 @@
</div>
<div id="comments">
<h2 class="center">Ideas:</h2>
<div id="search" class="center">
<div class="ATF-container paddVertically">
<div class="comment-display">
<div id="search">
<h2 class="left-header">
Search
</h2>
<div>
<input id="search-comment-name" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
<span>Name</span>
<div></div>
<div class="ATF-container paddVertically">
<div>
<input id="search-comment-name" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
<span>Name</span>
<div></div>
</div>
</div>
<div class="ATF-container paddVertically">
<div>
<input id="search-comment-text" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
<span>Text</span>
<div></div>
</div>
</div>
</div>
</div>
<div class="ATF-container paddVertically">
<div>
<input id="search-comment-text" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
<span>Text</span>
<div></div>
</div>
</div>
</div>
<div id="commentsContent">
<div id="commentsContent">
</div>
</div>
</div>
</div>

28
main.css

@ -141,9 +141,33 @@ input#commentModal:checked + div{
padding: 5px 15px;
}
#comments{
/* padding: 0 10%; */
}
#search > div.ATF-container{
.comment-display{
display: flex;
flex-direction: column;
align-items: center;
}
#search{
/* border: 1px solid grey; */
border-radius: 16px;
background-color: rgb(241, 241, 241);
padding: 8px;
}
#search .ATF-container{
background-color: transparent;
}
#search .ATF-container input{
background-color: transparent;
width: inherit;
}
#search div.ATF-container{
padding-left: 10px;
padding-right: 10px;
}
h2.left-header{
color: rgb(131, 131, 131);
margin: 0;
margin-left: 8px;
font-size: 20px;
}

2
main.js

@ -25,7 +25,7 @@ function search(user, text){
comEl.innerHTML = '';
response.comments.forEach((com)=>{
comEl.insertAdjacentHTML('beforeend',
`<div class="comment">
`<div class="comment" nodeID="${com.id}">
<p class="comment-username">
${com.name}
</p>

Loading…
Cancel
Save