mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-13 19:15:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

notifications styling

Browse Source
This commit is contained in:
realaravinth
2021-07-14 20:09:00 +05:30
parent 558dbef712
commit 69de0aaeef
16 changed files with 102 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/panel/notifications/index.html
View File

@@ -8,22 +8,36 @@ include!("../navbar/index.html"); .>
<!-- Main menu/ important actions roaster -->
<table class="notification__table">
<thead class="notification__heading">
<th class="notification__title-text">Your Notifications</th>
<tr>
<th colspan="4" class="notification__title-text">Your Notifications</th>
</tr>
</thead>
<tbody class="notification__body">
<. for notification in n.iter() { .>
<tr class="notification__item">
<td class="notification__mark-reak">
<button class="notification__mark-read-btn">tick</button>
</td>
<td>
<h3 class="notification__item-heading">
<.= notification.heading .>
</h3>
<p class="notification__item-text"><.= notification.message .></p>
<div class="notification-data__container">
<span class="notification__sender"><.= notification.name .></span>
<span>.</span>
<span class="notification__received"><.= notification.received .></span>
</div>
</td>
<td class="notification__mark-read-col">
<button class="notification__mark-read-btn">
<img
class="notification__mark-read"
src="<.= crate::FILES
.get("./static/cache/img/svg/check.svg")
.unwrap() .>"
alt="Mark Read"
/>
</button>
</td>
<td class="notification__sender"><.= notification.name .></td>
<td class="notification__received"><.= notification.received .></td>
</tr>
<. } .>
</tbody>

56
templates/panel/notifications/main.scss Normal file
View File

@@ -0,0 +1,56 @@
/*
* 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 '../../vars';
.notification__table {
background-color: $white;
width: 90%;
}
.notification__title-text {
padding-left: 10px;
font-size: 1rem;
padding: 0.75rem 1.25rem;
box-sizing: border-box;
text-align: left;
width: 100%;
border-bottom: 0.1px solid $light-grey;
}
.notification__mark-read-btn {
background: none;
border: none;
display: flex;
border-radius: 50px;
}
.notification__mark-read-btn:hover {
cursor: grab;
background-color: $light-grey;
}
.notification-data__container {
font-size: 0.7rem;
}
.notification__mark-read {
color: $green;
margin: auto;
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
brightness(91%) contrast(92%);
}