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="b0d82531
-f05e-43c6-9e5b-1bfc268c056d"> webauthn: <img width="894" alt="Screenshot 2023-08-22 at 22 05 05" src="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="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:
parent
f626366f53
commit
8b5c081d76
9 changed files with 25 additions and 993 deletions
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue