0.0.4

css/main.css

@@ -188,12 +188,6 @@ sm-popup sm-input:not(:last-of-type) {
 sm-popup sm-textarea {
   margin-top: 1rem;
 }
-sm-popup sm-textarea::part(textarea) {
-  border-radius: 0.4rem;
-}
-sm-popup p {
-  margin-block-end: 1rem;
-}
 
 .popup-header {
   padding: 1.5rem;
@@ -208,7 +202,7 @@ sm-popup p {
   stroke-width: 10;
   cursor: pointer;
 }
-.popup-header sm-button {
+.popup-header sm-button, .popup-header button {
   width: auto;
   margin-left: auto;
 }
@@ -251,6 +245,9 @@ button:disabled {
   font-weight: 500;
   margin-bottom: 1.5rem;
 }
+#confirmation .flex {
+  margin-top: 1rem;
+}
 #confirmation .flex sm-button:first-of-type {
   margin-right: 0.6em;
   margin-left: auto;
@@ -282,6 +279,7 @@ button:disabled {
   width: auto;
 }
 .copy-row h4 {
+  font-family: "Roboto", sans-serif;
   margin-bottom: 0;
   font-weight: 400;
 }
@@ -402,13 +400,9 @@ button:disabled {
   border-radius: 2rem;
 }
 
-sm-input::part(input) {
-  border-radius: 0.4rem;
-}
-
 #sheets_container {
   gap: 2rem 1.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
   margin-bottom: 3rem;
   animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
@@ -452,7 +446,8 @@ sm-input::part(input) {
   transform: scale(0.95);
 }
 .sheet-card .card {
-  border-radius: 0.8rem;
+  position: relative;
+  border-radius: 0.4rem;
   background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
   background-size: contain;
   padding: 1rem;
@@ -468,6 +463,18 @@ sm-input::part(input) {
   text-align: center;
   max-width: 90%;
 }
+.sheet-card h5 {
+  font-family: "Roboto", sans-serif;
+  background: rgba(var(--text-color), 0.1);
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 0.5rem 0;
+  padding: 0.4rem 0.6rem;
+  border-radius: 0.2rem 0 0 0.2rem;
+  font-weight: 500;
+  opacity: 0.8;
+}
 
 #sheet_page {
   width: 100vw;
@@ -480,6 +487,15 @@ sm-input::part(input) {
   opacity: 0.9;
 }
 
+#sheet_type {
+  padding: 0.3rem 0.6rem;
+  border-radius: 0.3rem;
+  margin: 0 1rem;
+  font-weight: 500;
+  opacity: 0.8;
+  background: rgba(var(--text-color), 0.1);
+}
+
 #sheet_description {
   margin-top: 0.8rem;
   opacity: 0.8;
@@ -526,6 +542,9 @@ sm-input::part(input) {
 #sheet_details .flex:first-of-type {
   margin-bottom: 1rem;
 }
+#sheet_details .flex:nth-of-type(2) {
+  margin-bottom: 1rem;
+}
 #sheet_details .flex:not(:first-of-type) {
   margin-bottom: 0.3rem;
 }
@@ -550,7 +569,8 @@ sm-input::part(input) {
   opacity: 0.9;
 }
 #sheet_details.collapse #sheet_description,
-#sheet_details.collapse #sheet_editors {
+#sheet_details.collapse #sheet_editors,
+#sheet_details.collapse #sheet_type {
   display: none;
 }
 
@@ -578,10 +598,6 @@ table input:disabled {
   border: transparent;
 }
 
-thead {
-  background-color: rgba(var(--text-color), 0.1);
-}
-
 th {
   position: sticky;
   top: 0;
@@ -692,6 +708,13 @@ td {
   font-weight: 400;
 }
 
+#user_popup sm-button {
+  margin-top: 0.5rem;
+}
+#user_popup section:not(:last-of-type) {
+  margin-bottom: 1.5rem;
+}
+
 @media screen and (min-width: 640px) {
   sm-popup::part(popup) {
     width: 24rem;
@@ -730,6 +753,12 @@ td {
     transform: none;
   }
 }
+@media screen and (min-width: 1920px) {
+  #home_page, #main_header {
+    grid-template-columns: 1fr 60vw 1fr;
+    grid-template-areas: ". main .";
+  }
+}
 @media (any-hover: hover) {
   :root {
     scrollbar-width: thin;

css/main.scss

@@ -182,12 +182,6 @@ sm-popup{
     }
     sm-textarea{
         margin-top: 1rem;
-        &::part(textarea){
-            border-radius: 0.4rem;
-        }
-    }
-    p{
-        margin-block-end: 1rem;
     }
 }
 
@@ -203,7 +197,7 @@ sm-popup{
         stroke-width: 10;
         cursor: pointer;
     }
-    sm-button{
+    sm-button, button{
         width: auto;
         margin-left: auto;
     }
@@ -245,6 +239,7 @@ button {
     }
 
     .flex {
+        margin-top: 1rem;
         sm-button:first-of-type {
             margin-right: 0.6em;
             margin-left: auto;
@@ -280,10 +275,10 @@ button {
     gap: 0.5rem;
     width: auto;
     h4 {
+        font-family: 'Roboto', sans-serif;
         margin-bottom: 0;
         font-weight: 400;
     }
-
     .icon {
         cursor: pointer;
         padding: 0.4rem;
@@ -406,13 +401,9 @@ button {
     border-radius: 2rem;
 }
 
-sm-input::part(input){
-    border-radius: 0.4rem;
-}
-
 #sheets_container{
     gap: 2rem 1.5rem;
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
     margin-bottom: 3rem;
     animation: slide-up 0.6s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
@@ -458,7 +449,8 @@ sm-input::part(input){
         transform: scale(0.95);
     }
     .card{
-        border-radius: 0.8rem;
+        position: relative;
+        border-radius: 0.4rem;
         background: url(card-bg2.svg) center, rgba(var(--text-color), 0.06);
         background-size: contain;
         padding: 1rem;
@@ -474,6 +466,18 @@ sm-input::part(input){
         text-align: center;
         max-width: 90%;
     }
+    h5{
+        font-family: 'Roboto', sans-serif;
+        background: rgba(var(--text-color), 0.1);
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0.5rem 0;
+        padding: 0.4rem 0.6rem;
+        border-radius: .2rem 0 0 .2rem;
+        font-weight: 500;
+        opacity: 0.8;
+    }
 }
 
 #sheet_page{
@@ -485,6 +489,14 @@ sm-input::part(input){
     font-weight: 600;
     opacity: 0.9;
 }
+#sheet_type{
+    padding: 0.3rem 0.6rem;
+    border-radius: 0.3rem;
+    margin: 0 1rem;
+    font-weight: 500;
+    opacity: 0.8;
+    background: rgba(var(--text-color), 0.1);
+}
 #sheet_description{
     margin-top: 0.8rem;
     opacity: 0.8;
@@ -524,6 +536,9 @@ sm-input::part(input){
     .flex:first-of-type{
         margin-bottom: 1rem;
     }
+    .flex:nth-of-type(2){
+        margin-bottom: 1rem;
+    }
     .flex:not(:first-of-type){
         margin-bottom: 0.3rem;
         .icon{
@@ -547,7 +562,8 @@ sm-input::part(input){
             opacity: 0.9;
         }
         #sheet_description,
-        #sheet_editors{
+        #sheet_editors,
+        #sheet_type{
             display: none;
         }
     }
@@ -574,9 +590,6 @@ table{
         }
     }
 }
-thead{
-    background-color: rgba(var(--text-color), 0.1);
-}
 th{
     position: sticky;
     top: 0;
@@ -683,6 +696,15 @@ td{
     font-weight: 400;
 }
 
+#user_popup{
+    sm-button{
+        margin-top: 0.5rem;
+    }
+    section:not(:last-of-type){
+        margin-bottom: 1.5rem;
+    }
+}
+
 @media screen and (min-width: 640px){
     sm-popup::part(popup){
         width: 24rem;
@@ -718,6 +740,12 @@ td{
         transform: none;
     }
 }
+@media screen and (min-width: 1920px){
+    #home_page, #main_header{
+        grid-template-columns: 1fr 60vw 1fr;
+        grid-template-areas: '. main .';
+    }
+}
 @media (any-hover: hover){
     :root{
         scrollbar-width: thin;

index.html

@@ -47,8 +47,7 @@
             //document.getElementById("loading-screen").classList.remove("hide")
             //clear Rendered Elements
             /*clearElement(document.getElementById('person-list'))*/
-            clearElement(document.getElementById('sheets_container'))
+            clearElement(sheetsContainer)
-            clearElement(document.getElementById('sheet_container'))
             //set the custom Privkey input
             floDapps.setCustomPrivKeyInput(() => {
                 return new Promise((resolve, reject) => {
@@ -155,9 +154,15 @@
                     <path d="M.5,47.52V6.5a6,6,0,0,1,6-6h41" />
                 </svg>
             </div>
+            <sm-button id="sign_out_btn" onclick="signOut()">Sign out</sm-button>
+        </section>
+        <section>            
+            <h4>Theme</h4>
+            <div class="flex align-center space-between">
+                <p>Turn dark theme on/off.</p>
+                <sm-switch id="theme_switcher"></sm-switch>
+            </div>
         </section>
-        <sm-switch id="theme_switcher"></sm-switch>
-        <sm-button id="sign_out_btn" onclick="signOut()">Sign out</sm-button>
     </sm-popup>
     <sm-popup id="new_sheet_popup">
         <header class="popup-header" slot="header">
@@ -169,10 +174,12 @@
             <h4>
                 Create new sheet
             </h4>
-            <sm-button variant="primary">Create</sm-button>
+            <button onclick="createSheet()" class="primary-btn expand" type="submit" disabled>
+                Create
+            </button>
         </header>
-        <sm-input placeholder="Name"></sm-input>
+        <sm-input placeholder="Name" required></sm-input>
-        <sm-textarea placeholder="Description"></sm-textarea>
+        <sm-textarea placeholder="Description" required></sm-textarea>
     </sm-popup>
     <sm-popup id="group_by">
         <div>Group Title By</div>
@@ -183,7 +190,8 @@
                 <option value="avg">Avg</option>
                 <option value="max">Max</option>
                 <option value="min">Min</option>
-            </select><select></select>
+            </select>
+            <select></select>
         </div>
         <div class="table-container" id="group_by_view"></div>
     </sm-popup>
@@ -206,7 +214,7 @@
             <section id="main_section">
                 <header class="flex align-center space-between section-header">
                     <h4>Sheets</h4>
-                    <sm-input placeholder="Search sheets" type="search"></sm-input>
+                    <sm-input id="search_sheets" placeholder="Search sheets" type="search"></sm-input>
                 </header>
                 <section id="sheets_container" class="grid"></section>
             </section>
@@ -234,6 +242,7 @@
                             <line y1="45.5" x2="42" y2="45.5"/>
                         </svg>
                         <h3 id="sheet_heading"></h3>
+                        <h5 id="sheet_type"></h5>
                         <svg id="toggle_details" class="icon justify-right" onclick="toggleDetails()" viewBox="0 0 64 64">
                             <title>expand/collapse</title>
                             <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
@@ -242,7 +251,12 @@
                     <div id="sheet_editors" class="flex align-center"></div>
                     <p id="sheet_description"></p>
                 </section>
-                <div id="sheet_container"></div>
+                <div id="sheet_container">
+                    <table>                        
+                        <thead><tr></tr></thead>
+                        <tbody></tbody>
+                    </table>
+                </div>
                 <form id="new-log" style="display: none;" onsubmit="enterLog(event); return false;"></form>
                 <button type="submit" form="new-log" style="display: none;"></button>
             </section>
@@ -501,6 +515,7 @@
             document.addEventListener('input', e => {
                 if (e.target.closest('sm-input')) {
                     let input = e.target.closest('sm-input')
+                    if(!input.closest('sm-popup')) return
                     formValidation(input)
                     if(input.value === '')
                         input.setValidity('')
@@ -555,13 +570,44 @@
                     else if (e.target.closest(".person-card"))
                         copyToLogInput(e.target.closest(".person-card").dataset.floId)
                     else if (e.target.closest("th")){
-                        sortTable(e.target.cellIndex, e.target.closest('th').classList.contains('descending'))
+                        sortTable(e.target.closest("th").cellIndex, e.target.closest('th').classList.contains('descending'))
                         e.target.closest('th').classList.toggle('descending')
                     }
                 } catch (error) {
                     //do nothing
                 }
             })
+            const observer = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if(entry.isIntersecting){
+                        let {title, description, editors, attributes, sheet, isWriteable, isSubAdmin} = floGlobals.currentSheet
+                        renderSheetView(title, description, editors, attributes, sheet, isWriteable, isSubAdmin, true, true)
+                        observer.disconnect()
+                    }
+                })
+            })
+            const watchLastElement = new MutationObserver(mutations => {
+                mutations.forEach(mutation => {
+                    if(mutation.addedNodes.length){
+                        observer.observe(mutation.addedNodes[mutation.addedNodes.length - 1])
+                    }
+                })  
+            })
+            watchLastElement.observe(tableBody, {childList: true, subtree: true})
+
+            document.getElementById('search_sheets').addEventListener('input', function() {
+                if(this.value.trim !== ''){
+                    for(child of sheetsContainer.children) {
+                        if(child.id === 'add_new_sheet') continue
+                        if(child.dataset.name.toUpperCase().indexOf(this.value.toUpperCase()) > -1){
+                            child.classList.remove('hide-completely')
+                        }
+                        else{
+                            child.classList.add('hide-completely')
+                        }
+                    }
+                }
+            })
         })
 
         function removeUnderscore(word){
@@ -570,11 +616,16 @@
 
         const render = {
             sheetCard(sheetName, editors){
-                let card = document.createElement('div')
+                let card = document.createElement('div'),
+                    type = 'Public'
                 card.classList.add('sheet-card')
                 card.setAttribute('data-name', sheetName)
+                if(editors)
+                    type = 'Private'
                 card.innerHTML = `
-                    <div class="card"></div>
+                    <div class="card">
+                        <h5>${type}</h5>
+                    </div>
                     <h4>${removeUnderscore(sheetName)}</h4>
                 `
                 return card
@@ -615,7 +666,7 @@
             else
                 mainHeader.classList.remove('hide-completely')
             if(page === 'home_page')
-                sheetContainer.innerHTML = ''
+                tableBody.innerHTML = ''
         }
 
         function signOut() {
@@ -779,7 +830,7 @@
                     allFormElements.forEach(element => element.disabled = false)
                     form.reset();
                     notify('Log entry successful', 'success')
-                    let row = sheetContainer.getElementsByTagName("tbody")[0].insertRow(1);
+                    let row = tableBody.insertRow(0);
                     row.insertCell().textContent = floID
                     row.insertCell().innerHTML = `<input type="text" class="grade-input" disabled>`
                     log.forEach(l => row.insertCell().textContent = l)
@@ -830,8 +881,8 @@
             peopleContainer.append(frag)           
         }
 
-        function renderSheetList(sheetList = {}) {
+        const sheetsContainer = document.getElementById("sheets_container")
-            let sheetHolder = document.getElementById("sheets_container")
+        function renderSheetList(sheetList) {
             for(sheet in sheetList){
                 frag.append(render.sheetCard(sheet, sheetList[sheet].editors))
             }
@@ -851,7 +902,7 @@
                 ` 
                 frag.prepend(firstCard)
             }
-            sheetHolder.append(frag)
+            sheetsContainer.append(frag)
         }
 
         function createTh(text){
@@ -867,12 +918,16 @@
 
         const   sheetContainer = document.getElementById('sheet_container'),
                 sheetHeading = document.getElementById('sheet_heading'),
+                sheetType = document.getElementById('sheet_type'),
                 sheetDescription = document.getElementById('sheet_description'),
-                sheetEditors = document.getElementById('sheet_editors')
+                sheetEditors = document.getElementById('sheet_editors'),
+                tableHeader = sheetContainer.firstElementChild.firstElementChild,
+                tableBody = sheetContainer.firstElementChild.children[1]
         let startingIndex = 0,
             endingIndex = 0
 
         function renderSheetView(title, description, editors, attributes, sheet, isWriteable, isSubAdmin, onlyRenderTable = false, lazyLoad = false) {
+            if(!lazyLoad)
             floGlobals.currentSheet = {
                 title,
                 description,
@@ -882,14 +937,6 @@
                 isWriteable,
                 isSubAdmin,
             }
-            if(lazyLoad){
-                startingIndex = sheet.length > endingIndex ? endingIndex : sheet.length
-                endingIndex = sheet.length - endingIndex > 20 ? endingIndex + 20 : sheet.length 
-                console.log('lazy...')
-            }else{
-                startingIndex = 0
-                endingIndex = sheet.length > 20 ? 20 : sheet.length 
-            }
             const parseVectorClock = (vc) => {
                 vc = vc.split('_')
                 let time = new Date(parseInt(vc[0])).toString().slice(4, 24);
@@ -917,12 +964,19 @@
                 }
                 return gradeField
             }
+            if(lazyLoad){
+                startingIndex = sheet.length > endingIndex ? endingIndex : sheet.length
+                endingIndex = sheet.length - endingIndex > 20 ? endingIndex + 20 : sheet.length 
+            }else{
+                startingIndex = 0
+                endingIndex = sheet.length > 20 ? 20 : sheet.length 
+            }
             if(!onlyRenderTable){
                 showPage('sheet_page')
-
                 //Add Sheet Details
                 sheetHeading.textContent = removeUnderscore(title);
                 if(editors){
+                    sheetType.textContent = 'Private'
                     editors.forEach(editor =>{
                         let card = document.createElement('div')
                         card.className = 'editor'
@@ -932,24 +986,27 @@
                     sheetEditors.innerHTML = 'Maintained by: '
                     sheetEditors.append(frag)
                 }
-                else
+                else{
-                    sheetEditors.textContent = "Public";
+                    sheetType.textContent = 'Public'
+                    sheetEditors.innerHTML = ''
+                }
                 sheetDescription.textContent = description;
+                clearElement(tableHeader)
+                let row = tableHeader.insertRow();
+                row.append(createTh("FLO ID"), createTh("Grade"));
+                attributes.forEach(a => row.append(createTh(a)))
+                //Add input fields if writable
+                if (isWriteable && !lazyLoad) {
+                    let row = tableHeader.insertRow();
+                    row.insertCell().innerHTML = `<input form="new-log" class="log-input" type="text">`;
+                    row.insertCell().textContent = ``;
+                    attributes.forEach(a => row.insertCell().innerHTML = `<input form="new-log" class="log-input" type="text">`);
+                }
             }
-            let table
             if(onlyRenderTable){
-                table = sheetContainer.querySelector('table')
+                if(!lazyLoad)
-                sheetContainer.querySelector('tbody').remove()
+                    tableBody.innerHTML = ''
             }
-            else{
-                //Create and add the sheet table
-                table = document.createElement("table")
-                let thead = table.createTHead()
-                let head = thead.insertRow(0)
-                head.append(createTh("FLO ID"), createTh("Grade"));
-                attributes.forEach(a => head.append(createTh(a)))
-            }
-            let tbody = document.createElement("tbody")
             for(let i = startingIndex; i < endingIndex; i++){
                 let data = sheet[i]
                 let row = document.createElement('tr')
@@ -959,17 +1016,8 @@
                 data.log.forEach(l => row.append(createCell(l)))
                 frag.append(row)
             }
-            tbody.append(frag)
+            tableBody.append(frag)
-            //Add input fields if writable
-            if (isWriteable) {
-                let row = tbody.insertRow(0);
-                row.insertCell().innerHTML = `<input form="new-log" class="log-input" type="text">`;
-                row.insertCell().textContent = ``;
-                attributes.forEach(a => row.insertCell().innerHTML = `<input form="new-log" class="log-input" type="text">`);
-            }
-            table.appendChild(tbody);
             if(!onlyRenderTable){
-                clearElement(sheetContainer).appendChild(table);
                 //Add options for groupBy 
                 document.getElementById('group_by').children[0].textContent = `Group ${title} by`;
                 document.getElementById('group_by_view').innerHTML =
@@ -1056,7 +1104,6 @@
                             return b.log[n-2] - a.log[n-2]
                     })
             }    
-            console.log(floGlobals.currentSheet.sheet[0])
             let {title, description, editors, attributes, sheet, isWriteable, isSubAdmin} = floGlobals.currentSheet
             renderSheetView(title, description, editors, attributes, sheet, isWriteable, isSubAdmin, true, false)
         }