SuttaCentral Search Bugs 🪰

The layout on the search page is extremely wonky-donk and somebody has gone and made it worse by hacking styles into the html of several key layout divs. Can you hear the devas sobbing?

It is particularly bad on mobile but not great on desktop.

So I did what any person who had too much caffeine would do and got stuck in to the css.

<div class="all-search-results" style="/*! flex-direction: row; */"> 

<section class="additional-search-results" style="/*! max-width: 40%; */">

:index_pointing_up: Both of these need their hardcoded style removed. :sob:

All of the following classes need updating.
If SC actually used stylesheets in normal ways I would have been happy to provide a new stylesheet. :person_shrugging:


@media (max-width: 780px) {
  .all-search-results {
    flex-direction: column-reverse;
    gap: var(--sc-size-xl);
  }
  .primary-search-results {
    max-width: 100%;
    width: 100%;
  }
  .additional-search-results {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sutta-info {
    display: flex;
    flex-direction: column;
  }
  .sutta-title {
    flex-direction: column;
  }
  dictionary + .suttaplex {
  margin-top: var(--sc-size-xs);
}
}

.search-results-main {
  max-width: 1440px;
  margin: 0px auto;
  padding-bottom: 64px;
  width: 90vw;
}


.all-search-results {
  display: flex;
  flex-direction: row;
  gap: var(--sc-size-xl);
}
  .additional-search-results {
    max-width: 40%;
  }


.search-result-head, .primary-search-results {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  min-width: 40%;
  flex-grow: 2;
}
.search-result-item {
  border-bottom: var(--sc-border);
  display:flex;
  flex-direction:column;
}
.item-head {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  max-width:100%;
}
.primary {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: 32px;
}
.sutta-info{
  width:calc(100% - 70px);
  flex-direction:column;
  display:flex;
}

.search-result-action-items {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 40px;
}

.search-result-title {
  font-family: var(--sc-serif-font);
  font-weight: 400;
  font-size: var(--sc-font-size-xl);
  margin: 0px;
  color: var(--sc-primary-color);
  display: flex;
  align-items: center;
}

.badges {
  display: flex;
  margin-left: 0.3em;
  margin-bottom: 0.5em;
  width:150px;
}
3 Likes