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 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
@ -1050,6 +1051,83 @@ ul {
|
||||
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 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
@ -1360,7 +1438,7 @@ ul {
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
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 {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
@ -1082,7 +1083,87 @@ ul {
|
||||
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 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
@ -1403,7 +1484,7 @@ ul {
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
56
new.html
56
new.html
@ -206,8 +206,6 @@
|
||||
<section id="admin_page" class="page hide-completely">
|
||||
<header id="admin_page__header" class="grid">
|
||||
<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>
|
||||
<section id="admin_page__left" class="flex direction-column">
|
||||
<sm-tab-header target="admin_tabs">
|
||||
@ -217,29 +215,9 @@
|
||||
</sm-tab-header>
|
||||
<sm-tab-panels id="admin_tabs">
|
||||
<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>
|
||||
</section>
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
@ -292,6 +270,26 @@
|
||||
</li>
|
||||
</ul>
|
||||
</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 id="updates_page" class="page hide-completely">
|
||||
<!-- <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
|
||||
|
||||
document.getElementById('best_interns').addEventListener('click', (event) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user