oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove fomantic loader module (#26670)

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>

authored by

silverwind
wxiaoguang and committed by
GitHub 8b5c081d f626366f

+25 -993
-1
options/locale/locale_en-US.ini
··· 598 598 following = Following 599 599 follow = Follow 600 600 unfollow = Unfollow 601 - heatmap.loading = Loading Heatmap… 602 601 user_bio = Biography 603 602 disabled_public_activity = This user has disabled the public visibility of the activity. 604 603 email_visibility.limited = Your email address is visible to all authenticated users
+2 -2
templates/user/auth/webauthn.tmpl
··· 10 10 {{template "base/alert" .}} 11 11 <p>{{.locale.Tr "webauthn_sign_in"}}</p> 12 12 </div> 13 - <div class="ui attached segment"> 14 - <div class="ui active indeterminate inline loader"></div> 13 + <div class="ui attached segment gt-df gt-ac gt-jc gt-gap-2 gt-py-3"> 14 + <div class="is-loading" style="width: 40px; height: 40px"></div> 15 15 {{.locale.Tr "webauthn_press_button"}} 16 16 </div> 17 17 <div class="ui attached segment">
+2 -6
templates/user/heatmap.tmpl
··· 1 1 {{if .HeatmapData}} 2 - <div id="user-heatmap" 2 + <div id="user-heatmap" class="is-loading" 3 3 data-heatmap-data="{{JsonUtils.EncodeToString .HeatmapData}}" 4 4 data-locale-total-contributions="{{$.locale.Tr "heatmap.number_of_contributions_in_the_last_12_months" ($.locale.PrettyNumber .HeatmapTotalContributions)}}" 5 5 data-locale-no-contributions="{{.locale.Tr "heatmap.no_contributions"}}" 6 6 data-locale-more="{{.locale.Tr "heatmap.more"}}" 7 7 data-locale-less="{{.locale.Tr "heatmap.less"}}" 8 - > 9 - <div slot="loading"> 10 - <div class="ui active centered inline indeterminate text loader" id="loading-heatmap">{{.locale.Tr "user.heatmap.loading"}}</div> 11 - </div> 12 - </div> 8 + ></div> 13 9 <div class="divider"></div> 14 10 {{end}}
+9 -23
web_src/css/features/heatmap.css
··· 2 2 width: 100%; 3 3 font-size: 9px; 4 4 position: relative; 5 - min-height: 125px; 5 + } 6 + 7 + /* before the Vue component is mounted, show a loading indicator with dummy size */ 8 + /* the ratio is guesswork, see https://github.com/razorness/vue3-calendar-heatmap/issues/26 */ 9 + #user-heatmap.is-loading { 10 + aspect-ratio: 5.415; /* the size is about 790 x 145 */ 11 + } 12 + .user.profile #user-heatmap.is-loading { 13 + aspect-ratio: 5.645; /* the size is about 953 x 169 */ 6 14 } 7 15 8 16 #user-heatmap text { ··· 32 40 } 33 41 34 42 @media (max-width: 1200px) { 35 - #user-heatmap { 36 - min-height: 105px; 37 - } 38 43 #user-heatmap .total-contributions { 39 44 left: 21px; 40 45 } 41 46 } 42 47 43 48 @media (max-width: 1000px) { 44 - #user-heatmap { 45 - min-height: 80px; 46 - } 47 49 #user-heatmap .total-contributions { 48 50 font-size: 10px; 49 51 left: 17px; 50 52 bottom: -4px; 51 53 } 52 54 } 53 - 54 - .user.profile #user-heatmap { 55 - min-height: 135px; 56 - } 57 - 58 - @media (max-width: 1200px) { 59 - .user.profile #user-heatmap { 60 - min-height: 115px; 61 - } 62 - } 63 - 64 - @media (max-width: 1000px) { 65 - .user.profile #user-heatmap { 66 - min-height: 90px; 67 - } 68 - }
-4
web_src/css/user.css
··· 58 58 } 59 59 } 60 60 61 - .user.profile #loading-heatmap { 62 - margin-bottom: 1em; 63 - } 64 - 65 61 .user.profile .ui.secondary.stackable.pointing.menu { 66 62 flex-wrap: wrap; 67 63 }
-942
web_src/fomantic/build/semantic.css
··· 13544 13544 /******************************* 13545 13545 User Variable Overrides 13546 13546 *******************************/ 13547 - /*! 13548 - * # Fomantic-UI - Loader 13549 - * http://github.com/fomantic/Fomantic-UI/ 13550 - * 13551 - * 13552 - * Released under the MIT license 13553 - * http://opensource.org/licenses/MIT 13554 - * 13555 - */ 13556 - 13557 - /******************************* 13558 - Loader 13559 - *******************************/ 13560 - 13561 - /* Standard Size */ 13562 - 13563 - .ui.loader { 13564 - display: none; 13565 - position: absolute; 13566 - top: 50%; 13567 - left: 50%; 13568 - margin: 0; 13569 - text-align: center; 13570 - z-index: 1000; 13571 - transform: translateX(-50%) translateY(-50%); 13572 - } 13573 - 13574 - /* Static Shape */ 13575 - 13576 - .ui.loader:before { 13577 - position: absolute; 13578 - content: ''; 13579 - top: 0; 13580 - left: 50%; 13581 - width: 100%; 13582 - height: 100%; 13583 - border-radius: 500rem; 13584 - border: 0.2em solid rgba(0, 0, 0, 0.1); 13585 - } 13586 - 13587 - /* Active Shape */ 13588 - 13589 - .ui.loader:after { 13590 - position: absolute; 13591 - content: ''; 13592 - top: 0; 13593 - left: 50%; 13594 - width: 100%; 13595 - height: 100%; 13596 - -webkit-animation: loader 0.6s infinite linear; 13597 - animation: loader 0.6s infinite linear; 13598 - border: 0.2em solid #767676; 13599 - border-radius: 500rem; 13600 - box-shadow: 0 0 0 1px transparent; 13601 - } 13602 - 13603 - /* Speeds */ 13604 - 13605 - .ui.fast.loading.loading:after, 13606 - .ui.fast.loading.loading .input > i.icon:after, 13607 - .ui.fast.loading.loading > i.icon:after, 13608 - .ui.fast.loader:after { 13609 - -webkit-animation-duration: 0.3s; 13610 - animation-duration: 0.3s; 13611 - } 13612 - 13613 - .ui.slow.loading.loading:after, 13614 - .ui.slow.loading.loading .input > i.icon:after, 13615 - .ui.slow.loading.loading > i.icon:after, 13616 - .ui.slow.loader:after { 13617 - -webkit-animation-duration: 0.9s; 13618 - animation-duration: 0.9s; 13619 - } 13620 - 13621 - /* Active Animation */ 13622 - 13623 - @-webkit-keyframes loader { 13624 - 100% { 13625 - transform: rotate(360deg); 13626 - } 13627 - } 13628 - 13629 - @keyframes loader { 13630 - 100% { 13631 - transform: rotate(360deg); 13632 - } 13633 - } 13634 - 13635 - /*------------------- 13636 - Coupling 13637 - --------------------*/ 13638 - 13639 - /* Show inside active dimmer */ 13640 - 13641 - .ui.dimmer > .loader { 13642 - display: block; 13643 - } 13644 - 13645 - /* Black Dimmer */ 13646 - 13647 - .ui.dimmer > .ui.loader { 13648 - color: rgba(255, 255, 255, 0.9); 13649 - } 13650 - 13651 - .ui.dimmer > .ui.loader:not(.elastic):before { 13652 - border-color: rgba(255, 255, 255, 0.15); 13653 - } 13654 - 13655 - /* White Dimmer (Inverted) */ 13656 - 13657 - .ui.inverted.dimmer > .ui.loader { 13658 - color: rgba(0, 0, 0, 0.87); 13659 - } 13660 - 13661 - .ui.inverted.dimmer > .ui.loader:not(.elastic):before { 13662 - border-color: rgba(0, 0, 0, 0.1); 13663 - } 13664 - 13665 - /******************************* 13666 - Types 13667 - *******************************/ 13668 - 13669 - /*------------------- 13670 - Text 13671 - --------------------*/ 13672 - 13673 - .ui.ui.ui.ui.text.loader { 13674 - width: auto; 13675 - height: auto; 13676 - text-align: center; 13677 - font-style: normal; 13678 - } 13679 - 13680 - /******************************* 13681 - States 13682 - *******************************/ 13683 - 13684 - .ui.indeterminate.loader:after { 13685 - animation-direction: reverse; 13686 - -webkit-animation-duration: 1.2s; 13687 - animation-duration: 1.2s; 13688 - } 13689 - 13690 - .ui.loader.active, 13691 - .ui.loader.visible { 13692 - display: block; 13693 - } 13694 - 13695 - .ui.loader.disabled, 13696 - .ui.loader.hidden { 13697 - display: none; 13698 - } 13699 - 13700 - /******************************* 13701 - Variations 13702 - *******************************/ 13703 - 13704 - /*------------------- 13705 - Sizes 13706 - --------------------*/ 13707 - 13708 - .ui.loader { 13709 - width: 2.28571429rem; 13710 - height: 2.28571429rem; 13711 - font-size: 1em; 13712 - } 13713 - 13714 - .ui.loader:before, 13715 - .ui.loader:after { 13716 - width: 2.28571429rem; 13717 - height: 2.28571429rem; 13718 - margin: 0 0 0 -1.14285714rem; 13719 - } 13720 - 13721 - .ui.text.loader { 13722 - min-width: 2.28571429rem; 13723 - padding-top: 3.07142857rem; 13724 - } 13725 - 13726 - .ui.mini.loader { 13727 - width: 1rem; 13728 - height: 1rem; 13729 - font-size: 0.78571429em; 13730 - } 13731 - 13732 - .ui.mini.loader:before, 13733 - .ui.mini.loader:after { 13734 - width: 1rem; 13735 - height: 1rem; 13736 - margin: 0 0 0 -0.5rem; 13737 - } 13738 - 13739 - .ui.mini.text.loader { 13740 - min-width: 1rem; 13741 - padding-top: 1.78571429rem; 13742 - } 13743 - 13744 - .ui.tiny.loader { 13745 - width: 1.14285714rem; 13746 - height: 1.14285714rem; 13747 - font-size: 0.85714286em; 13748 - } 13749 - 13750 - .ui.tiny.loader:before, 13751 - .ui.tiny.loader:after { 13752 - width: 1.14285714rem; 13753 - height: 1.14285714rem; 13754 - margin: 0 0 0 -0.57142857rem; 13755 - } 13756 - 13757 - .ui.tiny.text.loader { 13758 - min-width: 1.14285714rem; 13759 - padding-top: 1.92857143rem; 13760 - } 13761 - 13762 - .ui.small.loader { 13763 - width: 1.71428571rem; 13764 - height: 1.71428571rem; 13765 - font-size: 0.92857143em; 13766 - } 13767 - 13768 - .ui.small.loader:before, 13769 - .ui.small.loader:after { 13770 - width: 1.71428571rem; 13771 - height: 1.71428571rem; 13772 - margin: 0 0 0 -0.85714286rem; 13773 - } 13774 - 13775 - .ui.small.text.loader { 13776 - min-width: 1.71428571rem; 13777 - padding-top: 2.5rem; 13778 - } 13779 - 13780 - .ui.large.loader { 13781 - width: 3.42857143rem; 13782 - height: 3.42857143rem; 13783 - font-size: 1.14285714em; 13784 - } 13785 - 13786 - .ui.large.loader:before, 13787 - .ui.large.loader:after { 13788 - width: 3.42857143rem; 13789 - height: 3.42857143rem; 13790 - margin: 0 0 0 -1.71428571rem; 13791 - } 13792 - 13793 - .ui.large.text.loader { 13794 - min-width: 3.42857143rem; 13795 - padding-top: 4.21428571rem; 13796 - } 13797 - 13798 - .ui.big.loader { 13799 - width: 3.71428571rem; 13800 - height: 3.71428571rem; 13801 - font-size: 1.28571429em; 13802 - } 13803 - 13804 - .ui.big.loader:before, 13805 - .ui.big.loader:after { 13806 - width: 3.71428571rem; 13807 - height: 3.71428571rem; 13808 - margin: 0 0 0 -1.85714286rem; 13809 - } 13810 - 13811 - .ui.big.text.loader { 13812 - min-width: 3.71428571rem; 13813 - padding-top: 4.5rem; 13814 - } 13815 - 13816 - .ui.huge.loader { 13817 - width: 4.14285714rem; 13818 - height: 4.14285714rem; 13819 - font-size: 1.42857143em; 13820 - } 13821 - 13822 - .ui.huge.loader:before, 13823 - .ui.huge.loader:after { 13824 - width: 4.14285714rem; 13825 - height: 4.14285714rem; 13826 - margin: 0 0 0 -2.07142857rem; 13827 - } 13828 - 13829 - .ui.huge.text.loader { 13830 - min-width: 4.14285714rem; 13831 - padding-top: 4.92857143rem; 13832 - } 13833 - 13834 - .ui.massive.loader { 13835 - width: 4.57142857rem; 13836 - height: 4.57142857rem; 13837 - font-size: 1.71428571em; 13838 - } 13839 - 13840 - .ui.massive.loader:before, 13841 - .ui.massive.loader:after { 13842 - width: 4.57142857rem; 13843 - height: 4.57142857rem; 13844 - margin: 0 0 0 -2.28571429rem; 13845 - } 13846 - 13847 - .ui.massive.text.loader { 13848 - min-width: 4.57142857rem; 13849 - padding-top: 5.35714286rem; 13850 - } 13851 - 13852 - /*------------------- 13853 - Colors 13854 - --------------------*/ 13855 - 13856 - .ui.primary.elastic.loader.loader:before, 13857 - .ui.primary.basic.elastic.loading.button:before, 13858 - .ui.primary.basic.elastic.loading.button:after, 13859 - .ui.primary.elastic.loading.loading.loading:not(.segment):before, 13860 - .ui.primary.elastic.loading.loading.loading .input > i.icon:before, 13861 - .ui.primary.elastic.loading.loading.loading.loading > i.icon:before, 13862 - .ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after, 13863 - .ui.primary.loading.loading.loading.loading .input > i.icon:after, 13864 - .ui.primary.loading.loading.loading.loading > i.icon:after, 13865 - .ui.primary.loader.loader.loader:after { 13866 - color: #2185D0; 13867 - } 13868 - 13869 - .ui.inverted.primary.elastic.loader:before, 13870 - .ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before, 13871 - .ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before, 13872 - .ui.inverted.primary.elastic.loading.loading.loading > i.icon:before, 13873 - .ui.inverted.primary.loading.loading.loading.loading:not(.usual):after, 13874 - .ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after, 13875 - .ui.inverted.primary.loading.loading.loading.loading > i.icon:after, 13876 - .ui.inverted.primary.loader.loader.loader:after { 13877 - color: #54C8FF; 13878 - } 13879 - 13880 - .ui.secondary.elastic.loader.loader:before, 13881 - .ui.secondary.basic.elastic.loading.button:before, 13882 - .ui.secondary.basic.elastic.loading.button:after, 13883 - .ui.secondary.elastic.loading.loading.loading:not(.segment):before, 13884 - .ui.secondary.elastic.loading.loading.loading .input > i.icon:before, 13885 - .ui.secondary.elastic.loading.loading.loading.loading > i.icon:before, 13886 - .ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after, 13887 - .ui.secondary.loading.loading.loading.loading .input > i.icon:after, 13888 - .ui.secondary.loading.loading.loading.loading > i.icon:after, 13889 - .ui.secondary.loader.loader.loader:after { 13890 - color: #1B1C1D; 13891 - } 13892 - 13893 - .ui.inverted.secondary.elastic.loader:before, 13894 - .ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before, 13895 - .ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before, 13896 - .ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before, 13897 - .ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after, 13898 - .ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after, 13899 - .ui.inverted.secondary.loading.loading.loading.loading > i.icon:after, 13900 - .ui.inverted.secondary.loader.loader.loader:after { 13901 - color: #545454; 13902 - } 13903 - 13904 - .ui.red.elastic.loader.loader:before, 13905 - .ui.red.basic.elastic.loading.button:before, 13906 - .ui.red.basic.elastic.loading.button:after, 13907 - .ui.red.elastic.loading.loading.loading:not(.segment):before, 13908 - .ui.red.elastic.loading.loading.loading .input > i.icon:before, 13909 - .ui.red.elastic.loading.loading.loading.loading > i.icon:before, 13910 - .ui.red.loading.loading.loading.loading:not(.usual):not(.button):after, 13911 - .ui.red.loading.loading.loading.loading .input > i.icon:after, 13912 - .ui.red.loading.loading.loading.loading > i.icon:after, 13913 - .ui.red.loader.loader.loader:after { 13914 - color: #DB2828; 13915 - } 13916 - 13917 - .ui.inverted.red.elastic.loader:before, 13918 - .ui.inverted.red.elastic.loading.loading.loading:not(.segment):before, 13919 - .ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before, 13920 - .ui.inverted.red.elastic.loading.loading.loading > i.icon:before, 13921 - .ui.inverted.red.loading.loading.loading.loading:not(.usual):after, 13922 - .ui.inverted.red.loading.loading.loading.loading .input > i.icon:after, 13923 - .ui.inverted.red.loading.loading.loading.loading > i.icon:after, 13924 - .ui.inverted.red.loader.loader.loader:after { 13925 - color: #FF695E; 13926 - } 13927 - 13928 - .ui.orange.elastic.loader.loader:before, 13929 - .ui.orange.basic.elastic.loading.button:before, 13930 - .ui.orange.basic.elastic.loading.button:after, 13931 - .ui.orange.elastic.loading.loading.loading:not(.segment):before, 13932 - .ui.orange.elastic.loading.loading.loading .input > i.icon:before, 13933 - .ui.orange.elastic.loading.loading.loading.loading > i.icon:before, 13934 - .ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after, 13935 - .ui.orange.loading.loading.loading.loading .input > i.icon:after, 13936 - .ui.orange.loading.loading.loading.loading > i.icon:after, 13937 - .ui.orange.loader.loader.loader:after { 13938 - color: #F2711C; 13939 - } 13940 - 13941 - .ui.inverted.orange.elastic.loader:before, 13942 - .ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before, 13943 - .ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before, 13944 - .ui.inverted.orange.elastic.loading.loading.loading > i.icon:before, 13945 - .ui.inverted.orange.loading.loading.loading.loading:not(.usual):after, 13946 - .ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after, 13947 - .ui.inverted.orange.loading.loading.loading.loading > i.icon:after, 13948 - .ui.inverted.orange.loader.loader.loader:after { 13949 - color: #FF851B; 13950 - } 13951 - 13952 - .ui.yellow.elastic.loader.loader:before, 13953 - .ui.yellow.basic.elastic.loading.button:before, 13954 - .ui.yellow.basic.elastic.loading.button:after, 13955 - .ui.yellow.elastic.loading.loading.loading:not(.segment):before, 13956 - .ui.yellow.elastic.loading.loading.loading .input > i.icon:before, 13957 - .ui.yellow.elastic.loading.loading.loading.loading > i.icon:before, 13958 - .ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after, 13959 - .ui.yellow.loading.loading.loading.loading .input > i.icon:after, 13960 - .ui.yellow.loading.loading.loading.loading > i.icon:after, 13961 - .ui.yellow.loader.loader.loader:after { 13962 - color: #FBBD08; 13963 - } 13964 - 13965 - .ui.inverted.yellow.elastic.loader:before, 13966 - .ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before, 13967 - .ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before, 13968 - .ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before, 13969 - .ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after, 13970 - .ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after, 13971 - .ui.inverted.yellow.loading.loading.loading.loading > i.icon:after, 13972 - .ui.inverted.yellow.loader.loader.loader:after { 13973 - color: #FFE21F; 13974 - } 13975 - 13976 - .ui.olive.elastic.loader.loader:before, 13977 - .ui.olive.basic.elastic.loading.button:before, 13978 - .ui.olive.basic.elastic.loading.button:after, 13979 - .ui.olive.elastic.loading.loading.loading:not(.segment):before, 13980 - .ui.olive.elastic.loading.loading.loading .input > i.icon:before, 13981 - .ui.olive.elastic.loading.loading.loading.loading > i.icon:before, 13982 - .ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after, 13983 - .ui.olive.loading.loading.loading.loading .input > i.icon:after, 13984 - .ui.olive.loading.loading.loading.loading > i.icon:after, 13985 - .ui.olive.loader.loader.loader:after { 13986 - color: #B5CC18; 13987 - } 13988 - 13989 - .ui.inverted.olive.elastic.loader:before, 13990 - .ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before, 13991 - .ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before, 13992 - .ui.inverted.olive.elastic.loading.loading.loading > i.icon:before, 13993 - .ui.inverted.olive.loading.loading.loading.loading:not(.usual):after, 13994 - .ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after, 13995 - .ui.inverted.olive.loading.loading.loading.loading > i.icon:after, 13996 - .ui.inverted.olive.loader.loader.loader:after { 13997 - color: #D9E778; 13998 - } 13999 - 14000 - .ui.green.elastic.loader.loader:before, 14001 - .ui.green.basic.elastic.loading.button:before, 14002 - .ui.green.basic.elastic.loading.button:after, 14003 - .ui.green.elastic.loading.loading.loading:not(.segment):before, 14004 - .ui.green.elastic.loading.loading.loading .input > i.icon:before, 14005 - .ui.green.elastic.loading.loading.loading.loading > i.icon:before, 14006 - .ui.green.loading.loading.loading.loading:not(.usual):not(.button):after, 14007 - .ui.green.loading.loading.loading.loading .input > i.icon:after, 14008 - .ui.green.loading.loading.loading.loading > i.icon:after, 14009 - .ui.green.loader.loader.loader:after { 14010 - color: #21BA45; 14011 - } 14012 - 14013 - .ui.inverted.green.elastic.loader:before, 14014 - .ui.inverted.green.elastic.loading.loading.loading:not(.segment):before, 14015 - .ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before, 14016 - .ui.inverted.green.elastic.loading.loading.loading > i.icon:before, 14017 - .ui.inverted.green.loading.loading.loading.loading:not(.usual):after, 14018 - .ui.inverted.green.loading.loading.loading.loading .input > i.icon:after, 14019 - .ui.inverted.green.loading.loading.loading.loading > i.icon:after, 14020 - .ui.inverted.green.loader.loader.loader:after { 14021 - color: #2ECC40; 14022 - } 14023 - 14024 - .ui.teal.elastic.loader.loader:before, 14025 - .ui.teal.basic.elastic.loading.button:before, 14026 - .ui.teal.basic.elastic.loading.button:after, 14027 - .ui.teal.elastic.loading.loading.loading:not(.segment):before, 14028 - .ui.teal.elastic.loading.loading.loading .input > i.icon:before, 14029 - .ui.teal.elastic.loading.loading.loading.loading > i.icon:before, 14030 - .ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after, 14031 - .ui.teal.loading.loading.loading.loading .input > i.icon:after, 14032 - .ui.teal.loading.loading.loading.loading > i.icon:after, 14033 - .ui.teal.loader.loader.loader:after { 14034 - color: #00B5AD; 14035 - } 14036 - 14037 - .ui.inverted.teal.elastic.loader:before, 14038 - .ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before, 14039 - .ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before, 14040 - .ui.inverted.teal.elastic.loading.loading.loading > i.icon:before, 14041 - .ui.inverted.teal.loading.loading.loading.loading:not(.usual):after, 14042 - .ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after, 14043 - .ui.inverted.teal.loading.loading.loading.loading > i.icon:after, 14044 - .ui.inverted.teal.loader.loader.loader:after { 14045 - color: #6DFFFF; 14046 - } 14047 - 14048 - .ui.blue.elastic.loader.loader:before, 14049 - .ui.blue.basic.elastic.loading.button:before, 14050 - .ui.blue.basic.elastic.loading.button:after, 14051 - .ui.blue.elastic.loading.loading.loading:not(.segment):before, 14052 - .ui.blue.elastic.loading.loading.loading .input > i.icon:before, 14053 - .ui.blue.elastic.loading.loading.loading.loading > i.icon:before, 14054 - .ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after, 14055 - .ui.blue.loading.loading.loading.loading .input > i.icon:after, 14056 - .ui.blue.loading.loading.loading.loading > i.icon:after, 14057 - .ui.blue.loader.loader.loader:after { 14058 - color: #2185D0; 14059 - } 14060 - 14061 - .ui.inverted.blue.elastic.loader:before, 14062 - .ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before, 14063 - .ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before, 14064 - .ui.inverted.blue.elastic.loading.loading.loading > i.icon:before, 14065 - .ui.inverted.blue.loading.loading.loading.loading:not(.usual):after, 14066 - .ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after, 14067 - .ui.inverted.blue.loading.loading.loading.loading > i.icon:after, 14068 - .ui.inverted.blue.loader.loader.loader:after { 14069 - color: #54C8FF; 14070 - } 14071 - 14072 - .ui.violet.elastic.loader.loader:before, 14073 - .ui.violet.basic.elastic.loading.button:before, 14074 - .ui.violet.basic.elastic.loading.button:after, 14075 - .ui.violet.elastic.loading.loading.loading:not(.segment):before, 14076 - .ui.violet.elastic.loading.loading.loading .input > i.icon:before, 14077 - .ui.violet.elastic.loading.loading.loading.loading > i.icon:before, 14078 - .ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after, 14079 - .ui.violet.loading.loading.loading.loading .input > i.icon:after, 14080 - .ui.violet.loading.loading.loading.loading > i.icon:after, 14081 - .ui.violet.loader.loader.loader:after { 14082 - color: #6435C9; 14083 - } 14084 - 14085 - .ui.inverted.violet.elastic.loader:before, 14086 - .ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before, 14087 - .ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before, 14088 - .ui.inverted.violet.elastic.loading.loading.loading > i.icon:before, 14089 - .ui.inverted.violet.loading.loading.loading.loading:not(.usual):after, 14090 - .ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after, 14091 - .ui.inverted.violet.loading.loading.loading.loading > i.icon:after, 14092 - .ui.inverted.violet.loader.loader.loader:after { 14093 - color: #A291FB; 14094 - } 14095 - 14096 - .ui.purple.elastic.loader.loader:before, 14097 - .ui.purple.basic.elastic.loading.button:before, 14098 - .ui.purple.basic.elastic.loading.button:after, 14099 - .ui.purple.elastic.loading.loading.loading:not(.segment):before, 14100 - .ui.purple.elastic.loading.loading.loading .input > i.icon:before, 14101 - .ui.purple.elastic.loading.loading.loading.loading > i.icon:before, 14102 - .ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after, 14103 - .ui.purple.loading.loading.loading.loading .input > i.icon:after, 14104 - .ui.purple.loading.loading.loading.loading > i.icon:after, 14105 - .ui.purple.loader.loader.loader:after { 14106 - color: #A333C8; 14107 - } 14108 - 14109 - .ui.inverted.purple.elastic.loader:before, 14110 - .ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before, 14111 - .ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before, 14112 - .ui.inverted.purple.elastic.loading.loading.loading > i.icon:before, 14113 - .ui.inverted.purple.loading.loading.loading.loading:not(.usual):after, 14114 - .ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after, 14115 - .ui.inverted.purple.loading.loading.loading.loading > i.icon:after, 14116 - .ui.inverted.purple.loader.loader.loader:after { 14117 - color: #DC73FF; 14118 - } 14119 - 14120 - .ui.pink.elastic.loader.loader:before, 14121 - .ui.pink.basic.elastic.loading.button:before, 14122 - .ui.pink.basic.elastic.loading.button:after, 14123 - .ui.pink.elastic.loading.loading.loading:not(.segment):before, 14124 - .ui.pink.elastic.loading.loading.loading .input > i.icon:before, 14125 - .ui.pink.elastic.loading.loading.loading.loading > i.icon:before, 14126 - .ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after, 14127 - .ui.pink.loading.loading.loading.loading .input > i.icon:after, 14128 - .ui.pink.loading.loading.loading.loading > i.icon:after, 14129 - .ui.pink.loader.loader.loader:after { 14130 - color: #E03997; 14131 - } 14132 - 14133 - .ui.inverted.pink.elastic.loader:before, 14134 - .ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before, 14135 - .ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before, 14136 - .ui.inverted.pink.elastic.loading.loading.loading > i.icon:before, 14137 - .ui.inverted.pink.loading.loading.loading.loading:not(.usual):after, 14138 - .ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after, 14139 - .ui.inverted.pink.loading.loading.loading.loading > i.icon:after, 14140 - .ui.inverted.pink.loader.loader.loader:after { 14141 - color: #FF8EDF; 14142 - } 14143 - 14144 - .ui.brown.elastic.loader.loader:before, 14145 - .ui.brown.basic.elastic.loading.button:before, 14146 - .ui.brown.basic.elastic.loading.button:after, 14147 - .ui.brown.elastic.loading.loading.loading:not(.segment):before, 14148 - .ui.brown.elastic.loading.loading.loading .input > i.icon:before, 14149 - .ui.brown.elastic.loading.loading.loading.loading > i.icon:before, 14150 - .ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after, 14151 - .ui.brown.loading.loading.loading.loading .input > i.icon:after, 14152 - .ui.brown.loading.loading.loading.loading > i.icon:after, 14153 - .ui.brown.loader.loader.loader:after { 14154 - color: #A5673F; 14155 - } 14156 - 14157 - .ui.inverted.brown.elastic.loader:before, 14158 - .ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before, 14159 - .ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before, 14160 - .ui.inverted.brown.elastic.loading.loading.loading > i.icon:before, 14161 - .ui.inverted.brown.loading.loading.loading.loading:not(.usual):after, 14162 - .ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after, 14163 - .ui.inverted.brown.loading.loading.loading.loading > i.icon:after, 14164 - .ui.inverted.brown.loader.loader.loader:after { 14165 - color: #D67C1C; 14166 - } 14167 - 14168 - .ui.grey.elastic.loader.loader:before, 14169 - .ui.grey.basic.elastic.loading.button:before, 14170 - .ui.grey.basic.elastic.loading.button:after, 14171 - .ui.grey.elastic.loading.loading.loading:not(.segment):before, 14172 - .ui.grey.elastic.loading.loading.loading .input > i.icon:before, 14173 - .ui.grey.elastic.loading.loading.loading.loading > i.icon:before, 14174 - .ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after, 14175 - .ui.grey.loading.loading.loading.loading .input > i.icon:after, 14176 - .ui.grey.loading.loading.loading.loading > i.icon:after, 14177 - .ui.grey.loader.loader.loader:after { 14178 - color: #767676; 14179 - } 14180 - 14181 - .ui.inverted.grey.elastic.loader:before, 14182 - .ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before, 14183 - .ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before, 14184 - .ui.inverted.grey.elastic.loading.loading.loading > i.icon:before, 14185 - .ui.inverted.grey.loading.loading.loading.loading:not(.usual):after, 14186 - .ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after, 14187 - .ui.inverted.grey.loading.loading.loading.loading > i.icon:after, 14188 - .ui.inverted.grey.loader.loader.loader:after { 14189 - color: #DCDDDE; 14190 - } 14191 - 14192 - .ui.black.elastic.loader.loader:before, 14193 - .ui.black.basic.elastic.loading.button:before, 14194 - .ui.black.basic.elastic.loading.button:after, 14195 - .ui.black.elastic.loading.loading.loading:not(.segment):before, 14196 - .ui.black.elastic.loading.loading.loading .input > i.icon:before, 14197 - .ui.black.elastic.loading.loading.loading.loading > i.icon:before, 14198 - .ui.black.loading.loading.loading.loading:not(.usual):not(.button):after, 14199 - .ui.black.loading.loading.loading.loading .input > i.icon:after, 14200 - .ui.black.loading.loading.loading.loading > i.icon:after, 14201 - .ui.black.loader.loader.loader:after { 14202 - color: #1B1C1D; 14203 - } 14204 - 14205 - .ui.inverted.black.elastic.loader:before, 14206 - .ui.inverted.black.elastic.loading.loading.loading:not(.segment):before, 14207 - .ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before, 14208 - .ui.inverted.black.elastic.loading.loading.loading > i.icon:before, 14209 - .ui.inverted.black.loading.loading.loading.loading:not(.usual):after, 14210 - .ui.inverted.black.loading.loading.loading.loading .input > i.icon:after, 14211 - .ui.inverted.black.loading.loading.loading.loading > i.icon:after, 14212 - .ui.inverted.black.loader.loader.loader:after { 14213 - color: #545454; 14214 - } 14215 - 14216 - .ui.elastic.loader.loader:before, 14217 - .ui.elastic.loading.loading.loading:before, 14218 - .ui.elastic.loading.loading.loading .input > i.icon:before, 14219 - .ui.elastic.loading.loading.loading > i.icon:before, 14220 - .ui.loading.loading.loading.loading:not(.usual):after, 14221 - .ui.loading.loading.loading.loading .input > i.icon:after, 14222 - .ui.loading.loading.loading.loading > i.icon:after, 14223 - .ui.loader.loader.loader:after { 14224 - border-color: currentColor; 14225 - } 14226 - 14227 - .ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before { 14228 - color: #FFFFFF; 14229 - } 14230 - 14231 - .ui.elastic.basic.loading.button:before, 14232 - .ui.elastic.basic.loading.button:after { 14233 - color: #767676; 14234 - } 14235 - 14236 - .ui.double.loading.loading.loading.loading.button:after { 14237 - border-bottom-color: currentColor; 14238 - } 14239 - 14240 - /*------------------- 14241 - Inline 14242 - --------------------*/ 14243 - 14244 - .ui.inline.loader { 14245 - position: relative; 14246 - vertical-align: middle; 14247 - margin: 0; 14248 - left: 0; 14249 - top: 0; 14250 - transform: none; 14251 - } 14252 - 14253 - .ui.inline.loader.active, 14254 - .ui.inline.loader.visible { 14255 - display: inline-block; 14256 - } 14257 - 14258 - /* Centered Inline */ 14259 - 14260 - .ui.centered.inline.loader.active, 14261 - .ui.centered.inline.loader.visible { 14262 - display: block; 14263 - margin-left: auto; 14264 - margin-right: auto; 14265 - } 14266 - 14267 - .ui.loading.loading.loading.loading.loading.loading:after, 14268 - .ui.loading.loading.loading.loading.loading.loading .input > i.icon:after, 14269 - .ui.loading.loading.loading.loading.loading.loading > i.icon:after, 14270 - .ui.loader.loader.loader.loader.loader:after { 14271 - border-left-color: transparent; 14272 - border-right-color: transparent; 14273 - } 14274 - 14275 - .ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after, 14276 - .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after, 14277 - .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after, 14278 - .ui.loader.loader.loader.loader.loader.loader:not(.double):after { 14279 - border-bottom-color: transparent; 14280 - } 14281 - 14282 - .ui.loading.loading.loading.loading.loading.loading.segment:after, 14283 - .ui.loading.loading.loading.loading.loading.loading.form:after { 14284 - border-left-color: rgba(0, 0, 0, 0.1); 14285 - border-right-color: rgba(0, 0, 0, 0.1); 14286 - } 14287 - 14288 - .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, 14289 - .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { 14290 - border-bottom-color: rgba(0, 0, 0, 0.1); 14291 - } 14292 - 14293 - /*------------------- 14294 - Elastic 14295 - --------------------*/ 14296 - 14297 - .ui.dimmer > .ui.elastic.loader { 14298 - color: #FFFFFF; 14299 - } 14300 - 14301 - .ui.inverted.dimmer > .ui.elastic.loader { 14302 - color: #767676; 14303 - } 14304 - 14305 - .ui.elastic.loading.loading:not(.form):not(.segment):after, 14306 - .ui.elastic.loading.loading .input > i.icon:after, 14307 - .ui.elastic.loading.loading > i.icon:after, 14308 - .ui.elastic.loader.loader:after { 14309 - -webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); 14310 - animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); 14311 - -webkit-animation-delay: 0.3s; 14312 - animation-delay: 0.3s; 14313 - } 14314 - 14315 - .ui.elastic.loading.loading.loading:not(.form):not(.segment):before, 14316 - .ui.elastic.loading.loading.loading .input > i.icon:before, 14317 - .ui.elastic.loading.loading.loading > i.icon:before, 14318 - .ui.elastic.loader.loader:before { 14319 - -webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); 14320 - animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); 14321 - -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61); 14322 - border-right-color: transparent; 14323 - } 14324 - 14325 - .ui.elastic.inline.loader:empty { 14326 - -webkit-animation: loader 8s infinite linear; 14327 - animation: loader 8s infinite linear; 14328 - } 14329 - 14330 - .ui.slow.elastic.loading.loading:not(.form):not(.segment):after, 14331 - .ui.slow.elastic.loading.loading .input > i.icon:after, 14332 - .ui.slow.elastic.loading.loading > i.icon:after, 14333 - .ui.slow.elastic.loader.loader:after { 14334 - -webkit-animation-duration: 1.5s; 14335 - animation-duration: 1.5s; 14336 - -webkit-animation-delay: 0.45s; 14337 - animation-delay: 0.45s; 14338 - } 14339 - 14340 - .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before, 14341 - .ui.slow.elastic.loading.loading.loading .input > i.icon:before, 14342 - .ui.slow.elastic.loading.loading.loading > i.icon:before, 14343 - .ui.slow.elastic.loader.loader:before { 14344 - -webkit-animation-duration: 1.5s; 14345 - animation-duration: 1.5s; 14346 - } 14347 - 14348 - .ui.fast.elastic.loading.loading:not(.form):not(.segment):after, 14349 - .ui.fast.elastic.loading.loading .input > i.icon:after, 14350 - .ui.fast.elastic.loading.loading > i.icon:after, 14351 - .ui.fast.elastic.loader.loader:after { 14352 - -webkit-animation-duration: 0.66s; 14353 - animation-duration: 0.66s; 14354 - -webkit-animation-delay: 0.2s; 14355 - animation-delay: 0.2s; 14356 - } 14357 - 14358 - .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before, 14359 - .ui.fast.elastic.loading.loading.loading .input > i.icon:before, 14360 - .ui.fast.elastic.loading.loading.loading > i.icon:before, 14361 - .ui.fast.elastic.loader.loader:before { 14362 - -webkit-animation-duration: 0.66s; 14363 - animation-duration: 0.66s; 14364 - } 14365 - 14366 - @-webkit-keyframes elastic-loader { 14367 - 0%, 1% { 14368 - border-left-color: transparent; 14369 - border-bottom-color: transparent; 14370 - } 14371 - 14372 - 1.1%, 50% { 14373 - border-left-color: inherit; 14374 - } 14375 - 14376 - 10%, 35.1% { 14377 - border-bottom-color: transparent; 14378 - } 14379 - 14380 - 10.1%, 35% { 14381 - border-bottom-color: inherit; 14382 - } 14383 - 14384 - 50.1% { 14385 - border-left-color: transparent; 14386 - } 14387 - 14388 - 100% { 14389 - border-left-color: transparent; 14390 - border-bottom-color: transparent; 14391 - transform: rotate(360deg); 14392 - } 14393 - } 14394 - 14395 - @keyframes elastic-loader { 14396 - 0%, 1% { 14397 - border-left-color: transparent; 14398 - border-bottom-color: transparent; 14399 - } 14400 - 14401 - 1.1%, 50% { 14402 - border-left-color: inherit; 14403 - } 14404 - 14405 - 10%, 35.1% { 14406 - border-bottom-color: transparent; 14407 - } 14408 - 14409 - 10.1%, 35% { 14410 - border-bottom-color: inherit; 14411 - } 14412 - 14413 - 50.1% { 14414 - border-left-color: transparent; 14415 - } 14416 - 14417 - 100% { 14418 - border-left-color: transparent; 14419 - border-bottom-color: transparent; 14420 - transform: rotate(360deg); 14421 - } 14422 - } 14423 - 14424 - @-webkit-keyframes currentcolor-elastic-loader { 14425 - 0%, 1% { 14426 - border-left-color: transparent; 14427 - border-bottom-color: transparent; 14428 - } 14429 - 14430 - 1.1%, 50% { 14431 - border-left-color: currentColor; 14432 - } 14433 - 14434 - 10%, 35.1% { 14435 - border-bottom-color: transparent; 14436 - } 14437 - 14438 - 10.1%, 35% { 14439 - border-bottom-color: currentColor; 14440 - } 14441 - 14442 - 50.1% { 14443 - border-left-color: transparent; 14444 - } 14445 - 14446 - 100% { 14447 - border-left-color: transparent; 14448 - border-bottom-color: transparent; 14449 - transform: rotate(360deg); 14450 - } 14451 - } 14452 - 14453 - @keyframes currentcolor-elastic-loader { 14454 - 0%, 1% { 14455 - border-left-color: transparent; 14456 - border-bottom-color: transparent; 14457 - } 14458 - 14459 - 1.1%, 50% { 14460 - border-left-color: currentColor; 14461 - } 14462 - 14463 - 10%, 35.1% { 14464 - border-bottom-color: transparent; 14465 - } 14466 - 14467 - 10.1%, 35% { 14468 - border-bottom-color: currentColor; 14469 - } 14470 - 14471 - 50.1% { 14472 - border-left-color: transparent; 14473 - } 14474 - 14475 - 100% { 14476 - border-left-color: transparent; 14477 - border-bottom-color: transparent; 14478 - transform: rotate(360deg); 14479 - } 14480 - } 14481 - 14482 - /******************************* 14483 - Theme Overrides 14484 - *******************************/ 14485 - 14486 - /******************************* 14487 - Site Overrides 14488 - *******************************/ 14489 13547 /* 14490 13548 * # Fomantic - Menu 14491 13549 * http://github.com/fomantic/Fomantic-UI/
-1
web_src/fomantic/semantic.json
··· 34 34 "item", 35 35 "label", 36 36 "list", 37 - "loader", 38 37 "menu", 39 38 "message", 40 39 "modal",
+11 -13
web_src/js/components/ActivityHeatmap.vue
··· 1 1 <template> 2 - <div id="user-heatmap"> 3 - <div class="total-contributions"> 4 - {{ locale.contributions_in_the_last_12_months }} 5 - </div> 6 - <calendar-heatmap 7 - :locale="locale" 8 - :no-data-text="locale.no_contributions" 9 - :tooltip-unit="locale.contributions" 10 - :end-date="endDate" 11 - :values="values" 12 - :range-color="colorRange" 13 - @day-click="handleDayClick($event)" 14 - /> 2 + <div class="total-contributions"> 3 + {{ locale.contributions_in_the_last_12_months }} 15 4 </div> 5 + <calendar-heatmap 6 + :locale="locale" 7 + :no-data-text="locale.no_contributions" 8 + :tooltip-unit="locale.contributions" 9 + :end-date="endDate" 10 + :values="values" 11 + :range-color="colorRange" 12 + @day-click="handleDayClick($event)" 13 + /> 16 14 </template> 17 15 <script> 18 16 import {CalendarHeatmap} from 'vue3-calendar-heatmap';
+1 -1
web_src/js/features/heatmap.js
··· 30 30 }; 31 31 32 32 const View = createApp(ActivityHeatmap, {values, locale}); 33 - 34 33 View.mount(el); 34 + el.classList.remove('is-loading'); 35 35 } catch (err) { 36 36 console.error('Heatmap failed to load', err); 37 37 el.textContent = 'Heatmap failed to load';