pages_core 3.14.0 → 3.15.1

data/app/assets/stylesheets/pages_core/admin/components/image_grid.css

@@ -1,30 +1,31 @@
 .image-grid {
-  --image-padding: 7px;
+  --image-padding: 0.5rem;
   margin-bottom: 40px;
   display: flex;
+  gap: 1rem;
 
   @media (--mobile) {
     flex-direction: column;
   }
 
-  & input[type="file"] {
+  input[type="file"] {
     display: none;
   }
 
-  & h3 {
+  h3 {
     margin: 10px var(--image-padding) 10px var(--image-padding);
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 5px;
   }
 
-  & img {
+  img {
     display: block;
     width: 100%;
     height: auto;
     min-height: 1px; /* Hack for IE11 */
   }
 
-  & .grid-image {
+  .grid-image {
     padding: var(--image-padding);
 
     &.placeholder {
@@ -36,19 +37,19 @@
       opacity: 0.5;
       overflow: hidden;
 
-      & .temp-image {
+      .temp-image {
         position: relative;
         cursor: pointer;
         overflow: hidden;
         background: #000;
       }
 
-      & img {
+      img {
         filter: blur(20px);
         opacity: 0.75;
       }
 
-      & span {
+      span {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -65,8 +66,8 @@
       }
     }
 
-    & .file-placeholder,
-    & .placeholder {
+    .file-placeholder,
+    .placeholder {
       position: relative;
       vertical-align: middle;
       background: var(--background-disabled-color);
@@ -74,13 +75,13 @@
       width: 100%;
       padding-bottom: 100%;
 
-      & span {
+      span {
         color: var(--text-light-color);
         text-shadow: none;
       }
     }
 
-    & .actions {
+    .actions {
       margin-top: 7px;
       display: flex;
       gap: 4px;
@@ -91,33 +92,33 @@
         visibility: visible;
       }
 
-      & button {
+      button {
         flex: 1;
       }
     }
 
     &:hover {
-      & .actions {
+      .actions {
         visibility: visible;
       }
     }
   }
 
-  & .primary-image {
+  .primary-image {
     width: 33.33%;
 
     @media (--mobile) {
       width: 100%;
     }
 
-    & .drop-target {
+    .drop-target {
       position: relative;
       width: 100%;
       padding-bottom: 66.67%;
       text-align: center;
       line-height: 1.6;
 
-      & > .upload-button {
+      > .upload-button {
         position: absolute;
         display: flex;
         flex-direction: column;
@@ -133,15 +134,15 @@
     }
   }
 
-  & .grid {
+  .grid {
     width: 100%;
 
-    & .images {
+    .images {
       position: relative;
       display: flex;
       flex-wrap: wrap;
 
-      & .grid-image {
+      .grid-image {
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
@@ -157,10 +158,10 @@
       }
     }
 
-    & .editable-image {
+    .editable-image {
       padding-bottom: 75%;
 
-      & img {
+      img {
         position: absolute;
         top: 0px;
         left: 0px;
@@ -171,18 +172,18 @@
       }
     }
 
-    & .drop-target {
+    .drop-target {
       margin: 10px var(--image-padding);
       padding-top: 10px;
 
-      & button {
+      button {
         margin: 0px 7px;
       }
     }
   }
 
   &.with-primary-image {
-    & .grid {
+    .grid {
       width: 66.67%;
 
       @media (--mobile) {
@@ -190,7 +191,7 @@
       }
     }
 
-    & .images .grid-image {
+    .images .grid-image {
       width: 25%;
 
       @media (--narrow) {
@@ -203,7 +204,7 @@
     }
   }
 
-  & .drag-image {
+  .drag-image {
     position: absolute;
     width: 150px;
     z-index: 100;

data/app/assets/stylesheets/pages_core/admin/components/image_uploader.css

@@ -17,14 +17,14 @@
     border: 2px dashed var(--border-color);
   }
 
-  & .image {
+  .image {
     display: flex;
     align-items: center;
     justify-content: center;
     max-width: 250px;
     max-height: 400px;
 
-    & .editable-image img {
+    .editable-image img {
       width: auto;
       max-height: 400px;
     }
@@ -34,19 +34,19 @@
     }
   }
 
-  & .ui-wrapper {
+  .ui-wrapper {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  & .ui {
+  .ui {
     text-align: center;
     padding: 20px;
   }
 
-  & .remove-image {
+  .remove-image {
     display: block;
     margin-top: 20px;
   }

data/app/assets/stylesheets/pages_core/admin/components/layout.css

@@ -17,6 +17,12 @@ body {
   flex-flow: column nowrap;
   height: 100vh;
 
+  & > div[data-react-class] {
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column nowrap;
+  }
+
   & > *,
   & .main-wrapper {
     flex-shrink: 0;
@@ -40,7 +46,7 @@ body {
   & > aside {
     min-width: 300px;
     width: 20%;
-    padding: 0px 16px;
+    padding: 1rem;
 
     @media (--mobile) {
       width: 100%;

data/app/assets/stylesheets/pages_core/admin/components/list_table.css

@@ -3,25 +3,25 @@ table.list {
   margin: 16px 0;
   width: 100%;
 
-  & td,
-  & th {
+  td,
+  th {
     padding: 8px 16px;
     text-align: left;
     vertical-align: top;
   }
 
-  & th {
+  th {
     background: linear-gradient(
       to bottom,
       var(--background-color) 0%,
       var(--background-disabled-color) 100%
     );
     color: var(--text-light-color);
-    font-weight: bold;
+    font-weight: var(--bold-weight);
     border-bottom: 1px solid var(--border-color);
   }
 
-  & td {
+  td {
     border-bottom: 1px solid var(--border-color);
 
     &.note {
@@ -29,45 +29,54 @@ table.list {
     }
 
     &.name {
-      font-weight: bold;
+      font-weight: var(--bold-weight);
+      a,
+      a:visited {
+        text-decoration: none;
+        color: var(--text-color);
+      }
+      a:focus,
+      a:hover {
+        border-bottom: 1px solid var(--text-color);
+      }
     }
   }
 
-  & tr td:first-child,
-  & tr th:first-child {
+  tr td:first-child,
+  tr th:first-child {
     padding-left: 32px;
   }
 
-  & tr td:last-child,
-  & tr th:last-child {
+  tr td:last-child,
+  tr th:last-child {
     padding-right: 32px;
   }
 
-  & tr.disabled td {
+  tr.disabled td {
     opacity: 0.5;
   }
 
-  & tr.disabled td:first-child {
+  tr.disabled td:first-child {
     background: transparent
       radial-gradient(ellipse at center, #bdbdbd 50%, transparent 50%) no-repeat
       left 12px top 50%;
     background-size: 10px 10px;
   }
 
-  & tr.active td:first-child {
+  tr.active td:first-child {
     background: transparent
       radial-gradient(ellipse at center, #92b6c4 50%, transparent 50%) no-repeat
       left 12px top 50%;
     background-size: 10px 10px;
   }
 
-  & .actions {
+  .actions {
     float: right;
     margin-bottom: 2px;
     margin-left: 16px;
   }
 
-  & p {
+  p {
     margin: 0;
     padding: 0;
   }

data/app/assets/stylesheets/pages_core/admin/components/page_tree.css

@@ -5,14 +5,15 @@
   margin: 20px 0 40px 0;
   margin-left: -20px;
   margin-right: -10px;
+  max-width: 90rem;
 
-  & .draggable {
+  .draggable {
     user-select: none;
     position: absolute;
     opacity: 0.8;
   }
 
-  & .node {
+  .node {
     &.placeholder > * {
       visibility: hidden;
     }
@@ -21,33 +22,45 @@
       border: 1px dashed var(--border-color);
     }
 
-    & .inner {
+    .inner {
       position: relative;
-      cursor: pointer;
-      padding-left: 10px;
+      padding-left: 1.75rem;
+      display: flex;
+      border-radius: 5px;
+      &:hover {
+        background: var(--background-highlight-color);
+      }
     }
 
-    & .collapse {
+    .collapse {
       position: absolute;
-      left: 0;
+      left: 0.625rem;
+      top: 0.5rem;
       cursor: pointer;
-      font-size: 15px;
-      padding-top: 5px;
+      padding-top: 0px;
+      transition: transform 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
+      &.open {
+        transform: rotate(90deg);
+      }
+    }
+
+    .inner:has(.edit-name) {
+      .collapse {
+        top: 0.75rem;
+      }
     }
   }
 
-  & .page {
-    font-size: 15px;
-    padding: 6px 10px;
-    border: 1px solid transparent;
+  .page {
+    padding: 0.2rem;
+    display: flex;
+    flex-wrap: wrap;
 
-    &:after {
-      content: "";
-      display: table;
-      clear: both;
-    }
+    gap: 0.5rem;
+    align-items: baseline;
+    width: 100%;
 
-    &:hover {
+    &:hove2r {
       border: 1px solid var(--border-color-light);
       background: linear-gradient(
         to bottom,
@@ -56,52 +69,42 @@
       );
     }
 
-    & .date {
-      font-size: 12px;
-      margin-left: 10px;
-      color: var(--text-light-color);
-    }
-
-    & .name {
-      font-weight: bold;
+    .page-icon {
+      margin-right: 0rem;
     }
 
-    & .icon {
-      margin-right: 8px;
+    .date {
+      margin-left: 10px;
+      color: var(--text-light-color);
     }
 
-    & .status-label,
-    & .collapsed-label {
-      margin-left: 3px;
-      font-size: 12px;
+    .name {
+      font-weight: var(--bold-weight);
     }
 
-    & form {
-      display: inline;
+    .edit-name {
       margin: 0;
       padding: 0;
-
-      & input {
-        font-size: 15px;
-        padding: 2px 4px;
-        margin-top: -2px;
-        margin-bottom: -2px;
-        margin-right: 5px;
+      flex-grow: 1;
+      display: flex;
+      gap: 0.5rem;
+      input {
+        max-width: 100%;
+        flex: 1 1 auto;
       }
-
-      & button {
-        margin-left: 5px;
+      button {
+        white-space: nowrap;
       }
     }
 
-    & a,
-    & a:visited {
+    a,
+    a:visited {
       color: var(--text-color);
       text-decoration: none;
     }
 
-    & a:hover,
-    & a:focus {
+    a:hover,
+    a:focus {
       text-decoration: underline;
     }
 
@@ -109,74 +112,30 @@
     &.status-1,
     &.status-3 {
       &,
-      & a,
-      & a:visited {
+      a,
+      a:visited {
         color: var(--text-light-color);
       }
     }
   }
 
-  & .page .actions {
-    float: right;
+  .page .actions {
     visibility: hidden;
-    margin: -4px -6px -4px 5px;
-
-    & button {
-      margin-left: 5px;
-    }
+    flex-grow: 1;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
   }
 
-  & .page:hover .actions {
+  .page:hover .actions {
     visibility: visible;
   }
 
-  & button {
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    font-size: 13px;
-    padding: 3px 5px;
-    border-radius: 3px;
-    color: var(--link-hover-color);
-
-    & .icon {
-      margin-right: 8px;
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--blue-hover);
-      background: var(--blue-transparent);
-    }
-
-    &.add {
-      color: var(--green);
-
-      &:hover,
-      &:focus {
-        color: var(--green-hover);
-        background: var(--green-transparent);
-      }
-    }
-
-    &.delete,
-    &.cancel {
-      color: var(--red);
-
-      &:hover,
-      &:focus {
-        color: var(--red-hover);
-        background: var(--red-transparent);
-      }
-    }
-  }
-
-  & button.add-inline {
-    margin: 5px 0 5px 30px;
+  button.add-inline {
+    margin: 0.25rem 0 0.25rem 2.875rem;
   }
 
-  & .node .node .node .page .name {
+  .node .node .node .page .name {
     font-weight: normal;
   }
 }

data/app/assets/stylesheets/pages_core/admin/components/pagination.css

@@ -1,12 +1,11 @@
 .pagination {
   margin: 30px 30px;
   line-height: 20px;
-  font-size: 14px;
 
-  & a,
-  & .current,
-  & .disabled,
-  & .gap {
+  a,
+  .current,
+  .disabled,
+  .gap {
     display: inline-block;
     font-style: normal;
     margin: 0px 1px;
@@ -17,29 +16,29 @@
     text-align: center;
   }
 
-  & a:hover,
-  & a:focus {
+  a:hover,
+  a:focus {
     text-decoration: underline;
   }
 
-  & .current {
+  .current {
     font-weight: bold;
   }
 
-  & .disabled {
+  .disabled {
     color: var(--text-light-color);
   }
 
-  & .next,
-  & .previous {
+  .next,
+  .previous {
     background: none;
   }
 
-  & .next {
+  .next {
     margin-left: 10px;
   }
 
-  & .previous {
+  .previous {
     margin-right: 10px;
   }
 }

data/app/assets/stylesheets/pages_core/admin/components/search.css

@@ -1,18 +1,7 @@
 .search-bar {
-  display: flex;
-  & input {
-    flex: 1 1 auto;
-    border-right: none;
+  input {
     max-width: 600px;
     min-width: 50px;
-    &:focus {
-      z-index: 20;
-    }
-  }
-  & button {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    white-space: nowrap;
   }
 }
 
@@ -21,7 +10,3 @@ main .search-bar {
   padding: 16px 32px;
   margin: 0px 0px 16px 0px;
 }
-
-.sidebar .search-bar {
-  margin-top: 16px;
-}

data/app/assets/stylesheets/pages_core/admin/components/sidebar.css

@@ -4,25 +4,19 @@
   line-height: 1.3;
   color: var(--text-color);
 
-  & h2 {
-    margin: 20px 0 0px 0;
-    padding: 0 0 10px 0;
-    color: var(--text-color);
-    font-size: 18px;
+  h2 {
     border-bottom: 1px solid var(--border-color);
-
-    &:first-child {
-      margin-top: 16px;
-    }
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.5rem;
   }
 
-  & ul {
+  ul {
     list-style-type: disc;
     margin: 1em 0 1em 14px;
     padding: 0;
   }
 
-  & ul li {
+  ul li {
     margin: 0;
     padding: 0;
   }