biovision 0.0.200518.1 → 0.12.211124.0

data/app/assets/stylesheets/biovision/components/breadcrumbs.scss

@@ -0,0 +1,13 @@
+.breadcrumbs {
+  a {
+    background: image_url('biovision/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
+    padding-right: 1rem;
+    transition: background .25s;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-image: image_url('biovision/icons/breadcrumb-hover.svg');
+    }
+  }
+}

data/app/assets/stylesheets/biovision/components/buttons.scss

@@ -0,0 +1,130 @@
+$button-primary-bg: hsl(210, 75%, 50%) !default;
+$button-primary-bg-hover: hsl(230, 75%, 50%) !default;
+$button-primary-color: #fff !default;
+$button-primary-color-hover: #fff !default;
+$button-ghost-bg: transparent !default;
+$button-ghost-bg-hover: hsl(230, 75%, 50%) !default;
+$button-ghost-color: hsl(230, 75%, 50%) !default;
+$button-ghost-color-hover: #fff !default;
+$button-secondary-bg: #fff !default;
+$button-secondary-bg-hover: hsl(30, 75%, 50%) !default;
+$button-secondary-color: hsl(30, 75%, 50%) !default;
+$button-secondary-color-hover: #fff !default;
+$button-save-bg: hsl(120, 25%, 55%) !default;
+$button-save-bg-hover: hsl(120, 25%, 25%) !default;
+$button-save-color: #fff !default;
+$button-save-color-hover: #fff !default;
+$button-danger-bg: hsl(0, 50%, 55%) !default;
+$button-danger-bg-hover: hsl(00, 25%, 50%) !default;
+$button-danger-color: #fff !default;
+$button-danger-color-hover: #fff !default;
+
+:root {
+  --button-primary-bg: #{$button-primary-bg};
+  --button-primary-bg-hover: #{$button-primary-bg-hover};
+  --button-primary-color: #{$button-primary-color};
+  --button-primary-color-hover: #{$button-primary-color-hover};
+  --button-ghost-bg: #{$button-ghost-bg};
+  --button-ghost-bg-hover: #{$button-ghost-bg-hover};
+  --button-ghost-color: #{$button-ghost-color};
+  --button-ghost-color-hover: #{$button-ghost-color-hover};
+  --button-secondary-bg: #{$button-secondary-bg};
+  --button-secondary-bg-hover: #{$button-secondary-bg-hover};
+  --button-secondary-color: #{$button-secondary-color};
+  --button-secondary-color-hover: #{$button-secondary-color-hover};
+  --button-save-bg: #{$button-save-bg};
+  --button-save-bg-hover: #{$button-save-bg-hover};
+  --button-save-color: #{$button-save-color};
+  --button-save-color-hover: #{$button-save-color-hover};
+  --button-danger-bg: #{$button-danger-bg};
+  --button-danger-bg-hover: #{$button-danger-bg-hover};
+  --button-danger-color: #{$button-danger-color};
+  --button-danger-color-hover: #{$button-danger-color-hover};
+}
+
+.button {
+  border: .1rem solid;
+  border-radius: .4rem;
+  cursor: pointer;
+  font-family: var(--font-family-main);
+  font-size: inherit;
+  display: inline-block;
+  margin: 0;
+  padding: var(--spacer-xxs) var(--spacer-xs);
+  text-align: center;
+  text-decoration: none;
+  transition: .25s;
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:disabled {
+    cursor: default;
+    filter: grayscale(.75);
+    opacity: .75;
+  }
+}
+
+.button-primary {
+  background: var(--button-primary-bg);
+  border-color: var(--button-primary-bg);
+  color: var(--button-primary-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-primary-bg-hover);
+    border-color: var(--button-primary-bg-hover);
+    color: var(--button-primary-color-hover);
+  }
+}
+
+.button-secondary {
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-secondary-bg-hover);
+    border-color: var(--button-secondary-bg-hover);
+    color: var(--button-secondary-color-hover);
+  }
+}
+
+.button-ghost {
+  background: var(--button-ghost-bg);
+  border-color: var(--button-ghost-color);
+  color: var(--button-ghost-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-ghost-bg-hover);
+    border-color: var(--button-ghost-bg-hover);
+    color: var(--button-ghost-color-hover);
+  }
+}
+
+.button-save {
+  background: var(--button-save-bg);
+  border-color: var(--button-save-bg);
+  color: var(--button-save-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-save-bg-hover);
+    color: var(--button-save-color-hover);
+  }
+}
+
+.button-danger {
+  background: var(--button-danger-bg);
+  border-color: var(--button-danger-bg);
+  color: var(--button-danger-color);
+
+  &:focus,
+  &:hover {
+    background: var(--button-danger-bg-hover);
+    color: var(--button-danger-color-hover);
+  }
+}

data/app/assets/stylesheets/biovision/components/filters.scss

@@ -0,0 +1,39 @@
+.widgets__filters {
+  fieldset {
+    box-shadow: var(--block-shadow);
+  }
+
+  .list {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-s);
+  }
+
+  .flag {
+    align-items: center;
+    border: var(--border-secondary);
+    display: flex;
+    gap: var(--spacer-xs);
+    padding: var(--spacer-xs);
+  }
+
+  dfn {
+    font-style: normal;
+    font-weight: 500;
+
+    &::after {
+      content: ':';
+    }
+  }
+
+  label {
+    input:checked + span {
+      text-decoration: underline;
+    }
+  }
+
+  .actions {
+    margin-top: var(--spacer-xs);
+  }
+}

data/app/assets/stylesheets/biovision/components/forms.scss

@@ -1,3 +1,13 @@
+$form-control-color: hsl(220, 75%, 75%) !default;
+$form-field-error: #f00 !default;
+$form-input-bg: #fff !default;
+
+:root {
+  --form-control-color: #{$form-control-color};
+  --form-field-error: #{$form-field-error};
+  --form-input-bg: #{$form-input-bg};
+}
+
 form {
   margin: 0;
   padding: 0;
@@ -14,7 +24,7 @@ form {
   }
 
   .check-result-error {
-    color: #f00;
+    color: var(--form-field-error);
 
     &::before {
       content: '\261D';
@@ -45,6 +55,30 @@ form {
   .flags {
     margin: var(--spacer-xs) 0;
   }
+
+  .meta-texts {
+    label {
+      width: 100%;
+    }
+  }
+
+  .errors {
+    color: var(--form-field-error);
+    padding: var(--spacer-xxs) var(--spacer-xxs) 0 var(--spacer-s);
+
+    li {
+      margin: 0 var(--spacer-xs);
+
+      &:first-of-type {
+        margin-top: var(--spacer-s);
+      }
+
+      &:last-of-type {
+        border-bottom: .1rem solid var(--form-field-error);
+        padding-bottom: var(--spacer-xs);
+      }
+    }
+  }
 }
 
 .fields {
@@ -68,9 +102,68 @@ form {
     margin: 0;
     padding: var(--spacer-xxs) 0;
   }
+
+  .text {
+    background: #f7f7f7;
+    border-radius: .4rem;
+    box-shadow: .2rem .2rem .4rem rgba(0, 0, 0, .25);
+    padding: var(--spacer-xs);
+
+    p:first-of-type {
+      margin-top: 0;
+    }
+
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  .meta-text {
+    padding-left: var(--spacer-s);
+
+    dfn {
+      font-style: normal;
+    }
+
+    &:not(:last-of-type) {
+      margin-bottom: var(--spacer-xs);
+    }
+  }
+
+  .preview {
+    a {
+      box-shadow: var(--block-shadow);
+      display: flex;
+      max-width: 48rem;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+
+    figcaption {
+      color: var(--text-color-secondary);
+      font-size: var(--font-size-decreased);
+      padding: var(--spacer-xs);
+    }
+  }
+
+  input:not([type=radio]):not([type=checkbox]):not([size]):not([type=number]):not([type=date]),
+  textarea {
+    width: 100%;
+  }
+
+  .secondary-data {
+    color: var(--text-color-secondary);
+    font-size: var(--font-size-decreased);
+  }
 }
 
+.input-select,
 .input-text {
+  background-color: var(--form-input-bg);
   border: .1rem solid var(--input-border);
   border-radius: var(--spacer-xxs);
   font-size: var(--font-size-normal);
@@ -83,3 +176,117 @@ form {
     outline: none;
   }
 }
+
+.input-select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--form-input-bg) image_url('biovision/icons/dropdown.svg') no-repeat center right var(--spacer-xs) / 1.1rem auto;
+  padding-right: 3.2rem;
+}
+
+.floating-label {
+  display: inline-block;
+  padding: 1.4rem 0 0 0;
+  position: relative;
+
+  span {
+    top: 1.2rem;
+    font-size: 1rem;
+    left: .4rem;
+    line-height: 1;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: .25s;
+  }
+
+  input:not(:placeholder-shown) + span,
+  textarea:not(:placeholder-shown) + span {
+    opacity: 1;
+    top: .2rem;
+  }
+}
+
+.flag-label {
+  align-items: flex-start;
+  display: inline-flex;
+  gap: var(--spacer-xxs);
+
+  input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: .2rem solid var(--form-control-color);
+    border-radius: .2rem;
+    display: inline-block;
+    height: 1.6rem;
+    outline: none;
+    width: 1.6rem;
+
+    &[type=radio] {
+      border-radius: 50%;
+    }
+
+    &:focus {
+      box-shadow: .2rem .2rem .2rem var(--input-border-focus);
+    }
+
+    &:checked {
+      background: radial-gradient(#fff, #fff 25%, var(--form-control-color) 25%, var(--form-control-color));
+    }
+
+    &:disabled {
+      filter: grayscale(1);
+      opacity: .75;
+
+      + span {
+        cursor: default;
+        opacity: .5;
+      }
+    }
+  }
+
+  span {
+    cursor: pointer;
+    flex: 1;
+    padding-top: .1rem;
+  }
+}
+
+.image-medium {
+  width: 32rem;
+
+  img {
+    width: 100%;
+  }
+}
+
+.entity-links {
+  list-style: none;
+  margin: var(--spacer-s) 0;
+  padding: 0 0 0 var(--spacer-s);
+
+  > li {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.searchable-list {
+  .current {
+    margin: var(--spacer-xs) 0;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  .text {
+    display: inline-block;
+
+    &:empty {
+      display: none;
+    }
+  }
+}

data/app/assets/stylesheets/biovision/components/lists.scss

@@ -1,4 +1,3 @@
-
 .list-of-entities {
   margin: var(--spacer-s) 0;
   padding: 0;
@@ -13,12 +12,13 @@
   .image {
     flex: none;
     margin: 0 var(--spacer-xs) 0 0;
-    text-align: center;
+    overflow: hidden;
     width: 8rem;
 
     img {
-      max-height: 8rem;
-      max-width: 8rem;
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
     }
 
     & + .data {
@@ -39,9 +39,8 @@
       background: var(--row-background-even);
     }
 
-
     .data {
-      width: 100%;
+      flex: 1;
       position: relative;
 
       .info {
@@ -52,7 +51,6 @@
         color: var(--text-color-secondary);
       }
 
-
       .compact {
         align-items: center;
         display: flex;
@@ -84,6 +82,7 @@ ol.list-of-entities {
   > li[data-number]::before {
     content: attr(data-number) ":";
     display: inline-block;
+    flex: none;
     margin: 0 var(--spacer-xs) 0 0;
     text-align: right;
     width: 2.4rem;

data/app/assets/stylesheets/biovision/{biovision → components}/messages.scss

@@ -14,8 +14,17 @@ $messages-border-success: hsl(120, 75%, 25%) !default;
   box-shadow: var(--block-shadow);
   color: var(--text-color-inverted-primary);
   margin: var(--spacer-s) auto;
+  max-width: var(--content-width);
   padding: var(--spacer-s) var(--spacer-s) var(--spacer-s) calc(3.2rem + var(--spacer-s) * 2);
 
+  p:first-of-type {
+    margin-top: 0;
+  }
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
   &:empty {
     display: none;
   }

data/app/assets/stylesheets/biovision/components/pagination.scss

@@ -0,0 +1,34 @@
+.pagination {
+  margin: var(--spacer-s) 0 0 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  line-height: 1;
+
+  .current,
+  .gap,
+  a {
+    display: inline-block;
+    padding: var(--spacer-xxs) var(--spacer-xs);
+    text-align: center;
+  }
+
+  .current {
+    background: #f7f7f7;
+    color: #222;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .pagination {
+    font-size: 2.4rem;
+
+    .page {
+      display: none;
+
+      &.current {
+        display: inline-block;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/biovision/components/quick_search.scss

@@ -0,0 +1,24 @@
+.widgets__quick-search {
+  --row-background-even: hsl(250, 75%, 95%);
+  --row-background-odd: hsl(250, 75%, 98%);
+
+  background: hsl(250, 75%, 98%);
+  box-shadow: var(--block-shadow);
+  margin: var(--spacer-s) 0 var(--spacer-m);
+  padding: var(--spacer-s) var(--spacer-xxs);
+  position: relative;
+
+  h3 {
+    font-weight: 400;
+  }
+
+  .results {
+    background: hsla(250, 75%, 98%, .5);
+    box-shadow: var(--block-shadow);
+    margin-top: 0;
+    min-width: 28rem;
+    position: absolute;
+    top: 100%;
+    z-index: 3;
+  }
+}

data/app/assets/stylesheets/biovision/components/simple_image.scss

@@ -0,0 +1,112 @@
+.js-simple-image-upload {
+  max-width: 64rem;
+
+  .current-image {
+    display: block;
+    position: relative;
+    height: 20rem;
+    margin: 0 auto;
+    width: 30rem;
+
+    &::after {
+      bottom: 0;
+      content: '\A';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      transition: .25s;
+      z-index: 3;
+    }
+
+    img {
+      height: 100%;
+      object-fit: contain;
+      width: 100%;
+    }
+  }
+
+  .buttons {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: var(--spacer-xs) auto 0;
+  }
+
+  .progress::after {
+    --progress: 0;
+
+    -webkit-backdrop-filter: blur(.5rem);
+    backdrop-filter: blur(.5rem);
+    background: conic-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) var(--progress), rgba(0, 0, 0, .75) var(--progress), rgba(0, 0, 0, .75));
+  }
+
+  .container:not(:empty) {
+    border-bottom: var(--border-secondary);
+    padding: var(--spacer-s) 0;
+
+    input {
+      display: block;
+      margin-bottom: var(--spacer-xxs);
+    }
+  }
+
+  nav {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--spacer-xxs);
+
+    button {
+      align-items: center;
+      background: no-repeat center;
+      border: none;
+      border-radius: 50%;
+      box-shadow: 0 0 .4rem rgba(0, 0, 0, .25);
+      color: var(--text-color-primary);
+      display: flex;
+      font-size: var(--font-size-decreased);
+      height: 2.4rem;
+      justify-content: center;
+      line-height: 1;
+      margin: 0 var(--spacer-xxs);
+      padding: 0;
+      transition: .25s;
+      width: 2.4rem;
+
+      &:not([data-url]),
+      &[data-url=""] {
+        opacity: 0;
+      }
+
+      &:focus,
+      &:hover {
+        box-shadow: 0 0 .4rem rgba(0, 0, 0, .5);
+      }
+    }
+  }
+
+  input[type="file"] {
+    &:not(.changed) {
+      ~ button {
+        display: none;
+      }
+    }
+  }
+
+  .list-of-entities {
+    .data {
+      > div:first-of-type {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .image {
+      img {
+        cursor: pointer;
+      }
+    }
+  }
+}