element-specs edit

listing-specs  edit

For listing pages, listing blocks, search results, etc

Listing Title Font Specs
  • display inline
  • directory name font size:
Byline Font Specs
  • Font styles
    • font style varies by listing type
Spacing Specs
  • Listings with byline
  • All other listing blocks
    • H4 block title + first item:
    • title + content:
    • content + next title:
  • All other listings
    • title + content:
    • content + next title:
Thumbnail specs
  • Images are hidden on mobile (not tablet) for everything except news, features, and directory.
  • For those where thumbs show on mobile, the text wraps under the thumbnail on mobile but then switches to not wrapping under the thumb on tablet.
View by listing type
  • Lists with bylines
    • News home
    • Ideation listing
    • Listing page - news stories
    • Youtube playlist
    • Default extra block - events
    • Search results
  • Lists without bylines
    • Listing page - announcements
    • Listing page - children
    • Listing page - directory
    • Listing page - features
  • Listing blocks
    • Default extra block - news
    • Default extra block - announcements
    • Default extra block - events
View by listing location
  • Standard Content
    • Default extra block - news

      Listing blocks

    • Default extra block - announcements

      Listing blocks

    • Default extra block - events

      Lists with bylines, Listing blocks

    • Search results

      Lists with bylines

  • Pages
    • Ideation listing

      Lists with bylines

    • Listing page - news stories

      Lists with bylines

    • Listing page - announcements

      Lists without bylines

    • Listing page - children

      Lists without bylines

    • Listing page - directory

      Lists without bylines

    • Listing page - features

      Lists without bylines

    • News home

      Lists with bylines

    • Youtube playlist

      Lists with bylines

  • Menus
    • Sidebar
      • Rows
        Copy
        Edit
        <!-- components/element-specs/listing-specs.php --> <h6>Listing Title Font Specs</h6> <ul> <li class="listingheadingfontspecs"></li> <li class="listingheadingcolor"></li> <li>display inline</li> <li class="listingdirectoryheadingfont">directory name font size: </li> </ul> <h6>Byline Font Specs</h6> <ul> <li>Font styles <ul> <li class="bylinefontspecs"></li> <li class="bylinecolor"></li> <li>font style varies by listing type</li> </ul> </li> </ul> <h6>Spacing Specs</h6> <ul> <li>Listings with byline <ul> <li class="title-byline">title + byline: </li> <li class="byline-content">byline + content: </li> <li class="bylinecontent-nextitem">content + next title: </li> </ul> </li> <li>All other listing blocks <ul> <li class="blockh4-first">H4 block title + first item: </li> <li class="blocktitle-content">title + content: </li> <li class="block-content-nextitem">content + next title: </li> </ul> </li> <li>All other listings <ul> <li class="pagetitle-content">title + content: </li> <li class="pagetitle-nextitem">content + next title: </li> </ul> </li> </ul> <h6>Thumbnail specs</h6> <ul> <li>Images are hidden on mobile (not tablet) for everything except news, features, and directory.</li> <li>For those where thumbs show on mobile, the text wraps under the thumbnail on mobile but then switches to not wrapping under the thumb on tablet.</li> </ul> <?php strpos(strtolower($_SERVER['REQUEST_URI']), "examples-") !== false ? $isExamplePage = true : $isExamplePage = false; if (!$isExamplePage) { include("location-array.php"); $listingArray["Lists with bylines"] = array( "news home", "ideation listing", "listing page - news stories", "youtube playlist", "default extra block - events", "search results" ); $listingArray["Lists without bylines"] = array( "listing page - announcements", "listing page - children", "listing page - directory", "listing page - features" ); $listingArray["Listing blocks"] = array( "default extra block - news", "default extra block - announcements", "default extra block - events", ); echo "<h5>View by listing type</h5>"; //output list by listing type echo "<ul>"; foreach ($listingArray as $heading => $siteLocation) { echo '<li>' . ucfirst($heading); echo "<ul>"; foreach ($siteLocation as $locationName) { echo '<li>' . ucfirst($locationName) . '</li>'; } echo "</ul>"; echo '</li>'; }; echo "</ul>"; ?> <h5>View by listing location</h5> <?php echo "<ul>"; foreach ($locationArray as $mainLocation => $subLocationArray) { echo '<li>' . ucfirst($mainLocation); echo "<ul>"; foreach ($subLocationArray as $subLocationName) { $tempLocationArray[$subLocationName] = array(); foreach ($listingArray as $heading => $siteLocation) { foreach ($siteLocation as $locationName) { if ($subLocationName == $locationName) { array_push($tempLocationArray[$subLocationName], ucfirst($heading)); } }; }; if (count($tempLocationArray[$subLocationName]) > 0) { echo '<li>' . ucfirst($subLocationName); echo "<p>"; echo implode(", ", $tempLocationArray[$subLocationName]); echo "</p>"; echo '</li>'; } } echo "</ul>"; echo '</li>'; } echo "</ul>"; }; ?>
        Copy
        Copy
        Edit
        /* scss/element-specs/_listing-specs.scss */ .listingheadingfontspecs:after { content: "" + $listing-title-font-size + "/" + $listing-title-line-height + " " + $listing-title-font-weight + " " + $listing-title-font-family; } .listingheadingcolor:after { content: "" + $listing-title-color; color: $listing-title-color; } .listingdirectoryheadingfont:after { content: "" + $listing-directory-title-font-size; } .bylinefontspecs:after { content: "" + $listing-byline-font-size + "/" + $listing-byline-line-height + " " + $listing-byline-font-family; } .bylinecolor:after { content: "" + $listing-byline-color; color: $listing-byline-color; } //spacing .title-byline:after { content: "" + $listing-title-next; } .byline-content:after { content: "" + $listing-byline-content; } .bylinecontent-nextitem:after { content: "" + $listing-content-nextentry; } .blockh4-first:after { content: "36px"; } .blocktitle-content:after { content: "" + $listing-title-next; } .block-content-nextitem:after { content: "" + $listing-content-nextentry; } .pagetitle-content:after { content: "" + $listing-title-next; } .pagetitle-nextitem:after { content: "" + $listing-content-nextentry; }