From 91d46135d3f60a0f343d195096e4a4d415a1906a Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 19 Oct 2020 04:21:16 +0530 Subject: [PATCH] 0.0.4 --- css/main.css | 65 ++++++++++++++------ css/main.min.css | 2 +- css/main.scss | 64 ++++++++++++++------ index.html | 153 +++++++++++++++++++++++++++++++---------------- 4 files changed, 194 insertions(+), 90 deletions(-) diff --git a/css/main.css b/css/main.css index 9155eb9..de79453 100644 --- a/css/main.css +++ b/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; diff --git a/css/main.min.css b/css/main.min.css index e0d002a..d252b2c 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -a,h1,h2,h3,h4,h5{font-weight:600}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.copy-row .copy,.overflow-ellipsis,th{white-space:nowrap}.person-card,button{-webkit-tap-highlight-color:transparent}.capitalize,button{text-transform:capitalize}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}#confirmation h4,.bottom-margin{margin-bottom:1.5rem}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}#main_header h4,.section-header h4{font-size:1.2rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}sm-input::part(input),sm-popup sm-textarea::part(textarea){border-radius:.4rem}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.top-margin{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.align-center{align-items:center}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}#main_header h5,.section-header h4{opacity:.8;font-weight:500}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}sm-popup sm-textarea{margin-top:1rem}sm-popup p{margin-block-end:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;align-items:center;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,.sheet-card h4{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-top:1rem;margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;margin-top:1rem;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card,#right,#sheet_container,.sheet-card,table{position:relative}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{border-radius:.8rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#sheet_details .flex:first-of-type{margin-bottom:1rem}#sheet_details .flex:not(:first-of-type){margin-bottom:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}thead{background-color:rgba(var(--text-color),.1)}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;transform:none}}@media (any-hover:hover){:root{scrollbar-width:thin}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}} \ No newline at end of file +a,h1,h2,h3,h4,h5{font-weight:600}.align-center,.popup-header{align-items:center}.copy-row .copy,.overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap}.capitalize,button{text-transform:capitalize}.person-card,button{-webkit-tap-highlight-color:transparent}.copy-row .copy,.overflow-ellipsis,th{white-space:nowrap}*{box-sizing:border-box;padding:0;margin:0;font-family:Roboto,sans-serif}button,h1,h2,h3,h4,h5{font-family:Poppins,sans-serif}body{--accent-color:#169685;--text-color:17,17,17;--text-color-light:85,85,85;--foreground-color:255,255,255;--background-color:rgba(var(--foreground-color), 1);--dark-shade:#f8f8f8;--hue:255;--saturation:61%;--lightness:39%;color:rgba(var(--text-color),1);font-size:16px;background:var(--dark-shade);background-size:cover}body[data-theme=dark]{--accent-color:#00BFA6;--text-color:238,238,238;--text-color-light:170,170,170;--foreground-color:26,26,26;--background-color:#111;--dark-shade:#080808;--hue:255;--saturation:39%;--lightness:70%}a{text-decoration:none;color:var(--accent-color)}.dark-text{color:#111}h1{font-size:3.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1rem}h5{font-size:.8rem}p{line-height:1.5;max-width:65ch;color:rgba(var(--text-color),.9)}strong{font-weight:500}::-moz-focus-inner{border:none}.bottom-padding{padding-bottom:1.5rem}.top-padding{padding-top:1em}.bottom-margin{margin-bottom:1.5rem}.top-margin{margin-top:1.5rem}#confirmation .flex,#main_loader sm-button,#sign_in_popup p,sm-popup sm-textarea{margin-top:1rem}.flex{display:flex}.grid{display:grid}.grid-2{grid-template-columns:auto auto;gap:1em}.direction-column{flex-direction:column}.justify-right{margin-left:auto}.space-between{justify-content:space-between}.label{margin-bottom:.4rem}.light-text{opacity:.7}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.breakable{word-break:break-all}.overflow-ellipsis{overflow:hidden}.separator{padding:.1em}.no-transformations{transform:none!important}.icon{height:1.2rem;width:1.2rem;overflow:visible;stroke:rgba(var(--text-color),1);opacity:.8;fill:none;stroke-width:6;stroke-linejoin:round;stroke-linecap:round}sm-popup sm-input:not(:last-of-type){margin-bottom:1rem}.popup-header{padding:1.5rem;padding-bottom:0;display:flex;width:100%}.popup-header .icon{margin-right:1rem;padding:.2rem;stroke-width:10;cursor:pointer}.popup-header button,.popup-header sm-button{width:auto;margin-left:auto}button{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.2rem;font-weight:600;cursor:pointer;border-radius:.3rem;color:var(--accent-color);transition:transform .3s;border:none;background:rgba(var(--text-color),.1)}#main_header h5,.copy-row h4,.sheet-card h4,.sheet-card h5{font-family:Roboto,sans-serif}button:focus{outline:solid thin}button:disabled{cursor:default;background:rgba(var(--text-color),.4)}.primary-btn{background:var(--accent-color);justify-content:center;color:rgba(var(--foreground-color),1)}#main_header,#sign_in_popup::part(background){background:rgba(var(--foreground-color),1)}#confirmation,.sheet-card{flex-direction:column}#confirmation h4{font-weight:500;margin-bottom:1.5rem}#confirmation .flex sm-button:first-of-type{margin-right:.6em;margin-left:auto}#sign_in_popup h3{margin-top:2rem}#sign_in_popup h4{font-weight:500;margin-bottom:3rem}#sign_in_popup button{margin:1rem 0}#sign_in_popup p{margin-bottom:0!important}.copy-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem;width:auto}.copy-row h4{margin-bottom:0;font-weight:400}.copy-row .icon{cursor:pointer;padding:.4rem;height:1.8rem;width:1.8rem}.copy-row .copy{overflow:hidden}#main_loader{text-align:center;place-content:center;height:100vh;width:100vw;position:fixed;left:0}#main_loader svg,.loader{fill:none;height:2rem;overflow:visible}#main_loader sm-button{margin-left:0;width:max-content;justify-self:center}#main_loader svg{width:2rem;stroke:var(--accent-color);stroke-width:6;stroke-linecap:round;stroke-dashoffset:210;stroke-dasharray:210;justify-self:center;align-self:center;margin-bottom:2rem}#main_loader h3{width:100%;font-weight:400;word-spacing:.16em}.loader{stroke-width:10;stroke:var(--accent-color);width:2rem;stroke-dashoffset:230;stroke-dasharray:230;padding:2px;justify-self:center}.animate-loader{animation:load 2.6s infinite,rotate 1s infinite linear}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes load{50%{stroke-dashoffset:0}100%{stroke-dashoffset:-210}}#main_header{padding:1rem;box-shadow:0 .1rem .2rem #00010}#main_header h5{font-weight:500;opacity:.8}#main_header h4{font-size:1.2rem}#home_page{padding:1rem 1.5rem}.section-header{position:sticky;top:0;z-index:1;background:var(--dark-shade);padding:1rem 0;margin-bottom:1rem}.section-header h4{font-size:1.2rem;opacity:.8;font-weight:500}#user_icon{width:2.4rem;height:2.4rem;padding:.6rem;cursor:pointer;background:rgba(var(--text-color),.1);border-radius:2rem}#sheets_container{gap:2rem 1.5rem;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));margin-bottom:3rem;animation:slide-up .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-up{from{transform:translateY(2rem)}to{transform:none}}#add_new_sheet .icon{height:2rem;width:2rem;stroke-width:10;stroke:#fff;stroke-linecap:square;opacity:1;top:50%;transform:translateY(-50%);position:absolute}#add_new_sheet .card{display:flex;align-items:center;justify-content:center;position:relative;background:url(card-bg1.svg),#A7003E;background-size:cover}.sheet-card{position:relative;display:flex;align-items:center;cursor:pointer}.sheet-card:active .card{transform:scale(.95)}.sheet-card .card{position:relative;border-radius:.4rem;background:url(card-bg2.svg) center,rgba(var(--text-color),.06);background-size:contain;padding:1rem;padding-top:66%;width:100%;transition:box-shadow .3s,transform .3s}#sheet_type,.sheet-card h5{background:rgba(var(--text-color),.1)}.sheet-card h4{font-weight:400;opacity:.9;margin-top:.8rem;text-align:center;max-width:90%}.sheet-card h5{position:absolute;top:0;right:0;margin:.5rem 0;padding:.4rem .6rem;border-radius:.2rem 0 0 .2rem;font-weight:500;opacity:.8}#sheet_editors .editor,table input{background:rgba(var(--text-color),.06)}#right,#sheet_container,table{position:relative}#sheet_page{width:100vw;height:100vh;overflow-x:hidden}#sheet_heading{font-weight:600;opacity:.9}#sheet_type{padding:.3rem .6rem;border-radius:.3rem;margin:0 1rem;font-weight:500;opacity:.8}#sheet_description{margin-top:.8rem;opacity:.8}#sheet_editors{gap:.5rem;flex-wrap:wrap;color:rgba(var(--text-color),.7);font-size:.9rem}#sheet_editors .editor{padding:.4rem .6rem;border-radius:.4rem}#go_to_home,#toggle_details{height:2.4rem;width:2.4rem;padding:.7rem;cursor:pointer}#go_to_home,#go_to_home+h5{transform:translateX(-1rem);cursor:pointer}#go_to_home+h5{font-weight:500;opacity:.9}#toggle_details{transform:rotateX(180deg);transition:transform .3s}#sheet_details{padding:1rem;margin-bottom:1rem}#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:.3rem}#sheet_details .flex:not(:first-of-type) .icon{cursor:pointer;margin-right:1rem;height:100%}#sheet_details.collapse{padding:.5rem 1rem;margin-bottom:0}#sheet_details.collapse .flex{margin-bottom:0}#sheet_details.collapse #toggle_details{transform:none}#sheet_details.collapse #sheet_heading{font-size:1.2rem;font-weight:600;opacity:.9}#sheet_details.collapse #sheet_description,#sheet_details.collapse #sheet_editors,#sheet_details.collapse #sheet_type{display:none}#sheet_container{overflow:auto;max-height:100%;bottom:0;max-width:100%}table input{padding:.4rem;border:thin solid;font-size:1rem;width:100%;border-radius:.3rem;color:inherit}table input:disabled{border:transparent}th{position:sticky;top:0;background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),rgba(var(--foreground-color),1);text-align:left;line-height:1;font-weight:500;z-index:1;padding:1rem .8rem;box-shadow:0 .2rem .4rem #00020}tr:nth-of-type(2n){background-color:rgba(var(--text-color),.04)}td{padding:.4rem .8rem;opacity:.9}.grade-input{width:10ch}#side_bar{position:fixed;transform:translateX(-100%);background:var(--dark-shade)}#side_bar .section-header{padding:1rem;margin-bottom:0;background:inherit}#right{display:flex;flex-direction:column;overflow:auto;max-height:100vh;background:rgba(var(--foreground-color),1);animation:slide-right .6s forwards cubic-bezier(.175,.885,.32,1.275)}@keyframes slide-right{from{transform:translateX(-2rem)}to{transform:translateX(0)}}#people_container{overflow:auto;max-height:calc(100vh - 3.6rem);gap:1.5rem}.person-card{display:grid;align-items:center;grid-template-columns:auto 1fr;grid-template-areas:"initials ." "initials .";cursor:pointer;padding:0 1rem;transition:transform .3s}.person-card:active{transform:scale(.95)}.person-card:first-of-type{margin-top:1.5rem}.person-card:last-of-type{margin-bottom:2rem}.person-initials{grid-area:initials;display:flex;justify-content:center;height:2.6rem;width:2.6rem;font-size:1.2rem!important;font-weight:500;align-items:center;border-radius:2rem;margin-right:1rem;text-transform:uppercase;opacity:1!important;color:var(--accent-color);background:rgba(var(--text-color),.06)}.person-name{font-size:.9rem;opacity:.9;font-weight:500;text-transform:capitalize}.person-flo-id{opacity:.7;font-weight:400}#user_popup sm-button{margin-top:.5rem}#user_popup section:not(:last-of-type){margin-bottom:1.5rem}@media screen and (min-width:640px){sm-popup::part(popup){width:24rem}#main_header{padding:1.2rem 3rem}#home_page,#main_header{grid-template-columns:1fr 80vw 1fr;grid-template-areas:". main ."}#main_header>div,#main_section{grid-area:main}#sheets_container{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}#sheet_page.toggle-side-bar{grid-template-columns:19rem 1fr}#sheet_page:not(.toggle-side-bar) #side_bar{grid-template-columns:1fr;position:fixed;transform:translateX(-100%)}#side_bar{position:relative;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}::-webkit-scrollbar{width:.7rem;height:.7rem}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(var(--text-color),.2)}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.4)}#people_container::-webkit-scrollbar{width:.4rem}#right{z-index:1;box-shadow:-.5rem 0 .5rem #00010}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index d7eed49..36be367 100644 --- a/css/main.scss +++ b/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; diff --git a/index.html b/index.html index 40f63ac..b6ca0b3 100644 --- a/index.html +++ b/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(document.getElementById('sheet_container')) + clearElement(sheetsContainer) //set the custom Privkey input floDapps.setCustomPrivKeyInput(() => { return new Promise((resolve, reject) => { @@ -155,9 +154,15 @@ + Sign out + +
+

Theme

+
+

Turn dark theme on/off.

+ +
- - Sign out
@@ -169,10 +174,12 @@

Create new sheet

- Create +
- - + +
Group Title By
@@ -183,7 +190,8 @@ - + +
@@ -206,7 +214,7 @@

Sheets

- +
@@ -234,6 +242,7 @@

+
expand/collapse @@ -242,7 +251,12 @@

-
+
+ + + +
+
@@ -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 = ` -
+
+
${type}
+

${removeUnderscore(sheetName)}

` 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 = `` log.forEach(l => row.insertCell().textContent = l) @@ -830,8 +881,8 @@ peopleContainer.append(frag) } - function renderSheetList(sheetList = {}) { - let sheetHolder = document.getElementById("sheets_container") + const sheetsContainer = 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 - sheetEditors.textContent = "Public"; + else{ + 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 = ``; + row.insertCell().textContent = ``; + attributes.forEach(a => row.insertCell().innerHTML = ``); + } } - let table if(onlyRenderTable){ - table = sheetContainer.querySelector('table') - sheetContainer.querySelector('tbody').remove() + if(!lazyLoad) + 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) - //Add input fields if writable - if (isWriteable) { - let row = tbody.insertRow(0); - row.insertCell().innerHTML = ``; - row.insertCell().textContent = ``; - attributes.forEach(a => row.insertCell().innerHTML = ``); - } - table.appendChild(tbody); + tableBody.append(frag) 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) }