@openneuro/app 4.33.4 → 4.34.0-alpha.0

package/src/scripts/components/search-page/neurobagel_logo.svg

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="19.999809mm"
+   height="20.000071mm"
+   viewBox="0 0 19.999809 20.000071"
+   version="1.1"
+   id="svg33028"
+   inkscape:version="1.2.2 (732a01da63, 2022-12-09, custom)"
+   sodipodi:docname="2023-10-19_nb_ko_neurobagel-logo_no-words.svg"
+   inkscape:export-filename="../f42a4677/2023-10-19_nb_ko_neurobagel-logo-9-double-w-words-light-bkgrnd.png"
+   inkscape:export-xdpi="196"
+   inkscape:export-ydpi="196"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview33030"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.3786088"
+     inkscape:cx="57.386486"
+     inkscape:cy="84.29297"
+     inkscape:window-width="1842"
+     inkscape:window-height="1005"
+     inkscape:window-x="78"
+     inkscape:window-y="38"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs33025">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient31372"
+       id="linearGradient31374"
+       x1="81.119553"
+       y1="121.03011"
+       x2="95.557304"
+       y2="107.07687"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(-32.371578,-83.730304)" />
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient31372">
+      <stop
+         style="stop-color:#f9a767;stop-opacity:1;"
+         offset="0"
+         id="stop31368" />
+      <stop
+         style="stop-color:#c44bcf;stop-opacity:1;"
+         offset="1"
+         id="stop31370" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-45.964344,-20.331186)">
+    <path
+       id="path13809-6-3-8-6-1-9"
+       style="fill:url(#linearGradient31374);fill-opacity:1;stroke:none;stroke-width:0.502708;stroke-linecap:round"
+       d="m 55.964251,20.331186 a 10,10 0 0 0 -3.288688,0.55707 1.9835366,1.9461924 0 0 1 1.251086,1.80816 1.9835366,1.9461924 0 0 1 -0.636137,1.42782 l 1.174089,2.1115 a 4.375,4.375 0 0 1 1.51567,-0.27337 4.375,4.375 0 0 1 4.375443,4.37493 4.375,4.375 0 0 1 -0.67334,2.33111 l 1.78955,1.52497 a 1.9835366,1.9461924 0 0 1 1.07177,-0.31471 1.9835366,1.9461924 0 0 1 1.95957,1.64538 10,10 0 0 0 1.46089,-5.19296 10,10 0 0 0 -9.999903,-9.9999 z m -5.958293,1.97042 a 10,10 0 0 0 -4.041614,8.02948 10,10 0 0 0 6.783049,9.46661 1.9835366,1.9461924 0 0 1 -0.483175,-1.26298 1.9835366,1.9461924 0 0 1 1.764751,-1.9327 l 0.49661,-2.14096 a 4.375,4.375 0 0 1 -2.920235,-4.12376 4.375,4.375 0 0 1 1.759066,-3.5047 l -1.223698,-2.20038 a 1.9835366,1.9461924 0 0 1 -0.197404,0.0103 1.9835366,1.9461924 0 0 1 -1.983859,-1.94613 1.9835366,1.9461924 0 0 1 0.04651,-0.39481 z m 8.859926,11.31558 a 4.375,4.375 0 0 1 -2.885613,1.09502 4.375,4.375 0 0 1 -0.226343,-0.007 l -0.499711,2.1544 a 1.9835366,1.9461924 0 0 1 0.977201,1.67535 1.9835366,1.9461924 0 0 1 -1.139982,1.757 10,10 0 0 0 0.872815,0.0393 10,10 0 0 0 6.678143,-2.56367 1.9835366,1.9461924 0 0 1 -0.0987,0.004 1.9835366,1.9461924 0 0 1 -1.98386,-1.94614 1.9835366,1.9461924 0 0 1 0.12196,-0.65991 z" />
+  </g>
+</svg>

package/src/scripts/components/search-page/search-page.scss

@@ -0,0 +1,505 @@
+@import '../scss/variables';
+
+.search-page-portal-header {
+  position: relative;
+  color: #fff;
+  z-index: 1100;
+  @media (max-width: 980px) {
+    z-index: 3;
+  }
+
+  .hex-col {
+    margin: 50px 0 -30px auto;
+    position: relative;
+    align-self: flex-end;
+    @media (max-width: 980px) {
+      margin-left: 60px;
+    }
+    @media (max-width: 767px) {
+      display: none;
+    }
+  }
+  @media (max-width: 767px) {
+    .portal-primary {
+      width: 100%;
+      min-width: 100%;
+      flex-basis: 100%;
+    }
+  }
+
+  .primary-content,
+  .secondary-content {
+    font-weight: 300;
+    font-size: 24px;
+  }
+  .primary-content {
+    a {
+      color: #fff;
+    }
+    @media (max-width: 450px) {
+      font-size: 20px;
+    }
+  }
+  .secondary-content {
+    margin: 25px 0 50px;
+    display: flex;
+    @media (max-width: 450px) {
+      flex-direction: column;
+      font-size: 17px;
+    }
+    .aggregate-count:first-child {
+      margin-right: 60px;
+    }
+    span {
+      font-weight: 600;
+    }
+  }
+}
+
+.search-page-portal-header {
+  background-color: var(--current-theme-primary);
+  background: linear-gradient(
+    16deg,
+    var(--current-theme-primary-dark) 0%,
+    var(--current-theme-primary) 70%
+  );
+}
+
+.search-page-coms {
+  position: relative;
+  background-color: #f3f7f6;
+  padding: 20px 0 40px;
+  h2 {
+    font-size: 19px;
+  }
+  .primary-content {
+    font-weight: 300;
+    font-size: 19px;
+  }
+  .secondary-content {
+    font-weight: 300;
+    font-size: 15px;
+    margin-top: 25px;
+    display: flex;
+  }
+}
+
+.search-hexagon {
+  position: relative;
+  width: 250px;
+  height: 144.34px;
+  margin: 72.17px 0;
+
+  background-size: auto 288.6751px;
+  background-position: center;
+
+  .hexTop,
+  .hexBottom {
+    position: absolute;
+    z-index: 1;
+    width: 176.78px;
+    height: 176.78px;
+    overflow: hidden;
+    transform: scaleY(0.5774) rotate(-45deg);
+    background: inherit;
+    left: 36.61px;
+
+    /*counter transform the bg image on the caps*/
+    &:after,
+    &:after {
+      content: '';
+      position: absolute;
+      width: 250px;
+      height: 144.33756729740645px;
+      transform: rotate(45deg) scaleY(1.7321) translateY(-72.1688px);
+      transform-origin: 0 0;
+      background: inherit;
+    }
+  }
+  .hexTop {
+    top: -88.3883px;
+    &:after {
+      background-position: center top;
+    }
+  }
+
+  .hexBottom {
+    bottom: -88.3883px;
+
+    &:after {
+      background-position: center bottom;
+    }
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 250px;
+    height: 144.3376px;
+    z-index: 2;
+    background: inherit;
+  }
+}
+
+.search-shade-cube {
+  margin: 0;
+  position: absolute;
+  height: 169px;
+  width: 169px;
+  transform-style: preserve-3d;
+  transform: scale3d(1.05, 1.04, 1.04) rotateX(-36deg) rotateY(-45deg)
+    rotateZ(0deg) translate3d(0px, 0px, 0px) skew(0deg, 0deg);
+  z-index: 4;
+  top: 69px;
+  margin-left: 29px;
+
+  > div {
+    position: absolute;
+    box-sizing: border-box;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+    color: #000;
+    font-weight: bold;
+    &.front {
+      transform: translateZ(69px);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      background-color: rgba(0, 0, 0, 0.32);
+    }
+    &.top {
+      transform: rotateX(-270deg) translateY(-100px);
+      transform-origin: top center;
+    }
+    &.right {
+      transform: rotateY(-270deg) translateX(100px);
+      transform-origin: top right;
+      background-color: rgba(0, 0, 0, 0.53);
+    }
+  }
+}
+
+.search {
+  padding: 0 0 50px;
+}
+.search-heading {
+  margin: 20px 0;
+  @media (max-width: 450px) {
+    margin-top: 60px;
+  }
+  h1 {
+    margin: 0;
+    @media (max-width: 450px) {
+      font-size: 20px;
+    }
+  }
+  .go-back {
+    font-size: 14px;
+  }
+}
+.search-wrapper {
+  display: flex;
+}
+
+.close-filters-btn,
+.show-filters-btn {
+  display: none;
+}
+
+@media (max-width: 980px) {
+  .close-filters-btn,
+  .show-filters-btn {
+    display: block;
+    position: absolute;
+    top: 40px;
+    right: 0;
+    background: none;
+    border: 0;
+    font-size: 12px;
+    margin: 10px;
+    padding: 0;
+  }
+}
+
+@media (max-width: 450px) {
+  .close-filters-btn,
+  .show-filters-btn {
+    top: 0px;
+    left: 0;
+    margin: 10px 0 20px;
+    border: 1px solid #ccc;
+    padding: 10px;
+    display: block;
+  }
+  .close-filters-btn {
+    left: 20px;
+  }
+}
+
+.search-nav {
+  flex: 0 0 auto;
+  padding: 0;
+  width: 430px;
+
+  @media (max-width: 980px) {
+    opacity: 0;
+    transition: opacity 0.3s;
+    transform: translateX(-100vw);
+    background: white;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100vh;
+    min-height: 100%;
+    overflow: scroll;
+    position: fixed;
+    z-index: 1205;
+    top: 0;
+    padding: 80px 25px;
+    &.show-mobile-filters {
+      opacity: 1;
+      transform: translateX(0);
+      transition: opacity 1s;
+    }
+  }
+
+  .facet-accordion.on-accordion-wrapper {
+    padding: 0;
+  }
+
+  .search-keyword {
+    margin-bottom: 30px;
+  }
+}
+@media (max-width: 980px) {
+  .search-filters-open {
+    z-index: 1200;
+    position: relative;
+  }
+}
+
+.search-content {
+  flex: 1;
+  padding: 0 0 0 30px;
+  position: relative;
+  max-width: 100%;
+  @media (max-width: 980px) {
+    padding: 0;
+  }
+  .search-results {
+    border: 1px solid $newspaper;
+    border-radius: $border-radius-default;
+    max-width: 100%;
+    .search-result {
+      border-bottom: 1px solid $newspaper;
+    }
+  }
+  .load-more {
+    .on-button {
+      display: block;
+      border: 1px solid;
+      width: 100%;
+      background-color: #fff;
+      transition: background-color 0.3s;
+      &:hover {
+        text-decoration: none;
+        background-color: $newspaper;
+      }
+    }
+  }
+}
+
+.search-sort {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.results-count {
+  padding: 20px 0;
+
+  span {
+    color: var(--current-theme-primary);
+  }
+}
+
+.date-facet .on-radio-wrapper.row .custom-radio {
+  margin-right: 0;
+  flex-basis: 50%;
+}
+
+.on-accordion-wrapper .keyword-accordion {
+  .accordion-title {
+    background: #e9e9e9;
+    width: 18px;
+    border-radius: 50%;
+    line-height: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 18px;
+    font-size: 12px;
+    align-content: space-around;
+    flex-direction: row;
+    font-weight: 600;
+    color: #515151;
+    font-family: monospace;
+    &:after {
+      display: none;
+    }
+  }
+  .accordion-content {
+    font-size: 12px;
+    margin: 10px 0;
+    .on-icon {
+      font-size: 10px;
+      padding: 1px 4px;
+      border-radius: $border-radius-default;
+      line-height: 1;
+      background-color: var(--current-theme-primary);
+      color: #fff;
+    }
+  }
+}
+
+.on-accordion-wrapper .keyword-accordion {
+  .accordion-title {
+    position: absolute;
+    top: -20px;
+    left: 70px;
+  }
+}
+
+.facet-search .help-text {
+  font-size: 12px;
+  margin: 10px 0;
+  .on-icon {
+    font-size: 10px;
+    padding: 1px 4px;
+    border-radius: $border-radius-default;
+    line-height: 1;
+    background-color: var(--current-theme-primary);
+    color: #fff;
+  }
+}
+
+.nih-facet {
+  padding: 0 0 10px;
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    li {
+      cursor: pointer;
+      align-items: center;
+      justify-content: flex-start;
+
+      font-size: 14px;
+      border-top: 1px solid $newspaper;
+      padding: 10px;
+      display: block;
+      font-weight: 500;
+      font-weight: 500;
+      &.selected-item {
+        color: var(--current-theme-primary);
+      }
+    }
+  }
+}
+
+@media (max-width: 980px) {
+  .search-facet-wrapper {
+    .modality-facet.facet-accordion.on-accordion-wrapper {
+      margin: 20px 0;
+      border: 0;
+      background: #e5f4f7;
+      border-radius: $border-radius-default;
+      padding: 10px;
+      .accordion-item.collapsed {
+        max-height: initial;
+      }
+      .accordion-title,
+      h2 {
+        margin: 10px 0 15px;
+        font-size: 19px;
+        font-weight: 600;
+        color: var(--current-theme-primary);
+      }
+      .accordion-title {
+        margin: 10px 0 15px 0;
+        padding: 0;
+        &:after {
+          display: none;
+        }
+      }
+      .facet-list {
+        padding: 0 0 10px;
+        color: var(--current-theme-primary);
+        ul {
+          padding: 0;
+          margin: 0;
+          list-style: none;
+          li {
+            cursor: pointer;
+          }
+        }
+        .label {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+
+          span {
+            margin-left: 10px;
+            display: inline-block;
+            font-size: 14px;
+          }
+        }
+
+        .level-1 > li {
+          border-top: 1px solid $newspaper;
+
+          > .label {
+            padding: 10px;
+            font-weight: 500;
+            font-size: 16px;
+          }
+        }
+        .level-2 {
+          margin-bottom: 10px;
+          font-size: 14px;
+          > li {
+            display: flex;
+            justify-content: flex-start;
+
+            .label {
+              margin-left: 15px;
+            }
+            &:before {
+              content: '-';
+              margin-left: 12px;
+            }
+          }
+        }
+      }
+      .facet-list ul li {
+        > .label {
+          font-weight: 500;
+        }
+        &.selected-facet > .label {
+          color: var(--current-theme-primary);
+          font-weight: 600;
+          span {
+            color: var(--current-theme-primary);
+          }
+        }
+      }
+    }
+  }
+}

package/src/scripts/components/search-page/search-result.scss

@@ -0,0 +1,117 @@
+@import '../scss/variables';
+.search-result {
+  padding: 20px;
+  h3 {
+    margin: 0 0 5px;
+    a {
+      color: var(--current-theme-primary);
+      &:hover {
+        color: var(--current-theme-primary-hover);
+      }
+    }
+  }
+
+  .result-icon-wrap,
+  .owner-icon-wrap {
+    display: flex;
+    justify-content: flex-end;
+    @media (max-width: 480px) {
+      justify-content: flex-start;
+      margin-bottom: 10px;
+    }
+    .result-icon {
+      margin-left: 15px;
+    }
+  }
+  .result-activity-icon {
+    width: 18px;
+    height: 19px;
+
+    &[data-tooltip]::after {
+      width: 130px;
+      padding: 5px;
+      line-height: 1.6em;
+      text-align: center;
+      white-space: break-spaces;
+    }
+  }
+
+  .result-meta-body > div {
+    font-size: 14px;
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+
+    strong {
+      text-transform: uppercase;
+      color: #666;
+      margin-bottom: 5px;
+    }
+    .list-item {
+      display: inline-block;
+
+      border-right: 1px solid #cacaca;
+      font-weight: 600;
+      padding: 3px 6px;
+      margin: 0 10px 5px 0;
+      color: var(--current-theme-secondary);
+      border: 1px solid;
+      border-radius: $border-radius-default;
+    }
+  }
+
+  .result-meta-footer {
+    display: flex;
+    flex-wrap: wrap;
+    .result-summary-meta {
+      margin: 0 10px 10px 0;
+      padding: 0 40px 0 0;
+      font-size: 14px;
+      font-weight: 600;
+      &:last-child {
+        padding-right: 0;
+      }
+      strong {
+        text-transform: uppercase;
+        color: #666;
+      }
+    }
+  }
+
+  .updated-divider {
+    margin: 0 10px;
+    @media (max-width: 767px) {
+      display: none;
+    }
+  }
+  .result-upload-info {
+    text-align: left;
+    font-size: 12px;
+    margin: 0 0 20px;
+    display: flex;
+    justify-content: flex-start;
+    @media (max-width: 767px) {
+      flex-direction: column;
+    }
+    span {
+      color: #666;
+    }
+  }
+}
+
+.dataset-permissions-tag {
+  text-align: right;
+  margin-bottom: 15px;
+  @media (max-width: 480px) {
+    text-align: left;
+    display: block;
+  }
+  small {
+    border: 1px solid;
+    padding: 2px 10px;
+    border-radius: 4px;
+    color: var(--current-theme-secondary);
+    font-weight: 600;
+    font-size: 10px;
+  }
+}