Skip to content

Commit

Permalink
mod_admin: index the medium filename and show it on the connect list …
Browse files Browse the repository at this point in the history 
…items (#3665)

* core: index the medium filename and show it on the connect list items

* Fix css for connect items. Better filename display, add icon

* Redesign thumbnails a bit

---------

Co-authored-by: Dorien Drees <dorien.drees@gmail.com>
  • Loading branch information
@mworrell @DorienD
mworrell and DorienD committed Jan 19, 2024
1 parent 3b66631 commit 5925447
Show file tree
Hide file tree
Showing 11 changed files with 249 additions and 336 deletions.
2 changes: 1 addition & 1 deletion apps/zotonic_mod_admin/priv/lib-src/zotonic-admin/scss/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ body.noframe > .admin-container {
word-break: break-all;

// Non standard for webkit
word-break: break-word;
word-break: break-word;
hyphens: auto;
}

Expand Down
96 changes: 3 additions & 93 deletions apps/zotonic_mod_admin/priv/lib-src/zotonic-admin/scss/_dialog-new-connect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,9 @@
overflow-x: hidden;
overflow-y: scroll;

.item {
background-color: white;
}
// .item {
// background-color: white;
// }
}

#dialog_new_rsc_results {
Expand All @@ -108,94 +108,4 @@

// use smaller grid gutter
$_item_gutter: 6px;

.items {
padding: 0;

.item {
$_padding: 5px;
$_contentPartMargin: 0.25em;
$_contentHeight: $thumbImageHeight;
$_heigth: calc($_contentHeight + 2 * $_padding + 2px); // add border
$_contentMargin: calc(1.5 * $_padding);
$_fontSize: 12px;
$_lineHeight: 1.1em;

min-height: $_heigth;
overflow: hidden;
border: 1px solid $borderColorMedium;
border-radius: $border-radius-base;
cursor: pointer;
margin-bottom: 2 * $_item_gutter;
padding: $_padding;
font-size: $_fontSize;
line-height: $_lineHeight;
position: relative;
transition-duration: 0;

&:hover {
border-color: $borderColorSelection;
}

// fade out items that are connected to the page
// except when it is a depiction predicate
&.item-connected:not(.item-depiction) {
&,
h5, h6,
a:link,
a:visited {
color: $textColorLight;
}

img {
opacity: .3;
}

background-color: $backgroundColorLightest;
}

.z-item-text {
$_content_height: calc(($_heigth - 2px) * ($_padding - 2px)); // subtract border too
left: $_padding;
top: $_padding;
margin-right: $_padding;
}

img + .z-item-text {
left: calc($_padding + $thumbImageWidth + $_contentMargin);
}

img {
padding: 0;
border-radius: 0;
box-shadow: none;
margin: 0 $_contentMargin 0 0;
}

h5, h6, p {
font-size: $_fontSize;
line-height: $_lineHeight;
font-weight: normal;
margin: 0;
}

h5, h6 {
@extend .admin-word-break;
}

h5 {
font-weight: bold;
margin-bottom: 2px;
}

h6 {
text-transform: lowercase;
color: $gray-light;
}

.rsc-actions {
text-align: right;
}
}
}
}
189 changes: 100 additions & 89 deletions apps/zotonic_mod_admin/priv/lib-src/zotonic-admin/scss/_thumbnails.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,102 +24,113 @@ $_thumbnail_gutter: 6px;
padding-right: $_thumbnail_gutter;
}

.thumbnail {
$_padding: 5px;
$_contentPartMargin: 0.25em;
$_contentHeight: $thumbImageHeight; // 60
$_heigth: calc(($_contentHeight + 2px) * (5 + 2)); // add border
$_contentMargin: calc(1.5 * $_padding);
$_fontSize: 12px;
$_lineHeight: 1.1em;

min-height: $_heigth;
max-height: $_heigth;
overflow: hidden;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
margin-bottom: calc(2 * $_thumbnail_gutter);
padding: $_padding;
font-size: $_fontSize;
line-height: $_lineHeight;
position: relative;
transition-duration: 0;
-webkit-transition-duration: 0;

&,
a:link,
a:visited {
color: $textColorDark;
}

&:hover {
border-color: $borderColorSelection;
}

// fade out thumbnails that are connected to the page
// except when it is a depiction predicate
&.thumbnail-connected:not(.thumbnail-depiction) {
background-color: $backgroundColorLightest;

&,
h5, h6,
a:link,
a:visited {
color: $textColorLight;
}
.thumbnail:hover,
.thumbnail:active,
.thumbnail:focus {
border-color: $borderColorSelection;
}
}

img {
opacity: .3;
}
}

.z-thumbnail-text {
$_content_height: calc(($_heigth - 2px) * (5 - 2)); // subtract border too
.thumbnail {
$_padding: 5px;
$_height: calc($thumbImageHeight + 32px); // add border

display: flex;
gap: $_padding;
min-height: $_height;
max-height: $_height;
padding: $_padding;
margin-bottom: calc(2 * $_thumbnail_gutter);
position: relative;
overflow: hidden;
border-radius: 2px;
cursor: pointer;

font-size: 12px;
line-height: 1.15;

transition-duration: 0;
color: $textColorDark;

&:hover,
&:focus,
&:active {
border-color: $borderColorSelection;
color: $textColorDark;
text-decoration: none;
}

// fade out thumbnails that are connected to the page
// except when it is a depiction predicate
&.thumbnail-connected:not(.thumbnail-depiction) {
background-color: $backgroundColorLightest;
color: $textColorLight;

position: absolute;
left: $_padding;
top: $_padding;
margin-right: $_padding;
height: $_content_height;
max-height: $_content_height;
overflow: hidden;
}

img + .z-thumbnail-text {
left: calc($_padding + $thumbImageWidth + $_contentMargin);
}

img {
padding: 0;
border-radius: 0;
box-shadow: none;
margin: 0 $_contentMargin 0 0;
}

h5, h6, p {
font-size: $_fontSize;
line-height: $_lineHeight;
font-weight: normal;
margin: 0;
opacity: .3;
}
}

.z-thumbnail-text {
display: flex;
flex-flow: column wrap;
overflow: hidden;
width: 100%;
}

h5, h6 {
@extend .admin-word-break;
}
.z-thumbnail-filename {
margin-top: auto;
}

h5 {
font-weight: bold;
margin-bottom: 2px;
}
.z-thumbnail-image {
flex-shrink: 0;
width: 30%;
}

img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}

h5, h6, p {
font-size: inherit;
line-height: inherit;
margin: 0;
}

h6 {
text-transform: lowercase;
}
h5, h6 {
@extend .admin-word-break;
}

p {
max-height: calc(2 * $_lineHeight);
overflow: hidden;
}
h5 {
font-weight: bold;
margin-bottom: 0.5em;
}

h6 {
position: absolute;
top: 0;
right: 0;
padding: 1px 3px 2px 5px;
background: $thumbnail-border;
border-bottom-left-radius: 2px;
text-transform: lowercase;
}

.rsc-actions {
position: absolute;
bottom: $_padding;
right: $_padding;
}
}

.z-thumbnail-filename {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
color: #aaa;
}

0 comments on commit 5925447

Please sign in to comment.