PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-30 14:57:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Whitespace tolerance (#237)

Browse source 
* Use flexbox for centering image blocks

* Fix tab display

* Make tag list wrappable and HTML whitespace tolerant

* Make header navigation HTML whitespace tolerant
This commit is contained in:
liamwhite 2024-04-27 22:19:57 -04:00 committed by GitHub
parent ba87c1679e
commit b1a23292fa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/css/common/_blocks.scss
View file

@ -124,6 +124,7 @@ a.block__header--single-item, .block__header a {
.block__header--js-tabbed { .block__header--js-tabbed {
@extend .block__header--light; @extend .block__header--light;
background: transparent; background: transparent;
display: flex;
border-bottom: $border; border-bottom: $border;
a { a {

5
assets/css/common/_header.scss
View file

@ -23,6 +23,11 @@
padding-left: 6px; padding-left: 6px;
} }
.header__navigation {
display: flex;
flex-wrap: wrap;
}
a.header__link { a.header__link {
display: inline-block; display: inline-block;
padding: 0 $header_spacing; padding: 0 $header_spacing;

14
assets/css/views/_images.scss
View file

@ -92,12 +92,6 @@ div.image-container {
overflow: hidden; overflow: hidden;
/* prevent .media-box__overlay from overflowing the container */ /* prevent .media-box__overlay from overflowing the container */
text-align: center; text-align: center;
a::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img, img,
video { video {
vertical-align: middle; vertical-align: middle;
@ -105,12 +99,12 @@ div.image-container {
max-height: 100%; max-height: 100%;
} }
/* Make the link cover the whole container if the image is oblong */ /* Make the link cover the whole container if the image is oblong */
a { a, picture, video {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: inline-block; display: inline-flex;
text-align: center; align-items: center;
vertical-align: middle; justify-content: center;
} }
} }

6
assets/css/views/_tags.scss
View file

@ -70,7 +70,11 @@
.tag > span { .tag > span {
padding: 5px; padding: 5px;
display: table-cell; display: table-cell;
white-space: pre; }
.tag-list {
display: flex;
flex-wrap: wrap;
} }
.tag a { .tag a {

2
lib/philomena_web/templates/layout/_header_navigation.html.slime
View file

@ -1,4 +1,4 @@
.hide-mobile .hide-mobile.header__navigation
.dropdown.header__dropdown .dropdown.header__dropdown
a.header__link href="/images" a.header__link href="/images"
| Images | Images