elabs 3.0.0 → 4.0.0

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

@@ -1,6 +1,14 @@
 .btn-group {
   display: inline-flex;
 
+  &--block {
+    display: flex;
+
+    .btn {
+      flex-grow: 1;
+    }
+  }
+
   > .btn {
     border-radius: 0;
 

data/app/assets/stylesheets/elabs/app/_comments.scss

@@ -1 +1,10 @@
-@include content-card('comment', $gray-300)
+@include content-card('comment', $gray-300);
+
+.comments-area {
+
+  .actions {
+    background-color: transparent;
+    text-align: right;
+    box-shadow: none;
+  }
+}

data/app/assets/stylesheets/elabs/app/_content.scss

@@ -8,3 +8,18 @@
 @include content-full('note', $el-content-note-bg);
 @include content-full('project', $el-content-project-bg);
 @include content-full('upload', $el-content-upload-bg);
+@include content-inline('album', $el-content-album-bg);
+@include content-inline('article', $el-content-article-bg);
+@include content-inline('note', $el-content-note-bg);
+@include content-inline('project', $el-content-project-bg);
+@include content-inline('upload', $el-content-upload-bg);
+
+.upload {
+
+  &--inline {
+
+    .icon {
+      max-width: 1.5em;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+// Content statuses boxes, when content is not displayed
+
+.nsfw,
+.locked,
+.missing,
+.infinite-loop {
+  color: $color-nsfw;
+  background-color: $color-nsfw-background;
+
+  &--inline {
+    border-radius: $border-radius;
+    display: inline-block;
+    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;
+    }
+  }
+
+  &--large {
+    @extend %card;
+  }
+}

data/app/assets/stylesheets/elabs/app/_forms.scss

@@ -27,6 +27,10 @@ textarea {
   &:focus {
     border-color: $color-grey-700;
   }
+
+  &[disabled] { /* stylelint-disable-line selector-no-qualifying-type */
+    border-style: dashed;
+  }
 }
 
 /* stylelint-disable selector-max-type */
@@ -35,6 +39,7 @@ form {
 
   .field {
     @include grid(4, $spacer-small);
+    margin-top: $spacer-small;
 
     > label,
     > .field_with_errors {

data/app/assets/stylesheets/elabs/app/_helpers.scss

@@ -1,3 +1,13 @@
 %clickable {
   cursor: pointer;
 }
+
+%content-code {
+  @include font-size('small');
+  border-left: 2px dotted $color-borders;
+  padding: 0 0 0 $spacer-small;
+}
+
+%article-header {
+  color: $color-grey-800;
+}

data/app/assets/stylesheets/elabs/app/_layout.scss

@@ -159,6 +159,10 @@
       @extend %content-container;
       font-size: .8em;
       text-align: center;
+
+      a { /* stylelint-disable-line no-descending-specificity */
+        color: $color-base;
+      }
     }
   }
 }

data/app/assets/stylesheets/elabs/app/_modals.scss

@@ -48,6 +48,10 @@
       padding: $spacer-tiny $spacer-small $spacer-small $spacer-small;
       max-height: 80vh;
       overflow: auto;
+
+      .actions {
+        text-align: right;
+      }
     }
   }
 }

data/app/assets/stylesheets/elabs/app/_tables.scss

@@ -0,0 +1,31 @@
+/* stylelint-disable selector-max-type */
+
+table {
+  width: 100%;
+
+  tr {
+
+    &:nth-child(even) {
+      background-color: darken($background-base, 10%);
+    }
+
+    &:hover {
+      background-color: darken($background-base, 5%);
+    }
+  }
+
+  thead {
+    border-bottom: 1px solid $color-borders;
+  }
+
+  th,
+  td {
+    padding: $spacer-tiny $spacer-tiny;
+
+    &:not(:last-child) {
+      border-right: 1px dashed $color-borders;
+    }
+  }
+}
+
+/* stylelint-enable */

data/app/assets/stylesheets/elabs/app/_typo.scss

@@ -0,0 +1,14 @@
+@each $name, $background-color in $variants-list {
+
+  .is-#{$name} {
+    color: $background-color;
+  }
+}
+
+.text--smaller {
+  @include font-size('smaller');
+}
+
+.text--small {
+  @include font-size('small');
+}

data/app/assets/stylesheets/elabs/app/_users.scss

@@ -1,13 +1,21 @@
 @include content-full('user', $el-user-bg);
+@include classifier-card('user', $el-user-bg);
 
 .users-list {
-  @include grid(4, $spacer-small);
-  @include classifier-card('user', $el-user-bg);
+  @include grid(3, $spacer-small);
+}
+
+.user-card {
+
+  header {
+    height: 64px;
+  }
+}
 
-  .user-card {
+.user--inline {
+  display: inline;
 
-    header {
-      height: 64px;
-    }
+  .avatar {
+    max-width: 1.5em;
   }
 }

data/app/assets/stylesheets/elabs/app/admin-members/_forms.scss

@@ -1,6 +1,13 @@
 form {
 
   .actions {
-    text-align: right;
+    background-color: darken($background-base, 2%);
+    box-shadow: inset 0 5px 5px -3px $color-borders;
+    margin: $spacer-small (-$spacer-small) (-$spacer-small) (-$spacer-small);
+    padding: $spacer-small;
+
+    &-buttons {
+      text-align: right;
+    }
   }
 }

data/app/assets/stylesheets/elabs/app/admin-members/_indexes.scss

@@ -19,9 +19,8 @@
   .tags-list,
   .reports-list,
   .users-list,
-  .notifications-list{
+  .notifications-list {
     display: table;
-    width: 100%;
     font-size: .8em;
 
     .is-icon,
@@ -43,29 +42,5 @@
         display: block;
       }
     }
-
-    tr {
-
-      &:nth-child(even) {
-        background-color: darken($background-base, 10%);
-      }
-
-      &:hover {
-        background-color: darken($background-base, 5%);
-      }
-    }
-
-    thead {
-      border-bottom: 1px solid $color-borders;
-    }
-
-    th,
-    td {
-      padding: $spacer-tiny $spacer-tiny;
-
-      &:not(:last-child) {
-        border-right: 1px dashed $color-borders;
-      }
-    }
   }
 }

data/app/assets/stylesheets/elabs/app/mixins/_content-card.scss

@@ -1,9 +1,12 @@
 @mixin content-card($name, $color) {
 
   .#{$name}-card {
+    $card-color-base: darken($color, 20%);
+    $card-color-title: darken($card-color-base, 40%);
+    $card-color-content: darken($card-color-base, 20%);
     @extend %card;
     background-color: $color;
-    color: darken($color, 20%);
+    color: $card-color-base;
     margin-bottom: $spacer-small;
 
     a {
@@ -29,6 +32,7 @@
 
         a {
           text-decoration: none;
+          color: $card-color-title;
         }
       }
 
@@ -37,6 +41,7 @@
         margin: 0;
         padding: 0;
         font-size: .8em;
+        min-height: 1em;
 
         li {
           display: inline;
@@ -52,6 +57,11 @@
     article {
       border-top: 1px dashed $color-borders;
       margin-top: $spacer-tiny;
+      color: $card-color-content;
+
+      pre {
+        @extend %content-code;
+      }
     }
 
     .more {

data/app/assets/stylesheets/elabs/app/mixins/_content-full.scss

@@ -45,6 +45,32 @@
 
       article {
         margin-bottom: $spacer-small;
+
+        > h1,
+        > h2,
+        > h3,
+        > h4,
+        > h5,
+        > h6 {
+          @extend %article-header;
+        }
+
+        > h1,
+        > h2 {
+          margin: $spacer-large 0 $spacer-medium 0;
+        }
+
+        > h3 {
+          margin: $spacer-medium-plus 0 $spacer-small-plus 0;
+        }
+
+        > h4 {
+          margin: $spacer-medium 0 $spacer-small 0;
+        }
+
+        pre {
+          @extend %content-code;
+        }
       }
     }
   }

data/app/assets/stylesheets/elabs/app/mixins/_content-inline.scss

@@ -0,0 +1,7 @@
+@mixin content_inline($name, $color) {
+
+  .#{$name}--inline {
+    display: inline-block;
+    border-bottom: 1px dashed darken($color, 15%);
+  }
+}

data/app/assets/stylesheets/elabs/app/widgets/_git-cards.scss

@@ -0,0 +1,88 @@
+.github-card,
+.gitlab-card {
+  @extend %card;
+  display: flex;
+
+  > .alert {
+    margin: 0 (-$spacer-tiny);
+    border-radius: $border-radius;
+    flex-grow: 1;
+  }
+
+  .icon {
+    flex: none;
+    margin-right: $spacer-small;
+
+    &--avatar {
+
+      .avatar {
+        font-size: 6rem;
+        max-width: 6rem;
+        border-radius: $border-radius;
+      }
+
+      .avatar-badge {
+        font-size: 2rem;
+        background-color: $background-base;
+        position: absolute;
+        margin-top: 3.6rem;
+        padding: .2rem;
+        border-radius: $border-radius;
+      }
+    }
+  }
+
+  .content {
+    flex-grow: 1;
+
+    h2 {
+      font-size: 1.2em;
+      line-height: 1.2em;
+    }
+
+    .infos {
+      font-size: .8em;
+      padding: 0;
+      margin: 0;
+      color: lighten($color-base, 15%);
+
+      a {
+        text-decoration: none;
+      }
+
+      i {
+        color: $color-base;
+      }
+
+      li {
+        display: inline-block;
+        list-style-type: none;
+
+        &:not(:first-child) {
+          margin-left: $spacer-small;
+        }
+      }
+    }
+
+    .description {
+      @include font-size('small');
+      margin: $spacer-tiny (-$spacer-tiny) 0 (-$spacer-tiny);
+      padding: 0 $spacer-tiny;
+      border-top: 1px dashed $color-borders;
+    }
+  }
+}
+
+.github-inline,
+.gitlab-inline {
+  display: inline-block;
+  background-color: transparentize($color-base, .95);
+  border: {
+    top: 1px dashed $color-borders;
+    bottom: 1px dashed $color-borders;
+  }
+
+  &:not(:first-child) {
+    margin-left: $spacer-tiny;
+  }
+}

data/app/assets/stylesheets/elabs/lib/_hljs.scss

@@ -0,0 +1,5 @@
+// HighlightJS overrides
+
+.hljs {
+  background-color: transparent;
+}