loading up the forgejo repo on tangled to test page performance
Fix contributor graphs mobile layout and responsiveness (#29597)
Also removed a unneeded and actually conflicting class name
`stats-table`.
Fixes: https://github.com/go-gitea/gitea/issues/29192
<img width="445" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/787804ed-6ba4-437f-b314-f23cbe2edf7a">
(cherry picked from commit f14779592494d41b3ab04caaab53487f2f4ede5a)
authored by
silverwind
and committed by
Earl Warren
02384ff9
b6057a34
+17
-4
+17
-4
web_src/js/components/RepoContributors.vue
+17
-4
web_src/js/components/RepoContributors.vue
···
303
303
</script>
304
304
<template>
305
305
<div>
306
-
<h2 class="ui header gt-df gt-ac gt-sb">
306
+
<div class="ui header gt-df gt-ac gt-sb">
307
307
<div>
308
308
<relative-time
309
309
v-if="xAxisMin > 0"
···
334
334
<div class="ui dropdown jump" id="repo-contributors">
335
335
<div class="ui basic compact button">
336
336
<span class="text">
337
-
{{ locale.filterLabel }} <strong>{{ locale.contributionType[type] }}</strong>
337
+
<span class="not-mobile">{{ locale.filterLabel }} </span><strong>{{ locale.contributionType[type] }}</strong>
338
338
<svg-icon name="octicon-triangle-down" :size="14"/>
339
339
</span>
340
340
</div>
···
351
351
</div>
352
352
</div>
353
353
</div>
354
-
</h2>
354
+
</div>
355
355
<div class="gt-df ui segment main-graph">
356
356
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
357
357
<div v-if="isLoading">
···
370
370
</div>
371
371
<div class="contributor-grid">
372
372
<div
373
-
v-for="(contributor, index) in sortedContributors" :key="index" class="stats-table"
373
+
v-for="(contributor, index) in sortedContributors"
374
+
:key="index"
374
375
v-memo="[sortedContributors, type]"
375
376
>
376
377
<div class="ui top attached header gt-df gt-f1">
···
406
407
<style scoped>
407
408
.main-graph {
408
409
height: 260px;
410
+
padding-top: 2px;
409
411
}
412
+
410
413
.contributor-grid {
411
414
display: grid;
412
415
grid-template-columns: repeat(2, 1fr);
413
416
gap: 1rem;
417
+
}
418
+
419
+
.contributor-grid > * {
420
+
min-width: 0;
421
+
}
422
+
423
+
@media (max-width: 991.98px) {
424
+
.contributor-grid {
425
+
grid-template-columns: repeat(1, 1fr);
426
+
}
414
427
}
415
428
416
429
.contributor-name {