Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slightly too compact episode list #96

Open
Ghostotw opened this issue Sep 13, 2024 · 4 comments
Open

Slightly too compact episode list #96

Ghostotw opened this issue Sep 13, 2024 · 4 comments

Comments

@Ghostotw
Copy link

First, thanks for the amazing theme. Especially thanks for making it modular and adjustable.

The compact episode list is slightly too squished. Episode descriptions are cut off at the bottom, making it impossible to read the entire thing for many episodes. There's no way to scroll to read the covered bit. Would it be possible to have the height pulled out into a variable so we could tweak it to our liking? I'm assuming that would be simpler than adding a scroll function.

CrampedPlots

@flamekiller22
Copy link

flamekiller22 commented Sep 16, 2024

I ended up changing the custom CSS to:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');

/*Size episode preview images in a more compact way*/
.listItemImage.listItemImage-large.itemAction.lazy {
  transition: filter 0.2s
}
.listItemImageButton-icon {
  padding: 0;
}
.secondary.listItem-overview.listItemBodyText {
    height: unset !important;
    margin: 0;

}
.listItemImageButton {
  margin: auto; 
  font-size: 1.6em !important;
}
@media all and (min-width: 100em){
  .listItemImage.listItemImage-large.itemAction.lazy {
    height: 160px !important;
  }
  .listItem-content {
    height: unset !important;
  }
  .secondary.listItem-overview.listItemBodyText {
    height: unset !important;
    margin: 0;
  }
}
@media all and (max-width: 100em){
  .listItemImage.listItemImage-large.itemAction.lazy {
        height: 160px !important;
    
    }
  .listItem-content {
        height: unset !important;
    
    }
  .secondary.listItem-overview.listItemBodyText {
        height: unset !important;
        margin: 0;
    
    }
}

.missingIndicator, .unairedIndicator {
    background: #ae3030eb;
    padding: .3em .6em;
    color: #fff;
}
.layout-mobile .listItemImageButton {
    background: rgba(0, 0, 0, 0);
}

Which results in the episode view looking something like:

image

@Lxtharia
Copy link

Thank you, I had the same problem but it looks great now <3

@Atmaweaponvi
Copy link

Atmaweaponvi commented Dec 16, 2024

I added this which keeps the smaller pics but get the full 3 lines of text:

/* Size episode preview images in a more compact way */
.listItemImage.listItemImage-large.itemAction.lazy {
height: 110px;
}
.listItem-content {
height: 115px;
}
.secondary.listItem-overview.listItemBodyText {
height: 66.5px;
margin: 0;
}

@CTalvio
Copy link
Owner

CTalvio commented Dec 17, 2024

Mind turning those changes into a PR?

I'll get to it eventually, but if you do I can just immediately merge it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants