mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2026-02-11 10:05:41 +00:00
dom manipulations uses elements
This commit is contained in:
realaravinth
@@ -1,3 +1,3 @@
|
||||
<header>
|
||||
<. include!("./sidebar/index.html"); .>
|
||||
<. include!("./taskbar/index.html"); .>
|
||||
</header>
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
<nav class="secondary-menu">
|
||||
<ul>
|
||||
<li class="secondary-menu__heading">
|
||||
<img class="secondary-menu__logo" src="<.= crate::FILES.get("./static-assets/img/icon-trans.png").unwrap() .>" alt="Logo" />
|
||||
<div class="secondary-menu__brand-name">
|
||||
mCaptcha
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!--
|
||||
<li class="secondary-menu__section-partition"></li>
|
||||
-->
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="<.= crate::PAGES.home .>">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/home.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Overview
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="<.= crate::PAGES.panel.sitekey.list .>">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/key.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Site Keys
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/settings.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/credit-card.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Billing
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/help-circle.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Help
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="">
|
||||
<img
|
||||
class="secondary-menu__icon"
|
||||
src="<.= crate::FILES.get("./static-assets/img/svg/message-square.svg").unwrap() .>"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div class="secondary-menu__item-name">
|
||||
Support
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="<.= crate::DOCS.home .>">
|
||||
<img class="secondary-menu__icon" src="<.= crate::FILES.get("./static-assets/img/svg/file-text.svg").unwrap() .>" alt="" />
|
||||
<div class="secondary-menu__item-name">
|
||||
API Docs
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="secondary-menu__item">
|
||||
<a class="secondary-menu__item-link" href="<.= crate::SETTINGS.source_code .>">
|
||||
<img class="secondary-menu__icon"
|
||||
src="<.= crate::FILES.get("./static-assets/img/svg/github.svg").unwrap() .>" alt="GitHub Icon" />
|
||||
<div class="secondary-menu__item-name">
|
||||
Source Code
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- Nav/Side/Secondary bar -->
|
||||
@@ -1,88 +0,0 @@
|
||||
/*
|
||||
* Copyright (C) 2021 Aravinth Manivannan <realaravinth@batsense.net>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
@import '../../../reset';
|
||||
@import '../../../vars';
|
||||
|
||||
.secondary-menu {
|
||||
position: fixed;
|
||||
width: 14%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
background-color: $secondary-backdrop;
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.secondary-menu__heading {
|
||||
margin: auto;
|
||||
padding: 20px 5px;
|
||||
display: flex;
|
||||
}
|
||||
.secondary-menu__heading:hover {
|
||||
color: $green;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.secondary-menu__logo {
|
||||
width: 70px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.secondary-menu__brand-name {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.secondary-menu__item {
|
||||
margin: auto;
|
||||
padding: 20px 25px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.secondary-menu__icon {
|
||||
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%)
|
||||
contrast(103%);
|
||||
opacity: 0.8;
|
||||
width: 1rem;
|
||||
margin: auto;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.secondary-menu__item-name {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.secondary-menu__item-link:hover {
|
||||
color: $green;
|
||||
cursor: grab;
|
||||
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
|
||||
brightness(91%) contrast(92%);
|
||||
}
|
||||
|
||||
.secondary-menu__item-link {
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
30
templates/panel/header/taskbar/index.html
Normal file
30
templates/panel/header/taskbar/index.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<ul class="taskbar">
|
||||
<!--
|
||||
<li class="taskbar__action">Brand Name</li>
|
||||
-->
|
||||
<li class="taskbar__spacer"></li>
|
||||
<li class="taskbar__action">
|
||||
<a class="taskbar__link" href="<.= crate::PAGES.panel.sitekey.add .>">
|
||||
<button class="taskbar__add-site">
|
||||
+ New Site
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
<li class="taskbar__action">
|
||||
<img class="taskbar__icon" src="<.=
|
||||
crate::FILES.get("./static-assets/img/svg/moon.svg").unwrap() .>" alt="Profile" />
|
||||
</li>
|
||||
|
||||
<li class="taskbar__action">
|
||||
<img class="taskbar__icon" src="<.=
|
||||
crate::FILES.get("./static-assets/img/svg/bell.svg").unwrap() .>"
|
||||
alt="Notifications" />
|
||||
</li>
|
||||
|
||||
<li class="taskbar__action">
|
||||
<a href="<.= crate::V1_API_ROUTES.auth.logout .>">
|
||||
<img class="taskbar__icon" src="<.=
|
||||
crate::FILES.get("./static-assets/img/svg/log-out.svg").unwrap() .>" alt="Profile"
|
||||
/></a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -14,4 +14,48 @@
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
import './main.scss';
|
||||
|
||||
@import '../../../reset';
|
||||
@import '../../../vars';
|
||||
@import '../../../components/button';
|
||||
|
||||
.taskbar {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.taskbar__action {
|
||||
display: inline-block;
|
||||
padding: 10px 0px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.taskbar__spacer {
|
||||
min-width: 250px;
|
||||
flex: 6;
|
||||
}
|
||||
|
||||
.taskbar__icon {
|
||||
opacity: 0.8;
|
||||
width: 1.5rem;
|
||||
margin: auto 20px;
|
||||
}
|
||||
|
||||
.taskbar__icon {
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.taskbar__icon:hover {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.taskbar__add-site {
|
||||
display: inline-block;
|
||||
@include violet-button;
|
||||
}
|
||||
|
||||
.taskbar__add-site:hover {
|
||||
@include violet-button-hover;
|
||||
}
|
||||
Reference in New Issue
Block a user