elabs 2.0.0.pre

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

@@ -0,0 +1,6 @@
+@include content-full('license', $el-license-bg);
+
+.licenses-list {
+  @include grid(4, $spacer-small);
+  @include classifier-card('license', $el-license-bg);
+}

data/app/assets/stylesheets/elabs/app/_link-to-top.scss

@@ -0,0 +1,8 @@
+.link-to-top {
+  display: inline-block;
+  position: fixed;
+  bottom: $spacer-small;
+  left: $spacer-small;
+  background-color: $color-brand;
+  padding: $spacer-tiny 0;
+}

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

@@ -0,0 +1,12 @@
+audio,
+video {
+  width: 100%;
+}
+
+.thumbnail {
+
+  &--small {
+    border-radius: $border-radius;
+    width: 50px;
+  }
+}

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

@@ -0,0 +1,53 @@
+.modal {
+  display: none;
+
+  &--visible {
+    display: block;
+  }
+
+  &__overlay {
+    display: block;
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: transparentize($background-base, .5);
+    z-index: #{$zindex-modal - 1};
+  }
+
+  &__window {
+    position: fixed;
+    min-width: 50%;
+    max-width: 75%;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 10vh;
+    background-color: $background-base;
+    border: $border-default;
+    z-index: $zindex-modal;
+
+    &__title {
+      @include font-size('h3');
+      display: flex;
+      padding: $spacer-tiny $spacer-small;
+
+      h1 {
+        @include font-size('h3');
+        flex-grow: 1;
+      }
+
+      .modal__close-button {
+        @extend %clickable;
+        flex: none;
+      }
+    }
+
+    &__content {
+      padding: $spacer-tiny $spacer-small $spacer-small $spacer-small;
+      max-height: 80vh;
+      overflow: auto;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+.nsfw {
+  @extend %card;
+  color: $color-nsfw;
+  background-color: $color-nsfw-background;
+}

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

@@ -0,0 +1,16 @@
+.pagination {
+  text-align: center;
+
+  .page {
+    padding: $spacer-tiny;
+    background-color: transparent;
+
+    &.current {
+      font-weight: 600;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,54 @@
+.tabs {
+
+  &__tabs-list {
+    @extend %card;
+    display: flex;
+    list-style-type: none;
+    border-bottom: {
+      left-radius: 0;
+      right-radius: 0;
+    }
+    margin-bottom: 0;
+
+    &__tab {
+      padding: $spacer-tiny $spacer-small;
+      border-bottom: 3px solid transparent;
+
+      &.active {
+        border-color: $color-borders;
+      }
+
+      a {
+        text-decoration: none;
+        color: $color-base;
+      }
+    }
+  }
+
+  &__tab-content {
+
+    &__title {
+      display: flex;
+      margin-top: 0;
+      border-radius: 0;
+
+      h2 {
+        @include font-size('h4');
+        flex-grow: 1;
+      }
+
+      .actions {
+        flex: none;
+        text-align: right;
+      }
+    }
+
+    &.tab--initialized {
+      display: none;
+
+      &.active {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,6 @@
+@include content-full('tag', $el-tag-bg);
+
+.tags-list {
+  @include grid(4, $spacer-small);
+  @include classifier-card('tag', $el-tag-bg);
+}

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

@@ -0,0 +1,3 @@
+.toolbar {
+  border-bottom: 1px dashed $color-borders;
+}

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

@@ -0,0 +1,6 @@
+@include content-full('user', $el-user-bg);
+
+.users-list {
+  @include grid(4, $spacer-small);
+  @include classifier-card('user', $el-user-bg);
+}

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

@@ -0,0 +1,6 @@
+form {
+
+  .actions {
+    text-align: right;
+  }
+}

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

@@ -0,0 +1,70 @@
+.page--admin,
+.page--member {
+
+  .page__content__container {
+    width: 100%;
+    padding: {
+      left: $spacer-small;
+      right: $spacer-small;
+    }
+  }
+
+  .albums-list,
+  .articles-list,
+  .notes-list,
+  .projects-list,
+  .uploads-list,
+  .languages-list,
+  .licenses-list,
+  .tags-list,
+  .reports-list,
+  .users-list {
+    display: table;
+    width: 100%;
+    font-size: .8em;
+
+    .is-icon,
+    .is-counter {
+      text-align: center;
+      max-width: 75px;
+    }
+
+    .actions {
+      text-align: right;
+      width: 100px;
+    }
+
+    .relations {
+
+      .album,
+      .project,
+      .tag {
+        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/admin-members/_layout.scss

@@ -0,0 +1,17 @@
+.page--admin,
+.page--member {
+
+  .page__title {
+    padding-bottom: $spacer-small;
+  }
+
+  .page__actions {
+    width: 100%;
+    padding: {
+      left: $spacer-small;
+      right: $spacer-small;
+    }
+    margin-bottom: $spacer-small;
+    background-color: transparent;
+  }
+}

data/app/assets/stylesheets/elabs/app/areas/_devise.scss

@@ -0,0 +1,31 @@
+.devise {
+  @include grid(5, $spacer-small);
+
+  &__form {
+    grid-column: 2 / span 3;
+
+    &__wrapper {
+      @extend %card;
+    }
+  }
+
+  &__actions {
+
+    a {
+      display: block;
+      font-size: .8em;
+      text-decoration: none;
+      color: lighten($link-color, 20%);
+      border-left: 3px solid transparent;
+      padding-left: $spacer-tiny;
+
+      &.active {
+        border-left-color: $color-borders;
+      }
+
+      &:hover {
+        border-left-color: $color-borders;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+%card-style {
+  border-radius: $border-radius-lg;
+  padding: $spacer-tiny $spacer-small;
+  background-color: $color-white;
+  margin-bottom: $spacer-small;
+}
+
+%card {
+  @extend %card-style;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
+}
+
+%card-inset {
+  @extend %card-style;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
+}

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

@@ -0,0 +1,4 @@
+%content-container {
+  width: 960px;
+  margin: 0 auto;
+}

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

@@ -0,0 +1,16 @@
+@mixin classifier-card($name, $color) {
+  @include content-card($name, $color);
+
+  // Card override
+
+  .#{$name}-card {
+
+    .content {
+      padding: $spacer-tiny 0;
+
+      .btn--block:not(:last-child) {
+        margin-bottom: $spacer-tiny;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+@mixin content-card($name, $color) {
+
+  .#{$name}-card {
+    @extend %card;
+    background-color: $color;
+    color: darken($color, 20%);
+    margin-bottom: $spacer-small;
+
+    a {
+      color: darken($color, 30%);
+    }
+
+    header {
+      display: flex;
+
+      .icon {
+        padding: 0;
+        flex: none;
+        margin-right: $spacer-tiny;
+      }
+
+      h3 {
+        margin: 0;
+        line-height: 1em;
+
+        a {
+          text-decoration: none;
+        }
+      }
+
+      ul.informations {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        font-size: .8em;
+
+        li {
+          display: inline;
+          margin-left: $spacer-tiny;
+
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    article {
+      border-top: 1px dashed $color-borders;
+      margin-top: $spacer-tiny;
+    }
+
+    .more {
+      font-size: .8em;
+      text-align: right;
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+@mixin content-full($name, $color) {
+
+  .#{$name}--full {
+    @include grid(12, $spacer-small);
+
+    > aside {
+      grid-column: auto / span 3;
+      font-size: .8em;
+
+      ul {
+        @extend %card;
+        list-style-type: none;
+        margin: 0;
+
+        li {
+
+          &.separator {
+            margin-top: $spacer-tiny;
+            padding-top: $spacer-tiny;
+            border-top: 1px dashed $color-borders;
+          }
+        }
+      }
+
+      .date,
+      .license {
+        margin-left: $spacer-small-plus;
+      }
+    }
+
+    .content {
+      grid-column: auto / span 9;
+
+      article {
+        margin-bottom: $spacer-small;
+      }
+    }
+  }
+}