0.0.6
This commit is contained in:
sairaj mote
parent
42a4caf7e1
commit
c72262e49d
@ -2210,7 +2210,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
setTimeout(() => {
|
||||
this.threshold = this.popup.getBoundingClientRect().height * 0.3
|
||||
}, 200);
|
||||
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
|
||||
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
|
||||
})
|
||||
|
||||
this.popupHeader.addEventListener('touchstart', (e) => {
|
||||
|
||||
56
css/main.css
56
css/main.css
@ -259,17 +259,17 @@ button:disabled {
|
||||
}
|
||||
#sign_in_popup h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
#sign_in_popup h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#sign_in_popup button {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
#sign_in_popup p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0 !important;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.copy-row {
|
||||
@ -392,6 +392,10 @@ button:disabled {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#main_section > header sm-input {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#user_icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
@ -482,6 +486,11 @@ button:disabled {
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#sheet_page.toggle-side-bar #side_bar {
|
||||
transition: transform 0.3s;
|
||||
z-index: 10;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
#sheet_heading {
|
||||
font-weight: 600;
|
||||
@ -816,6 +825,10 @@ td {
|
||||
.column-card {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.column-card h5 {
|
||||
font-weight: 500;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
.column-card .icon {
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
@ -841,6 +854,32 @@ td {
|
||||
grid-area: close;
|
||||
}
|
||||
|
||||
#save_button {
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 20;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000010, 0 0 1rem #00000016;
|
||||
transform: translateY(1rem);
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
#save_button #changes_indicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0.5rem;
|
||||
height: 100%;
|
||||
background: red;
|
||||
}
|
||||
#save_button sm-button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
#group_by_view {
|
||||
overflow: auto;
|
||||
@ -848,6 +887,10 @@ td {
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 640px) {
|
||||
.hide-on-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
sm-popup::part(popup) {
|
||||
width: 24rem;
|
||||
}
|
||||
@ -874,6 +917,9 @@ td {
|
||||
#sheet_page.toggle-side-bar {
|
||||
grid-template-columns: 19rem 1fr;
|
||||
}
|
||||
#sheet_page.toggle-side-bar #side_bar {
|
||||
z-index: initial;
|
||||
}
|
||||
#sheet_page:not(.toggle-side-bar) #side_bar {
|
||||
grid-template-columns: 1fr;
|
||||
position: fixed;
|
||||
@ -888,6 +934,10 @@ td {
|
||||
#group_by::part(popup) {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
#save_button {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px) {
|
||||
#home_page, #main_header {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -253,11 +253,12 @@ button {
|
||||
}
|
||||
h3 {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -265,8 +266,7 @@ button {
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0 !important;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
.copy-row {
|
||||
@ -393,6 +393,14 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
#main_section{
|
||||
& > header{
|
||||
sm-input{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#user_icon{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
@ -485,6 +493,11 @@ button {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
&.toggle-side-bar #side_bar{
|
||||
transition: transform 0.3s;
|
||||
z-index: 10;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
#sheet_heading{
|
||||
font-weight: 600;
|
||||
@ -794,6 +807,10 @@ td{
|
||||
}
|
||||
.column-card{
|
||||
padding: 0.4rem 0.6rem;
|
||||
h5{
|
||||
font-weight: 500;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.icon{
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
@ -819,6 +836,32 @@ td{
|
||||
}
|
||||
}
|
||||
|
||||
#save_button{
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 2rem);
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
z-index: 20;
|
||||
box-shadow: 0 0.1rem 0.1rem #00000010, 0 0 1rem #00000016;
|
||||
transform: translateY(1rem);
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
#changes_indicator{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0.5rem;
|
||||
height: 100%;
|
||||
background: red;
|
||||
}
|
||||
sm-button{
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px){
|
||||
#group_by_view{
|
||||
overflow: auto;
|
||||
@ -826,6 +869,9 @@ td{
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 640px){
|
||||
.hide-on-desktop{
|
||||
display: none;
|
||||
}
|
||||
sm-popup::part(popup){
|
||||
width: 24rem;
|
||||
}
|
||||
@ -848,6 +894,9 @@ td{
|
||||
#sheet_page{
|
||||
&.toggle-side-bar{
|
||||
grid-template-columns: 19rem 1fr;
|
||||
#side_bar{
|
||||
z-index: initial;
|
||||
}
|
||||
}
|
||||
&:not(.toggle-side-bar) #side_bar{
|
||||
grid-template-columns: 1fr;
|
||||
@ -864,6 +913,9 @@ td{
|
||||
width: 80vw;
|
||||
}
|
||||
}
|
||||
#save_button{
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1920px){
|
||||
#home_page, #main_header{
|
||||
|
||||
59
index.html
59
index.html
@ -125,8 +125,9 @@
|
||||
<div class="container-header">
|
||||
<h3>Sign In</h3>
|
||||
</div>
|
||||
<h4 class="expand light-text">Welcome to RanchiMall Pay.<br>Please enter your FLO private key to
|
||||
continue.</h4>
|
||||
<h4 class="expand light-text">Welcome to RanchiMall FLO LogSheet.</h4>
|
||||
<p>Please enter your FLO private key to
|
||||
continue.</p>
|
||||
<sm-input id="get_priv_key_field" privateKey placeholder="Private Key" type="password" required animate>
|
||||
</sm-input>
|
||||
<button id="sign_in_btn" class="primary-btn expand" type="submit" disabled>
|
||||
@ -233,7 +234,7 @@
|
||||
</div>
|
||||
<div class="flex align-center space-between top-margin">
|
||||
Make sheet private
|
||||
<sm-switch onchange="toggleEditors()"></sm-switch>
|
||||
<sm-switch id="sheet_type_switch" onchange="toggleEditors()"></sm-switch>
|
||||
</div>
|
||||
<div id="specify_editors" class="grid hide-completely">
|
||||
<div class="flex direction-column">
|
||||
@ -274,6 +275,13 @@
|
||||
</div>
|
||||
<div class="table-container" id="group_by_view"></div>
|
||||
</sm-popup>
|
||||
|
||||
<div id="save_button" class="hide flex align-center space-between" data-unsaved="0">
|
||||
<span id="changes_indicator"></span>
|
||||
<span>Changes needs to be saved!</span>
|
||||
<sm-button>Save</sm-button>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<header id="main_header" class="grid">
|
||||
<div class="flex align-center space-between">
|
||||
@ -300,9 +308,13 @@
|
||||
</section>
|
||||
<section id="sheet_page" class="page toggle-side-bar grid hide-completely">
|
||||
<nav id="side_bar">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon hide-on-desktop" onclick="toggleSideBar()" viewBox="0 0 64 64">
|
||||
<title>Go back to sheet</title>
|
||||
<polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
|
||||
</svg>
|
||||
<h4 class="section-header">People</h4>
|
||||
<sm-button class="small sub-admin-option" onclick="showPopup('add_person_popup')">Add person</sm-button>
|
||||
<sm-button class="small sub-admin-option justify-right" onclick="showPopup('add_person_popup')">Add person</sm-button>
|
||||
</div>
|
||||
<div id="people_container" class="grid"></div>
|
||||
</nav>
|
||||
@ -873,14 +885,14 @@
|
||||
})
|
||||
}
|
||||
|
||||
/*document.getElementById('save-button').children[1].addEventListener("click", function (e) {
|
||||
document.getElementById('save_button').children[2].addEventListener("click", function (e) {
|
||||
logSheet.commitUpdates().then(result => {
|
||||
this.parentNode.classList.add('hide')
|
||||
this.parentNode.classList.remove('no-transformations')
|
||||
this.parentNode.dataset["unsaved"] = '0'
|
||||
notify("Save Successful")
|
||||
}).catch(error => notify(`Save Unsuccessful [${error}]`, error))
|
||||
})*/
|
||||
})
|
||||
|
||||
const firstSelect = document.getElementById('first_select')
|
||||
const secondSelect = document.getElementById('second_select')
|
||||
@ -929,16 +941,16 @@
|
||||
return element;
|
||||
}
|
||||
|
||||
let banner = document.getElementById('save_button')
|
||||
function showSave() {
|
||||
let banner = document.getElementById('save-button')
|
||||
banner.dataset["unsaved"] = parseInt(banner.dataset["unsaved"]) + 1
|
||||
banner.classList.add('hide');
|
||||
banner.classList.remove('no-transformations');
|
||||
banner.classList.add('hide');
|
||||
setTimeout(() => {
|
||||
banner.style.background = `#F${Math.max(9 - parseInt(banner.dataset["unsaved"]), 0)}0`;
|
||||
banner.children[0].style.background = `#F${Math.max(9 - parseInt(banner.dataset["unsaved"]), 0)}0`;
|
||||
banner.classList.add('no-transformations');
|
||||
banner.classList.remove('hide');
|
||||
}, 500)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function addPerson() {
|
||||
@ -950,9 +962,8 @@
|
||||
for (let i = 0; i < fields.length; i += 2)
|
||||
otherDetails[fields[i].textContent] = fields[i + 1].textContent
|
||||
console.log(fields, otherDetails)
|
||||
return
|
||||
logSheet.addPerson(floID, name, otherDetails)
|
||||
renderPersonCard(floID, logSheet.viewPerson(floID))
|
||||
peopleContainer.append(render.personCard(floID, logSheet.viewPerson(floID)))
|
||||
hidePopup()
|
||||
notify(`Added Person: ${floID}`)
|
||||
showSave()
|
||||
@ -962,7 +973,8 @@
|
||||
}
|
||||
|
||||
const sheetTitleInput = document.getElementById('sheet_title_input'),
|
||||
sheetDescriptionInput = document.getElementById('sheet_description_input')
|
||||
sheetDescriptionInput = document.getElementById('sheet_description_input'),
|
||||
sheetTypeSwitch = document.getElementById('sheet_type_switch')
|
||||
|
||||
function createSheet() {
|
||||
try {
|
||||
@ -971,14 +983,20 @@
|
||||
let columns = []
|
||||
let editors = []
|
||||
columnsContainer.querySelectorAll('.column-title').forEach(column => columns.push(column.textContent))
|
||||
if(!columns.length){
|
||||
notify('Every LogSheet should contain atleast 1 column.', 'error')
|
||||
return
|
||||
}
|
||||
editorsContainer.querySelectorAll('.editor-address').forEach(editor => editors.push(editor.textContent))
|
||||
return
|
||||
if (editors === '')
|
||||
editors = floGlobals.subAdmins;
|
||||
else if (editors.toUpperCase() === 'PUBLIC')
|
||||
if(!sheetTypeSwitch.checked)
|
||||
editors = null;
|
||||
else
|
||||
if(!editors.length)
|
||||
editors = floGlobals.subAdmins;
|
||||
logSheet.createNewSheet(title, description, columns, editors)
|
||||
renderSheetList([title])
|
||||
let sheet = {}
|
||||
sheet[title] = {editors}
|
||||
renderSheetList(sheet)
|
||||
hidePopup()
|
||||
notify(`Created New Sheet: ${title}`)
|
||||
showSave()
|
||||
@ -1062,10 +1080,11 @@
|
||||
|
||||
const sheetsContainer = document.getElementById("sheets_container")
|
||||
function renderSheetList(sheetList) {
|
||||
console.log(sheetList)
|
||||
for(sheet in sheetList){
|
||||
frag.append(render.sheetCard(sheet, sheetList[sheet].editors))
|
||||
}
|
||||
if(floGlobals.subAdmins.includes(myFloID)){
|
||||
if(floGlobals.subAdmins.includes(myFloID) && !document.getElementById('add_new_sheet')){
|
||||
let firstCard = document.createElement('div')
|
||||
firstCard.id = 'add_new_sheet'
|
||||
firstCard.classList.add('sheet-card')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user