Add ability to toggle between list and card views (#188)

* Add ability to toggle between list and card views

* set the list display as a user flag

* Fixed domainCard cardlist rendering

---------

Co-authored-by: WBHarry <williambjrklund@gmail.com>
This commit is contained in:
IrkTheImp 2025-06-28 10:53:40 -05:00 committed by GitHub
parent 1f5b5f9915
commit 1135669d0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 122 additions and 60 deletions

View file

@ -3619,13 +3619,35 @@ div.daggerheart.views.multiclass {
.theme-light .application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet {
background: transparent;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet img {
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait {
position: relative;
height: 235px;
width: 275px;
border-bottom: 1px solid light-dark(#18162e, #f3c267);
cursor: pointer;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait img {
height: 235px;
width: 275px;
object-fit: cover;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait .death-roll-btn {
display: none;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll {
filter: grayscale(1);
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll .death-roll-btn {
display: flex;
position: absolute;
top: 30%;
right: 30%;
font-size: 6rem;
color: #efe6d8;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .portrait.death-roll .death-roll-btn:hover {
text-shadow: 0 0 8px #efe6d8;
}
.application.sheet.daggerheart.actor.dh-style.character .character-sidebar-sheet .info-section {
position: relative;
display: flex;
@ -3957,7 +3979,7 @@ div.daggerheart.views.multiclass {
z-index: 1;
color: light-dark(#18162e50, #efe6d850);
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view {
background: light-dark(#18162e10, #18162e);
border: 1px solid light-dark(#18162e, #f3c267);
border-radius: 15px;
@ -3965,24 +3987,24 @@ div.daggerheart.views.multiclass {
gap: 0;
width: 62px;
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span {
margin: 1px;
width: 26px;
color: light-dark(#18162e, #f3c267);
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-icon i {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-icon i {
margin-left: 3px;
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-icon i {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-icon i {
margin-right: 3px;
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.list-active {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.list-active {
border-radius: 32px 3px 3px 32px;
background-color: light-dark(#18162e, #f3c267);
color: light-dark(#efe6d8, #18162e);
padding: 2px;
}
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toogle-view span.grid-active {
.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .btn-toggle-view span.grid-active {
border-radius: 3px 32px 32px 3px;
background-color: light-dark(#18162e, #f3c267);
color: light-dark(#efe6d8, #18162e);

View file

@ -43,7 +43,7 @@
}
}
.btn-toogle-view {
.btn-toggle-view {
background: light-dark(@dark-blue-10, @dark-blue);
border: 1px solid light-dark(@dark-blue, @golden);
border-radius: 15px;