Skip to content

Commit f147795

Browse files
authored
Fix contributor graphs mobile layout and responsiveness (#29597)
Also removed a unneeded and actually conflicting class name `stats-table`. Fixes: #29192 <img width="445" alt="image" src="https://github.com/go-gitea/gitea/assets/115237/787804ed-6ba4-437f-b314-f23cbe2edf7a">
1 parent 4fd9c56 commit f147795

File tree

1 file changed

+17
-4
lines changed

1 file changed

+17
-4
lines changed

web_src/js/components/RepoContributors.vue

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ export default {
303303
</script>
304304
<template>
305305
<div>
306-
<h2 class="ui header gt-df gt-ac gt-sb">
306+
<div class="ui header gt-df gt-ac gt-sb">
307307
<div>
308308
<relative-time
309309
v-if="xAxisMin > 0"
@@ -334,7 +334,7 @@ export default {
334334
<div class="ui dropdown jump" id="repo-contributors">
335335
<div class="ui basic compact button">
336336
<span class="text">
337-
{{ locale.filterLabel }} <strong>{{ locale.contributionType[type] }}</strong>
337+
<span class="not-mobile">{{ locale.filterLabel }}&nbsp;</span><strong>{{ locale.contributionType[type] }}</strong>
338338
<svg-icon name="octicon-triangle-down" :size="14"/>
339339
</span>
340340
</div>
@@ -351,7 +351,7 @@ export default {
351351
</div>
352352
</div>
353353
</div>
354-
</h2>
354+
</div>
355355
<div class="gt-df ui segment main-graph">
356356
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
357357
<div v-if="isLoading">
@@ -370,7 +370,8 @@ export default {
370370
</div>
371371
<div class="contributor-grid">
372372
<div
373-
v-for="(contributor, index) in sortedContributors" :key="index" class="stats-table"
373+
v-for="(contributor, index) in sortedContributors"
374+
:key="index"
374375
v-memo="[sortedContributors, type]"
375376
>
376377
<div class="ui top attached header gt-df gt-f1">
@@ -406,13 +407,25 @@ export default {
406407
<style scoped>
407408
.main-graph {
408409
height: 260px;
410+
padding-top: 2px;
409411
}
412+
410413
.contributor-grid {
411414
display: grid;
412415
grid-template-columns: repeat(2, 1fr);
413416
gap: 1rem;
414417
}
415418
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+
}
427+
}
428+
416429
.contributor-name {
417430
margin-bottom: 0;
418431
}

0 commit comments

Comments
 (0)