Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix contributor graphs mobile layout and responsiveness (#29597)

Browse source 
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)
This commit is contained in:
silverwind 2024-03-05 15:21:52 +01:00 committed by Earl Warren
parent b6057a34db
commit 02384ff9ad
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
1 changed files with 17 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web_src/js/components/RepoContributors.vue
View file

@ -303,7 +303,7 @@ export default {
</script>
<template>
<div>
<h2 class="ui header gt-df gt-ac gt-sb">
<div class="ui header gt-df gt-ac gt-sb">
<div>
<relative-time
v-if="xAxisMin > 0"
@ -334,7 +334,7 @@ export default {
<div class="ui dropdown jump" id="repo-contributors">
<div class="ui basic compact button">
<span class="text">
{{ locale.filterLabel }} <strong>{{ locale.contributionType[type] }}</strong>
<span class="not-mobile">{{ locale.filterLabel }}&nbsp;</span><strong>{{ locale.contributionType[type] }}</strong>
<svg-icon name="octicon-triangle-down" :size="14"/>
</span>
</div>
@ -351,7 +351,7 @@ export default {
</div>
</div>
</div>
</h2>
</div>
<div class="gt-df ui segment main-graph">
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
<div v-if="isLoading">
@ -370,7 +370,8 @@ export default {
</div>
<div class="contributor-grid">
<div
v-for="(contributor, index) in sortedContributors" :key="index" class="stats-table"
v-for="(contributor, index) in sortedContributors"
:key="index"
v-memo="[sortedContributors, type]"
>
<div class="ui top attached header gt-df gt-f1">
@ -406,13 +407,25 @@ export default {
<style scoped>
.main-graph {
height: 260px;
padding-top: 2px;
}
.contributor-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.contributor-grid > * {
min-width: 0;
}
@media (max-width: 991.98px) {
.contributor-grid {
grid-template-columns: repeat(1, 1fr);
}
}
.contributor-name {
margin-bottom: 0;
}