style: improve Poll list style

FriendsOfFlarum · Feb 21, 2024 · 4de123a · 4de123a
1 parent f40eb58
commit 4de123a
Showing 1 changed file with 115 additions and 1 deletion.
diff --git a/resources/less/forum.less b/resources/less/forum.less
@@ -461,6 +461,10 @@
   // border-width: 1px;
   // border-style: solid;
   border-radius: 4px;
+
+  progress {
+    width: 100%;
+  }
 }
 
 .PollResult-input,
@@ -512,11 +516,121 @@
 }
 
 .PollList .PollList-polls {
-  list-style: none;
+  list-style-type: none;
   padding: 0;
   clear: both;
 }
 
+@media (any-hover: none) {
+  .PollListItem-controls > .Dropdown-toggle {
+    display: none;
+  }
+}
+
 .PollListItem-controls {
   float: right;
+}
+
+.PollListItem a {
+  text-decoration: none;
+}
+
+.PollListItem-info {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  font-size: 11px;
+  color: var(--muted-more-color);
+
+  > li {
+    display: inline-block;
+  }
+
+  .item-voteCount {
+    margin-right: 5px;
+  }
+}
+
+.PollListItem-main {
+  display: inline-block;
+  width: 100%;
+  padding: 12px 0;
+}
+
+.PollListItem-title {
+  margin: 0 0 3px;
+  line-height: 1.3;
+  color: var(--heading-color);
+  font-weight: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media @phone {
+  .PollListItem-controls {
+    display: none;
+  }
+  .PollListItem-content:active {
+    background: var(--control-bg);
+  }
+  .PollListItem-title {
+    font-size: 14px;
+    text-decoration: none !important;
+  }
+  .PollListItem-info {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media @tablet-up {
+  .PollListItem {
+    position: relative;
+    margin-right: -15px;
+    padding-right: 25px;
+    padding-left: 15px;
+    margin-left: -15px;
+    border-radius: var(--border-radius);
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--discussion-list-item-bg-hover);
+    }
+    &:hover .PollListItem-controls,
+    .PollListItem-controls.open {
+      opacity: 1;
+    }
+    .PollListItem-controls.open {
+      z-index: 3;
+    }
+  }
+  .PollListItem-controls {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &:focus-within {
+      opacity: 1;
+    }
+
+    .Dropdown-toggle {
+      display: block;
+    }
+    .Dropdown-menu {
+      right: 0;
+      left: auto;
+    }
+  }
+  .PollListItem-info {
+    .item-excerpt {
+      margin-right: 170px;
+    }
+  }
+  .PollListItem-title {
+    font-size: 16px;
+  }
 }