mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-25 07:17:23 +08:00
impr: notifications redesign (evvvrado, Miodec) (#4700)
* impr: notification cards redesign * fix: formatting notifications.scss using prettier * fix: notifications background opacity * fix: new design and colors for notifications.scss * fix: removing useless notifications commands at about.ts * feat(language): add japanese romaji * styling update * remove test notifications * removed opacity transition --------- Co-authored-by: Miodec <jack@monkeytype.com>
This commit is contained in:
Everaldo Júnior
GitHub
parent
fb5c8fd742
commit
a2ad6edbc7
3 changed files with 203 additions and 62 deletions
|
|
@ -7,6 +7,7 @@
|
|||
right: 1rem;
|
||||
top: 1rem;
|
||||
transition: 0.125s opacity;
|
||||
|
||||
.clearAll.button {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
|
@ -23,78 +24,58 @@
|
|||
display: grid;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.notif {
|
||||
--notif-border-color: rgba(0, 130, 251, 0.985);
|
||||
--notif-background-color: rgba(0, 77, 148, 0.9);
|
||||
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
backdrop-filter: blur(15px);
|
||||
|
||||
.icon {
|
||||
color: var(--sub-color);
|
||||
padding: 1rem 1rem;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
font-size: 1.25em;
|
||||
color: #ffffff92;
|
||||
font-size: 1em;
|
||||
margin-right: 0.5em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 1rem 1rem 1rem 0;
|
||||
color: var(--text-color);
|
||||
padding: 1em;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
|
||||
.title {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.75em;
|
||||
color: #ffffff92;
|
||||
font-weight: 500;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
border-radius: 12px;
|
||||
border: 2px solid var(--notif-border-color);
|
||||
background: var(--notif-background-color);
|
||||
color: #fff;
|
||||
|
||||
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
|
||||
|
||||
position: relative;
|
||||
background: var(--sub-alt-color);
|
||||
color: var(--sub-color);
|
||||
display: grid;
|
||||
grid-template-columns: min-content auto min-content;
|
||||
border-radius: var(--roundness);
|
||||
// outline-width: 0.25em;
|
||||
// outline-style: solid;
|
||||
// outline-color: var(--sub-color);
|
||||
box-shadow: 0 0 0 0.2em var(--sub-color);
|
||||
grid-template-columns: auto;
|
||||
|
||||
&.bad {
|
||||
// background-color: var(--error-color);
|
||||
box-shadow: 0 0 0 0.2em var(--error-color);
|
||||
color: var(--error-color);
|
||||
.icon {
|
||||
color: var(--error-color);
|
||||
}
|
||||
--notif-border-color: rgba(241, 51, 34, 0.71);
|
||||
--notif-background-color: rgba(138, 18, 12, 0.9);
|
||||
}
|
||||
|
||||
&.good {
|
||||
box-shadow: 0 0 0 0.2em var(--main-color);
|
||||
color: var(--main-color);
|
||||
.icon {
|
||||
color: var(--main-color);
|
||||
}
|
||||
--notif-border-color: rgba(100, 206, 100, 0.71);
|
||||
--notif-background-color: rgba(0, 148, 0, 0.9);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
// opacity: .5;
|
||||
// box-shadow: 0 0 20px rgba(0,0,0,.25);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
transition: 0.125s;
|
||||
font-family: "Font Awesome 5 Free";
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
font-weight: 900;
|
||||
content: "\f00d";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// color: inherit;
|
||||
font-size: 2.5rem;
|
||||
display: grid;
|
||||
/* align-self: center; */
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,15 +66,15 @@ class Notification {
|
|||
//-1 - bad
|
||||
show(): void {
|
||||
let cls = "notice";
|
||||
let icon = `<i class="fas fa-fw fa-exclamation"></i>`;
|
||||
let icon = `<i class="fas fa-info-circle"></i>`;
|
||||
let title = "Notice";
|
||||
if (this.level === 1) {
|
||||
cls = "good";
|
||||
icon = `<i class="fas fa-fw fa-check"></i>`;
|
||||
icon = `<i class="fas fa-check-circle"></i>`;
|
||||
title = "Success";
|
||||
} else if (this.level === -1) {
|
||||
cls = "bad";
|
||||
icon = `<i class="fas fa-fw fa-times"></i>`;
|
||||
icon = `<i class="fas fa-times-circle"></i>`;
|
||||
title = "Error";
|
||||
console.error(this.message);
|
||||
}
|
||||
|
|
@ -103,11 +103,10 @@ class Notification {
|
|||
}
|
||||
const oldHeight = $("#notificationCenter .history").height() as number;
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
<div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
const newHeight = $("#notificationCenter .history").height() as number;
|
||||
|
|
@ -122,11 +121,10 @@ class Notification {
|
|||
() => {
|
||||
$("#notificationCenter .history").css("margin-top", 0);
|
||||
$("#notificationCenter .history").prepend(`
|
||||
|
||||
|
||||
<div class="notif ${cls}" id=${this.id}>
|
||||
<div class="icon">${icon}</div>
|
||||
<div class="message"><div class="title">${title}</div>${this.message}</div>
|
||||
</div>
|
||||
<div class="message"><div class="title"><div class="icon">${icon}</div>${title}</div>${this.message}</div>
|
||||
</div>
|
||||
|
||||
`);
|
||||
$(`#notificationCenter .notif[id='${this.id}']`)
|
||||
|
|
|
|||
162
frontend/static/languages/japanese_romaji.json
Normal file
162
frontend/static/languages/japanese_romaji.json
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
{
|
||||
"name": "japanese_romaji",
|
||||
"noLazyMode": true,
|
||||
"bcp47": "jp-JP",
|
||||
"words": [
|
||||
"sumu",
|
||||
"hataraku",
|
||||
"sensei",
|
||||
"daigaku",
|
||||
"yasui",
|
||||
"takai",
|
||||
"motto",
|
||||
"doko",
|
||||
"ie",
|
||||
"iie",
|
||||
"hai",
|
||||
"watashi",
|
||||
"desu",
|
||||
"hiroi",
|
||||
"chiisai",
|
||||
"ookii",
|
||||
"suga",
|
||||
"tsugi",
|
||||
"suki",
|
||||
"furui",
|
||||
"atarashii",
|
||||
"hayai",
|
||||
"iro",
|
||||
"benkyou",
|
||||
"iku",
|
||||
"ooi",
|
||||
"itsu",
|
||||
"ima",
|
||||
"mada",
|
||||
"ato",
|
||||
"dou",
|
||||
"omoi",
|
||||
"densha",
|
||||
"kami",
|
||||
"osoi",
|
||||
"hayai",
|
||||
"shinu",
|
||||
"iru",
|
||||
"en",
|
||||
"koko",
|
||||
"taberu",
|
||||
"namae",
|
||||
"ichi",
|
||||
"oya",
|
||||
"sukoshi",
|
||||
"fuku",
|
||||
"se",
|
||||
"kanashii",
|
||||
"shaberu",
|
||||
"gemu",
|
||||
"tenki",
|
||||
"atsui",
|
||||
"nai",
|
||||
"kitanai",
|
||||
"suku",
|
||||
"nichi",
|
||||
"hairu",
|
||||
"hiraku",
|
||||
"mizu",
|
||||
"ni",
|
||||
"kumori",
|
||||
"dame",
|
||||
"san",
|
||||
"asa",
|
||||
"ame",
|
||||
"yasashii",
|
||||
"ippa",
|
||||
"hidarai",
|
||||
"ii",
|
||||
"ue",
|
||||
"eki",
|
||||
"oishii",
|
||||
"kirei",
|
||||
"shita",
|
||||
"chichi",
|
||||
"haha",
|
||||
"nani",
|
||||
"hito",
|
||||
"boku",
|
||||
"hoshii",
|
||||
"warui",
|
||||
"otearai",
|
||||
"hontouni",
|
||||
"samui",
|
||||
"atatakai",
|
||||
"otoko",
|
||||
"onna",
|
||||
"hyaku",
|
||||
"sekai",
|
||||
"yaru",
|
||||
"imu",
|
||||
"erabu",
|
||||
"kaji",
|
||||
"ji",
|
||||
"wa",
|
||||
"tada",
|
||||
"denwa",
|
||||
"amari",
|
||||
"isogashii",
|
||||
"aoi",
|
||||
"akai",
|
||||
"isu",
|
||||
"katsu",
|
||||
"makeru",
|
||||
"niku",
|
||||
"sakana",
|
||||
"neko",
|
||||
"inu",
|
||||
"tori",
|
||||
"raishuu",
|
||||
"maishuu",
|
||||
"dakera",
|
||||
"nan",
|
||||
"shiro",
|
||||
"ashita",
|
||||
"hitoride",
|
||||
"kibishii",
|
||||
"shinpai",
|
||||
"toshi",
|
||||
"youkoso",
|
||||
"tsukue",
|
||||
"eigo",
|
||||
"nihongo",
|
||||
"oto",
|
||||
"seiko",
|
||||
"naka",
|
||||
"sakana",
|
||||
"ringo",
|
||||
"umai",
|
||||
"sumaho",
|
||||
"shiken",
|
||||
"ongaku",
|
||||
"ana",
|
||||
"uma",
|
||||
"taiyou",
|
||||
"hon",
|
||||
"yoku",
|
||||
"juu",
|
||||
"yuumei",
|
||||
"ryouri",
|
||||
"hi",
|
||||
"sugoi",
|
||||
"kutsu",
|
||||
"no",
|
||||
"are",
|
||||
"kuruma",
|
||||
"mise",
|
||||
"tooi",
|
||||
"suru",
|
||||
"yoru",
|
||||
"made",
|
||||
"ka",
|
||||
"hoka",
|
||||
"kyou",
|
||||
"kazoku"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue