Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 3be9ef8a authored by Daniel J. Ramirez's avatar Daniel J. Ramirez
Browse files

Several layout changes.

Added new videos layout
Added video results for the first page (currently only two videos are shown since
it can clutter the main results)
parent a73f7468
Loading
Loading
Loading
Loading
+99 −25
Original line number Diff line number Diff line
@@ -658,19 +658,21 @@ nav #eelo_links > * {
    flex-wrap: nowrap;
  }
  #search_form #more_categories {
    margin-left: 24px;
    padding: 8px 16px;
    border-radius: 16px;
    position: relative;
    flex-direction: row;
    align-items: center;
    top: 0;
    border: none;
    border-radius: 0;
    padding-bottom: 0;
    background-color: transparent;
    margin-left: 16px;
  }
  #search_form #more_categories > label {
    padding: 0;
  }
  #search_form #more_categories > label:not(:last-child) {
    margin-right: 16px;
  }
  #search_form.inline-search > #search_input_container {
    margin-right: 40px;
  }
@@ -713,25 +715,78 @@ nav #eelo_links > * {
.result.result-torrent .extra-info > :not(:last-child) {
  margin-right: 16px;
}
.result.result-videos {
.videos-gallery .result.result-torrent .torrent-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: rgba(0, 0, 0, 0.4);
  font-weight: bold;
  padding: 6px 16px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.videos-gallery .result.result-torrent .torrent-banner .torrent-data {
  text-transform: none;
  font-weight: normal;
}
.videos-gallery .result.result-torrent .torrent-banner .torrent-data > :not(:first-child) {
  margin-left: 6px;
}
.result.result-videos,
.videos-gallery .result.result-torrent {
  position: relative;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.result.result-videos .result-content {
  display: flex;
.result.result-videos .result-content,
.videos-gallery .result.result-torrent .result-content {
  margin: 0px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result.result-videos .result-content .result_header {
.result.result-videos .result-content .result_header,
.videos-gallery .result.result-torrent .result-content .result_header {
  margin-top: 0;
}
.result.result-videos .result-content > .thumbnail {
  flex: 1;
.result.result-videos .result-content .result_header a,
.videos-gallery .result.result-torrent .result-content .result_header a {
  word-wrap: break-word;
}
.result.result-videos .result-content > :not(.thumbnail) {
  flex: 3;
  padding-left: 16px;
.result.result-videos .result-content > .thumbnail,
.videos-gallery .result.result-torrent .result-content > .thumbnail {
  position: relative;
}
.result.result-videos .result-content > :not(.thumbnail),
.videos-gallery .result.result-torrent .result-content > :not(.thumbnail) {
  margin-top: 8px;
  height: 100%;
  display: flex;
  padding: 8px 16px;
  flex-direction: column;
  justify-content: space-between;
}
.result.result-videos .result-content .thumbnail > img {
.result.result-videos .result-content .thumbnail > img,
.videos-gallery .result.result-torrent .result-content .thumbnail > img {
  width: 100%;
  height: 144px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.result.result-videos .result-content .subheader .result_engine,
.videos-gallery .result.result-torrent .result-content .subheader .result_engine {
  float: right;
}
.result.result-videos .result-content .subheader .result_engine img,
.videos-gallery .result.result-torrent .result-content .subheader .result_engine img {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
}
.result .external-link {
  font-size: 14px;
@@ -750,8 +805,7 @@ nav #eelo_links > * {
  white-space: pre-wrap;
}
.result.result-default,
.result.result-torrent,
.result.result-videos {
.result.result-torrent {
  margin-bottom: 32px;
}
.result.result-images {
@@ -762,32 +816,49 @@ nav #eelo_links > * {
  border: none;
  margin-bottom: 8px;
}
#results.image-gallery {
#results.images-gallery {
  display: flex;
  flex-wrap: wrap;
}
#results.image-gallery .result.result-images {
#results.images-gallery .result.result-images {
  display: block;
  flex: 20%;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
}
.videos-gallery {
  display: flex;
  flex-wrap: wrap;
}
.videos-gallery .result.result-torrent {
  margin-bottom: 0;
}
@supports (display: grid) {
  #results.image-gallery {
  #results.images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 8px;
  }
  #results.image-gallery .result.result-images {
  #results.images-gallery .result.result-images {
    display: block;
    text-align: center;
    overflow: hidden;
  }
  #results.image-gallery .result.result-images .img-thumbnail {
  #results.images-gallery .result.result-images .img-thumbnail {
    height: 100%;
    width: auto;
  }
  .videos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
    grid-gap: 16px;
  }
  .videos-gallery .result.result-videos,
  .videos-gallery .result.result-torrent {
    display: block;
    overflow: hidden;
  }
}
#default_images_container {
  column-count: 5;
@@ -855,19 +926,22 @@ nav #eelo_links > * {
  color: rgba(0, 0, 0, 0.4);
  padding-right: 16px;
}
#image_result_mini_gallery_header {
.first-page-media-results {
  margin-bottom: 32px;
}
.first-page-media-results .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#image_result_mini_gallery_header .title {
.first-page-media-results .header .title {
  font-size: 18px;
}
@media screen and (max-width: 1100px) {
  #results.image-gallery {
  #results.images-gallery {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  #results.image-gallery .result.result-images {
  #results.images-gallery .result.result-images {
    height: 140px;
    max-height: 140px;
  }
+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

+0 −0

File added.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

+97 −18
Original line number Diff line number Diff line
@video-scale: 16;

#results {
  margin-top: @spacing_xx-large;
  margin-bottom: @spacing_xx-large;
@@ -35,20 +37,76 @@
  &.result-torrent {
    .extra-info > :not(:last-child) { margin-right: @spacing_large; }
  }
  &.result-videos {
  .videos-gallery &.result-torrent {
    .torrent-banner {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      color: @text-muted-color;
      font-weight: bold;
      padding: @spacing_small @spacing_large;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
      font-size: @fontsize_small;

      .torrent-data {
        text-transform: none;
        font-weight: normal;

        & > :not(:first-child) {
          margin-left: @spacing_small;
        }
      }
    }
  }
  &.result-videos, .videos-gallery &.result-torrent {
    position: relative;
    .widget-border(@dim-color-lighter);
    border-radius: @corner-radius;

    .result-content {
      display: flex;
      margin: 0px;
      display: flex;
      flex-direction: column;
      height: 100%;

      .result_header { margin-top: 0; }
      .result_header { 
        margin-top: 0; 
        a {
          word-wrap: break-word;
        }
      }

      & > .thumbnail { flex: 1; }
      & > .thumbnail { position: relative; }
      & > :not(.thumbnail) {
        flex: 3;
        padding-left: @spacing_large;
        margin-top: @spacing_medium;
        height: 100%;
        display: flex;
        padding: @spacing_medium @spacing_large;
        flex-direction: column;
        justify-content: space-between;
      }
      .thumbnail > img { 
        width: 100%;
        height: 9px * @video-scale;
        object-fit: cover;
        object-position: center;
        display: block;
      }

      .subheader {
        .result_engine {
          float: right;
          img {
            width: 16px;
            height: 16px;
            margin-left: @spacing_medium;
            vertical-align: middle;
          }
        }
      }
      .thumbnail > img { width: 100%; }
    }
  }
  
@@ -74,7 +132,7 @@
  }
}

.result.result-default, .result.result-torrent, .result.result-videos {
.result.result-default, .result.result-torrent {
  margin-bottom: @spacing_xx-large;
}
.result.result-images {
@@ -87,7 +145,7 @@
  }
}

#results.image-gallery {
#results.images-gallery {
  display: flex;
  flex-wrap: wrap;

@@ -99,8 +157,15 @@
    overflow: hidden;
  }
}
.videos-gallery {
  display: flex;
  flex-wrap: wrap;

  // torrents in grid mode do not need margin
  .result.result-torrent { margin-bottom: 0; }
}
@supports(display: grid) {
  #results.image-gallery {
  #results.images-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: @spacing_medium;
@@ -116,6 +181,16 @@
      }
    }
  } 
  .videos-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16px * @video-scale, 1fr));
    grid-gap: @spacing_large;
  
    .result.result-videos, .result.result-torrent {
      display: block;
      overflow: hidden;
    }
  }
}
#default_images_container {
  column-count: 5;
@@ -199,17 +274,21 @@
  }
}

#image_result_mini_gallery_header {
.first-page-media-results {
  margin-bottom: @spacing_xx-large;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  
    .title { font-size: @fontsize_large; }
  }
}


.tablet-mq({
  #results.image-gallery {
  #results.images-gallery {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    .result.result-images {
+6 −4
Original line number Diff line number Diff line
@@ -214,17 +214,19 @@
    #search_params, #categories { flex-wrap: nowrap; }

    #more_categories {
      margin-left: @spacing_x-large;
      padding: @spacing_medium @spacing_large;
      border-radius: @spacing_large;
      position: relative;
      flex-direction: row;
      align-items: center;
      top: 0;
      border: none;
      border-radius: 0;
      padding-bottom: 0;
      background-color: transparent;
      margin-left: @spacing_large;

      > label { padding: 0; }
      > label:not(:last-child) {
        margin-right: @spacing_large;
      }
    }
  }
  #search_form.inline-search > #search_input_container {
Loading