elabs 4.0.0 → 5.0.0

data/app/assets/stylesheets/elabs/app/components/_comment.scss

@@ -0,0 +1,29 @@
+.comment-card {
+  @include classifier-card($color-grey-100);
+
+  .comment-card--archived {
+    opacity: $comment-archived-opacity;
+
+    header {
+      margin-bottom: 0;
+    }
+
+    article {
+      display: none;
+      height: 0;
+    }
+
+    &:hover {
+      opacity: 1;
+
+      header {
+        margin-bottom: $spacer-medium;
+      }
+
+      article {
+        display: block;
+        height: auto;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_content_relations.scss

@@ -0,0 +1,53 @@
+.content__relations {
+  padding-top: $spacer-tiny;
+
+  // Custom uploads list --------------
+  .uploads-list {
+    padding: 0 $spacer-tiny $spacer-tiny $spacer-tiny;
+    @include grid(2, $spacer-tiny);
+
+    .upload__preview {
+      @extend %card;
+      display: inline-block;
+      margin-bottom: 0;
+
+      .upload__title {
+        @extend %ellipsis;
+        font-weight: $weight-book;
+        padding: $spacer-tiny $spacer-small;
+        color: $color-base;
+      }
+
+      .upload-object {
+        object-fit: cover;
+        width: 100%;
+        height: 15rem;
+      }
+
+      .content {
+        @include font-size('smaller');
+      }
+    }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+
+      .upload__preview {
+
+        .upload-object {
+          height: 20rem;
+        }
+      }
+    }
+    @include respond-to('small-up') {
+      @include grid(3, $spacer-tiny);
+
+      .upload__preview {
+
+        .upload-object {
+          height: 20rem;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_content_statuses.scss

@@ -0,0 +1,39 @@
+// Content statuses boxes, when content is not displayed
+.status {
+  color: $status-color;
+  background-color: $status-background-color;
+  padding: $status-padding;
+  border-radius: $status-border-radius;
+
+  // Size variations ------------------
+  &--inline {
+    border-radius: $status-inline-border-radius;
+    display: inline-block;
+    padding: 0 $spacer-tiny;
+    @include respond-to('small-up') {
+      padding: 0 $spacer-tiny;
+    }
+  }
+
+  &--full {
+    padding: $spacer-medium;
+    text-align: center;
+
+    .fas,
+    .far,
+    .fab {
+      font-size: 2em;
+      display: block;
+      margin: 0 auto $spacer-small auto;
+    }
+
+    // Responsive variations ----------
+    @include respond-to('small-up') {
+      padding: $spacer-medium;
+    }
+  }
+
+  &--large {
+    @extend %card;
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_content_types.scss

@@ -0,0 +1,41 @@
+// Album representations
+@include content-inline('album', $content-album-bg);
+@include content-card('album', $content-album-bg);
+@include content-full('album', $content-album-bg);
+
+// Article representations
+@include content-card('article', $content-article-bg);
+@include content-inline('article', $content-article-bg);
+@include content-full('article', $content-article-bg);
+
+// Note representations
+@include content-inline('note', $content-note-bg);
+@include content-card('note', $content-note-bg);
+@include content-full('note', $content-note-bg);
+
+// Projects representations
+@include content-full('project', $content-project-bg);
+@include content-inline('project', $content-project-bg);
+@include content-card('project', $content-project-bg);
+
+// Uploads representations
+@include content-inline('upload', $content-upload-bg);
+@include content-card('upload', $content-upload-bg);
+@include content-full('upload', $content-upload-bg);
+
+.upload {
+
+  &--inline {
+
+    .icon {
+      max-width: 1.5em;
+    }
+  }
+
+  &-object {
+    object-fit: cover;
+    overflow: hidden;
+    height: 30em;
+    width: 100%;
+  }
+}

data/app/assets/stylesheets/elabs/app/components/_git_cards.scss

@@ -0,0 +1,122 @@
+.github-card,
+.gitlab-card {
+  @extend %card;
+  background-color: $widget-card-background-color;
+  display: flex;
+
+  > .alert {
+    margin: 0;
+    border-radius: $widget-card-border-radius;
+    flex-grow: 1;
+  }
+
+  .content {
+    flex-grow: 1;
+
+    h2 {
+      font-size: 1.2em;
+      line-height: 1.2em;
+      padding: 0 $spacer-medium 0 0;
+      margin: 0;
+    }
+
+    .infos {
+      @include grid(2);
+      grid-gap: 0 $spacer-small-plus;
+      font-size: .8em;
+      color: lighten($color-base, 15%);
+
+      a {
+        text-decoration: none;
+      }
+
+      i {
+        color: $color-base;
+      }
+
+      // Responsive variations --------
+      @include respond-to('tiny-up') {
+        grid-template-columns: repeat(4, auto);
+      }
+      @include respond-to('small-up') {
+        grid-template-columns: repeat(6, auto);
+      }
+    }
+
+    .description {
+      @include font-size('small');
+      border: none;
+      margin: 0;
+    }
+  }
+
+  &--repo {
+
+    .content {
+
+      h2 {
+        padding: $spacer-small;
+      }
+
+      .infos {
+        padding: 0 $spacer-small;
+      }
+
+      .description {
+        padding: $spacer-medium $spacer-small;
+      }
+    }
+  }
+
+  &--user,
+  &--group {
+
+    .icon {
+      flex: none;
+      margin-right: $spacer-medium;
+
+      &--avatar {
+
+        .avatar {
+          font-size: 7rem;
+          max-width: 7rem;
+          border-radius: $widget-card-avatar-border-radius;
+        }
+
+        // Icons over the user avatar -
+        .avatar-badge {
+          font-size: 2rem;
+          background-color: $color-background-base;
+          position: absolute;
+          margin-top: 4.6rem;
+          padding: .2rem;
+          border-radius: $widget-card-avatar-border-radius;
+        }
+      }
+    }
+
+    .content {
+
+      h2 {
+        padding: $spacer-small 0;
+      }
+
+      .description {
+        padding: $spacer-medium 0;
+      }
+    }
+  }
+}
+
+.github-inline,
+.gitlab-inline {
+  display: inline-block;
+  border: {
+    top: 1px dashed $color-borders;
+    bottom: 1px dashed $color-borders;
+  }
+
+  &:not(:first-child) {
+    margin-left: $spacer-tiny;
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_alerts.scss

@@ -0,0 +1,3 @@
+.alert {
+  border-radius: $alert-border-radius;
+}

data/app/assets/stylesheets/elabs/app/elements/_badges.scss

@@ -0,0 +1,17 @@
+.badge {
+  text-align: center;
+  background-color: $badge-background-color;
+  display: inline-block;
+  border-radius: .7em;
+  font-size: .8em;
+  line-height: .8em;
+  padding: $spacer-tiny;
+
+  // Notification badges are positioned a bit higher
+  &--notification {
+    top: -.5em;
+    margin-left: -.5em;
+    position: relative;
+    padding: .1rem $spacer-tiny;
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_buttons.scss

@@ -0,0 +1,34 @@
+.btn {
+  border-radius: $border-radius;
+}
+
+.btn-group {
+  display: inline-flex;
+  color: $button-group-color;
+
+  &--block {
+    display: flex;
+
+    .btn {
+      flex-grow: 1;
+    }
+  }
+
+  > .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border: {
+        top-left-radius: $button-border-radius;
+        bottom-left-radius: $button-border-radius;
+      }
+    }
+
+    &:last-child {
+      border: {
+        top-right-radius: $button-border-radius;
+        bottom-right-radius: $button-border-radius;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_dropdowns.scss

@@ -0,0 +1,78 @@
+.dropdown {
+  display: inline-flex;
+  position: relative;
+
+  > a {
+    color: $dropdown-link-color;
+
+    // Icons --------------------------
+    &:before {
+      position: absolute;
+      display: inline-block;
+      font: {
+        family: 'Font Awesome 5 Free';
+        weight: 900;
+        size: .8em;
+      }
+      content: fa-content($fa-var-chevron-down);
+      margin-top: 1.5em;
+      left: 50%;
+      transform: translateX(-50%);
+      color: transparentize($dropdown-link-color, .5);
+    }
+
+    &:hover {
+      color: $dropdown-link-hover-color;
+
+      &:before {
+        color: transparentize($dropdown-link-hover-color, .5);
+      }
+    }
+  }
+
+  &__menu {
+    display: none;
+    padding: 0 $spacer-tiny;
+    box-shadow: 0 0 3px 2px $color-borders;
+    min-width: 18rem;
+    position: absolute;
+    z-index: $zindex-dropdown;
+
+    .menu_entry {
+      display: block;
+      margin: 0 (-$spacer-tiny);
+      padding: $spacer-tiny;
+
+      &.is-separator {
+        border-top: $border-default;
+      }
+    }
+
+    > .has-action {
+      display: flex;
+
+      .menu_entry {
+        flex-grow: 1;
+        margin-right: 0;
+      }
+
+      .action {
+        flex: none;
+        margin-right: -$spacer-tiny;
+        padding: $spacer-small $spacer-tiny calc(#{$spacer-small} - #{$spacer-tiny}) $spacer-tiny;
+      }
+    }
+
+    &--right {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &:hover {
+
+    .dropdown__menu {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/elabs/app/elements/_empty.scss

@@ -0,0 +1,31 @@
+.empty {
+  @extend %card;
+  padding: $spacer-medium;
+  text-align: center;
+  border: none;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gwfCxQ7ySJrcQAAACxJREFUOMtjYIAAHgZMQJYYI5rAFyyKSBWjrguHDhiNlNFIGY2U0UgZYpECALWmEYVG570iAAAAAElFTkSuQmCC');
+
+  &--big {
+    @extend %card;
+    color: darken($color-muted, 5%);
+    padding: $spacer-small;
+
+    // Responsive variation -----------
+    @include respond-to('small-up') {
+      padding: $spacer-large;
+    }
+  }
+
+  &__title {
+    @include font-size('h3');
+
+    // Responsive variation -----------
+    @include respond-to('small-up') {
+      @include font-size('h2');
+    }
+  }
+
+  &__subtitle {
+    font-size: .8em;
+  }
+}