Added FAB for admin actions
This commit is contained in:
sairaj mote
parent
02ec3ad22e
commit
f15e874b92
80
css/main.css
80
css/main.css
@ -1033,6 +1033,7 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#admin_page {
|
#admin_page {
|
||||||
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -1050,6 +1051,83 @@ ul {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fab-actions {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 1rem;
|
||||||
|
justify-items: end;
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
.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__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-self: end;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
transform: translateY(1.5rem);
|
||||||
|
background-color: var(--foreground-color);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
|
||||||
|
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.fab-actions__item:hover, .fab-actions__item:active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.fab-actions__item:nth-of-type(1) {
|
||||||
|
transition-delay: 0.2s;
|
||||||
|
}
|
||||||
|
.fab-actions__item:nth-of-type(2) {
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
}
|
||||||
|
.fab-actions__item .icon {
|
||||||
|
fill: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.fab {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.8rem;
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
box-shadow: 0 0.5rem 0.8remrgba 0, 0, 0, 0.3;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.fab:active {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.fab .icon {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
fill: white;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
.fab .icon:nth-of-type(1) {
|
||||||
|
transform: scale(1) rotate(0);
|
||||||
|
}
|
||||||
|
.fab .icon:nth-of-type(2) {
|
||||||
|
transform: scale(0) rotate(-180deg);
|
||||||
|
}
|
||||||
|
|
||||||
#update_of_project {
|
#update_of_project {
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
@ -1360,7 +1438,7 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.interact:hover {
|
.interact:hover {
|
||||||
background-color: rgba(var(--text-color), 0.06);
|
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-update-button {
|
.send-update-button {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1065,6 +1065,7 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#admin_page {
|
#admin_page {
|
||||||
|
position: relative;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -1082,7 +1083,87 @@ ul {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Newer styles
|
.fab-actions{
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 1rem;
|
||||||
|
justify-items: end;
|
||||||
|
text-align: end;
|
||||||
|
&[open]{
|
||||||
|
.fab-actions__item{
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.fab{
|
||||||
|
.icon{
|
||||||
|
&:nth-of-type(1){
|
||||||
|
transform: scale(0) rotate(180deg);
|
||||||
|
}
|
||||||
|
&:nth-of-type(2){
|
||||||
|
transform: scale(1) rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fab-actions__item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-self: end;
|
||||||
|
padding: 0.7rem 1rem;
|
||||||
|
border-radius: 2rem;
|
||||||
|
transform: translateY(1.5rem);
|
||||||
|
background-color: var(--foreground-color);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
|
||||||
|
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||||
|
user-select: none;
|
||||||
|
&:hover,
|
||||||
|
&:active{
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
&:nth-of-type(1){
|
||||||
|
transition-delay: 0.2s;
|
||||||
|
}
|
||||||
|
&:nth-of-type(2){
|
||||||
|
transition-delay: 0.1s;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
fill: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.fab{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.8rem;
|
||||||
|
height: 3rem;
|
||||||
|
width: 3rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
box-shadow: 0 0.5rem 0.8remrgba(0, 0, 0, 0.3);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
&:active{
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
fill: white;
|
||||||
|
transition: transform 0.3s;
|
||||||
|
&:nth-of-type(1){
|
||||||
|
transform: scale(1) rotate(0);
|
||||||
|
}
|
||||||
|
&:nth-of-type(2){
|
||||||
|
transform: scale(0) rotate(-180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#update_of_project {
|
#update_of_project {
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
@ -1403,7 +1484,7 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.interact:hover {
|
.interact:hover {
|
||||||
background-color: rgba(var(--text-color), 0.06);
|
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-update-button {
|
.send-update-button {
|
||||||
|
|||||||
56
new.html
56
new.html
@ -206,8 +206,6 @@
|
|||||||
<section id="admin_page" class="page hide-completely">
|
<section id="admin_page" class="page hide-completely">
|
||||||
<header id="admin_page__header" class="grid">
|
<header id="admin_page__header" class="grid">
|
||||||
<p>Don't forget to commit changes</p>
|
<p>Don't forget to commit changes</p>
|
||||||
<sm-button id="update_project_info_btn" variant="primary" onclick="commitToChanges()"
|
|
||||||
title="commit to changes">Commit</sm-button>
|
|
||||||
</header>
|
</header>
|
||||||
<section id="admin_page__left" class="flex direction-column">
|
<section id="admin_page__left" class="flex direction-column">
|
||||||
<sm-tab-header target="admin_tabs">
|
<sm-tab-header target="admin_tabs">
|
||||||
@ -217,29 +215,9 @@
|
|||||||
</sm-tab-header>
|
</sm-tab-header>
|
||||||
<sm-tab-panels id="admin_tabs">
|
<sm-tab-panels id="admin_tabs">
|
||||||
<section id="projects_container">
|
<section id="projects_container">
|
||||||
<div class="container-header">
|
|
||||||
<h4>Add project</h4>
|
|
||||||
<button onclick="showPopup('add_project_popup')">
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
|
|
||||||
height="24">
|
|
||||||
<path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="projects" class="list-container"></div>
|
<div id="projects" class="list-container"></div>
|
||||||
</section>
|
</section>
|
||||||
<section id="interns_container">
|
<section id="interns_container">
|
||||||
<div class="container-header">
|
|
||||||
<h4>Add Intern</h4>
|
|
||||||
<button onclick="showPopup('add_intern_popup')">
|
|
||||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
|
|
||||||
height="24">
|
|
||||||
<path fill="none" d="M0 0h24v24H0z" />
|
|
||||||
<path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="interns" class="list-container"></div>
|
<div id="interns" class="list-container"></div>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
@ -292,6 +270,26 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="admin_fab" class="fab-actions">
|
||||||
|
<ul id="admin_fab__options" class="grid gap-0-5 hide-completely">
|
||||||
|
<li class="fab-actions__item interact" onclick="showPopup('add_project_popup')">
|
||||||
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>
|
||||||
|
Add project
|
||||||
|
</li>
|
||||||
|
<li class="fab-actions__item interact" onclick="showPopup('add_intern_popup')">
|
||||||
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M14 14.252v2.09A6 6 0 0 0 6 22l-2-.001a8 8 0 0 1 10-7.748zM12 13c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm6 6v-3h2v3h3v2h-3v3h-2v-3h-3v-2h3z"/></svg>
|
||||||
|
Add intern
|
||||||
|
</li>
|
||||||
|
<li class="fab-actions__item interact" onclick="commitToChanges()">
|
||||||
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 19v-6h10v6h2V7.828L16.172 5H5v14h2zM4 3h13l4 4v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm5 12v4h6v-4H9z"/></svg>
|
||||||
|
Commit changes
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button onclick="toggleFab()" class="fab">
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></svg>
|
||||||
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
</section>
|
</section>
|
||||||
<section id="updates_page" class="page hide-completely">
|
<section id="updates_page" class="page hide-completely">
|
||||||
<!-- <sm-input id="updates_page__search" placeholder="Search interns, projects">
|
<!-- <sm-input id="updates_page__search" placeholder="Search interns, projects">
|
||||||
@ -11070,6 +11068,20 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleFab() {
|
||||||
|
if(getRef('admin_fab').hasAttribute('open')){
|
||||||
|
getRef('admin_fab').toggleAttribute('open')
|
||||||
|
setTimeout(() => {
|
||||||
|
getRef('admin_fab__options').classList.toggle('hide-completely')
|
||||||
|
}, 300);
|
||||||
|
}else{
|
||||||
|
getRef('admin_fab__options').classList.toggle('hide-completely')
|
||||||
|
setTimeout(() => {
|
||||||
|
getRef('admin_fab').toggleAttribute('open')
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
// Event listeners
|
// Event listeners
|
||||||
|
|
||||||
document.getElementById('best_interns').addEventListener('click', (event) => {
|
document.getElementById('best_interns').addEventListener('click', (event) => {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user