biovision 0.0.200518.1 → 0.1.210414.0

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

@@ -1,3 +1,7 @@
+$form-control-color: hsl(220, 75%, 75%) !default;
+$form-field-error: #f00 !default;
+$form-input-bg: #fff !default;
+
 form {
   margin: 0;
   padding: 0;
@@ -14,7 +18,7 @@ form {
   }
 
   .check-result-error {
-    color: #f00;
+    color: $form-field-error;
 
     &::before {
       content: '\261D';
@@ -45,6 +49,24 @@ form {
   .flags {
     margin: var(--spacer-xs) 0;
   }
+
+  .errors {
+    color: $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 $form-field-error;
+        padding-bottom: var(--spacer-xs);
+      }
+    }
+  }
 }
 
 .fields {
@@ -68,9 +90,63 @@ 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%;
+  }
 }
 
+.input-select,
 .input-text {
+  background-color: #{$form-input-bg};
   border: .1rem solid var(--input-border);
   border-radius: var(--spacer-xxs);
   font-size: var(--font-size-normal);
@@ -83,3 +159,88 @@ form {
     outline: none;
   }
 }
+
+.input-select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: #{$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: 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: flex;
+
+  input {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: .2rem solid $form-control-color;
+    border-radius: .2rem;
+    display: inline-block;
+    height: 1.6rem;
+    margin-right: var(--spacer-xxs);
+    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%, $form-control-color 25%, $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%;
+  }
+}

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/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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+$toggleable-active: #34c749 !default;
+$toggleable-inactive: #fc605c !default;
+$toggleable-switch: #fdbc40 !default;
+$toggleable-unknown: #c0c0c0 !default;
+$toggleable-background: #fff !default;
+
+.toggleable {
+  font-size: var(--font-size-decreased);
+  margin: .8rem;
+
+  /**
+   * Радиус границы в ::before должен быть чуть меньше, чтобы не было щелей,
+   * потому что span фактически толще на две толщины границы
+   */
+  > span {
+    background-color: $toggleable-background;
+    border: .1rem solid;
+    border-radius: .8rem;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1.8;
+    margin: .4rem;
+    padding: 0 var(--spacer-s) 0 0;
+
+    &::before {
+      border-radius: .8rem 0 0 .8rem;
+      display: inline-block;
+      line-height: 1.8;
+      margin: 0 .4rem 0 0;
+      text-align: center;
+      width: 2.2rem;
+    }
+  }
+
+  .active {
+    border-color: $toggleable-active;
+
+    &::before {
+      background-color: $toggleable-active;
+      content: '\2611';
+    }
+  }
+
+  .inactive {
+    border-color: $toggleable-inactive;
+
+    &::before {
+      background-color: $toggleable-inactive;
+      content: '\2610';
+    }
+  }
+
+  .switch {
+    border-color: $toggleable-switch;
+    cursor: not-allowed;
+
+    &::before {
+      background-color: $toggleable-switch;
+      content: '\231B';
+    }
+  }
+
+  .unknown {
+    border-color: $toggleable-unknown;
+
+    &::before {
+      background-color: $toggleable-unknown;
+      content: '\26A0';
+    }
+  }
+}