TudbuT/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Remove fomantic loader module (#26670)

Browse source 
Replace Fomantic `loader` CSS module with our existing `is-loading`
spinner. Only three places in the UI used this module, which are
pictured here:

imagediff:
<img width="1237" alt="Screenshot 2023-08-22 at 22 18 01"
src="https://github.com/go-gitea/gitea/assets/115237/b0d82531-f05e-43c6-9e5b-1bfc268c056d">

webauthn:
<img width="894" alt="Screenshot 2023-08-22 at 22 05 05"
src="https://github.com/go-gitea/gitea/assets/115237/7b583425-d944-474a-a57a-22a65bbd8b29">

heatmap (I removed the previous loading text, it was unreadable because
it was tiny and on fast machines only visible for a fraction of a
second):
<img width="764" alt="Screenshot 2023-08-22 at 22 18 44"
src="https://github.com/go-gitea/gitea/assets/115237/1c7472d6-3e17-4224-a992-d8c0b380cc73">

Also, heatmap container does not resize any more after loading now and
previous duplicate id `user-heatmap` is gone.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2023-08-25 18:03:14 +02:00 committed by GitHub
parent f626366f53
commit 8b5c081d76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 25 additions and 993 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
options/locale/locale_en-US.ini
View file

@ -598,7 +598,6 @@ overview = Overview
following = Following
follow = Follow
unfollow = Unfollow
heatmap.loading = Loading Heatmap…
user_bio = Biography
disabled_public_activity = This user has disabled the public visibility of the activity.
email_visibility.limited = Your email address is visible to all authenticated users

4
templates/user/auth/webauthn.tmpl
View file

@ -10,8 +10,8 @@
{{template "base/alert" .}}
<p>{{.locale.Tr "webauthn_sign_in"}}</p>
</div>
<div class="ui attached segment">
<div class="ui active indeterminate inline loader"></div>
<div class="ui attached segment gt-df gt-ac gt-jc gt-gap-2 gt-py-3">
<div class="is-loading" style="width: 40px; height: 40px"></div>
{{.locale.Tr "webauthn_press_button"}}
</div>
<div class="ui attached segment">

8
templates/user/heatmap.tmpl
View file

@ -1,14 +1,10 @@
{{if .HeatmapData}}
<div id="user-heatmap"
<div id="user-heatmap" class="is-loading"
data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}"
data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}"
data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}"
data-locale-more="{{.locale.Tr "heatmap.more"}}"
data-locale-less="{{.locale.Tr "heatmap.less"}}"
>
<div slot="loading">
<div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div>
</div>
</div>
></div>
<div class="divider"></div>
{{end}}

32
web_src/css/features/heatmap.css
View file

@ -2,7 +2,15 @@
width: 100%;
font-size: 9px;
position: relative;
min-height: 125px;
}
/* before the Vue component is mounted, show a loading indicator with dummy size */
/* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */
#user-heatmap.is-loading {
aspect-ratio: 5.415; /* the size is about 790 x 145 */
}
.user.profile #user-heatmap.is-loading {
aspect-ratio: 5.645; /* the size is about 953 x 169 */
}
#user-heatmap text {
@ -32,37 +40,15 @@
}
@media (max-width: 1200px) {
#user-heatmap {
min-height: 105px;
}
#user-heatmap .total-contributions {
left: 21px;
}
}
@media (max-width: 1000px) {
#user-heatmap {
min-height: 80px;
}
#user-heatmap .total-contributions {
font-size: 10px;
left: 17px;
bottom: -4px;
}
}
.user.profile #user-heatmap {
min-height: 135px;
}
@media (max-width: 1200px) {
.user.profile #user-heatmap {
min-height: 115px;
}
}
@media (max-width: 1000px) {
.user.profile #user-heatmap {
min-height: 90px;
}
}

4
web_src/css/user.css
View file

@ -58,10 +58,6 @@
}
}
.user.profile #loading-heatmap {
margin-bottom: 1em;
}
.user.profile .ui.secondary.stackable.pointing.menu {
flex-wrap: wrap;
}

942
web_src/fomantic/build/semantic.css generated
View file

@ -13544,948 +13544,6 @@ ol.ui.suffixed.list li:before,
/*******************************
User Variable Overrides
*******************************/
/*!
* # Fomantic-UI - Loader
* http://github.com/fomantic/Fomantic-UI/
*
*
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Loader
*******************************/
/* Standard Size */
.ui.loader {
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
text-align: center;
z-index: 1000;
transform: translateX(-50%) translateY(-50%);
}
/* Static Shape */
.ui.loader:before {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 100%;
height: 100%;
border-radius: 500rem;
border: 0.2em solid rgba(0, 0, 0, 0.1);
}
/* Active Shape */
.ui.loader:after {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 100%;
height: 100%;
-webkit-animation: loader 0.6s infinite linear;
animation: loader 0.6s infinite linear;
border: 0.2em solid #767676;
border-radius: 500rem;
box-shadow: 0 0 0 1px transparent;
}
/* Speeds */
.ui.fast.loading.loading:after,
.ui.fast.loading.loading .input > i.icon:after,
.ui.fast.loading.loading > i.icon:after,
.ui.fast.loader:after {
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
}
.ui.slow.loading.loading:after,
.ui.slow.loading.loading .input > i.icon:after,
.ui.slow.loading.loading > i.icon:after,
.ui.slow.loader:after {
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
}
/* Active Animation */
@-webkit-keyframes loader {
100% {
transform: rotate(360deg);
}
}
@keyframes loader {
100% {
transform: rotate(360deg);
}
}
/*-------------------
Coupling
--------------------*/
/* Show inside active dimmer */
.ui.dimmer > .loader {
display: block;
}
/* Black Dimmer */
.ui.dimmer > .ui.loader {
color: rgba(255, 255, 255, 0.9);
}
.ui.dimmer > .ui.loader:not(.elastic):before {
border-color: rgba(255, 255, 255, 0.15);
}
/* White Dimmer (Inverted) */
.ui.inverted.dimmer > .ui.loader {
color: rgba(0, 0, 0, 0.87);
}
.ui.inverted.dimmer > .ui.loader:not(.elastic):before {
border-color: rgba(0, 0, 0, 0.1);
}
/*******************************
Types
*******************************/
/*-------------------
Text
--------------------*/
.ui.ui.ui.ui.text.loader {
width: auto;
height: auto;
text-align: center;
font-style: normal;
}
/*******************************
States
*******************************/
.ui.indeterminate.loader:after {
animation-direction: reverse;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
}
.ui.loader.active,
.ui.loader.visible {
display: block;
}
.ui.loader.disabled,
.ui.loader.hidden {
display: none;
}
/*******************************
Variations
*******************************/
/*-------------------
Sizes
--------------------*/
.ui.loader {
width: 2.28571429rem;
height: 2.28571429rem;
font-size: 1em;
}
.ui.loader:before,
.ui.loader:after {
width: 2.28571429rem;
height: 2.28571429rem;
margin: 0 0 0 -1.14285714rem;
}
.ui.text.loader {
min-width: 2.28571429rem;
padding-top: 3.07142857rem;
}
.ui.mini.loader {
width: 1rem;
height: 1rem;
font-size: 0.78571429em;
}
.ui.mini.loader:before,
.ui.mini.loader:after {
width: 1rem;
height: 1rem;
margin: 0 0 0 -0.5rem;
}
.ui.mini.text.loader {
min-width: 1rem;
padding-top: 1.78571429rem;
}
.ui.tiny.loader {
width: 1.14285714rem;
height: 1.14285714rem;
font-size: 0.85714286em;
}
.ui.tiny.loader:before,
.ui.tiny.loader:after {
width: 1.14285714rem;
height: 1.14285714rem;
margin: 0 0 0 -0.57142857rem;
}
.ui.tiny.text.loader {
min-width: 1.14285714rem;
padding-top: 1.92857143rem;
}
.ui.small.loader {
width: 1.71428571rem;
height: 1.71428571rem;
font-size: 0.92857143em;
}
.ui.small.loader:before,
.ui.small.loader:after {
width: 1.71428571rem;
height: 1.71428571rem;
margin: 0 0 0 -0.85714286rem;
}
.ui.small.text.loader {
min-width: 1.71428571rem;
padding-top: 2.5rem;
}
.ui.large.loader {
width: 3.42857143rem;
height: 3.42857143rem;
font-size: 1.14285714em;
}
.ui.large.loader:before,
.ui.large.loader:after {
width: 3.42857143rem;
height: 3.42857143rem;
margin: 0 0 0 -1.71428571rem;
}
.ui.large.text.loader {
min-width: 3.42857143rem;
padding-top: 4.21428571rem;
}
.ui.big.loader {
width: 3.71428571rem;
height: 3.71428571rem;
font-size: 1.28571429em;
}
.ui.big.loader:before,
.ui.big.loader:after {
width: 3.71428571rem;
height: 3.71428571rem;
margin: 0 0 0 -1.85714286rem;
}
.ui.big.text.loader {
min-width: 3.71428571rem;
padding-top: 4.5rem;
}
.ui.huge.loader {
width: 4.14285714rem;
height: 4.14285714rem;
font-size: 1.42857143em;
}
.ui.huge.loader:before,
.ui.huge.loader:after {
width: 4.14285714rem;
height: 4.14285714rem;
margin: 0 0 0 -2.07142857rem;
}
.ui.huge.text.loader {
min-width: 4.14285714rem;
padding-top: 4.92857143rem;
}
.ui.massive.loader {
width: 4.57142857rem;
height: 4.57142857rem;
font-size: 1.71428571em;
}
.ui.massive.loader:before,
.ui.massive.loader:after {
width: 4.57142857rem;
height: 4.57142857rem;
margin: 0 0 0 -2.28571429rem;
}
.ui.massive.text.loader {
min-width: 4.57142857rem;
padding-top: 5.35714286rem;
}
/*-------------------
Colors
--------------------*/
.ui.primary.elastic.loader.loader:before,
.ui.primary.basic.elastic.loading.button:before,
.ui.primary.basic.elastic.loading.button:after,
.ui.primary.elastic.loading.loading.loading:not(.segment):before,
.ui.primary.elastic.loading.loading.loading .input > i.icon:before,
.ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
.ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.primary.loading.loading.loading.loading .input > i.icon:after,
.ui.primary.loading.loading.loading.loading > i.icon:after,
.ui.primary.loader.loader.loader:after {
color: #2185D0;
}
.ui.inverted.primary.elastic.loader:before,
.ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
.ui.inverted.primary.loader.loader.loader:after {
color: #54C8FF;
}
.ui.secondary.elastic.loader.loader:before,
.ui.secondary.basic.elastic.loading.button:before,
.ui.secondary.basic.elastic.loading.button:after,
.ui.secondary.elastic.loading.loading.loading:not(.segment):before,
.ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
.ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
.ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.secondary.loading.loading.loading.loading .input > i.icon:after,
.ui.secondary.loading.loading.loading.loading > i.icon:after,
.ui.secondary.loader.loader.loader:after {
color: #1B1C1D;
}
.ui.inverted.secondary.elastic.loader:before,
.ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
.ui.inverted.secondary.loader.loader.loader:after {
color: #545454;
}
.ui.red.elastic.loader.loader:before,
.ui.red.basic.elastic.loading.button:before,
.ui.red.basic.elastic.loading.button:after,
.ui.red.elastic.loading.loading.loading:not(.segment):before,
.ui.red.elastic.loading.loading.loading .input > i.icon:before,
.ui.red.elastic.loading.loading.loading.loading > i.icon:before,
.ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.red.loading.loading.loading.loading .input > i.icon:after,
.ui.red.loading.loading.loading.loading > i.icon:after,
.ui.red.loader.loader.loader:after {
color: #DB2828;
}
.ui.inverted.red.elastic.loader:before,
.ui.inverted.red.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.red.loading.loading.loading.loading > i.icon:after,
.ui.inverted.red.loader.loader.loader:after {
color: #FF695E;
}
.ui.orange.elastic.loader.loader:before,
.ui.orange.basic.elastic.loading.button:before,
.ui.orange.basic.elastic.loading.button:after,
.ui.orange.elastic.loading.loading.loading:not(.segment):before,
.ui.orange.elastic.loading.loading.loading .input > i.icon:before,
.ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
.ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.orange.loading.loading.loading.loading .input > i.icon:after,
.ui.orange.loading.loading.loading.loading > i.icon:after,
.ui.orange.loader.loader.loader:after {
color: #F2711C;
}
.ui.inverted.orange.elastic.loader:before,
.ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
.ui.inverted.orange.loader.loader.loader:after {
color: #FF851B;
}
.ui.yellow.elastic.loader.loader:before,
.ui.yellow.basic.elastic.loading.button:before,
.ui.yellow.basic.elastic.loading.button:after,
.ui.yellow.elastic.loading.loading.loading:not(.segment):before,
.ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
.ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
.ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.yellow.loading.loading.loading.loading .input > i.icon:after,
.ui.yellow.loading.loading.loading.loading > i.icon:after,
.ui.yellow.loader.loader.loader:after {
color: #FBBD08;
}
.ui.inverted.yellow.elastic.loader:before,
.ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
.ui.inverted.yellow.loader.loader.loader:after {
color: #FFE21F;
}
.ui.olive.elastic.loader.loader:before,
.ui.olive.basic.elastic.loading.button:before,
.ui.olive.basic.elastic.loading.button:after,
.ui.olive.elastic.loading.loading.loading:not(.segment):before,
.ui.olive.elastic.loading.loading.loading .input > i.icon:before,
.ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
.ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.olive.loading.loading.loading.loading .input > i.icon:after,
.ui.olive.loading.loading.loading.loading > i.icon:after,
.ui.olive.loader.loader.loader:after {
color: #B5CC18;
}
.ui.inverted.olive.elastic.loader:before,
.ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
.ui.inverted.olive.loader.loader.loader:after {
color: #D9E778;
}
.ui.green.elastic.loader.loader:before,
.ui.green.basic.elastic.loading.button:before,
.ui.green.basic.elastic.loading.button:after,
.ui.green.elastic.loading.loading.loading:not(.segment):before,
.ui.green.elastic.loading.loading.loading .input > i.icon:before,
.ui.green.elastic.loading.loading.loading.loading > i.icon:before,
.ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.green.loading.loading.loading.loading .input > i.icon:after,
.ui.green.loading.loading.loading.loading > i.icon:after,
.ui.green.loader.loader.loader:after {
color: #21BA45;
}
.ui.inverted.green.elastic.loader:before,
.ui.inverted.green.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.green.loading.loading.loading.loading > i.icon:after,
.ui.inverted.green.loader.loader.loader:after {
color: #2ECC40;
}
.ui.teal.elastic.loader.loader:before,
.ui.teal.basic.elastic.loading.button:before,
.ui.teal.basic.elastic.loading.button:after,
.ui.teal.elastic.loading.loading.loading:not(.segment):before,
.ui.teal.elastic.loading.loading.loading .input > i.icon:before,
.ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
.ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.teal.loading.loading.loading.loading .input > i.icon:after,
.ui.teal.loading.loading.loading.loading > i.icon:after,
.ui.teal.loader.loader.loader:after {
color: #00B5AD;
}
.ui.inverted.teal.elastic.loader:before,
.ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
.ui.inverted.teal.loader.loader.loader:after {
color: #6DFFFF;
}
.ui.blue.elastic.loader.loader:before,
.ui.blue.basic.elastic.loading.button:before,
.ui.blue.basic.elastic.loading.button:after,
.ui.blue.elastic.loading.loading.loading:not(.segment):before,
.ui.blue.elastic.loading.loading.loading .input > i.icon:before,
.ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
.ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.blue.loading.loading.loading.loading .input > i.icon:after,
.ui.blue.loading.loading.loading.loading > i.icon:after,
.ui.blue.loader.loader.loader:after {
color: #2185D0;
}
.ui.inverted.blue.elastic.loader:before,
.ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
.ui.inverted.blue.loader.loader.loader:after {
color: #54C8FF;
}
.ui.violet.elastic.loader.loader:before,
.ui.violet.basic.elastic.loading.button:before,
.ui.violet.basic.elastic.loading.button:after,
.ui.violet.elastic.loading.loading.loading:not(.segment):before,
.ui.violet.elastic.loading.loading.loading .input > i.icon:before,
.ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
.ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.violet.loading.loading.loading.loading .input > i.icon:after,
.ui.violet.loading.loading.loading.loading > i.icon:after,
.ui.violet.loader.loader.loader:after {
color: #6435C9;
}
.ui.inverted.violet.elastic.loader:before,
.ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
.ui.inverted.violet.loader.loader.loader:after {
color: #A291FB;
}
.ui.purple.elastic.loader.loader:before,
.ui.purple.basic.elastic.loading.button:before,
.ui.purple.basic.elastic.loading.button:after,
.ui.purple.elastic.loading.loading.loading:not(.segment):before,
.ui.purple.elastic.loading.loading.loading .input > i.icon:before,
.ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
.ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.purple.loading.loading.loading.loading .input > i.icon:after,
.ui.purple.loading.loading.loading.loading > i.icon:after,
.ui.purple.loader.loader.loader:after {
color: #A333C8;
}
.ui.inverted.purple.elastic.loader:before,
.ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
.ui.inverted.purple.loader.loader.loader:after {
color: #DC73FF;
}
.ui.pink.elastic.loader.loader:before,
.ui.pink.basic.elastic.loading.button:before,
.ui.pink.basic.elastic.loading.button:after,
.ui.pink.elastic.loading.loading.loading:not(.segment):before,
.ui.pink.elastic.loading.loading.loading .input > i.icon:before,
.ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
.ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.pink.loading.loading.loading.loading .input > i.icon:after,
.ui.pink.loading.loading.loading.loading > i.icon:after,
.ui.pink.loader.loader.loader:after {
color: #E03997;
}
.ui.inverted.pink.elastic.loader:before,
.ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
.ui.inverted.pink.loader.loader.loader:after {
color: #FF8EDF;
}
.ui.brown.elastic.loader.loader:before,
.ui.brown.basic.elastic.loading.button:before,
.ui.brown.basic.elastic.loading.button:after,
.ui.brown.elastic.loading.loading.loading:not(.segment):before,
.ui.brown.elastic.loading.loading.loading .input > i.icon:before,
.ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
.ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.brown.loading.loading.loading.loading .input > i.icon:after,
.ui.brown.loading.loading.loading.loading > i.icon:after,
.ui.brown.loader.loader.loader:after {
color: #A5673F;
}
.ui.inverted.brown.elastic.loader:before,
.ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
.ui.inverted.brown.loader.loader.loader:after {
color: #D67C1C;
}
.ui.grey.elastic.loader.loader:before,
.ui.grey.basic.elastic.loading.button:before,
.ui.grey.basic.elastic.loading.button:after,
.ui.grey.elastic.loading.loading.loading:not(.segment):before,
.ui.grey.elastic.loading.loading.loading .input > i.icon:before,
.ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
.ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.grey.loading.loading.loading.loading .input > i.icon:after,
.ui.grey.loading.loading.loading.loading > i.icon:after,
.ui.grey.loader.loader.loader:after {
color: #767676;
}
.ui.inverted.grey.elastic.loader:before,
.ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
.ui.inverted.grey.loader.loader.loader:after {
color: #DCDDDE;
}
.ui.black.elastic.loader.loader:before,
.ui.black.basic.elastic.loading.button:before,
.ui.black.basic.elastic.loading.button:after,
.ui.black.elastic.loading.loading.loading:not(.segment):before,
.ui.black.elastic.loading.loading.loading .input > i.icon:before,
.ui.black.elastic.loading.loading.loading.loading > i.icon:before,
.ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
.ui.black.loading.loading.loading.loading .input > i.icon:after,
.ui.black.loading.loading.loading.loading > i.icon:after,
.ui.black.loader.loader.loader:after {
color: #1B1C1D;
}
.ui.inverted.black.elastic.loader:before,
.ui.inverted.black.elastic.loading.loading.loading:not(.segment):before,
.ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
.ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
.ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
.ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
.ui.inverted.black.loading.loading.loading.loading > i.icon:after,
.ui.inverted.black.loader.loader.loader:after {
color: #545454;
}
.ui.elastic.loader.loader:before,
.ui.elastic.loading.loading.loading:before,
.ui.elastic.loading.loading.loading .input > i.icon:before,
.ui.elastic.loading.loading.loading > i.icon:before,
.ui.loading.loading.loading.loading:not(.usual):after,
.ui.loading.loading.loading.loading .input > i.icon:after,
.ui.loading.loading.loading.loading > i.icon:after,
.ui.loader.loader.loader:after {
border-color: currentColor;
}
.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
color: #FFFFFF;
}
.ui.elastic.basic.loading.button:before,
.ui.elastic.basic.loading.button:after {
color: #767676;
}
.ui.double.loading.loading.loading.loading.button:after {
border-bottom-color: currentColor;
}
/*-------------------
Inline
--------------------*/
.ui.inline.loader {
position: relative;
vertical-align: middle;
margin: 0;
left: 0;
top: 0;
transform: none;
}
.ui.inline.loader.active,
.ui.inline.loader.visible {
display: inline-block;
}
/* Centered Inline */
.ui.centered.inline.loader.active,
.ui.centered.inline.loader.visible {
display: block;
margin-left: auto;
margin-right: auto;
}
.ui.loading.loading.loading.loading.loading.loading:after,
.ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
.ui.loading.loading.loading.loading.loading.loading > i.icon:after,
.ui.loader.loader.loader.loader.loader:after {
border-left-color: transparent;
border-right-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
.ui.loader.loader.loader.loader.loader.loader:not(.double):after {
border-bottom-color: transparent;
}
.ui.loading.loading.loading.loading.loading.loading.segment:after,
.ui.loading.loading.loading.loading.loading.loading.form:after {
border-left-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
}
.ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
.ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
border-bottom-color: rgba(0, 0, 0, 0.1);
}
/*-------------------
Elastic
--------------------*/
.ui.dimmer > .ui.elastic.loader {
color: #FFFFFF;
}
.ui.inverted.dimmer > .ui.elastic.loader {
color: #767676;
}
.ui.elastic.loading.loading:not(.form):not(.segment):after,
.ui.elastic.loading.loading .input > i.icon:after,
.ui.elastic.loading.loading > i.icon:after,
.ui.elastic.loader.loader:after {
-webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
.ui.elastic.loading.loading.loading .input > i.icon:before,
.ui.elastic.loading.loading.loading > i.icon:before,
.ui.elastic.loader.loader:before {
-webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
-moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
border-right-color: transparent;
}
.ui.elastic.inline.loader:empty {
-webkit-animation: loader 8s infinite linear;
animation: loader 8s infinite linear;
}
.ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
.ui.slow.elastic.loading.loading .input > i.icon:after,
.ui.slow.elastic.loading.loading > i.icon:after,
.ui.slow.elastic.loader.loader:after {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
}
.ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
.ui.slow.elastic.loading.loading.loading .input > i.icon:before,
.ui.slow.elastic.loading.loading.loading > i.icon:before,
.ui.slow.elastic.loader.loader:before {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
}
.ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
.ui.fast.elastic.loading.loading .input > i.icon:after,
.ui.fast.elastic.loading.loading > i.icon:after,
.ui.fast.elastic.loader.loader:after {
-webkit-animation-duration: 0.66s;
animation-duration: 0.66s;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
.ui.fast.elastic.loading.loading.loading .input > i.icon:before,
.ui.fast.elastic.loading.loading.loading > i.icon:before,
.ui.fast.elastic.loader.loader:before {
-webkit-animation-duration: 0.66s;
animation-duration: 0.66s;
}
@-webkit-keyframes elastic-loader {
0%, 1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%, 50% {
border-left-color: inherit;
}
10%, 35.1% {
border-bottom-color: transparent;
}
10.1%, 35% {
border-bottom-color: inherit;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(360deg);
}
}
@keyframes elastic-loader {
0%, 1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%, 50% {
border-left-color: inherit;
}
10%, 35.1% {
border-bottom-color: transparent;
}
10.1%, 35% {
border-bottom-color: inherit;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(360deg);
}
}
@-webkit-keyframes currentcolor-elastic-loader {
0%, 1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%, 50% {
border-left-color: currentColor;
}
10%, 35.1% {
border-bottom-color: transparent;
}
10.1%, 35% {
border-bottom-color: currentColor;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(360deg);
}
}
@keyframes currentcolor-elastic-loader {
0%, 1% {
border-left-color: transparent;
border-bottom-color: transparent;
}
1.1%, 50% {
border-left-color: currentColor;
}
10%, 35.1% {
border-bottom-color: transparent;
}
10.1%, 35% {
border-bottom-color: currentColor;
}
50.1% {
border-left-color: transparent;
}
100% {
border-left-color: transparent;
border-bottom-color: transparent;
transform: rotate(360deg);
}
}
/*******************************
Theme Overrides
*******************************/
/*******************************
Site Overrides
*******************************/
/*
* # Fomantic - Menu
* http://github.com/fomantic/Fomantic-UI/

1
web_src/fomantic/semantic.json
View file

@ -34,7 +34,6 @@
"item",
"label",
"list",
"loader",
"menu",
"message",
"modal",

24
web_src/js/components/ActivityHeatmap.vue
View file

@ -1,18 +1,16 @@
<template>
<div id="user-heatmap">
<div class="total-contributions">
{{ locale.contributions_in_the_last_12_months }}
</div>
<calendar-heatmap
:locale="locale"
:no-data-text="locale.no_contributions"
:tooltip-unit="locale.contributions"
:end-date="endDate"
:values="values"
:range-color="colorRange"
@day-click="handleDayClick($event)"
/>
<div class="total-contributions">
{{ locale.contributions_in_the_last_12_months }}
</div>
<calendar-heatmap
:locale="locale"
:no-data-text="locale.no_contributions"
:tooltip-unit="locale.contributions"
:end-date="endDate"
:values="values"
:range-color="colorRange"
@day-click="handleDayClick($event)"
/>
</template>
<script>
import {CalendarHeatmap} from 'vue3-calendar-heatmap';

2
web_src/js/features/heatmap.js
View file

@ -30,8 +30,8 @@ export function initHeatmap() {
};
const View = createApp(ActivityHeatmap, {values, locale});
View.mount(el);
el.classList.remove('is-loading');
} catch (err) {
console.error('Heatmap failed to load', err);
el.textContent = 'Heatmap failed to load';