adminterface 0.0.0 → 0.2.0

data/app/assets/stylesheets/adminterface/components/_panel.scss

@@ -0,0 +1,21 @@
+.panel {
+  margin-bottom: calc(#{$grid-gutter-width} / 2);
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    &:empty { display: none; }
+
+    .title {
+      @extend %text-truncate;
+
+      flex: 1;
+      white-space: normal;
+
+      & + .header_action { margin-left: $spacer; }
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/components/_sidebar.scss

@@ -0,0 +1,13 @@
+#sidebar-right {
+  width: 100%;
+  background: $sidebar-right-bg;
+
+  @include media-breakpoint-up($sidebar-breakpoint) { width: $sidebar-right-width; }
+}
+
+#sidebar-left {
+  width: 100%;
+  background: $sidebar-left-bg;
+
+  @include media-breakpoint-up($sidebar-breakpoint) { width: $sidebar-left-width; }
+}

data/app/assets/stylesheets/adminterface/components/_site_title.scss

@@ -0,0 +1,17 @@
+.site_title {
+  display: block;
+
+  .title {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .image { height: $site-title-logo-height; }
+  img + span { margin-left: map-get($spacers, 2); }
+}

data/app/assets/stylesheets/adminterface/components/_table_for.scss

@@ -0,0 +1,37 @@
+.table_for {
+  white-space: nowrap;
+  vertical-align: middle;
+
+  .col { width: auto; }
+
+  th,
+  td {
+    vertical-align: inherit !important;
+  }
+
+  &:not(.attributes_table) {
+    .col-actions { text-align: right; }
+    tr.selected td { background: $table-active-bg; }
+
+    th.sortable {
+      &.sorted-asc a::before { content: map-get($aa-icons, 'table-sorted-asc'); }
+      &.sorted-desc a::before { content: map-get($aa-icons, 'table-sorted-desc'); }
+
+      a {
+        position: relative;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        * { vertical-align: middle; }
+
+        &::before {
+          @extend %aa-icon;
+
+          margin-right: map-get($spacers, 1);
+          text-decoration: none;
+          content: '';
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/components/_table_tools.scss

@@ -0,0 +1,19 @@
+.scopes,
+.table_tools {
+  margin-bottom: $spacer;
+}
+
+.scope_ctrls {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & > * {
+    padding: 0;
+    margin: 0;
+
+    &:not(:first-child) { margin-left: $spacer; }
+  }
+}
+
+.scope > span { vertical-align: middle; }

data/app/assets/stylesheets/adminterface/components/_thumbnail.scss

@@ -0,0 +1,29 @@
+.thumbnail {
+  @extend %background-cover;
+
+  position: relative;
+  flex-shrink: 0;
+  width: map-get($thumbnail-sizes, $thumbnail-default-size);
+  height: map-get($thumbnail-sizes, $thumbnail-default-size);
+  overflow: hidden;
+  font-size: $small-font-size;
+  line-height: map-get($thumbnail-sizes, $thumbnail-default-size);
+  text-align: center;
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    height: 100%;
+
+    @include transform(translateX(-50%));
+  }
+}
+
+@each $_key, $_value in $thumbnail-sizes {
+  .thumbnail.#{$_key} {
+    width: $_value;
+    height: $_value;
+    line-height: $_value;
+  }
+}

data/app/assets/stylesheets/adminterface/components/_title_bar.scss

@@ -0,0 +1,36 @@
+#title_bar {
+  flex-wrap: nowrap;
+
+  .site_title,
+  .navbar-toggler {
+    display: none;
+  }
+
+  .navbar-head {
+    display: flex;
+    flex-direction: row;
+  }
+
+  #titlebar_left {
+    @extend %text-truncate;
+
+    flex: 1;
+
+    & + #titlebar_right { margin-left: $spacer; }
+  }
+
+  #breadcrumb {
+    @extend %text-truncate;
+
+    flex-wrap: nowrap;
+    margin: 0;
+    overflow-x: scroll;
+
+    .breadcrumb-item {
+      @extend %text-truncate;
+
+      flex-shrink: 0;
+      max-width: $breadcrumb-item-max-width;
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/components/inputs/_all.scss

@@ -0,0 +1,2 @@
+@import './text';
+@import './password';

data/app/assets/stylesheets/adminterface/components/inputs/_password.scss

@@ -0,0 +1,28 @@
+.password.input {
+  .password-visibility-toggler {
+    cursor: pointer;
+
+    [data-mode="show"] { display: flex; }
+    [data-mode="hide"] { display: none; }
+
+    &.show {
+      [data-mode="show"] { display: none; }
+      [data-mode="hide"] { display: flex; }
+    }
+
+    [data-mode="show"],
+    [data-mode="hide"] {
+      align-items: center;
+      color: $text-muted;
+
+      &::before {
+        @extend %aa-icon;
+
+        margin-right: map-get($spacers, 1);
+      }
+    }
+
+    [data-mode="show"]::before { content: map-get($aa-icons, 'visible'); }
+    [data-mode="hide"]::before { content: map-get($aa-icons, 'hidden'); }
+  }
+}

data/app/assets/stylesheets/adminterface/components/inputs/_text.scss

@@ -0,0 +1,30 @@
+.text.input {
+  .input-counter-container {
+    position: relative;
+
+    .input-counter-stats {
+      list-style: none;
+      padding: 0 map-get($spacers, 2);
+      margin: 0;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      font-size: $small-font-size;
+      background: $input-border-color;
+      color: color-contrast($input-border-color);
+      border-radius: $input-border-radius 0 0 0;
+
+      .input-counter-char-left { display: none; }
+
+      & > * {
+        display: inline-block;
+        position: relative;
+
+        &:not(:last-child)::after {
+          content: "/";
+          padding: 0 map-get($spacers, 1);
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/helpers/_aa_icon.scss

@@ -0,0 +1 @@
+.aa-icon { @extend %aa-icon; }

data/app/assets/stylesheets/adminterface/helpers/_all.scss

@@ -0,0 +1,2 @@
+@import './aa_icon';
+@import './pointer';

data/app/assets/stylesheets/adminterface/helpers/_pointer.scss

@@ -0,0 +1 @@
+[data-toggle] { cursor: pointer; }

data/app/assets/stylesheets/adminterface/layouts/_all.scss

@@ -0,0 +1,4 @@
+@import './base';
+@import './logged_in';
+@import './logged_out';
+@import './types/all';

data/app/assets/stylesheets/adminterface/layouts/_base.scss

@@ -0,0 +1,5 @@
+html {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

data/app/assets/stylesheets/adminterface/layouts/_logged_in.scss

@@ -0,0 +1,30 @@
+body.logged_in {
+  @include layout-scrollable;
+
+  overflow-x: hidden;
+
+  #wrapper { position: relative; }
+
+  #main,
+  #sidebar-left,
+  #sidebar-right {
+    padding: $spacer 0;
+  }
+
+  #active_admin_content {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+
+    #main {
+      width: 100%;
+
+      @include media-breakpoint-up($sidebar-breakpoint) {
+        &.without-sidebar { flex: 1; }
+        &.with-right-sidebar:not(.with-left-sidebar) { max-width: calc(100% - #{$sidebar-right-width}); }
+        &.with-left-sidebar:not(.with-right-sidebar) { max-width: calc(100% - #{$sidebar-left-width}); }
+        &.with-left-sidebar.with-right-sidebar { max-width: calc(100% - #{$sidebar-left-width} - #{$sidebar-right-width}); }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/layouts/_logged_out.scss

@@ -0,0 +1,14 @@
+body.logged_out {
+  background-color: $logged-out-bg;
+
+  .site-title-wrap,
+  .card-title,
+  .card-header {
+    text-align: center;
+  }
+
+  .site_title {
+    display: inline-block;
+    .image { height: $logged-out-logo-height; }
+  }
+}

data/app/assets/stylesheets/adminterface/layouts/types/_all.scss

@@ -0,0 +1,4 @@
+@import './mixins';
+@import './navigation_aside';
+@import './navigation_sidebar';
+@import './navigation_top';

data/app/assets/stylesheets/adminterface/layouts/types/_mixins.scss

@@ -0,0 +1,195 @@
+@mixin navigation-divider {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: block;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  opacity: $hr-opacity;
+  @content;
+}
+
+@mixin navigation-drawer($_header-width, $_titlebar-height, $_breakpoint, $_menu-item-active-bg) {
+  $_menu-item-padding-x: map-get($spacers, 3);
+  $_menu-item-padding-y: map-get($spacers, 1);
+  $_menu-item-border-radius: $border-radius;
+
+  display: grid;
+  grid-template-areas:
+    "header title_bar"
+    "header content";
+  grid-template-columns: 0 minmax(0, 1fr);
+  grid-template-rows: $_titlebar-height minmax(0, 1fr);
+  overflow: hidden;
+
+  .breakpoint-up-helper,
+  .breakpoint-down-helper {
+    visibility: hidden;
+  }
+
+  #wrapper {
+    height: 100%;
+    grid-area: content;
+  }
+
+  #title_bar {
+    grid-area: title_bar;
+
+    .navbar-toggler {
+      display: block;
+      margin-right: $spacer;
+    }
+  }
+
+  #header {
+    display: none;
+    grid-area: header;
+    height: 100% !important;
+    padding: 0;
+    align-items: flex-start;
+
+    &.navbar-dark {
+      #utility-nav::before,
+      .site_title::after {
+        border-color: $navbar-dark-active-color;
+      }
+
+      .dropdown-menu .dropdown-item.active { color: $navbar-dark-active-color; }
+    }
+
+    &.navbar-light {
+      #utility-nav::before,
+      .site_title::after {
+        border-color: $navbar-light-active-color;
+      }
+
+      .dropdown-menu .dropdown-item.active { color: $navbar-light-active-color; }
+    }
+
+    .site_title {
+      display: block;
+      width: 100%;
+      margin: 0;
+      position: relative;
+
+      &::after {
+        @include navigation-divider {
+          bottom: 0;
+        }
+      }
+    }
+
+    #utility-nav {
+      position: relative;
+
+      &::before {
+        @include navigation-divider {
+          top: 0;
+        }
+      }
+    }
+
+    .header-container {
+      height: 100%;
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .navbar-toggler { display: none; }
+    .collapse { display: block !important; }
+
+    .dropdown-toggle {
+      &::after { content: none; }
+
+      &.show::before {
+        @include transform(rotate(90deg));
+      }
+
+      &::before {
+        display: inline-block;
+        margin-right: map-get($spacers, 2);
+        vertical-align: middle;
+        content: '';
+
+        @include transition(0.1s all ease-in-out);
+        @include caret-end();
+      }
+    }
+
+    .dropdown-menu {
+      background: transparent;
+      padding: 0;
+      border: 0;
+
+      @include shadow(none);
+    }
+
+    #header-nav {
+      display: flex !important;
+      flex-direction: column;
+      flex: 1;
+      width: 100%;
+      overflow-y: scroll;
+
+      .nav-link,
+      .dropdown-item {
+        @include border-radius($_menu-item-border-radius);
+      }
+
+      .nav-link,
+      .dropdown-item a {
+        outline: none;
+      }
+
+      .dropdown-item a {
+        padding: $_menu-item-padding-y calc(#{$caret-width} + #{map-get($spacers, 2)} + #{$_menu-item-padding-x});
+        color: inherit;
+      }
+
+      .nav-link.active:not(.dropdown-toggle),
+      .dropdown-item.active {
+        z-index: 2;
+        color: color-contrast($_menu-item-active-bg);
+        background-color: $_menu-item-active-bg;
+        border-color: $_menu-item-active-bg;
+      }
+
+      .nav-link {
+        padding: $_menu-item-padding-y $_menu-item-padding-x;
+        i.aa-icon { margin-right: map-get($spacers, 2); }
+      }
+
+      .navbar-nav {
+        display: block;
+        width: 100%;
+        padding: 1rem 0;
+      }
+    }
+
+    #main-nav { flex: 1; }
+  }
+
+  @include media-breakpoint-down($_breakpoint) {
+    &.header-active {
+      grid-template-columns: $_header-width 100vw;
+      #header { display: flex; }
+    }
+
+    .breakpoint-down-helper { visibility: visible; }
+  }
+
+  @include media-breakpoint-up($_breakpoint) {
+    grid-template-areas:
+      "header title_bar"
+      "header content";
+    grid-template-columns: $_header-width minmax(0, 1fr);
+
+    .breakpoint-up-helper { visibility: visible; }
+    #header { display: flex; }
+  }
+
+  @include media-breakpoint-up($aside-breakpoint) {
+    #filters.aside { top: $_titlebar-height; }
+  }
+}

data/app/assets/stylesheets/adminterface/layouts/types/_navigation_aside.scss

@@ -0,0 +1,33 @@
+$_header-width: map-get($layout-navigation-aside, 'header');
+$_titlebar-height: map-get($layout-navigation-aside, 'title_bar');
+$_breakpoint: map-get($layout-navigation-aside, 'breakpoint');
+$_menu-item-active-bg: map-get($layout-navigation-aside, 'menu-item-active-bg');
+$_media-breakpoint-up-drawer-active-grid-template: $_header-width minmax(0, 1fr);
+
+body.layout-navigation-aside {
+  #title_bar .site_title { display: block; }
+  #header .site_title { height: $_titlebar-height; }
+
+  @include navigation-drawer($_header-width, $_titlebar-height, $_breakpoint, $_menu-item-active-bg);
+
+  @include media-breakpoint-down($_breakpoint) {
+    #title_bar .site_title { display: none; }
+  }
+
+  @include media-breakpoint-up($_breakpoint) {
+    grid-template-areas:
+      "title_bar title_bar"
+      "header content";
+
+    &.header-active {
+      grid-template-columns: 0 minmax(0, 1fr);
+      #header { display: none; }
+    }
+
+    #header {
+      padding: $spacer 0;
+      .site_title { display: none; }
+      #main-nav { padding-top: 0; }
+    }
+  }
+}

data/app/assets/stylesheets/adminterface/layouts/types/_navigation_sidebar.scss

@@ -0,0 +1,15 @@
+$_header-width: map-get($layout-navigation-sidebar, 'header');
+$_titlebar-height: map-get($layout-navigation-sidebar, 'title_bar');
+$_breakpoint: map-get($layout-navigation-sidebar, 'breakpoint');
+$_menu-item-active-bg: map-get($layout-navigation-sidebar, 'menu-item-active-bg');
+
+body.layout-navigation-sidebar {
+  #header .site_title { height: $_titlebar-height; }
+
+  &.header-active {
+    grid-template-columns: 0 minmax(0, 1fr);
+    #header { display: none; }
+  }
+
+  @include navigation-drawer($_header-width, $_titlebar-height, $_breakpoint, $_menu-item-active-bg);
+}

data/app/assets/stylesheets/adminterface/layouts/types/_navigation_top.scss

@@ -0,0 +1,33 @@
+$_header: map-get($layout-navigation-top, 'header');
+$_header-height: map-get($_header, 'height');
+$_header-zindex: map-get($_header, "z-index");
+$_title-bar: map-get($layout-navigation-top, 'title_bar');
+$_title-bar-height: map-get($_title-bar, 'height');
+$_title-bar-zindex: map-get($_title-bar, "z-index");
+
+body.layout-navigation-top {
+  grid-template-areas:
+    "header"
+    "title_bar"
+    "content";
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax($_header-height, auto) $_title-bar-height minmax(0, 1fr);
+
+  #header {
+    grid-area: header;
+    overflow-y: visible;
+    z-index: $_header-zindex;
+  }
+
+  #title_bar {
+    grid-area: title_bar;
+    z-index: $_title-bar-zindex;
+  }
+
+  #wrapper { grid-area: content; }
+
+  @include media-breakpoint-up($aside-breakpoint) {
+    #filters.aside { top: calc(#{$_header-height} + #{$_title-bar-height}); }
+  }
+}

data/app/assets/stylesheets/adminterface/mixins/_all.scss

@@ -0,0 +1,3 @@
+@import "./layouts";
+@import "./utilities";
+@import "./variables";

data/app/assets/stylesheets/adminterface/mixins/_layouts.scss

@@ -0,0 +1,38 @@
+@mixin layout-scrollable {
+  width: 100%;
+  height: 100%;
+
+  #wrapper { overflow: hidden; }
+
+  #active_admin_content,
+  #main,
+  #sidebar-left,
+  #sidebar-right {
+    height: 100%;
+  }
+
+  #main,
+  #header,
+  #sidebar-left,
+  #sidebar-right {
+    overflow-y: auto;
+  }
+
+  @include media-breakpoint-down($sidebar-breakpoint) {
+    #active_admin_content,
+    #main,
+    #sidebar-left,
+    #sidebar-right {
+      height: auto;
+    }
+
+    #main,
+    #header,
+    #sidebar-left,
+    #sidebar-right {
+      overflow: visible;
+    }
+
+    #wrapper { overflow-y: scroll; }
+  }
+}

data/app/assets/stylesheets/adminterface/mixins/_utilities.scss

@@ -0,0 +1,39 @@
+// sass-lint:disable no-vendor-prefixes
+@mixin animation($value) {
+  animation: #{$value};
+  -webkit-animation: #{$value};
+}
+
+@mixin non-selectable {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+@mixin transition($value...) {
+  transition: #{$value};
+  -webkit-transition: #{$value};
+}
+
+@mixin transform($value...) {
+  transform: #{$value};
+  -webkit-transform: #{$value};
+}
+
+@mixin clip-path($value...) {
+  -webkit-clip-path: #{$value};
+  clip-path: #{$value};
+}
+
+@mixin appearance($value) {
+  appearance: $value;
+  -webkit-appearance: $value;
+  -moz-appearance: $value;
+}
+
+@mixin shadow($value...) {
+  box-shadow: #{$value};
+  -webkit-box-shadow: #{$value};
+  -moz-box-shadow: #{$value};
+}