Current location

narf Source control manager Git

summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorOlivier Mehani <shtrom+mediagoblin@ssji.net>2020-05-17 01:36:30 +1000
committerOlivier Mehani <shtrom+mediagoblin@ssji.net>2020-05-31 00:44:14 +1000
commit475b2c02a5499576feec85d8962b77d6dcbc89d9 (patch)
tree5788712042a5173f41e8b7575b55b7a3d0854cad
parent1ba9ee46e56e6c77aab964c19de07c6d34d933ee (diff)
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>
-rw-r--r--mediagoblin/static/css/base.css86
-rw-r--r--mediagoblin/templates/mediagoblin/utils/object_gallery.html26
-rw-r--r--mediagoblin/themes/airy/assets/css/airy.css4
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/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -591,30 +591,57 @@ ul#action_to_resolve {list-style:none; margin-left:10px;}
/* media galleries */
+.thumb_gallery {
+ display: flex;
+ flex-wrap: wrap;
+}
+
.media_thumbnail {
- float: left;
+ /* float: left; */
padding: 0px;
- width: 180px;
- overflow: hidden;
+ /* overflow: hidden; */
margin: 0px 3px 10px;
text-align: center;
font-size: 0.875em;
background-color: #222;
border-radius: 0 0 5px 5px;
- padding: 0 0 6px;
text-overflow: ellipsis;
- overflow: hidden;
+ /* overflow: hidden; */
border-color: #0D0D0D;
border-style: solid;
border-width: 1px 1px 2px;
position: relative;
+
+ height: 180px;
+}
+
+.media_thumbnail{
+ flex-grow: 1;
}
+
+.thumb_row:after {
+ content: '';
+ flex-grow: 999999999;
+}
+
.media_thumbnail:hover {
border-color: #0D0D0D #0D0D0D #378566 #0D0D0D;
}
+.media_thumbnail:hover a.thumb_entry_title {
+ opacity: 1;
+}
+
+.media_thumbnail img.thumb_img {
+ height: 180px;
+
+ min-width: 100%;
+ min-width: 100%;
+
+ object-fit: cover;
+}
+
.media_thumbnail a {
- color: #eee;
text-decoration: none;
display: block;
}
@@ -625,7 +652,18 @@ ul#action_to_resolve {list-style:none; margin-left:10px;}
}
a.thumb_entry_title {
- padding: 8px;
+
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+
+ background: rgba(0, 0, 0, 0.5);
+ color: #f1f1f1;
+
+ text-align: center;
+ font-size: large;
+
+ opacity: 0;
}
.entry_type_icon {
@@ -923,15 +961,6 @@ pre {
/* initial GMG max 940 */
@media screen and (max-width: 960px) {
- img.media_image {
- max-width: 100%;
-/* display: inline;*/
- }
-
- .media_thumbnail {
-/* width: 21%;*/
- }
-
.profile_sidebar {
width: 100%;
margin: 0px;
@@ -964,31 +993,15 @@ pre {
}
/* desktop resolutions */
@media screen and (min-width: 960px) {
- .container .three.columns.media_thumbnail {
- width:180px;
- margin-left:3px;
- margin-right:3px;
- }
#thingy_view {
width:640px;
height:640px;
}
+
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
- .container .three.columns.media_thumbnail {
- width:147px;
- margin-left:2px;
- margin-right:2px;
- }
- .media_thumbnail.thumb_entry img {
- max-width:100%;
- }
- .thumb_gallery {
- margin-left: 0;
- margin-right: 0;
- }
.navigation_button {
}
#thingy_view {
@@ -999,13 +1012,6 @@ pre {
/* All Mobile Sizes (devices and browser) */
@media screen and (max-width: 767px) {
- .thumb_row {
- margin-bottom: 0;
- }
- .thumb_gallery {
- margin-left: 0;
- margin-right: 0;
- }
h1,h2,h3,p {
margin-bottom: 10px !important;
}
diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index 57cd7c25..a01cb3d5 100644
--- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
@@ -19,28 +19,26 @@
{% from "mediagoblin/utils/pagination.html" import render_pagination %}
{% macro media_grid(request, media_entries, col_number=5) %}
- <div class="thumb_gallery">
- {% for row in media_entries|batch(col_number) %}
- <div class="row thumb_row
- {%- if loop.first %} thumb_row_first
- {%- elif loop.last %} thumb_row_last{% endif %}">
- {% for entry in row %}
+ <div class="thumb_gallery thumb_row">
+ {% for entry in media_entries %}
{% set entry_url = entry.url_for_self(request.urlgen) %}
- <div class="three columns media_thumbnail thumb_entry
+ <div class="media_thumbnail thumb_entry
{%- if loop.first %} thumb_entry_first
{%- elif loop.last %} thumb_entry_last{% endif %}">
- <a href="{{ entry_url }}">
- {% if entry.icon_url %}
- <img class="entry_type_icon" src="{{ entry.icon_url }}" />
- {% endif %}
- <img src="{{ entry.thumb_url }}" />
+ <a href="{{ entry_url }}"
+ {% if entry.title %}
+ title="{{ entry.title }}"
+ {% endif %}
+ >
+ <img class="thumb_img" src="{{ entry.thumb_url }}" />
</a>
+ {% if entry.icon_url %}
+ <img class="entry_type_icon" src="{{ entry.icon_url }}" />
+ {% endif %}
{% if entry.title %}
<a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
{% endif %}
</div>
- {% endfor %}
- </div>
{% endfor %}
</div>
{%- endmacro %}
diff --git a/mediagoblin/themes/airy/assets/css/airy.css b/mediagoblin/themes/airy/assets/css/airy.css
index 047e02dc..34bf7a8d 100644
--- a/mediagoblin/themes/airy/assets/css/airy.css
+++ b/mediagoblin/themes/airy/assets/css/airy.css
@@ -104,10 +104,6 @@ input, textarea {
box-shadow: 0 0 3px #c4c4c4;
}
-.media_thumbnail a {
- color: #4a4a4a;
-}
-
.empty_space {
background-image: url("../images/empty_dots.png");
}