aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/css
diff options
context:
space:
mode:
authorsilverwind <me@silverwind.io>2024-05-28 15:41:37 +0200
committerGitHub <noreply@github.com>2024-05-28 13:41:37 +0000
commit1e3c4d8fc702aeedc359162ab1284b30a2a59717 (patch)
tree599e884dcc88757b9a389f774f8b96ecb05e622c /web_src/css
parentde4616690f742aebc3e019fde5c73c432d543292 (diff)
downloadgitea-1e3c4d8fc702aeedc359162ab1284b30a2a59717.tar.gz
gitea-1e3c4d8fc702aeedc359162ab1284b30a2a59717.zip
Improve mobile review ui (#31091)
Fixes: https://github.com/go-gitea/gitea/issues/31071 Not perfect but much better than before. Before: Overflows, sticky not working, filename unreadable: <img width="506" alt="Screenshot 2024-05-27 at 02 02 40" src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f"> After: <img width="457" alt="Screenshot 2024-05-27 at 01 59 06" src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">
Diffstat (limited to 'web_src/css')
-rw-r--r--web_src/css/markup/content.css2
-rw-r--r--web_src/css/modules/comment.css14
-rw-r--r--web_src/css/modules/segment.css3
-rw-r--r--web_src/css/repo.css82
-rw-r--r--web_src/css/review.css70
5 files changed, 64 insertions, 107 deletions
diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css
index 3eb40eaf29..9546c11d6a 100644
--- a/web_src/css/markup/content.css
+++ b/web_src/css/markup/content.css
@@ -2,7 +2,7 @@
overflow: hidden;
font-size: 16px;
line-height: 1.5 !important;
- word-wrap: break-word;
+ overflow-wrap: anywhere;
}
.markup > *:first-child {
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index cf080db225..672808e9cc 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -14,6 +14,7 @@
}
.ui.comments .comment {
+ display: flex;
position: relative;
background: none;
margin: 3px 0 0;
@@ -23,6 +24,10 @@
line-height: 1.2;
}
+.edit-content-zone .comment {
+ flex-direction: column;
+}
+
.ui.comments .comment:first-child {
margin-top: 0;
padding-top: 0;
@@ -46,16 +51,17 @@
}
.ui.comments .comment .avatar {
- float: left;
- width: 2.5em;
+ width: 30px;
}
.ui.comments .comment > .content {
- display: block;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.ui.comments .comment > .avatar ~ .content {
- margin-left: 3.5em;
+ margin-left: 12px;
}
.ui.comments .comment .author {
diff --git a/web_src/css/modules/segment.css b/web_src/css/modules/segment.css
index 48dc5c4488..0f555cea93 100644
--- a/web_src/css/modules/segment.css
+++ b/web_src/css/modules/segment.css
@@ -156,7 +156,8 @@
.ui.attached.segment:last-child,
.ui.segment:has(+ .ui.segment:not(.attached)),
.ui.attached.segment:has(+ .ui.modal) {
- border-radius: 0 0 0.28571429rem 0.28571429rem;
+ border-bottom-left-radius: 0.28571429rem;
+ border-bottom-right-radius: 0.28571429rem;
}
.ui[class*="top attached"].segment {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ce5d3c7951..d3036744fe 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -824,8 +824,7 @@ td .commit-summary {
padding-top: 0;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
-.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
+.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
margin-right: 0.25em;
}
@@ -1037,10 +1036,6 @@ td .commit-summary {
margin-top: 6px;
}
-.repository.view.issue .comment-list .comment > .avatar ~ .content {
- margin-left: 42px;
-}
-
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
margin: 0;
}
@@ -1064,12 +1059,6 @@ td .commit-summary {
box-shadow: none;
}
-@media (max-width: 767.98px) {
- .repository.view.issue .comment-list {
- padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
- }
-}
-
.repository.view.issue .ui.depending .item.is-closed .title {
text-decoration: line-through;
}
@@ -1551,39 +1540,6 @@ td .commit-summary {
height: 30px;
}
-.repository .diff-box .header:not(.resolved-placeholder) {
- display: flex;
- align-items: center;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .file {
- min-width: 0;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
- max-width: fit-content;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .button {
- padding: 0 12px;
- flex: 0 0 auto;
- margin-right: 0;
- height: 30px;
-}
-
-.repository .diff-box .resolved-placeholder {
- display: flex;
- align-items: center;
- font-size: 14px !important;
- height: 36px;
- padding-top: 0;
- padding-bottom: 0;
-}
-
.repository .diff-box .resolved-placeholder .button {
padding: 8px 12px;
}
@@ -2428,6 +2384,10 @@ tbody.commit-list {
}
.resolved-placeholder {
+ display: flex;
+ align-items: center;
+ font-size: 14px !important;
+ padding: 8px !important;
font-weight: var(--font-weight-normal) !important;
border: 1px solid var(--color-secondary) !important;
border-radius: var(--border-radius) !important;
@@ -2537,6 +2497,38 @@ tbody.commit-list {
.diff-file-header {
padding: 5px 8px !important;
box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
+ font-weight: var(--font-weight-normal);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.diff-file-header .file {
+ min-width: 0;
+}
+
+.diff-file-header .file-link {
+ max-width: fit-content;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ overflow-wrap: anywhere;
+}
+
+.diff-file-header .button {
+ padding: 0 12px;
+ flex: 0 0 auto;
+ margin-right: 0;
+ height: 30px;
+}
+
+@media (max-width: 767.98px) {
+ .diff-file-header {
+ flex-direction: column;
+ align-items: stretch;
+ }
}
.diff-file-box[data-folded="true"] .diff-file-body {
diff --git a/web_src/css/review.css b/web_src/css/review.css
index 7534500e6f..6337748939 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -3,6 +3,7 @@
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
+ margin-right: 0 !important;
}
.ui.button.add-code-comment {
@@ -71,57 +72,10 @@
max-width: 820px;
}
-@media (max-width: 767.98px) {
- .comment-code-cloud {
- max-width: none;
- padding: 0.75rem !important;
- }
- .comment-code-cloud .code-comment-buttons {
- margin: 0.5rem 0 0.25rem !important;
- }
- .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
- width: 100%;
- }
- .comment-code-cloud .ui.buttons {
- width: 100%;
- margin: 0 !important;
- }
- .comment-code-cloud .ui.buttons .button {
- flex: 1;
- }
-}
-
.comment-code-cloud .comments .comment {
padding: 0;
}
-@media (max-width: 767.98px) {
- .comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
- display: none;
- }
- .comment-code-cloud .comments .comment .avatar {
- width: auto;
- float: none;
- margin: 0 0.5rem 0 0;
- flex-shrink: 0;
- }
- .comment-code-cloud .comments .comment .avatar ~ .content {
- margin-left: 1em;
- }
- .comment-code-cloud .comments .comment img.avatar {
- margin: 0 !important;
- }
- .comment-code-cloud .comments .comment .comment-content {
- margin-left: 0 !important;
- }
- .comment-code-cloud .comments .comment .comment-container {
- width: 100%;
- }
- .comment-code-cloud .comments .comment.code-comment {
- padding: 0 0 0.5rem !important;
- }
-}
-
.comment-code-cloud .attached.tab {
border: 0;
padding: 0;
@@ -132,6 +86,13 @@
padding: 1px 8px 1px 12px;
}
+@media (max-width: 767.98px) {
+ .comment-code-cloud .attached.header {
+ padding-top: 4px;
+ padding-bottom: 4px;
+ }
+}
+
.comment-code-cloud .attached.header .text {
margin: 0;
}
@@ -179,14 +140,6 @@
display: block;
}
-@media (max-width: 767.98px) {
- .comment-code-cloud .button {
- width: 100%;
- margin: 0 !important;
- margin-bottom: 0.75rem !important;
- }
-}
-
.diff-file-body .comment-form {
margin: 0 0 0 3em;
}
@@ -273,11 +226,16 @@
align-items: center;
border: 1px solid transparent;
padding: 4px 8px;
- margin: -8px 0; /* just like other buttons in the diff box header */
border-radius: var(--border-radius);
font-size: 0.857rem; /* just like .ui.tiny.button */
}
+@media (max-width: 767.98px) {
+ .viewed-file-form {
+ margin-left: auto;
+ }
+}
+
.viewed-file-form input {
margin-right: 4px;
}