125692 add page-list-ul

apps/app/src/components/PageList/PageListItemS.module.scss

@@ -1,3 +1,75 @@
-.pagetitle {
+.page-title {
+  flex: 1;
   line-height: 1.2;
 }
+
+.page-list-ul {
+  padding-left: 0;
+  margin: 0;
+
+  > li {
+    list-style: none;
+
+    > a {
+      padding: 0px;
+      color: inherit;
+
+      &:hover {
+        color: inherit;
+      }
+    }
+  }
+
+  .picture {
+    width: 16px;
+    height: 16px;
+    vertical-align: text-bottom;
+
+    &.picture-md {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .page-list-meta {
+    font-size: 0.9em;
+
+    > span {
+      margin-right: 0.3rem;
+    }
+
+    i {
+      margin-right: 2px;
+    }
+
+    .footstamp-icon {
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+    .seen-users-count {
+      &.strength-0,
+      &.strength-1,
+      &.strength-2 {
+        font-weight: bold;
+      }
+      &.strength-3 {
+        font-weight: normal;
+      }
+      &.strength-4 {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  // after second level indent
+  .page-list-ul {
+    padding-left: 2rem;
+  }
+
+  // override .page-list-ul
+  &.page-list-ul-flat {
+    padding-left: 0;
+  }
+}

apps/app/src/components/PageList/PageListItemS.tsx

@@ -35,7 +35,7 @@ export const PageListItemS = (props: PageListItemSProps): JSX.Element => {
   return (
     <>
       {isNarrowView ? (
-        <div className={`d-flex ${styles['page-list']}`}>
+        <div className="d-flex">
           <UserPicture user={page.lastUpdateUser} noLink={noLink} />
           <div className="mx-2 page-title">
             <Clamp lines={2}>{pagePathElement}</Clamp>