Ticket #5619: 0002-Modernise-gallery.patch

File 0002-Modernise-gallery.patch, 5.8 KB (added by Olivier Mehani, 4 years ago)

  • mediagoblin/static/css/base.css 

    From d211ffbb38ac6babd3917c425889af294dc94232 Mon Sep 17 00:00:00 2001
From: Olivier Mehani <shtrom+mediagoblin@ssji.net>
Date: Sun, 17 May 2020 01:36:30 +1000
Subject: [PATCH 2/5] Modernise gallery

With a lot of inspiration from [0] and [1].

[0] https://github.com/xieranmaya/blog/issues/6
[1] https://www.w3schools.com/howto/howto_css_image_overlay_title.asp

Signed-off-by: Olivier Mehani <shtrom+mediagoblin@ssji.net>
---
 mediagoblin/static/css/base.css               | 86 ++++++++++---------
 .../mediagoblin/utils/object_gallery.html     | 26 +++---
 mediagoblin/themes/airy/assets/css/airy.css   |  4 -
 3 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index af99c5f7..466b0b85 100644
    a b ul#action_to_resolve {list-style:none; margin-left:10px;}  
    591591
    592592/* media galleries */
    593593
     594.thumb_gallery {
     595  display: flex;
     596  flex-wrap: wrap;
     597}
     598
    594599.media_thumbnail {
    595   float: left;
     600  /* float: left; */
    596601  padding: 0px;
    597   width: 180px;
    598   overflow: hidden;
     602  /* overflow: hidden; */
    599603  margin: 0px 3px 10px;
    600604  text-align: center;
    601605  font-size: 0.875em;
    602606  background-color: #222;
    603607  border-radius: 0 0 5px 5px;
    604   padding: 0 0 6px;
    605608  text-overflow: ellipsis;
    606   overflow: hidden;
     609  /* overflow: hidden; */
    607610  border-color: #0D0D0D;
    608611  border-style: solid;
    609612  border-width: 1px 1px 2px;
    610613  position: relative;
     614
     615  height: 180px;
     616}
     617
     618.media_thumbnail{
     619  flex-grow: 1;
    611620}
     621
     622.thumb_row:after {
     623  content: '';
     624  flex-grow: 999999999;
     625}
     626
    612627.media_thumbnail:hover {
    613628    border-color: #0D0D0D #0D0D0D #378566 #0D0D0D;
    614629}
    615630
     631.media_thumbnail:hover a.thumb_entry_title {
     632  opacity: 1;
     633}
     634
     635.media_thumbnail img.thumb_img {
     636  height: 180px;
     637
     638  min-width: 100%;
     639  min-width: 100%;
     640
     641  object-fit: cover;
     642}
     643
    616644.media_thumbnail a {
    617   color: #eee;
    618645  text-decoration: none;
    619646  display: block;
    620647}
    … … ul#action_to_resolve {list-style:none; margin-left:10px;}  
    625652}
    626653
    627654a.thumb_entry_title {
    628   padding: 8px;
     655
     656  position: absolute;
     657  bottom: 0;
     658  width: 100%;
     659
     660  background: rgba(0, 0, 0, 0.5);
     661  color: #f1f1f1;
     662
     663  text-align: center;
     664  font-size: large;
     665
     666  opacity: 0;
    629667}
    630668
    631669.entry_type_icon {
    … … pre {  
    923961/* initial GMG max 940 */
    924962@media screen and (max-width: 960px) {
    925963
    926   img.media_image {
    927     max-width: 100%;
    928 /*    display: inline;*/
    929   }
    930 
    931   .media_thumbnail {
    932 /*    width: 21%;*/
    933   }
    934 
    935964  .profile_sidebar {
    936965    width: 100%;
    937966    margin: 0px;
    … … pre {  
    964993}
    965994/* desktop resolutions */
    966995@media screen and (min-width: 960px) {
    967   .container .three.columns.media_thumbnail {
    968     width:180px;
    969     margin-left:3px;
    970     margin-right:3px;
    971   }
    972996  #thingy_view {
    973997    width:640px;
    974998    height:640px;
    975999  }
     1000
    9761001}
    9771002
    9781003/* Tablet Portrait size to standard 960 (devices and browsers) */
    9791004@media only screen and (min-width: 768px) and (max-width: 959px) {
    980   .container .three.columns.media_thumbnail {
    981     width:147px;
    982     margin-left:2px;
    983     margin-right:2px;
    984   }
    985   .media_thumbnail.thumb_entry img {
    986     max-width:100%;
    987   }
    988   .thumb_gallery {
    989     margin-left: 0;
    990     margin-right: 0;
    991   }
    9921005  .navigation_button {
    9931006  }
    9941007  #thingy_view {
    … … pre {  
    9991012
    10001013/* All Mobile Sizes (devices and browser) */
    10011014@media screen and (max-width: 767px) {
    1002   .thumb_row {
    1003     margin-bottom: 0;
    1004   }
    1005   .thumb_gallery {
    1006     margin-left: 0;
    1007     margin-right: 0;
    1008   }
    10091015  h1,h2,h3,p {
    10101016    margin-bottom: 10px !important;
    10111017  }

  • mediagoblin/templates/mediagoblin/utils/object_gallery.html 

    diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index be739089..2a3cddaa 100644
    a b  
    1919{% from "mediagoblin/utils/pagination.html" import render_pagination %}
    2020
    2121{% macro media_grid(request, media_entries, col_number=5) %}
    22   <div class="thumb_gallery">
    23     {% for row in media_entries|batch(col_number) %}
    24       <div class="row thumb_row
    25                  {%- if loop.first %} thumb_row_first
    26                  {%- elif loop.last %} thumb_row_last{% endif %}">
    27         {% for entry in row %}
     22  <div class="thumb_gallery thumb_row">
     23    {% for entry in media_entries %}
    2824          {% set entry_url = entry.url_for_self(request.urlgen) %}
    29           <div class="three columns media_thumbnail thumb_entry
     25          <div class="media_thumbnail thumb_entry
    3026                     {%- if loop.first %} thumb_entry_first
    3127                     {%- elif loop.last %} thumb_entry_last{% endif %}">
    32             <a href="{{ entry_url }}">
    33               {% if entry.icon_url %}
    34               <img class="entry_type_icon" src="{{ entry.icon_url }}" />
    35               {% endif %}
    36               <img src="{{ entry.thumb_url }}" />
     28            <a href="{{ entry_url }}"
     29            {% if entry.title %}
     30            title="{{ entry.title }}"
     31            {% endif %}
     32            >
     33              <img class="thumb_img" src="{{ entry.thumb_url }}" />
    3734            </a>
     35            {% if entry.icon_url %}
     36            <img class="entry_type_icon" src="{{ entry.icon_url }}" />
     37            {% endif %}
    3838            {% if entry.title %}
    3939            <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
    4040            {% endif %}
    4141          </div>
    42         {% endfor %}
    43       </div>
    4442    {% endfor %}
    4543  </div>
    4644{%- endmacro %}

  • mediagoblin/themes/airy/assets/css/airy.css 

    diff --git a/mediagoblin/themes/airy/assets/css/airy.css b/mediagoblin/themes/airy/assets/css/airy.css
index 047e02dc..34bf7a8d 100644
    a b input, textarea {  
    104104  box-shadow: 0 0 3px #c4c4c4;
    105105}
    106106
    107 .media_thumbnail a {
    108   color: #4a4a4a;
    109 }
    110 
    111107.empty_space {
    112108  background-image: url("../images/empty_dots.png");
    113109}