summaryrefslogtreecommitdiffstats
path: root/web_src/css/repo/issue-list.css
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/css/repo/issue-list.css')
-rw-r--r--web_src/css/repo/issue-list.css112
1 files changed, 112 insertions, 0 deletions
diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
new file mode 100644
index 0000000..9143b01
--- /dev/null
+++ b/web_src/css/repo/issue-list.css
@@ -0,0 +1,112 @@
+.issue-list-toolbar {
+ display: flex;
+ flex-wrap: wrap-reverse;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.issue-list-toolbar-left {
+ display: flex;
+ align-items: center;
+}
+
+.issue-list-toolbar-right .filter.menu {
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+
+.issue-list-new.button {
+ margin-right: 0;
+}
+
+.list-header-issues {
+ min-height: var(--repo-header-issue-min-height);
+}
+
+@media (max-width: 767.98px) {
+ .issue-list-navbar {
+ order: 0;
+ }
+ .issue-list-new {
+ order: 1;
+ margin-left: auto !important;
+ }
+ .issue-list-search {
+ order: 2 !important;
+ }
+ /* Don't use flex wrap on mobile as it takes too much vertical space.
+ * Only set overflow properties on mobile screens, because while the
+ * CSS trick to pop out from overflowing works on desktop screen, it
+ * has a massive flaw that it cannot inherited any max width from it's 'real'
+ * parent and therefor ends up taking more vertical space than is desired.
+ **/
+ .issue-list-toolbar-right .filter.menu {
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+ }
+
+ /* The following few CSS was created with care and built with the information
+ * from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/
+ */
+
+ /* It's important that every element up to .issue-list-toolbar-right doesn't
+ * have a position set, such that element that wants to pop out will use
+ * .issue-list-toolbar-right as 'clip parent' and thereby avoids the
+ * overflow-y: hidden.
+ */
+ .issue-list-toolbar-right .filter.menu > .dropdown.item {
+ position: initial;
+ }
+ /* It's important that this element and not an child has `position` set.
+ * Set width so that overflow-x knows where to stop overflowing.
+ */
+ .issue-list-toolbar-right {
+ position: relative;
+ width: 100%;
+ }
+}
+
+#issue-list .flex-item-body .branches {
+ display: inline-flex;
+}
+
+#issue-list .flex-item-body .branches .branch {
+ background-color: var(--color-secondary-alpha-50);
+ border-radius: var(--border-radius);
+ padding: 0 4px;
+}
+
+#issue-list .flex-item-body .branches .truncated-name {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 200px;
+ display: inline-block;
+ vertical-align: top;
+}
+
+#issue-list .flex-item-body .checklist progress {
+ margin-left: 2px;
+ width: 80px;
+ height: 6px;
+ display: inline-block;
+}
+
+#issue-list .flex-item-body .checklist progress::-webkit-progress-value {
+ background-color: var(--color-secondary-dark-4);
+}
+
+#issue-list .flex-item-body .checklist progress::-moz-progress-bar {
+ background-color: var(--color-secondary-dark-4);
+}
+
+.archived-label-filter {
+ margin-left: 10px;
+ font-size: 12px;
+ display: flex !important;
+ margin-bottom: 8px;
+ min-width: fit-content;
+}