katalyst-koi 4.0.0

data/app/assets/stylesheets/koi/components/_image-field.scss

@@ -0,0 +1,33 @@
+.govuk-image-field {
+  .govuk-form-group {
+    margin-top: 30px;
+  }
+}
+
+.preview-image,
+.preview-file {
+  display: inline-flex;
+  padding: 0.5rem;
+
+  .file-destroy {
+    align-self: center;
+    padding-left: 0.5rem;
+
+    &::after {
+      content: "";
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjQjJCMkIyIj48cGF0aCBkPSJNMi41OTIuMDQ0bDE4LjM2NCAxOC4zNjQtMi41NDggMi41NDhMLjA0NCAyLjU5MnoiLz48cGF0aCBkPSJNMCAxOC4zNjRMMTguMzY0IDBsMi41NDggMi41NDhMMi41NDggMjAuOTEyeiIvPjwvZz48L3N2Zz4=");
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center;
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      margin-left: 0.5rem;
+    }
+  }
+
+  .image-thumbnail {
+    max-width: 100%;
+    max-height: 80px;
+  }
+}

data/app/assets/stylesheets/koi/components/_index-actions.scss

@@ -0,0 +1,69 @@
+.index-actions > form {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+
+  // checkbox styles based on govuk-frontend
+
+  input[type="checkbox"] {
+    cursor: pointer;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2.5rem;
+    opacity: 0;
+  }
+
+  label:has(input[type="checkbox"]) {
+    display: inline-block;
+    position: relative;
+    margin-bottom: 0;
+    padding: 0 0 0 calc(2.5rem + 5px);
+    line-height: 2.5rem;
+    cursor: pointer;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+  }
+
+  label:has(input[type="checkbox"])::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    aspect-ratio: 1/1;
+    border: 2px solid currentcolor;
+    background: transparent;
+  }
+
+  label:has(input[type="checkbox"]:focus)::before {
+    border-width: 4px;
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 3px #ffdd00;
+  }
+
+  label:has(input[type="checkbox"])::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    top: 12px;
+    left: 9px;
+    width: 23px;
+    height: 12px;
+    transform: rotate(-45deg);
+    border: solid;
+    border-width: 0 0 5px 5px;
+    border-top-color: transparent;
+    opacity: 0;
+    background: transparent;
+  }
+
+  label:has(input[type="checkbox"][checked])::after {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/koi/components/_index-table.scss

@@ -0,0 +1,91 @@
+@mixin sort-icon {
+  display: inline-block;
+  content: " ";
+  position: relative;
+  right: -1rem;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
+  background-size: 14px 14px;
+  height: 14px;
+  width: 14px;
+}
+
+$grey: #f0ecf3 !default;
+
+$table-header-color: transparent !default;
+$row-border-color: $grey !default;
+$row-height: 48px !default;
+
+.index-table {
+  --row-height: #{$row-height};
+  --table-header-color: #{$table-header-color};
+  --row-border-color: #{$row-border-color};
+}
+
+.index-table {
+  border: none;
+  table-layout: fixed;
+  border-collapse: collapse;
+  text-align: left;
+  width: 100%;
+
+  thead {
+    background: var(--table-header-color);
+  }
+
+  tr {
+    height: var(--row-height);
+    line-height: var(--row-height);
+  }
+
+  th,
+  td {
+    border: none;
+    box-shadow: inset 0px -1px 0px var(--row-border-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+
+    > a {
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      text-decoration: none;
+    }
+
+    > img {
+      width: 6rem;
+      padding: 1rem 0;
+    }
+
+    > a > img {
+      padding-top: 1rem;
+    }
+  }
+
+  th {
+    font-weight: bold;
+  }
+
+  thead a.ascending:after,
+  [data-sort="asc"] a::after {
+    @include sort-icon;
+    top: 0;
+    transform: rotate(180deg);
+  }
+
+  thead a.descending:after,
+  [data-sort="desc"] a::after {
+    @include sort-icon;
+    top: 4px;
+  }
+
+  .button_to {
+    line-height: 1.5;
+  }
+
+  caption {
+    margin: 2rem 0;
+  }
+}

data/app/assets/stylesheets/koi/components/_index.scss

@@ -0,0 +1,6 @@
+@use "actions-group";
+@use "image-field";
+@use "index-actions";
+@use "index-table";
+@use "item-table";
+@use "pagy";

data/app/assets/stylesheets/koi/components/_item-table.scss

@@ -0,0 +1,33 @@
+$grey: #f0ecf3 !default;
+
+$table-header-color: transparent !default;
+$row-border-color: $grey !default;
+$row-height: 48px !default;
+
+.item-table {
+  --row-height: #{$row-height};
+  --table-header-color: #{$table-header-color};
+  --row-border-color: #{$row-border-color};
+}
+
+.item-table {
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+  margin: 1rem 0;
+  border-top: 1px solid var(--row-border-color);
+
+  dt,
+  dd {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--row-border-color);
+    padding: 0 1rem;
+    min-height: var(--row-height);
+    line-height: 1.5rem;
+  }
+
+  dt {
+    font-weight: bold;
+    padding-left: 0;
+  }
+}

data/app/assets/stylesheets/koi/components/_pagy.scss

@@ -0,0 +1,41 @@
+@use "../base/button" as *;
+
+.pagination {
+  .page {
+    a {
+      @include button-text;
+      border: 2px solid transparent;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.prev,
+    &.next {
+      a {
+        border: none;
+        padding: 0;
+      }
+    }
+
+    &.prev {
+      padding-right: 1rem;
+    }
+
+    &.next {
+      padding-left: 1rem;
+    }
+  }
+
+  .active {
+    @include button-outline;
+    pointer-events: none;
+  }
+
+  .disabled {
+    pointer-events: none;
+    color: var(--site-disabled);
+    font-weight: 500;
+  }
+}

data/app/assets/stylesheets/koi/layouts/_banner.scss

@@ -0,0 +1,7 @@
+%banner {
+  line-height: 2rem;
+  text-align: center;
+  color: #eee;
+  background: #555;
+  box-shadow: inset 0 -1px 4px #333;
+}

data/app/assets/stylesheets/koi/layouts/_content.scss

@@ -0,0 +1,40 @@
+@use "header";
+@use "flash";
+
+$inset: 1rem !default;
+$space: 1rem !default;
+
+%content {
+  margin: $space $inset;
+  display: grid;
+  grid-template-columns: minmax(auto, 72rem);
+  grid-template-areas: "main";
+  grid-gap: $space;
+  max-width: 72rem;
+
+  > [role="main"] {
+    grid-area: main;
+  }
+
+  &.has-sidebar {
+    grid-template-columns: minmax(auto, 2fr) minmax(auto, 1fr);
+    grid-template-areas: "main sidebar";
+    max-width: (72rem + 36rem);
+
+    > [role="main"] {
+      grid-column: 1/2;
+    }
+  }
+
+  .page--sidebar {
+    grid-area: sidebar;
+    > * {
+      position: sticky;
+      top: $space;
+    }
+  }
+
+  #flash {
+    @include flash.flash;
+  }
+}

data/app/assets/stylesheets/koi/layouts/_flash.scss

@@ -0,0 +1,41 @@
+@mixin flash {
+  padding: 0;
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    min-height: 3rem;
+    line-height: 3rem;
+    padding: 0 1.5rem;
+    list-style: none;
+    grid-area: status;
+    font-weight: bold;
+    border: 1px solid var(--flash-color);
+    color: var(--flash-color);
+  }
+
+  button {
+    display: inline;
+    background: white;
+    border: none;
+    color: var(--flash-color);
+    cursor: pointer;
+  }
+
+  .alert {
+    --flash-color: var(--site-alert);
+  }
+
+  .notice {
+    --flash-color: var(--site-notice);
+  }
+
+  .success {
+    --flash-color: var(--site-success);
+  }
+
+  .warning,
+  .error {
+    --flash-color: var(--site-warning);
+  }
+}

data/app/assets/stylesheets/koi/layouts/_header.scss

@@ -0,0 +1,62 @@
+@mixin list($separator, $space: 1rem) {
+  display: flex;
+  list-style-position: outside;
+
+  > * {
+    display: list-item;
+    margin-left: $space;
+  }
+
+  > *::marker {
+    content: " " + $separator + " ";
+    color: rgba(0, 0, 0, 0.4);
+  }
+
+  > *:first-child {
+    display: block;
+    margin-left: 0;
+  }
+}
+
+$inset: 2rem !default;
+
+$title: 4rem;
+$breadcrumbs: 3rem;
+$actions: 3rem;
+$height: $title + $breadcrumbs + $actions;
+
+%header {
+  border-bottom: 1px solid #ececec;
+  color: #b2b2b2;
+  background: #ececec;
+
+  display: grid;
+  grid-template-areas: "breadcrumbs" "title" "actions";
+  grid-template-rows: $breadcrumbs $title $actions;
+
+  .heading {
+    grid-area: title;
+    display: flex;
+    align-items: center;
+    margin: 0 $inset;
+  }
+
+  .breadcrumbs {
+    grid-area: breadcrumbs;
+    display: flex;
+    align-items: center;
+    margin: 0 $inset;
+
+    @include list("› ", 1.2rem);
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    align-items: center;
+    margin: 0 $inset;
+
+    @include list("|", 0.5rem);
+    list-style-type: square;
+  }
+}

data/app/assets/stylesheets/koi/layouts/_index.scss

@@ -0,0 +1,48 @@
+@use "navigation" as *;
+@use "main" as *;
+@use "banner" as *;
+@use "stack";
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: grid;
+  grid-template-areas: "banner banner" "navigation main";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 3fr;
+}
+
+body > header {
+  grid-area: banner;
+  height: 2rem;
+  overflow-y: auto;
+  @extend %banner;
+}
+
+body > nav {
+  grid-area: navigation;
+  height: 100%;
+  overflow-y: auto;
+  width: 2rem;
+  transition: width 0.25s;
+  @extend %navigation;
+
+  &[aria-expanded] {
+    width: 17rem;
+  }
+}
+
+.navigation-collapse {
+  grid-area: navigation;
+}
+
+body > main {
+  grid-area: main;
+  height: 100%;
+  overflow: clip auto;
+  @extend %main;
+}

data/app/assets/stylesheets/koi/layouts/_main.scss

@@ -0,0 +1,23 @@
+@use "header" as * with (
+  $inset: 2rem
+);
+@use "content" as * with (
+  $inset: 2rem,
+  $space: 2rem
+);
+
+%main {
+  display: grid;
+  grid-template-areas: "header" "content";
+  grid-template-rows: auto 1fr;
+
+  > header {
+    grid-area: header;
+    @extend %header;
+  }
+
+  > .page {
+    grid-area: content;
+    @extend %content;
+  }
+}

data/app/assets/stylesheets/koi/layouts/_navigation.scss

@@ -0,0 +1,156 @@
+$heading: rgba(255, 255, 255, 0.6);
+$separator: rgba(255, 255, 255, 0.2);
+
+%subheading {
+  color: $heading;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  font-weight: 400;
+  margin: 0;
+}
+
+@mixin header {
+  display: grid;
+  grid-template-areas: "icon primary" "icon secondary";
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 3rem 1fr;
+  padding: 1rem;
+
+  .site-name {
+    grid-area: primary;
+    padding-left: 1rem;
+    font-size: 1.25rem;
+    font-weight: unset;
+    color: var(--site-primary);
+    margin: 0;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .admin-name {
+    grid-area: secondary;
+    color: white;
+    padding-left: 1rem;
+    @extend %subheading;
+    opacity: 0.75;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .site-icon {
+    grid-area: icon;
+    display: flex;
+    background-color: var(--site-primary);
+    color: var(--site-on-primary);
+    width: 3rem;
+    height: 3rem;
+    align-items: center;
+    justify-content: space-around;
+    text-transform: capitalize;
+    font-size: 2rem;
+    border-radius: 0.25rem;
+  }
+}
+
+%navigation {
+  background: black;
+  color: white;
+  padding-bottom: 2rem;
+  --site-link: white;
+
+  > * {
+    transition: opacity 0.25s;
+  }
+
+  &:not([aria-expanded]) {
+    > * {
+      opacity: 0;
+    }
+  }
+
+  header {
+    @include header;
+    border-bottom: 1px solid $separator;
+  }
+
+  ul,
+  li {
+    padding: 0;
+    list-style: none;
+    font-size: var(--heading--h6);
+  }
+
+  .filter {
+    margin: 1rem calc(1rem - 5px) 0;
+
+    input {
+      width: 100%;
+      border: none;
+      border-radius: 1px;
+    }
+  }
+
+  li > span {
+    display: block;
+    padding: 1.25rem 1rem 0.25rem;
+    color: $heading;
+  }
+
+  > ul > li > span {
+    border-top: 1px solid $separator;
+    margin-top: 1rem;
+    padding: 1.25rem 1rem 0.25rem;
+    @extend %subheading;
+  }
+
+  li li li > a[href] {
+    padding-left: 2.5rem;
+  }
+
+  li > a[href] {
+    display: block;
+    padding: 0.75rem 1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  li > a[href]:hover,
+  li > a[href]:focus {
+    background: rgba(255, 255, 255, 0.2);
+    text-decoration: none;
+  }
+}
+
+.navigation-collapse {
+  width: 2rem;
+  border-radius: 50%;
+  margin-top: 1rem;
+  justify-self: right;
+  align-self: start;
+  background-color: white;
+  box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.1);
+  visibility: hidden;
+  opacity: 0;
+  transform: translateX(50%);
+  transition:
+    opacity 0.25s,
+    background-color 0.25s;
+  cursor: pointer;
+
+  nav[aria-expanded] + & {
+    transform: translateX(50%) rotate(180deg);
+  }
+
+  nav:hover + &,
+  &:hover {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &:hover {
+    background-color: var(--site-primary);
+  }
+}

data/app/assets/stylesheets/koi/layouts/_stack.scss

@@ -0,0 +1,13 @@
+.stack {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.stack > * {
+  margin-block: 0;
+}
+
+.stack > * + * {
+  margin-block-start: var(--space, 1.5rem);
+}

data/app/assets/stylesheets/koi/pages/_index.scss

@@ -0,0 +1 @@
+@use "login";

data/app/assets/stylesheets/koi/pages/_login.scss

@@ -0,0 +1,40 @@
+@use "../layouts/navigation" as nav;
+
+.admin-login {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background: var(--site-primary);
+}
+
+.admin-login > main {
+  flex: 1 1 auto;
+  max-width: 20rem;
+  background: white;
+  border-radius: 0.25rem;
+  height: unset;
+}
+
+.admin-login header {
+  @include nav.header;
+  width: 100%;
+
+  .admin-name {
+    color: #555;
+  }
+}
+
+.admin-login form {
+  padding: 0 1rem 1rem;
+}
+
+.admin-login .actions-group {
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch;
+}
+
+.admin-login .button--primary {
+  flex: 1;
+}