diff --git a/components.js b/components.js index ec49741..ef67c2e 100644 --- a/components.js +++ b/components.js @@ -362,11 +362,15 @@ smCopy.innerHTML = ` } .copy{ display: grid; - gap: 1rem; + gap: 0.5rem; padding: var(--padding); align-items: center; grid-template-columns: minmax(0, 1fr) auto; } +.copy-content{ + overflow-wrap: break-word; + word-wrap: break-word; +} .copy-button{ display: inline-flex; justify-content: center; diff --git a/css/main.css b/css/main.css index 07a61a2..0cb60d6 100644 --- a/css/main.css +++ b/css/main.css @@ -38,6 +38,9 @@ body[data-theme=dark] * { --foreground-color: rgb(20, 20, 20); --danger-color: rgb(255, 106, 106); } +body[data-theme=dark] ::-webkit-calendar-picker-indicator { + filter: invert(1); +} p { max-width: 70ch; @@ -697,40 +700,43 @@ ul { font-weight: 500; } -#intern_info { - flex-direction: column; +#intern_info_popup .grid > * { + justify-self: center; } - -#intern_info div { - display: flex; - flex-direction: row; - align-items: center; +#intern_info_popup #update_intern_score { width: 100%; + margin-top: 1rem; +} + +#intern_info__initials { margin-bottom: 1rem; + position: relative; + height: 3rem; + width: 3rem; + font-size: 1.3rem; +} +#intern_info__initials::before { + content: ""; + position: absolute; + background-color: inherit; + border-radius: inherit; + height: calc(100% + 1.5rem); + width: calc(100% + 1.5rem); + opacity: 0.3; + z-index: -1; } -#intern_info div span { - flex: 1; - word-break: break-all; - font-size: 0.9rem; +#intern_info__name { + font-size: 1.5rem; + margin-bottom: 0.5rem; } -#intern_info .gold-fill { +.gold-fill { fill: #FF5722; } -#intern_info #update_intern_score h4 { - margin: 0; - font-size: 2rem; -} - -#intern_info h3 { - text-transform: capitalize; -} - -#intern_info h4, -#intern_info h5 { - margin-top: 0.5rem; +#intern_info__score { + font-size: 1.5rem; } #project_info { @@ -845,6 +851,7 @@ ul { .assigned-interns { display: flex; flex-wrap: wrap; + margin-bottom: 1rem; } .assigned-interns .assigned-intern { @@ -1218,6 +1225,20 @@ ul { gap: 1.5rem; } +input[type=date] { + padding: 0.5rem; + border: rgba(var(--text-color), 0.2) solid thin; + border-radius: 0.3rem; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: rgba(var(--text-color), 0.06); +} +input[type=date]:focus { + outline: none; + box-shadow: 0 0 0 0.1rem var(--accent-color); +} + .search__icon { height: 1.2rem; width: 1.2rem; diff --git a/css/main.min.css b/css/main.min.css index a5c8cea..85e5c7d 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}#loading_page,#sign_in_page{place-content:center;z-index:5}#admin_page__left,#admin_page__left sm-tab-panels{overflow-y:hidden}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem;background-color:rgba(var(--text-color),.06)}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.task-description,.task__description,.timeline-task__description,.update__message{white-space:pre-line}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5,.nav-list__item{font-size:.8rem}.uppercase{text-transform:uppercase}#intern_info h3,#watch_project_button,.assigned-interns .assigned-intern,.branch-button,.capitalize,.project-card,.update__topic{text-transform:capitalize}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;align-items:center;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;display:flex;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;display:flex;align-items:center}.nav-list__item{display:flex;flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;top:0;bottom:0;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s;grid-template-columns:minmax(0,1fr)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}#intern_info h4,#intern_info h5,.update__topic{margin-top:.5rem}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-weight:500;font-size:1rem;text-transform:uppercase;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info{flex-direction:column}#intern_info div{display:flex;flex-direction:row;align-items:center;width:100%;margin-bottom:1rem}#intern_info div span{flex:1;word-break:break-all;font-size:.9rem}#intern_info .gold-fill{fill:#FF5722}#intern_info #update_intern_score h4{margin:0;font-size:2rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.task-list-item h4{font-weight:500;margin:0}.task-list-item .title{grid-area:title;line-height:1.6}.task-list-item .assigned-interns{grid-area:interns}.task__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0}.assigned-interns{display:flex;flex-wrap:wrap}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;text-align:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start;grid-template-columns:minmax(0,1fr)}.task-card{display:grid;padding:1rem;border-radius:.5rem;grid-template-columns:minmax(0,1fr);background-color:var(--foreground-color)}#user_role,.task__project-title{font-weight:500;border-radius:.3rem}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important;background-color:rgba(var(--text-color),.06)}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#admin_page__left sm-tab{justify-content:center}#admin_page__left sm-tab-panels,#admin_page__left sm-tab-panels>*{height:100%;flex-direction:column}#admin_page__left .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;padding:.4rem .8rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file +.hide,.ripple{pointer-events:none}.fab,.interact,.nav-list__item{-webkit-tap-highlight-color:transparent}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#5D54A4;--text-color:17,17,17;--background-color:240,240,255;--foreground-color:rgb(248, 248, 255);--danger-color:red;scrollbar-width:thin}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#9D65C9;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--foreground-color:rgb(20, 20, 20);--danger-color:rgb(255, 106, 106)}body[data-theme=dark] ::-webkit-calendar-picker-indicator{filter:invert(1)}p{max-width:70ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1.5rem}img{object-fit:cover}a:where([class]){color:inherit;text-decoration:none}a:where([class]):focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}a{color:var(--accent-color)}.button,button{position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;cursor:pointer}.task__project-title,a.button,input[type=date]{background-color:rgba(var(--text-color),.06)}.color-0-8,.nav-list__item{color:rgba(var(--text-color),.8)}button:disabled{opacity:.5}a.button{padding:.6rem 1.2rem;border-radius:.3rem}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color),1)}#edit_data_fig,sm-button[disabled] .icon{fill:rgba(var(--text-color),.6)}.hide{opacity:0}.hide-completely{display:none!important}#main_header,#main_nav,.flex,.nav-list__item{display:flex}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable,.task-description,.task__description{word-wrap:break-word;overflow-wrap:break-word}.breakable{-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.project-card{text-transform:capitalize}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center,.popup__header{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}#main_nav,#sign_in_page{background-color:var(--foreground-color)}.interact{position:relative;overflow:hidden;cursor:pointer}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem 0 .5rem;grid-template-columns:auto 1fr auto}.popup__header__close{padding:.5rem;cursor:pointer}#main_page{height:100%;grid-template-rows:auto 1fr auto;grid-template-areas:"main-header" "sub-pages" "main-nav"}#main_header{grid-area:main-header;gap:1rem;align-items:center;position:sticky;padding:.5rem 1rem;background:var(--foreground-color);z-index:1}#main_nav{grid-area:main-nav;position:relative;align-items:center}.nav-list__item{flex-direction:column;align-items:center;width:100%;padding:.5rem 0;font-size:.8rem;font-weight:500}.nav-list__item--active{color:var(--accent-color)}.nav-list__item--active .icon{fill:var(--accent-color)}.nav-list__item--active .icon--outlined{display:none}.nav-list__item--active .icon--filled{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--outlined{display:inline-block}.nav-list__item:not(.nav-list__item--active) .icon--filled{display:none}.nav-list__item .icon{margin-bottom:.3rem}#sub_page_container{grid-area:sub-pages;height:100%;overflow-y:auto}.container-card{position:relative;background:var(--foreground-color);border-radius:.5rem}#fab_backdrop,#loading_page,#sign_in_page{position:fixed;left:0;right:0}.medium-top-bottom-margin{margin:.5rem 0}#sign_in_page{display:grid;z-index:5;top:0;bottom:0;place-content:center;gap:1rem}#sign_in_form{width:22rem}.task{display:grid;grid-template-columns:auto 1fr;margin:0 1rem}#assigned_task_list,.page,.task-card{grid-template-columns:minmax(0,1fr)}.task .task__branch_container{padding-bottom:2rem}.task:last-of-type .left .line{transform:scaleY(0)}.task .left{display:flex;position:relative;justify-content:center;padding-top:.5rem}.task .left .circle{display:inline-flex;position:relative;align-self:flex-start;height:1rem;width:1rem;border-radius:50%;background:var(--foreground-color);border:2px solid;z-index:1}.task .left .line{position:absolute;left:50%;height:100%;width:2px;transform:translateX(-50%) scaleY(1);background-color:rgba(var(--text-color),.4)}.task .right{margin-left:1rem;display:flex;flex-direction:column;width:100%}.task .right .apply-cont{width:100%;display:flex;flex-direction:row}.task .right .apply-cont h4{-webkit-box-flex:1;-ms-flex:1;flex:1}.task h4{margin-top:.4rem;margin-bottom:1rem}.timeline-task__description{white-space:pre-line}.task .assigned-interns .assigned-intern{padding:.4rem}.padding,.page{padding:1rem}.completed-task .left .circle{border:2px solid #00C853!important;background:#00C853!important}.completed-task .left .line{background-color:#00C853!important}.page{gap:1rem;display:grid;position:relative;animation:fadein .3s}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.title{font-weight:500}#dashboard_page{padding-bottom:5rem;grid-template-columns:auto}.intern-card,.task-list-item{grid-template-columns:auto 1fr auto}.logo{display:flex;align-items:center;font-size:1.2rem;width:100%}.logo .cls-2,.logo .cls-3{fill:rgba(var(--text-color),1);font-size:146.9px;font-family:ArialMT,Arial}.logo svg{height:2.5rem}.logo h4{margin:0}.project-card{padding:1rem;font-weight:500;line-height:1.5;color:rgba(var(--text-color),.8)}#user_role,.intern-card__initials{font-weight:500;text-transform:uppercase}.intern-card{user-select:none;padding:.8rem 1rem;gap:.8rem}.intern-card__initials{display:flex;height:2.6rem;width:2.6rem;justify-content:center;align-items:center;border-radius:40%;color:#fff;font-size:1rem;background-color:var(--accent-color)}.intern-card__score-wrapper{font-weight:500;font-size:1.2rem}.intern-card .icon{fill:#FF5722!important;height:1rem!important;width:1rem!important;margin-left:.2rem}.request-card{display:grid;position:relative;padding:1rem}.request-card sm-button{--padding:0.5rem 0.8rem}.request-card__description{width:100%;font-size:1rem;margin-bottom:1rem}.reject-app{margin-left:auto;margin-right:.5rem}#updates_page sm-select{--max-height:50vh}#updates{transition:opacity .3s ease}#updates_page__project_selector strip-option{font-size:.9rem}.intern-update{display:grid;gap:.5rem;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.update__topic{font-weight:500;font-size:1rem;margin-top:.5rem;text-transform:capitalize;max-width:65ch}.update__sender{color:var(--accent-color);font-size:.9rem;font-weight:500}#update_of_project,.task__description,.task__project-title,.update__time{color:rgba(var(--text-color),.8)}.update__time{font-size:.85rem}.update__message{white-space:pre-line}.container-header{display:flex;align-items:center;width:100%;padding:1rem}.container-header h4{flex:1;font-weight:500}#intern_info_popup .grid>*{justify-self:center}#intern_info_popup #update_intern_score{width:100%;margin-top:1rem}#intern_info__initials{margin-bottom:1rem;position:relative;height:3rem;width:3rem;font-size:1.3rem}#intern_info__initials::before{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1.5rem);width:calc(100% + 1.5rem);opacity:.3;z-index:-1}#intern_info__name{font-size:1.5rem;margin-bottom:.5rem}.gold-fill{fill:#FF5722}#intern_info__score{font-size:1.5rem}#project_info{flex-direction:column}.branch-button{display:flex;padding:.5rem;border-radius:.2rem;margin:.5rem .5rem .5rem 0;text-transform:capitalize;justify-self:start;align-items:center;user-select:none;font-size:.85rem;font-weight:500}.branch-button .icon{height:1.2rem;width:1.2rem}.active-branch{opacity:1;color:#fff;background:var(--accent-color)}#task_list{padding-bottom:1.5rem}.task-list-item{display:grid;grid-template-areas:"status title options" "status interns interns" "status description description" "status . .";align-content:flex-start;padding:1rem;gap:.5rem;border-radius:.5rem;background:rgba(var(--text-color),.02)}.task-list-item sm-checkbox{grid-area:status;align-self:flex-start;padding:.2rem .5rem .5rem 0}.task-list-item h4{font-weight:500;margin:0}.task-list-item .title{grid-area:title;line-height:1.6}.task-list-item .assigned-interns{grid-area:interns}.task__branch_container:not(:empty){display:grid;gap:.5rem;padding:.5rem 0}.task__branch_container .branch-button{position:relative;background-color:transparent;padding:0;padding-left:2rem}#loading_page,#task_context,.fab-actions__item{background-color:var(--foreground-color)}.task__branch_container .branch-button::before{position:absolute;content:"";top:-50%;left:0;display:inline-flex;width:1rem;height:100%;align-self:flex-start;margin-right:.8rem;border-left:solid;border-bottom:solid;border-width:.15rem;border-color:rgba(var(--text-color),.6);border-radius:0 0 0 .2rem}.task__branch_container .branch-button+.branch-button::before{top:calc(-50% - 1.5rem);height:calc(100% + 1.5rem)}.task-option{grid-area:options;transition:opacity .3s ease;padding:.5rem}.task-option .icon{height:1.2rem;width:1.2rem}.task-description{grid-area:description;margin:0;white-space:pre-line}.assigned-interns{display:flex;flex-wrap:wrap;margin-bottom:1rem}.assigned-interns .assigned-intern{user-select:none;display:flex;font-size:.8rem;margin:.2rem .5rem .2rem 0;padding:.2rem 0 .2rem .4rem;border-radius:.2rem;border:1px solid;align-items:center;white-space:nowrap;text-transform:capitalize}.assigned-interns .assigned-intern button{padding:.2rem}.assigned-interns .assigned-intern button .icon{height:1rem;width:1rem}#task_context{position:absolute;top:0;right:0;margin:-1rem 1rem 0;list-style:none;padding:.5rem 0;width:max-content;border-radius:.3rem;transition:.3s opacity ease;box-shadow:0 .5rem 1rem -.3rem rgba(0,0,0,.3)}#task_context li{padding:.8rem 1.5rem;display:flex;align-items:center;font-size:.9rem}#task_context li .icon{height:1.2rem;width:1.2rem;margin-right:.5rem}.temp-task .cancel-task-button{margin-right:.5rem}#editing_panel__description{margin-bottom:2rem}#branch_container{display:flex;flex-flow:row wrap;margin:.5rem 0 1rem}#intern_list_popup{flex-direction:column}#best_interns_container,#intern_search_field,#project_list_container{margin-bottom:1rem}#intern_list_container{height:100%;overflow-y:auto}#best_interns_container .container-header .icon,#project_list_container .container-header .icon{margin-right:.5rem}#edit_data_fig{width:60vw;margin:2rem 0}#loading_page{display:grid;top:0;bottom:0;z-index:5;text-align:center;place-content:center;justify-items:center}.loading-message{font-size:1.3rem;margin:1.5rem 0 .5rem}#loading_page__footer{position:absolute;bottom:0;width:100%;padding:1.5rem}#loading_page__footer .icon{height:4rem;width:4rem}#project_watching_section{position:relative;overflow:hidden}#project_explorer{padding:0}#project_explorer__right{gap:1rem;align-items:flex-start;align-content:flex-start;padding:1rem}#explorer_branch_container{margin-top:1.5rem}#watch_project_button{margin-left:1rem;text-transform:capitalize}#admin_page{position:relative;display:grid;gap:0;padding:0;height:100%}#project_editing_panel{position:relative;padding:1rem 0;height:100%;overflow-y:auto}#editing_panel__title{margin-bottom:1rem}.fab-actions{display:grid;gap:1rem;position:absolute;bottom:0;right:0;margin:1rem;justify-items:end;text-align:end;z-index:5}#admin_page__left sm-tab-panels>*,.fab,.fab-actions__item{display:flex}.fab-actions[open] .fab-actions__item{transform:translateY(0);opacity:1}.fab-actions[open] .fab .icon:nth-of-type(1){transform:scale(0) rotate(180deg)}.fab-actions[open] .fab .icon:nth-of-type(2){transform:scale(1) rotate(0)}.fab-actions[open]~#fab_backdrop{opacity:1;clip-path:circle(100%)}.fab-actions__item{align-items:center;justify-self:end;padding:.6rem 1rem;border-radius:2rem;transform:translateY(1.5rem);opacity:0;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .3s;box-shadow:0 .2rem .5rem rgba(0,0,0,.2);user-select:none}.fab-actions__item:active,.fab-actions__item:hover,.fab:active{transform:scale(.9)}.fab-actions__item:nth-of-type(1){transition-delay:.2s}.fab-actions__item:nth-of-type(2){transition-delay:.1s}.fab,.fab .icon{transition:transform .3s}.fab-actions__item .icon{fill:var(--accent-color);margin-left:.5rem}.fab-actions__item-name{font-size:.9rem}.fab{position:relative;justify-content:center;align-items:center;padding:1rem;height:3.2rem;width:3.2rem;border-radius:50%;background-color:var(--accent-color);box-shadow:0 .5rem .8rem rgba(0,0,0,.3)}.fab .icon{position:absolute;height:100%;fill:#fff}.fab .icon:nth-of-type(1){transform:scale(1) rotate(0)}.fab .icon:nth-of-type(2){transform:scale(0) rotate(-180deg)}#fab_backdrop{z-index:3;top:0;bottom:0;opacity:0;clip-path:circle(0 at 100% 100%);transition:clip-path .5s,opacity .5s;background-color:rgba(0,0,0,.5)}#update_of_task{font-size:1.3rem;margin:.4rem 0 1.8rem}ul{padding:0;list-style:none}#assigned_task_list{display:grid;gap:1rem;margin-top:1rem;align-content:flex-start}.task-card{display:grid;padding:1rem;border-radius:.5rem;background-color:var(--foreground-color)}.task__header{display:grid;gap:0 .5rem;align-items:flex-start;grid-template-columns:1fr auto;grid-template-areas:". send-button" ". send-button"}.task__project-title{font-size:.9rem;font-weight:500;border-radius:.3rem;padding:.3rem .5rem;justify-self:flex-start;margin-bottom:.5rem!important}.task__title{font-size:1.3rem;margin-bottom:1rem!important}.task__description{white-space:pre-line}.send-update-button{grid-area:send-button;--padding:0.6rem 0.8rem;color:var(--accent-color)}.send-update-button .icon{height:1.2rem;width:1.2rem;fill:var(--accent-color)}#admin_page__left{height:100%;overflow-y:hidden}#admin_page__left sm-tab-header{--gap:0;--justify-content:stretch;background-color:var(--foreground-color);border-bottom:1px solid rgba(var(--text-color),.2)}#admin_page__left sm-tab{justify-content:center}#admin_page__left sm-tab-panels,#admin_page__left sm-tab-panels>*{height:100%;flex-direction:column}#admin_page__left sm-tab-panels{overflow-y:hidden}#admin_page__left .list-container{height:100%;overflow-y:auto;padding-bottom:2rem}#admin_page__left .empty-state{padding:1rem;text-align:center}#update_filters_wrapper{gap:1.5rem}#project_watching_section,#project_watchlist,.watchlist_project_card{display:grid;gap:1rem}input[type=date]{padding:.5rem;border:rgba(var(--text-color),.2) solid thin;border-radius:.3rem;font-family:inherit;font-size:inherit;color:inherit}input[type=date]:focus{outline:0;box-shadow:0 0 0 .1rem var(--accent-color)}.search__icon{height:1.2rem;width:1.2rem}#user_role{justify-self:start;font-size:.7rem;letter-spacing:.05em;padding:.4rem .8rem;border-radius:.3rem;border:var(--accent-color) solid thin}#project_watchlist{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}.watchlist_project_card{color:inherit;border-radius:.5rem;grid-template-rows:auto 1fr;padding:1rem;background-color:rgba(var(--text-color),.04)}.watchlist_project_card .project__title{font-size:1.1rem;line-height:1.5}.progress-bar{display:flex;height:.5rem;background-color:rgba(var(--text-color),.2);border-radius:1rem;overflow:hidden;align-self:flex-end}.progress-bar .progress-value{background-color:var(--accent-color);transition:width .3s}@media only screen and (max-width:640px){.hide-on-mobile,.hide-page-on-mobile{display:none}#project_editing_panel{padding:1rem}.list-container{padding-bottom:5rem}}@media only screen and (min-width:640px){#admin_page__left,#project_editing_panel,.nav-list__item{border-radius:.5rem}.hide-on-desktop{display:none!important}sm-popup{--width:26rem}.popup__header{padding:1.5rem 1.5rem 0 .75rem}#main_nav{padding:.5rem;flex-direction:column}#main_nav theme-toggle{margin:1rem;margin-top:auto}.nav-list__item{flex-direction:row;align-items:center;padding:.8rem;margin-bottom:.25rem;font-size:1rem}.nav-list__item--active{background-color:rgba(var(--text-color),.06)}.nav-list__item .icon{margin-bottom:0}.nav-list__item_title{display:none}.project-card--active{background-color:rgba(var(--text-color),.1)}#sign_in{width:24rem;height:auto;border-radius:.4rem}#dashboard_page{grid-template-columns:3fr 18rem}#dashboard_page #project_watching_section{align-self:flex-start}#admin_page{padding:1rem 0 1rem 1rem;gap:1rem;grid-template-columns:18rem minmax(0,1fr);grid-template-rows:1fr}#admin_page__left{background-color:var(--foreground-color)}#edit_data_fig{width:16rem;justify-self:center}#project_explorer{display:grid;height:100%;grid-template-columns:16rem 3fr;grid-template-areas:"left right"}#project_explorer #left{grid-area:left;height:100%;overflow-y:auto;padding-bottom:1.5rem;border-right:1px solid rgba(var(--text-color),.06);background-color:rgba(var(--background-color),1)}#all_interns_list .intern-card,#update_filters_wrapper{border-radius:.5rem;background-color:var(--foreground-color)}#project_explorer #left h4{margin-top:0;margin-bottom:.5rem;color:var(--accent-color);font-size:.9rem}#project_explorer #project_explorer__right{grid-area:right;height:100%;overflow-y:auto}#main_page{grid-template-columns:4rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#post_update_popup{--width:28rem}#updates_page{height:100%;gap:1rem;grid-template-areas:"updates update-filters";grid-template-columns:minmax(0,1fr) 20rem}#update_filters_wrapper{padding:1rem;align-content:flex-start;grid-area:update-filters}#updates_wrapper{height:100%;overflow-y:auto;grid-area:updates}#all_interns_list{gap:1rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}#all_interns_list .intern-card{gap:1.5rem .5rem;padding:1.5rem;grid-template-columns:1fr}#all_interns_list .intern-card__initials{position:relative;grid-column:1/3;z-index:1}#all_interns_list .intern-card__initials::after{content:"";position:absolute;background-color:inherit;border-radius:inherit;height:calc(100% + 1rem);width:calc(100% + 1rem);opacity:.3;z-index:-1}#intern_list_popup{--height:80vh}#settings_page{padding:1rem 2rem}.watchlist_project_card{padding:1.5rem}}@media only screen and (min-width:1280px){#main_page{grid-template-columns:12rem minmax(0,1fr);grid-template-areas:"main-header main-header" "main-nav sub-pages"}#main_nav{align-items:flex-start}.nav-list__item .icon{margin-right:.5rem}.nav-list__item_title{display:inline-block}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.interact:hover{background:linear-gradient(rgba(var(--text-color),.06),rgba(var(--text-color),.06)),var(--foreground-color)}.apply-button,.send-update-button,.task-option{opacity:0;transition:opacity .3s}.task-card:hover .send-update-button,.task-list-item:hover .task-option,.task-option:focus-within,.task:hover .apply-button{opacity:1}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 314fc2e..459c890 100644 --- a/css/main.scss +++ b/css/main.scss @@ -42,6 +42,9 @@ body[data-theme='dark'] { --foreground-color: rgb(20, 20, 20); --danger-color: rgb(255, 106, 106); } + ::-webkit-calendar-picker-indicator { + filter: invert(1); + } } p { @@ -721,40 +724,43 @@ ul { font-weight: 500; } -#intern_info { - flex-direction: column; +#intern_info_popup { + .grid{ + & > *{ + justify-self: center; + } + } + #update_intern_score{ + width: 100%; + margin-top: 1rem; + } } - -#intern_info div { - display: flex; - flex-direction: row; - align-items: center; - width: 100%; +#intern_info__initials{ margin-bottom: 1rem; + position: relative; + height: 3rem; + width: 3rem; + font-size: 1.3rem; + &::before{ + content: ''; + position: absolute; + background-color: inherit; + border-radius: inherit; + height: calc(100% + 1.5rem); + width: calc(100% + 1.5rem); + opacity: 0.3; + z-index: -1; + } } - -#intern_info div span { - flex: 1; - word-break: break-all; - font-size: 0.9rem; +#intern_info__name{ + font-size: 1.5rem; + margin-bottom: 0.5rem; } - -#intern_info .gold-fill { +.gold-fill { fill: #FF5722; } - -#intern_info #update_intern_score h4 { - margin: 0; - font-size: 2rem; -} - -#intern_info h3 { - text-transform: capitalize; -} - -#intern_info h4, -#intern_info h5 { - margin-top: 0.5rem; +#intern_info__score{ + font-size: 1.5rem; } #project_info { @@ -875,6 +881,7 @@ ul { .assigned-interns { display: flex; flex-wrap: wrap; + margin-bottom: 1rem; } .assigned-interns .assigned-intern { @@ -1248,6 +1255,19 @@ ul { #update_filters_wrapper{ gap: 1.5rem; } +input[type="date"]{ + padding: 0.5rem; + border: rgba(var(--text-color), 0.2) solid thin; + border-radius: 0.3rem; + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: rgba(var(--text-color), 0.06); + &:focus{ + outline: none; + box-shadow: 0 0 0 0.1rem var(--accent-color); + } +} .search__icon{ height: 1.2rem; width: 1.2rem; diff --git a/new.html b/new.html index 77586e6..40a5c94 100644 --- a/new.html +++ b/new.html @@ -361,6 +361,10 @@
By Intern
+ Clear
@@ -403,22 +407,37 @@ - -

Intern name

- -

Update Rating

-
- -

- - - - - - -
+ +
+ +
+
+
+

Intern name

+ +
+
+ +

+
+
+ + + + + + +
+
+
@@ -1649,10 +1668,10 @@ card.firstElementChild.classList.add('completed-task') } if (assignedInterns || typeOfUser === 'general') { - getInternDetails(assignedInterns).forEach((intern) => { - frag.append(render.assignedInternCard(intern)); + assignedInterns.forEach((internFloId) => { + frag.append(render.assignedInternCard(internFloId)); }) - card.querySelector('.assigned-interns').appendChild(frag) + card.querySelector('.assigned-interns').append(frag) } else { if(typeOfUser === 'intern'){ @@ -1694,7 +1713,7 @@ internCard(internName, internFLOID, internPoints) { // creates cards containing intern information const card = getRef('intern_card_template').content.cloneNode(true) - setAttributes(card.firstElementChild, { 'data-intern-id': internFLOID, 'title': 'Intern Information' }) + setAttributes(card.firstElementChild, { 'data-intern-flo-id': internFLOID, 'title': 'Intern Information' }) card.querySelector('.intern-card__initials').style.backgroundColor = getInternColor(internFLOID) card.querySelector('.intern-card__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join(''); card.querySelector('.intern-card__name').textContent = internName; @@ -1720,19 +1739,21 @@ innerHTML }); }, - assignedInternCard(intern, options) { - const thisIntern = createElement('span', { + assignedInternCard(internFloId, options) { + const internCard = createElement('span', { className: 'assigned-intern', - attributes: { 'data-floid': intern.split(':', 1) }, - textContent: intern.split(':')[1] + attributes: { 'data-flo-id': internFloId }, + textContent: RIBC.getInternList()[internFloId] }); + console.log(internFloId, RIBC.getInternList()[internFloId]) if (options === 'yes') { - let closeBtn = createElement('button', { - innerHTML: `` - }); - thisIntern.append(closeBtn) + internCard.append( + createElement('button', { + innerHTML: `` + }) + ) } - return thisIntern; + return internCard; }, taskListItem(taskNo) { const assignedInterns = RIBC.getAssignedInterns(currentProject, currentBranch, taskNo) @@ -1746,10 +1767,10 @@ card.querySelector('.title').textContent = `${taskNo}. ${taskTitle}`; card.querySelector('.task-description').textContent = taskDescription; if (assignedInterns) { - getInternDetails(assignedInterns).forEach((intern) => { - frag.appendChild(render.assignedInternCard(intern, 'yes')); + assignedInterns.forEach((internFloId) => { + frag.appendChild(render.assignedInternCard(internFloId, 'yes')); }) - card.querySelector('.assigned-interns').appendChild(frag) + card.querySelector('.assigned-interns').append(frag) } const branches = getAllBranches(currentProject) for(const branch of branches){ @@ -1784,14 +1805,11 @@ return card; }, requestCard(floId, projectCode, branch, taskNo) { - let name; - name = floId; - if (getInternDetails(floId).length !== 0) - name = getInternDetails(floId)[0].split(':')[1]; + const internName = RIBC.getInternList()[floId]; return createElement('li', { className: 'request-card', innerHTML: `

- ${name} applied for + ${internName} applied for ${RIBC.getTaskDetails(projectCode, branch, taskNo).taskTitle} from ${branch} of ${RIBC.getProjectDetails(projectCode).projectName} @@ -1876,23 +1894,6 @@ } } - function getInternDetails(floId) { - let internInfo = []; - if (Array.isArray(floId)) - floId.forEach((id) => { - Object.keys(allInternsList).forEach((key) => { - if (id === key) - internInfo.push(`${key}:${allInternsList[key]}`) - }) - }) - else - Object.keys(allInternsList).forEach((key) => { - if (floId === key) - internInfo.push(`${key}:${allInternsList[key]}`) - }) - return internInfo; - } - let allInternsList = [], highPerformingInterns = [], watchList = [], currentIntern, currentTaskId, typeOfUser = 'general'; @@ -1927,14 +1928,17 @@ } // opens a popup containing various intern information - function showInternInfo(intern) { - getRef('intern_info').children[0].textContent = intern.children[1].textContent; // intern name - getRef('intern_info__flo_id').value = currentIntern = intern.dataset.internId; // intern - getRef('intern_info__score').textContent = intern.children[2].textContent; // points earned by intern - if(parseInt(intern.children[2].textContent) === 1){ + function showInternInfo(internFloId) { + const internName = RIBC.getInternList()[internFloId] + getRef('intern_info__initials').textContent = internName.split(' ').map(v => v.charAt(0)).join(''); + getRef('intern_info__initials').style.backgroundColor = getInternColor(internFloId) + getRef('intern_info__name').textContent = internName; + getRef('intern_info__flo_id').value = currentIntern = internFloId; + getRef('intern_info__score').textContent = RIBC.getInternRating(internFloId); // points earned by intern + if(RIBC.getInternRating(internFloId) === 1){ getRef('reduce_score_button').disabled = true; } - showPopup('intern_info'); + showPopup('intern_info_popup'); } // opens a popup containing various project information @@ -2042,13 +2046,6 @@ }) return branchPoints } - function showProjectMap(projectCode, container) { - if (projectCode === undefined) return; - const tempCard = render.projectMapCard(projectCode, 'dashboard_page'); - getRef(container).innerHTML = ``; - currentProject = projectCode; - getRef(container).append(tempCard) - } getRef('task_list').addEventListener('change', (e) => { if (e.target.closest('sm-checkbox')) { currentTask = e.target.closest('.task-list-item'); @@ -2182,13 +2179,15 @@ document.getElementById('intern_list_container').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) { - let floid = event.target.closest('.intern-card').dataset.internId; - if (RIBC.manage.assignInternToTask(floid, currentProject, currentBranch, currentTask.id)) { - notify(`${event.target.closest('.intern-card').children[1].textContent} assigned to ${RIBC.getProjectDetails(currentProject).projectName}`) - currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(getInternDetails(floid)[0], 'yes')) - } - else + const floId = event.target.closest('.intern-card').dataset.internFloId; + const internName = RIBC.getInternList()[floId] + const {projectName} = RIBC.getProjectDetails(currentProject) + if (RIBC.manage.assignInternToTask(floId, currentProject, currentBranch, currentTask.id)) { + notify(`${internName} assigned to ${projectName}`) + currentTask.querySelector('.assigned-interns').append(render.assignedInternCard(floId, 'yes')) + }else{ notify('intern already assigned', 'error') + } hidePopup() } }) @@ -2206,7 +2205,7 @@ let score = parseInt(getRef('intern_info__score').textContent) score += scoreUpdate; getRef('intern_info__score').textContent = score - document.querySelectorAll(`[data-intern-id="${currentIntern}"]`).forEach(internCard => { + document.querySelectorAll(`[data-intern-flo-id="${currentIntern}"]`).forEach(internCard => { internCard.querySelector('.intern-card__score').textContent = score }) if (score > 0) { @@ -2294,6 +2293,24 @@ const fuse = new Fuse(allUpdates, options) return fuse.search(floId).map(v => v.item) } + async function getUpdatesByDate(date, allUpdates) { + if(!allUpdates){ + allUpdates = RIBC.getInternUpdates() + } + const filteredUpdates = [] + const dateStart = new Date(`${date} 00:00:00`).getTime() + const dateEnd = new Date(`${date} 23:59:59`).getTime() + let isFromDate = false + for(const update of allUpdates){ + if(update.time > dateStart && update.time < dateEnd){ + filteredUpdates.push(update) + isFromDate = true + }else if(isFromDate){ + break + } + } + return filteredUpdates + } let updateStartIndex = 0 let updateEndIndex = 0 @@ -2326,7 +2343,7 @@ const element = updates[index]; const { floID, time, update: { topic, description } } = element const updateObj = { - internName: getInternDetails(floID)[0].split(':')[1], + internName: RIBC.getInternList()[floID], time: parseInt(time), topic, description @@ -2334,7 +2351,7 @@ frag.append(render.updateCard(updateObj)) } getRef('all_updates_list').append(frag) - if(getRef('all_updates_list').lastElementChild){ + if(updateEndIndex !== updates.length && getRef('all_updates_list').lastElementChild){ intersectionObserver.observe(getRef('all_updates_list').lastElementChild) } } @@ -2343,6 +2360,7 @@ const {lazyLoad = false} = options const selectedProject = getRef('updates_page__project_selector').value const selectedintern = getRef('updates_page__intern_selector').value + const selectedDate = getRef('updates_page__date_selector').value let matchedUpdates if(selectedProject !== 'all'){ const projectName = RIBC.getProjectDetails(selectedProject).projectName @@ -2351,16 +2369,21 @@ if(selectedintern !== 'all'){ matchedUpdates = await getUpdatesByIntern(selectedintern, matchedUpdates) } + if(selectedDate){ + matchedUpdates = await getUpdatesByDate(selectedDate, matchedUpdates) + } renderInternUpdates({updates: matchedUpdates, lazyLoad}) }, 100) function clearFilter(){ getRef('updates_page__project_selector').reset() getRef('updates_page__intern_selector').reset() + getRef('updates_page__date_selector').value = '' } getRef('updates_page__project_selector').addEventListener('change', renderFilteredUpdates) getRef('updates_page__intern_selector').addEventListener('change', renderFilteredUpdates) + getRef('updates_page__date_selector').addEventListener('change', renderFilteredUpdates) getRef('watch_project_button').addEventListener('mouseenter', e => { if(e.target.textContent === 'watching'){ @@ -2456,15 +2479,15 @@ document.getElementById('best_interns').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) - showInternInfo(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card').dataset.internFloId) }) document.getElementById('all_interns_page').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) - showInternInfo(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card').dataset.internFloId) }) document.getElementById('admin_page__intern_list').addEventListener('click', (event) => { if (event.target.closest('.intern-card')) - showInternInfo(event.target.closest('.intern-card')) + showInternInfo(event.target.closest('.intern-card').dataset.internFloId) }) document.addEventListener('popupopened', e => { switch(e.detail.popup.id){ @@ -2718,7 +2741,7 @@ requestForTask(event.target.closest('.apply-button')) } }) - let greetings = getInternDetails(myFloID)[0] !== undefined ? `Hi, ${getInternDetails(myFloID)[0].split(':')[1]}` : `Hi, there!` + const greetings = RIBC.getInternList()[myFloID] !== undefined ? `Hi, ${RIBC.getInternList()[myFloID]}` : `Hi, there!` getRef('username').textContent = greetings; getRef('user_flo_id').value = myFloID; getRef('user_role').textContent = typeOfUser;