notifications styling

This commit is contained in:
realaravinth 2021-07-14 20:09:00 +05:30
parent 558dbef712
commit 69de0aaeef
No known key found for this signature in database
GPG key ID: AD9F0F08E855ED88
16 changed files with 102 additions and 28 deletions

View file

@ -98,6 +98,9 @@ pub type AppData = actix_web::web::Data<Arc<crate::data::Data>>;
#[actix_web::main]
async fn main() -> std::io::Result<()> {
use api::v1;
env::set_var("RUST_LOG", "info");
pretty_env_logger::init();
info!(
"{}: {}.\nFor more information, see: {}\nBuild info:\nVersion: {} commit: {}",

View file

@ -31,7 +31,7 @@ pub mod routes {
Sitekey {
list: "/sitekey/list",
add: "/sitekey/add",
view: "/sitekey/{key}/view",
view: "/sitekey/{key}",
}
}
}

View file

@ -125,7 +125,7 @@ mod test {
let app = get_app!(data).await;
let url = format!("/sitekey/{}/view", &key.key);
let url = format!("/sitekey/{}/", &key.key);
let list_sitekey_resp = test::call_service(
&app,

View file

@ -18,7 +18,7 @@ use std::env;
use std::path::Path;
use config::{Config, ConfigError, Environment, File};
use log::debug;
use log::{debug, warn};
use serde::Deserialize;
use url::Url;
@ -138,7 +138,7 @@ impl Settings {
Ok(val) => {
s.set("server.port", val).unwrap();
}
Err(e) => println!("couldn't interpret PORT: {}", e),
Err(e) => warn!("couldn't interpret PORT: {}", e),
}
match env::var("DATABASE_URL") {
@ -147,7 +147,7 @@ impl Settings {
let database_conf = DatabaseBuilder::extract_database_url(&url);
set_from_database_url(&mut s, &database_conf);
}
Err(e) => println!("couldn't interpret DATABASE_URL: {}", e),
Err(e) => warn!("couldn't interpret DATABASE_URL: {}", e),
}
set_database_url(&mut s);

1
static/cache/img/svg/check.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>

After

Width:  |  Height:  |  Size: 262 B

1
static/cache/img/svg/edit.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>

After

Width:  |  Height:  |  Size: 365 B

1
static/cache/img/svg/x-circle.svg vendored Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

After

Width:  |  Height:  |  Size: 346 B

View file

@ -33,6 +33,7 @@ import './components/error/main.scss';
import './components/showPassword/main.scss';
import './panel/css/main.scss';
import './panel/navbar/main.scss';
import './panel/notifications/main.scss';
import './panel/header/taskbar/main.scss';
import './panel/help-banner/main.scss';
import './panel/sitekey/add/css/main.scss';

View file

@ -43,14 +43,17 @@
opacity: 0.8;
width: 1.5rem;
margin: auto 20px;
}
.taskbar__icon {
border-radius: 50px;
color: $light-text;
}
.taskbar__icon:hover {
cursor: grab;
background-color: $light-grey;
color: $green;
background-color: $light-grey;
filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
brightness(91%) contrast(92%);
}
.taskbar__add-site {

View file

@ -19,7 +19,7 @@
<ul class="sitekey-list__box">
<h1 class="sitekey-list__title">Your Sitekeys</h1>
<. for sitekey in sitekeys.iter() { .>
<a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
<a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
<li class="sitekey-list__item">
<span class="sitekey-list__name">

View file

@ -14,7 +14,6 @@
</label>
</div>
<ul class="secondary-menu__list">
<!--
<li class="secondary-menu__section-partition"></li>
-->

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>

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%);
}

View file

@ -10,7 +10,7 @@
<ul class="sitekey-list__box">
<h1 class="sitekey-list__title">Your Sitekeys</h1>
<. for sitekey in sitekeys.iter() { .>
<a href="/sitekey/<.= sitekey.key .>/view" class="sitekey-list__item-container">
<a href="/sitekey/<.= sitekey.key .>/" class="sitekey-list__item-container">
<li class="sitekey-list__item">
<span class="sitekey-list__name"><.= sitekey.name .></span>
<span class="sitekey-list__key"><.= sitekey.key .></span>

View file

@ -8,15 +8,11 @@
<!-- Main content container -->
<div class="inner-container">
<!-- Main menu/ important actions roaster -->
<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
<h1 class="form__title">
Sitekey: <.= name .>
<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
>Click here to see CAPTCHA widget in action</a>
</h1>
<form class="sitekey-form" action="<.= crate::V1_API_ROUTES.levels.add .>" method="post">
<h1 class="form__title">Sitekey: <.= name .>
<a href="<.= crate::WIDGET_ROUTES.verification_widget .>/?sitekey=<.= key.>"
>Click here to see CAPTCHA widget in action</a>
</h1>
<label class="sitekey-form__label" for="description">
Description
<input
@ -31,7 +27,6 @@
<. } .>
/>
</label>
<label class="sitekey-form__label" for="duration">
Cooldown Duratoin(in seconds)
<input

View file

@ -21,7 +21,7 @@ const ROUTES = {
signoutUser: '/api/v1/signout',
panelHome: '/',
docsHome: '/docs/',
listSitekey: (key: string) => `/sitekey/${key}/view`,
listSitekey: (key: string) => `/sitekey/${key}/`,
addSiteKey: '/sitekey/add',
};