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

searx/static/themes/eelo/css/eelo.css

+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;

  }

searx/static/themes/eelo/css/eelo.min.css

+0 −0

File changed.

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

View original file
View changed file

searx/static/themes/eelo/img/torrent_thumb.svg

0 → 100644
+0 −0

File added.

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

View file

searx/static/themes/eelo/less/eelo/results.less

+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 {

searx/static/themes/eelo/less/eelo/search.less

+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 {