biovision-base 0.8.171029 → 0.9.171227

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 5a69729da19c47e5d87fe9296e687a6deace54a0
-  data.tar.gz: 81b91f26c62b8896b165d4a46fda4c82eaf017a2
+SHA256:
+  metadata.gz: 1bb51fe50abffa84bf05497d98302f8024cb97c8174dd1107c209405cdb36bd8
+  data.tar.gz: 18998efeae8acc7888f2a4942117a233c346e66d3591f845938976ee94f3231e
 SHA512:
-  metadata.gz: 329c7b70ca3974fd53e319293cf1c6d229d2f22c7af228e4794a0a313bc4d560aec40af18f1ac18986517604b7bfdc16e222597333c9cb329700de9fd23954ed
-  data.tar.gz: 0667670c98830807dbe1b0243d8e6739e523790555725c70a7e7e5dd003c45ab9000fd38730366b66b0e0a4f31b770fe3ad4e7de465c98160aa8882e8b8ed34c
+  metadata.gz: 14e334effd38045f5a5b0f69f08587d8910ad9b5d64a409b802005ebcaa814e98b35153ce36e74c289463d5f6e4bd383d525063ec6e87cc0dd0c3aafcf71c939
+  data.tar.gz: a00cbf51d51d0fbb5dc51028daab2909bc93ce74ec2a57ca6b633d7ef336b2d7a518b8afadfdfd5e09a3126f2d95e90e5502e7717e76498befafad15074ee393

data/README.md

@@ -19,6 +19,55 @@ Biovision::Base
 
 Каждый день в 4 часа ночи будут очищаться старые жетоны.
 
+Использование листалок
+----------------------
+
+Если контейнеру задать класс `biovision-slider` и добавить в него кнопки
+с классами `prev` и `next`, а также список (`ul`), то при условии, что подгружен
+файл `biovision/base/biovision-sliders.js`, к этому контейнеру применится
+поведение листалки.
+
+Параметры, которые можно задать через data-атрибуты:
+
+ * `delay` — задержка перед пролистыванием. По умолчанию — `125` (мс)
+ * `type` — тип. По умолчанию — `opacity` (пока это единственный вариант)
+
+```html
+<div class="biovision-slider" data-delay="250" data-type="opacity">
+    <button class="prev"></button>
+    <ul>
+        <li>Slide 1</li>
+        <li>Slide 2</li>
+        <li>Slide 3</li>
+    </ul>
+    <button class="next"></button>
+</div>
+```
+
+```scss
+.biovision-slider {
+  display: flex;
+    
+  button {
+    background: lime;
+    flex: none;
+    width: 2rem;
+  }
+    
+  ul {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+    
+  li {
+    flex: none;
+    transition: .125s;
+    width: 20rem;
+  }
+}
+```
+
 ## Installation
 Add this line to your application's Gemfile:
 

data/app/assets/images/biovision/base/icons/breadcrumb-hover.svg

@@ -0,0 +1 @@
+<svg height="12px" version="1.1" viewBox="0 0 6 12" width="6px" xmlns="http://www.w3.org/2000/svg"><polyline points="4,1 1,5.5 4,10" fill="none" stroke="#f77" /></svg>

data/app/assets/images/biovision/base/icons/breadcrumb.svg

@@ -0,0 +1 @@
+<svg height="12px" version="1.1" viewBox="0 0 6 12" width="6px" xmlns="http://www.w3.org/2000/svg"><polyline points="1,1 4,5.5 1,10" fill="none" stroke="#777" /></svg>

data/app/assets/images/biovision/base/placeholders/file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 24 24" height="24px" id="Layer_1" version="1.1" viewBox="0 0 24 24" width="24px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M13,12c1.1,0,2-0.9,2-2V5.5C15,5.2,14.8,5,14.5,5S14,5.2,14,5.5V10c0,0.6-0.4,1-1,1s-1-0.4-1-1V3c0-1.1,0.9-2,2-2   s2,0.9,2,2h1c0-1.7-1.3-3-3-3s-3,1.3-3,3v7C11,11.1,11.9,12,13,12z"/><path d="M19.9,1h-2.4C17.8,1.6,18,2.3,18,3h1v19H2V3h8c0-0.7,0.2-1.4,0.6-2H1.1C0.5,1,0,1.5,0,2.1v20.8C0,23.5,0.5,24,1.1,24h18.8   c0.6,0,1.1-0.5,1.1-1.1V2.1C21,1.5,20.5,1,19.9,1z"/><g><rect height="1" width="4" x="5" y="8"/><rect height="1" width="4" x="5" y="10"/><rect height="1" width="4" x="5" y="12"/><rect height="1" width="11" x="5" y="14"/><rect height="1" width="11" x="5" y="16"/><rect height="1" width="11" x="5" y="18"/></g></g></svg>

data/app/assets/javascripts/biovision/base/biovision-sliders.js

@@ -0,0 +1,64 @@
+'use strict';
+
+document.addEventListener('DOMContentLoaded', function () {
+    const sliders = document.querySelectorAll('.biovision-slider');
+    const sliding = {
+        opacity: {
+            left: function(list, delay) {
+                const li = list.querySelector('li:last-of-type');
+                const restore_opacity = function () {
+                    li.style.opacity = '';
+                };
+
+                li.style.opacity = '0';
+                list.prepend(li);
+                setTimeout(restore_opacity, delay);
+            },
+            right: function(list, delay) {
+                const li = list.querySelector('li:first-of-type');
+                const move = function () {
+                    list.append(li);
+                    li.style.opacity = '';
+                };
+
+                li.style.opacity = '0';
+                setTimeout(move, delay);
+            }
+        }
+    };
+
+    Array.prototype.slice.call(sliders).forEach(function(slider) {
+        const delay = slider.getAttribute('data-delay') || 125;
+        const list = slider.querySelector('ul');
+        let type = slider.getAttribute('data-type') || 'opacity';
+
+        if (!sliding.hasOwnProperty(type)) {
+            console.log('Invalid sliding type: ' + type);
+            type = 'opacity';
+        }
+
+        const slide_right = function () {
+            sliding[type].right(list, delay << 1);
+        };
+
+        const slide_left = function () {
+            sliding[type].left(list, delay);
+        };
+
+        slider.querySelector('button.prev').addEventListener('click', slide_left);
+        slider.querySelector('button.next').addEventListener('click', slide_right);
+    });
+});
+
+/*
+
+<script>
+    'use strict';
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const slider = document.getElementById('crew-slider');
+    });
+</script>
+
+
+ */

data/app/assets/stylesheets/biovision/base/admin.scss

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 html {
   background-attachment: fixed;
   background-blend-mode: screen;
@@ -10,10 +14,6 @@ html {
   -webkit-text-size-adjust: none;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 a:link,
 a:visited {
   color: $link-color;
@@ -74,25 +74,20 @@ body {
         flex-wrap: wrap;
         margin: 0;
         padding: 0;
+      }
 
-        li {
-          display: inline-block;
-          list-style: none;
-          margin: 0 .25rem;
-          text-align: center;
-
-          a:link,
-          a:visited {
-            @include button-nav;
-          }
-        }
+      li {
+        display: inline-block;
+        list-style: none;
+        margin: 0 .25rem;
+        text-align: center;
       }
-    }
-  }
 
-  > footer {
-    margin: auto 0 0 0;
-    padding: .8rem 0;
+      a:link,
+      a:visited {
+        @include button-nav;
+      }
+    }
   }
 
   > footer {
@@ -133,32 +128,6 @@ article {
     margin: 0 0 1.6rem 0;
     padding: 0;
 
-    dt {
-      border-top: $border-secondary;
-      font: 400 $font-size-increased $font-family-main;
-      margin: .8rem 0 0 0;
-      padding: .4rem 0;
-    }
-
-    dd {
-      margin: .2rem 0;
-      padding: 0;
-
-      input,
-      textarea {
-        font-size: $font-size-normal;
-      }
-
-      input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
-      textarea {
-        width: 100%;
-      }
-
-      input,
-      textarea {
-        max-width: 100%;
-      }
-    }
 
     ul {
       margin: 0;
@@ -169,16 +138,49 @@ article {
         margin: 0;
         padding: 0;
         position: relative;
+      }
 
-        label {
-          font-weight: normal;
-        }
+      label {
+        font-weight: normal;
       }
     }
   }
 
+  dt {
+    border-top: $border-secondary;
+    font: 400 $font-size-increased $font-family-main;
+    margin: .8rem 0 0 0;
+    padding: .4rem 0;
+  }
+
+  dd {
+    margin: .2rem 0;
+    padding: 0;
+
+    input,
+    textarea {
+      font-size: $font-size-normal;
+      min-width: 1ch;
+    }
+
+    input:not([type=checkbox]):not([type=radio]):not([size]):not([max]),
+    textarea {
+      width: 100%;
+    }
+
+    input,
+    textarea {
+      max-width: 100%;
+    }
+  }
+
+  > nav {
+    margin: 1.6rem 0;
+  }
+
   > section {
     border-top: .1rem solid $text-color-secondary;
+    margin: 2.4rem auto;
     padding: .8rem 0 0 0;
   }
 }
@@ -187,10 +189,14 @@ nav.admin-breadcrumbs {
   margin-bottom: .8rem;
   padding: .4rem;
 
-  a::after {
-    color: $text-color-primary;
-    content: ' / ';
-    text-decoration: none;
+  a {
+    background: image_url('biovision/base/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
+    padding-right: 1rem;
+    transition: background .25s;
+
+    &:hover {
+      background-image: image_url('biovision/base/icons/breadcrumb-hover.svg');
+    }
   }
 }
 
@@ -212,3 +218,10 @@ nav.admin-breadcrumbs {
     }
   }
 }
+
+#media-folder-snapshot {
+  img {
+    max-height: 8rem;
+    max-width: 8rem;
+  }
+}

data/app/assets/stylesheets/biovision/base/biovision.scss

@@ -92,11 +92,9 @@ article.entity-page {
       }
 
       tfoot {
-        tr {
-          td {
-            padding: .8rem 0;
-            text-align: center;
-          }
+        td {
+          padding: .8rem 0;
+          text-align: center;
         }
       }
 
@@ -111,12 +109,12 @@ article.entity-page {
             list-style: none;
             margin: 0;
             padding: 0;
-
-            label {
-              font-weight: normal;
-            }
           }
         }
+
+        label {
+          font-weight: normal;
+        }
       }
 
       .tree {
@@ -212,6 +210,7 @@ ul.actions {
     line-height: 1.6rem;
     list-style: none;
     margin: .4rem;
+    padding: 0;
 
     &.danger {
       margin-left: 3.2rem;
@@ -223,22 +222,23 @@ ul.actions {
       flex-basis: 3.6rem;
       justify-content: space-between;
     }
+  }
 
-    > a, button {
-      box-sizing: border-box;
-      display: inline-block;
-      font-size: 1.2rem;
-      height: 1.6rem;
-      line-height: 1.6rem;
-      margin: 0;
-      padding: 0;
-      width: 1.6rem;
-    }
+  a,
+  button {
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 1.2rem;
+    height: 1.6rem;
+    line-height: 1.6rem;
+    margin: 0;
+    padding: 0;
+    width: 1.6rem;
+  }
 
-    img {
-      max-height: 1.6rem;
-      max-width: 1.6rem;
-    }
+  img {
+    max-height: 1.6rem;
+    max-width: 1.6rem;
   }
 }
 
@@ -322,35 +322,40 @@ ul.actions {
 .dashboard {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
 
   nav {
-    box-shadow: $block-shadow;
     margin: .4rem;
-    max-width: 32rem;
+    width: 31rem;
+  }
 
-    ul {
-      margin: 0;
-      padding: 0;
+  .heading {
+    display: block;
+    font: 500 1.8rem/1.5 $font-family-heading;
+    text-align: center;
+  }
 
-      li {
-        background: $row-background-odd;
-        list-style: none;
-        margin: 0;
-        padding: .8rem;
-        position: relative;
+  ul {
+    box-shadow: $block-shadow;
+    margin: .4rem;
+    padding: 0;
+  }
 
-        &:nth-last-of-type(even) {
-          background: $row-background-even;
-        }
+  li {
+    background: $row-background-odd;
+    list-style: none;
+    margin: 0;
+    padding: .8rem;
+    position: relative;
 
-        .description {
-          color: $text-color-secondary;
-          font-size: $font-size-decreased;
-        }
-      }
+    &:nth-last-of-type(even) {
+      background: $row-background-even;
     }
   }
+
+  .description {
+    color: $text-color-secondary;
+    font-size: $font-size-decreased;
+  }
 }
 
 form {
@@ -371,16 +376,16 @@ form {
   dl {
     margin: 0;
     padding: 0;
+  }
 
-    dd,
-    dt {
-      margin: 0;
-      padding: 0;
-    }
+  dd,
+  dt {
+    margin: 0;
+    padding: 0;
+  }
 
-    dt:not(:first-of-type) {
-      margin-top: .8rem;
-    }
+  dt:not(:first-of-type) {
+    margin-top: .8rem;
   }
 
   ul.flags {
@@ -393,12 +398,59 @@ form {
       padding: 0;
     }
   }
-
-  button {
-    @include button-action;
-  }
 }
 
 .hidden {
   display: none !important;
 }
+
+.visually-hidden {
+  height: .1rem;
+  left: -10000rem;
+  opacity: .05;
+  overflow: hidden;
+  position: absolute;
+  width: .1rem;
+}
+
+.proportional-container {
+  padding: 0;
+  position: relative;
+
+  > * {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  &::before {
+    content: '\A';
+    display: block;
+  }
+
+  &.r-1x1::before {
+    padding-top: 100%;
+  }
+
+  &.r-5x4::before {
+    padding-top: 80%;
+  }
+
+  &.r-4x3::before {
+    padding-top: 75%;
+  }
+
+  &.r-3x2::before {
+    padding-top: 66.67%;
+  }
+
+  &.r-16x9::before {
+    padding-top: 56.25%;
+  }
+
+  &.r-2x1::before {
+    padding-top: 50%;
+  }
+}

data/app/assets/stylesheets/biovision/base/layout.scss

@@ -69,26 +69,26 @@ body {
       margin: 0 auto;
       max-width: $content-width;
       padding: .4rem;
+    }
+
+    .authentication {
+      > div {
+        display: flex;
+        align-items: center;
+      }
 
-      .authentication {
-        > div {
-          display: flex;
-          align-items: center;
-
-          &.links {
-            a:link,
-            a:visited {
-              @include button-nav;
-              margin: 0 .4rem;
-            }
-          }
-
-          &.plate {
-            .logout {
-              @include button-action;
-              margin-left: 1rem;
-            }
-          }
+      .links {
+        a:link,
+        a:visited {
+          @include button-nav;
+          margin: 0 .4rem;
+        }
+      }
+
+      .plate {
+        .logout {
+          @include button-action;
+          margin-left: 1rem;
         }
       }
     }
@@ -100,10 +100,10 @@ body {
 
     > div {
       align-items: center;
+    }
 
-      .logo {
-        margin-right: auto;
-      }
+    .logo {
+      margin-right: auto;
     }
   }
 
@@ -115,21 +115,21 @@ body {
     > div {
       color: $text-color-secondary;
       font-size: $font-size-decreased;
+    }
 
-      nav {
-        margin: 0 auto;
+    nav {
+      margin: 0 auto;
+    }
 
-        ul {
-          margin: 0;
-          padding: 0;
+    ul {
+      margin: 0;
+      padding: 0;
+    }
 
-          li {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-          }
-        }
-      }
+    li {
+      list-style: none;
+      margin: 0;
+      padding: 0;
     }
   }
 }
@@ -144,30 +144,28 @@ body {
 }
 
 form {
-  dl {
-    dt {
-      font: 500 $font-size-increased $font-family-main;
-
-      &:not(:first-of-type) {
-        border-top: $border-secondary;
-        margin: .8rem 0 0 0;
-        padding: .4rem 0 0 0;
-      }
+  dt {
+    font: 500 $font-size-increased $font-family-main;
+
+    &:not(:first-of-type) {
+      border-top: $border-secondary;
+      margin: .8rem 0 0 0;
+      padding: .4rem 0 0 0;
     }
+  }
 
-    dd {
-      padding: .2rem 0;
+  dd {
+    padding: .2rem 0;
 
-      ul {
-        margin: 0 auto;
-        padding: 0;
+    ul {
+      margin: 0 auto;
+      padding: 0;
 
-        li {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-          position: relative;
-        }
+      li {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
       }
     }
   }
@@ -181,3 +179,15 @@ form {
     width: 100%;
   }
 }
+
+.breadcrumbs {
+  a {
+    background: image_url('biovision/base/icons/breadcrumb.svg') no-repeat bottom .1rem right / .6rem 1.2rem;
+    padding-right: 1rem;
+    transition: background .25s;
+
+    &:hover {
+      background-image: image_url('biovision/base/icons/breadcrumb-hover.svg');
+    }
+  }
+}