@openneuro/app 4.20.6 → 4.21.0-alpha.3

package/src/scripts/scss/dataset/dataset-page.scss

@@ -0,0 +1,397 @@
+@import '../variables.scss';
+.dataset {
+  .dataset-header {
+    h1 {
+      display: flex;
+      align-items: center;
+      color: #fff;
+      font-size: 24px;
+      @media (max-width: 767px) {
+        font-size: 20px;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+    }
+    .hexagon-wrapper {
+      margin-right: 10px;
+      @media (max-width: 767px) {
+        width: 56px;
+        height: 56px;
+        div.label {
+          font-size: 17px;
+        }
+      }
+    }
+  }
+
+  .dataset-header-alert {
+    padding: 10px 20px;
+    background: #b5f1b5;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    &.warning {
+      background-color: #fff3c5;
+    }
+    &.error {
+      background-color: #ff8686;
+    }
+    span[data-tooltip] {
+      display: inline;
+    }
+  }
+
+  .dataset-content {
+    margin-top: 25px;
+  }
+
+  .dataset-validation {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    @media (max-width: 767px) {
+      flex-wrap: wrap;
+      justify-content: flex-start;
+    }
+    .validation-accordion {
+      flex-grow: 1;
+      margin-right: 20px;
+      @media (max-width: 990px) {
+        margin-bottom: 20px;
+      }
+      @media (max-width: 767px) {
+        min-width: 100%;
+      }
+    }
+    .brainlife-block {
+      margin-right: 20px;
+    }
+    .clone-dropdown {
+      position: relative;
+      .clone-link i {
+        margin-left: 10px;
+      }
+      .toggle {
+        .fa-caret-up {
+          display: none;
+        }
+        .fa-caret-down {
+          display: inline;
+        }
+        &.active {
+          .fa-caret-up {
+            display: inline;
+          }
+          .fa-caret-down {
+            display: none;
+          }
+        }
+      }
+      .menu {
+        box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 51%);
+        margin-top: 4px;
+        @media (max-width: 767px) {
+          left: 0;
+        }
+        .dataset-git-access {
+          width: 450px;
+          background: #fff;
+          border-radius: $border-radius-default;
+          padding: 20px;
+          @media (max-width: 800px) {
+            width: 100%;
+          }
+          span {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            h4 {
+              margin: 0;
+              font-size: 18px;
+            }
+          }
+          .git-url,
+          .git-hash {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 20px 0 0;
+            font-size: 14px;
+            flex-wrap: wrap;
+            > div {
+              flex-grow: 1;
+              padding: 5px;
+              text-overflow: ellipsis;
+              max-width: 100%;
+              overflow: hidden;
+            }
+          }
+        }
+        i {
+          color: var(--current-theme-primary);
+          &:hover {
+            color: var(--current-theme-primary-hover);
+          }
+        }
+        button {
+          padding: 0;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+
+.dataset {
+  .hexagon-wrapper {
+    text-align: center;
+    margin: 20px auto;
+    position: relative;
+    display: inline-block;
+    width: 45px;
+    height: 45px;
+    div.label {
+      position: absolute;
+      top: 0;
+      text-align: center;
+      width: 100%;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: 600;
+      font-size: 13px;
+    }
+
+    .hexagon {
+      height: 100%;
+      width: calc(100% * 0.57735);
+      display: inline-block;
+    }
+
+    .hexagon:before {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+      transform: rotateZ(60deg);
+    }
+
+    .hexagon:after {
+      position: absolute;
+      top: 0;
+      right: calc((100% / 2) - ((100% * 0.57735) / 2));
+      background-color: inherit;
+      height: inherit;
+      width: inherit;
+      content: '';
+      transform: rotateZ(-60deg);
+    }
+  }
+
+  a {
+    .hexagon {
+      transition: color 0.3s;
+      background-color: #fff;
+
+      &.mri {
+        color: $mri-theme;
+      }
+      &.eeg {
+        color: $eeg-theme;
+      }
+
+      &.pet {
+        color: $pet-theme;
+      }
+      &.ieeg {
+        color: $ieeg-theme;
+      }
+
+      &.meg {
+        color: $meg-theme;
+      }
+    }
+    &:hover {
+      .hexagon {
+        color: lighten($on-dark-aqua, 15%);
+        &.mri {
+          color: lighten($mri-theme, 10%);
+        }
+        &.eeg {
+          color: lighten($eeg-theme, 10%);
+        }
+
+        &.pet {
+          color: lighten($pet-theme, 10%);
+        }
+        &.ieeg {
+          color: lighten($ieeg-theme, 10%);
+        }
+
+        &.meg {
+          color: lighten($meg-theme, 10%);
+        }
+      }
+    }
+  }
+}
+
+.sidebar .dataset-meta-block {
+  margin-bottom: 25px;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  word-break: break-word;
+  .dmb-heading {
+    font-size: 14px;
+    margin: 0 0 10px;
+  }
+
+  &.dmb-inline-list {
+    ul {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      display: flex;
+      flex-wrap: wrap;
+      li {
+        margin-right: 5px;
+        &:after {
+          content: ',';
+        }
+        &:last-child {
+          margin: 0;
+          &:after {
+            content: '';
+          }
+        }
+      }
+    }
+  }
+  &.dmb-modalities {
+    padding: 0;
+    margin: 0 0 25px;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    h2 {
+      flex-basis: 100%;
+      min-width: 100%;
+    }
+    a {
+      display: block;
+      font-size: 12px;
+      font-weight: bold;
+      letter-spacing: 1px;
+      margin-right: 5px;
+      border: 1px solid;
+      background: var(--current-theme-primary);
+      padding: 5px 12px;
+      color: #fff;
+      text-decoration: none;
+      border-radius: $border-radius-default;
+      &:hover {
+        background: var(--current-theme-primary-hover);
+      }
+    }
+  }
+  &.dmb-list {
+    a {
+      word-break: break-word;
+    }
+  }
+
+  .cite-content-block {
+    background-color: #f6f6f6;
+    margin: 10px 0;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    padding: 10px;
+  }
+}
+
+.dataset-meta-block.dataset-readme {
+  border: 1px solid #ccc;
+  border-radius: $border-radius-default;
+  padding: 20px 15px;
+  margin-bottom: 25px;
+  .dmb-heading {
+    font-size: 14px;
+    margin: 0 0 10px;
+    border: 0;
+  }
+  a {
+    word-break: break-all;
+  }
+}
+
+.dataset-meta-block.dataset-readme.markdown-body {
+  h1 {
+    font-size: 1.7em;
+  }
+}
+
+.deprecated-modal {
+  .modal-body {
+    width: 500px;
+    padding: 30px 0 0;
+    font-weight: bold;
+  }
+}
+
+.dataset-header {
+  background-color: #333;
+}
+
+.dataset-page {
+  .dataset-header {
+    background-color: var(--current-theme-header);
+    background: linear-gradient(
+      16deg,
+      var(--current-theme-header-dark),
+      var(--current-theme-header)
+    );
+  }
+}
+
+// Collapsible panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  margin-bottom: 10px;
+
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: 4px;
+
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
+  .panel-heading {
+    border-bottom: 0;
+
+    + .panel-collapse > .panel-body,
+    + .panel-collapse > .list-group {
+      border-top: 1px solid;
+    }
+  }
+
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid;
+    }
+  }
+}

package/src/scripts/scss/dataset/dataset-tool.scss

@@ -0,0 +1,281 @@
+@import '../variables.scss';
+//share table
+.download-link {
+  .return-link {
+    text-transform: uppercase;
+    color: #333;
+    font-weight: 600;
+    text-decoration: none;
+    margin-left: 40px;
+    font-size: 14px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.return-link {
+  text-transform: uppercase;
+  color: #333;
+  font-weight: 600;
+  text-decoration: none;
+  margin-left: 40px;
+  font-size: 14px;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+//share table
+.metadata-form {
+  margin-bottom: 40px;
+  .return-link {
+    text-transform: uppercase;
+    color: #333;
+    font-weight: 600;
+    text-decoration: none;
+    margin-left: 40px;
+    font-size: 14px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+//share table
+.dataset-share-form {
+  .data-table-header,
+  .data-table-content {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    @media (max-width: 767px) {
+      flex-wrap: wrap;
+    }
+    > span {
+      display: block;
+      min-width: 33.3333%;
+      margin-bottom: 11px;
+      label {
+        font-weight: bold;
+        font-size: 14px;
+        display: none;
+        @media (max-width: 767px) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .data-table-content {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .data-table-header {
+    font-weight: bold;
+    font-size: 14px;
+    @media (max-width: 767px) {
+      display: none;
+    }
+  }
+
+  .share-input-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    input {
+      margin-right: 10px;
+      width: 400px;
+      max-width: 90%;
+    }
+    button {
+      margin-right: 10px;
+    }
+  }
+  .warn-btn .warn-btn-group button {
+    width: auto;
+  }
+  .warn-btn .btn-warn-component {
+    padding: 11px;
+  }
+  .return-link {
+    text-transform: uppercase;
+    color: #333;
+    font-weight: 600;
+    text-decoration: none;
+    margin-left: 40px;
+    font-size: 14px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .share-form-controls {
+    margin-top: 30px;
+  }
+}
+
+.dataset-snapshot-form {
+  .data-table-header,
+  .data-table-content {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    @media (max-width: 767px) {
+      flex-wrap: wrap;
+    }
+    > span {
+      display: block;
+      min-width: 33.3333%;
+      margin-bottom: 11px;
+      label {
+        font-weight: bold;
+        font-size: 14px;
+        display: none;
+        @media (max-width: 767px) {
+          display: block;
+        }
+      }
+    }
+  }
+  .input-group-btn {
+    margin-left: 20px;
+  }
+  .snapshot-input-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    input {
+      margin-right: 10px;
+      width: 400px;
+      max-width: 90%;
+    }
+    button {
+      margin-right: 10px;
+    }
+  }
+}
+
+.datalad-dataset-form {
+  margin: 20px auto;
+  .actions {
+    align-items: center;
+    justify-content: flex-end;
+    button {
+      margin-left: 5px;
+      margin-bottom: 10px;
+    }
+  }
+  .dataset-form-controls {
+    margin-top: 20px;
+  }
+  .faux-table {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    label {
+      font-weight: 600;
+      display: none;
+    }
+    &:nth-child(even) {
+      background-color: #eee;
+    }
+  }
+  .col.commit {
+    word-break: break-all;
+  }
+  @media (max-width: 990px) {
+    .faux-table-header {
+      display: none;
+    }
+    .faux-table {
+      label {
+        margin-right: 5px;
+        display: inline-block;
+      }
+    }
+    .actions {
+      justify-content: flex-start;
+    }
+  }
+}
+
+
+
+.reviewer-link {
+  > div {
+    display: flex;
+    align-items: center;
+    .tooltip {
+      margin: 0 20px 0 0;
+      min-width: 160px;
+    }
+    pre {
+      word-break: break-all;
+      display: block;
+      white-space: break-spaces;
+    }
+  }
+  small {
+    margin-bottom: 20px;
+    display: block;
+  }
+}
+.dataset-anonymous-form {
+  margin-bottom: 20px;
+  .dataset-form-body {
+    margin: 20px 0;
+    padding: 10px 10px 0;
+    background: #eee;
+    h3 {
+      margin-top: 0;
+    }
+  }
+  .data-table-header,
+  .data-table-content {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    @media (max-width: 767px) {
+      flex-wrap: wrap;
+    }
+    > span {
+      display: block;
+      min-width: 33.3333%;
+      margin-bottom: 11px;
+      label {
+        font-weight: bold;
+        font-size: 14px;
+        display: none;
+        @media (max-width: 767px) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .data-table-content {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .data-table-header {
+    font-weight: bold;
+    font-size: 14px;
+    @media (max-width: 767px) {
+      display: none;
+    }
+  }
+
+  .return-link {
+    text-transform: uppercase;
+    color: #333;
+    font-weight: 600;
+    text-decoration: none;
+    margin-left: 40px;
+    font-size: 14px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/src/scripts/scss/dataset/dropdown.scss

@@ -0,0 +1,29 @@
+@import '../variables.scss';
+
+.dropdown-wrapper {
+  display: inline-block;
+  .toggle {
+    cursor: pointer;
+  }
+  .menu {
+    position: absolute;
+    overflow: hidden;
+    height: 0;
+    z-index: 9999;
+    right: 0;
+    background-color: #fff;
+    border-radius: $border-radius-default;
+    @media (max-width: 800px) {
+      width: 290px;
+      right: 0;
+    }
+    @media (max-width: 435px) {
+      right: 0;
+      left: 0;
+    }
+
+    &.expanded {
+      height: auto;
+    }
+  }
+}