luckyimnotanigger/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-05-14 05:52:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Add loading spinners and mermaid error handling (#12358)

Browse source 
- Add loading spinners on editor and mermaid renderers
- Add error handling and inline error box for mermaid
- Fix Mermaid rendering by using the .init api
This commit is contained in:
silverwind 2020-08-04 21:56:37 +02:00 • committed by GitHub
parent 5e5c893555
commit e61c09ed73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 148 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web_src/less/_markdown.less
View file

@ -495,10 +495,20 @@
}
}
.mermaid-chart {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin: 1rem 0;
.markdown-block-error {
margin-bottom: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: none !important;
font-size: 85% !important;
white-space: pre !important;
padding: .5rem 1rem !important;
text-align: left !important;
}
.markdown-block-error + pre {
border-top: none !important;
margin-top: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}

34
web_src/less/features/animations.less Normal file
View file

@ -0,0 +1,34 @@
@keyframes isloadingspin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.is-loading {
background: transparent !important;
color: transparent !important;
border: transparent !important;
pointer-events: none !important;
position: relative !important;
overflow: hidden !important;
}
.is-loading:after {
content: "";
position: absolute;
display: block;
width: 4rem;
height: 4rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: isloadingspin 500ms infinite linear;
border-width: 4px;
border-style: solid;
border-color: #ececec #ececec #666 #666;
border-radius: 100%;
}
.markdown pre.is-loading,
.editor-loading.is-loading {
height: 12rem;
}

2
web_src/less/index.less
View file

@ -1,5 +1,7 @@
@import "~font-awesome/css/font-awesome.css";
@import "./vendor/gitGraph.css";
@import "./features/animations.less";
@import "./markdown/mermaid.less";
@import "_svg";
@import "_tribute";

12
web_src/less/markdown/mermaid.less Normal file
View file

@ -0,0 +1,12 @@
.mermaid-chart {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
margin: 1rem 0;
}
/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
body > div[id*="mermaid-"] {
display: none !important;
}

12
web_src/less/themes/theme-arc-green.less
View file

@ -1260,7 +1260,8 @@ input {
border-color: #794f31;
}
.ui.red.message {
.ui.red.message,
.ui.error.message {
background-color: rgba(80, 23, 17, .6);
color: #f9cbcb;
box-shadow: 0 0 0 1px rgba(121, 71, 66, .5) inset, 0 0 0 0 transparent;
@ -1923,3 +1924,12 @@ footer .container .links > * {
.mermaid-chart {
filter: invert(84%) hue-rotate(180deg);
}
.is-loading:after {
border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
}
.markdown-block-error {
border: 1px solid rgba(121, 71, 66, .5) !important;
border-bottom: none !important;
}