Theme updates and field additions to the Contact Info custom block

ericras commented 10 months ago
Right now its just plain text. Add in SVG icons.
skoolbus39 commented 10 months ago
<div id="dcf-footer-group-1">
  <h2 id="dcf-footer-group-1-heading">Contact Us</h2>
  <div class="content">
    <address itemscope="" itemtype="https://schema.org/EducationalOrganization">
      <span class="dcf-sr-only" itemprop="name">University of Nebraska–Lincoln</span>
      <span class="dcf-sr-only" itemprop="department">Site Name Goes Here</span>
      <dl>
        <dt class="dcf-sr-only">Address</dt>
        <dd class="dcf-d-flex dcf-flex-nowrap dcf-col-gap-1 dcf-mb-2">
          <div class="dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
              <path d="M12 0C7.589 0 4 3.589 4 8c0 4.245 7.273 15.307 7.583 15.775a.497.497 0 0 0 .834 0C12.727 23.307 20 12.245 20 8c0-4.411-3.589-8-8-8zm0 22.58C10.434 20.132 5 11.396 5 8c0-3.86 3.14-7 7-7s7 3.14 7 7c0 3.395-5.434 12.132-7 14.58z"/><path d="M12 4.5c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5 3.5-1.57 3.5-3.5-1.57-3.5-3.5-3.5zm0 6c-1.378 0-2.5-1.122-2.5-2.5s1.122-2.5 2.5-2.5 2.5 1.122 2.5 2.5-1.122 2.5-2.5 2.5z"/><path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
          <a href="https://maps.unl.edu/NU" itemprop="address" itemscope="" itemtype="https://schema.org/PostalAddress" translate="no">
            <span itemprop="streetAddress">1400 R Street
              <!-- optional second address line goes here, begin with <br> -->
              <br>
              <!-- field starts here -->
              Building 123
              <!-- field ends here -->
              <!-- end optional second address line -->
            </span><br>
            <span>P.O. Box <span itemprop="postOfficeBoxNumber">12345</span></span><br>
            <span itemprop="addressLocality">Lincoln</span>, <abbr title="Nebraska" itemprop="addressRegion">NE</abbr> <span itemprop="postalCode">68588</span> <abbr class="dcf-d-none" itemprop="addressCountry">US</abbr>
          </a>
        </dd>
        <dt class="dcf-sr-only">Phone 1</dt>
        <dd class="dcf-relative dcf-mb-2">
          <div class="dcf-icon-hang dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
              <path d="M16.5 0h-9A2.503 2.503 0 0 0 5 2.5v19C5 22.879 6.122 24 7.5 24h9c1.378 0 2.5-1.121 2.5-2.5v-19C19 1.121 17.879 0 16.5 0zM6 5h12v14H6V5zm1.5-4h9c.828 0 1.5.673 1.5 1.5V4H6V2.5C6 1.673 6.673 1 7.5 1zm9 22h-9c-.827 0-1.5-.673-1.5-1.5V20h12v1.5c0 .827-.672 1.5-1.5 1.5z"/><path d="M9.5 3h5a.5.5 0 1 0 0-1h-5a.5.5 0 0 0 0 1zM12 20.5a1.001 1.001 0 0 0 0 2 1.001 1.001 0 0 0 0-2zm0 1.5v-.5h.001L12 22z"/><path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
          <div class="dcf-pl-6 dcf-bold" aria-hidden="true">Phone 1</div>
          <a class="dcf-pl-6" href="tel:+14024721234" itemprop="telephone">
            <span class="dcf-txt-nowrap">402-472-1234</span>
          </a>
        </dd>
        <dt class="dcf-sr-only">Phone 2</dt>
        <dd class="dcf-relative dcf-mb-2">
          <div class="dcf-icon-hang dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
              <path d="M16.5 0h-9A2.503 2.503 0 0 0 5 2.5v19C5 22.879 6.122 24 7.5 24h9c1.378 0 2.5-1.121 2.5-2.5v-19C19 1.121 17.879 0 16.5 0zM6 5h12v14H6V5zm1.5-4h9c.828 0 1.5.673 1.5 1.5V4H6V2.5C6 1.673 6.673 1 7.5 1zm9 22h-9c-.827 0-1.5-.673-1.5-1.5V20h12v1.5c0 .827-.672 1.5-1.5 1.5z"/><path d="M9.5 3h5a.5.5 0 1 0 0-1h-5a.5.5 0 0 0 0 1zM12 20.5a1.001 1.001 0 0 0 0 2 1.001 1.001 0 0 0 0-2zm0 1.5v-.5h.001L12 22z"/><path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
          <div class="dcf-pl-6 dcf-bold" aria-hidden="true">Phone 2</div>
          <!-- phone number with extension -->
          <a class="dcf-pl-6" href="tel:+14024721234;567" itemprop="telephone">
            <span class="dcf-txt-nowrap">402-472-1234 ext. 567</span>
          </a>
        </dd>
        <dt class="dcf-sr-only">Fax</dt>
        <dd class="dcf-d-flex dcf-flex-nowrap dcf-ai-center dcf-col-gap-1 dcf-mb-2">
          <div class="dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
              <path d="M13 2h4.5v1H13zM13 4h7v1h-7z"/><path d="M22.5 6H22V2.5a.5.5 0 0 0-.188-.391l-2.5-2A.502.502 0 0 0 19 0h-7.5a.5.5 0 0 0-.5.5V6h-1v-.5C10 4.121 8.878 3 7.5 3H5V.5a.5.5 0 0 0-1 0v2.551C2.86 3.283 2 4.292 2 5.5V6h-.5C.673 6 0 6.673 0 7.5v13c0 .827.673 1.5 1.5 1.5h.551c.232 1.14 1.242 2 2.449 2h3c1.207 0 2.217-.86 2.449-2H22.5c.827 0 1.5-.673 1.5-1.5v-13c0-.827-.673-1.5-1.5-1.5zM1 20.5v-13a.5.5 0 0 1 .5-.5H2v14h-.5a.5.5 0 0 1-.5-.5zm8 1c0 .827-.673 1.5-1.5 1.5h-3c-.827 0-1.5-.673-1.5-1.5v-16C3 4.673 3.673 4 4.5 4h3C8.327 4 9 4.673 9 5.5v16zM12 1h6.825L21 2.74V6h-9V1zm11 19.5a.5.5 0 0 1-.5.5H10V7h12.5a.5.5 0 0 1 .5.5v13z"/><path d="M19.5 8h-6a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zm-.5 2h-5V9h5v1zM13 13h1v1h-1zM16 13h1v1h-1zM19 13h1v1h-1zM13 15h1v1h-1zM16 15h1v1h-1zM19 15h1v1h-1zM13 17h1v1h-1zM16 17h1v1h-1zM19 17h1v1h-1z"/><path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
          <span class="dcf-txt-nowrap" itemprop="faxNumber">402-472-4321</span>
        </dd>
        <dt class="dcf-sr-only">Email</dt>
          <dd class="dcf-d-flex dcf-flex-nowrap dcf-ai-center dcf-col-gap-2 dcf-mb-2">
            <div class="dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
              <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
                <path d="M21 4H3c-1.103 0-2 .896-2 2v11c0 1.103.897 2 2 2h18c1.103 0 2-.897 2-2V6c0-1.104-.897-2-2-2zm0 1c.057 0 .105.023.159.032L12 12.36 2.841 5.032C2.895 5.023 2.943 5 3 5h18zm1 12c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1V6a1 1 0 0 1 .062-.309l9.625 7.7a.504.504 0 0 0 .625 0l9.625-7.7c.033.099.063.2.063.309v11z"/><path fill="none" d="M0 0h24v24H0z"/>
              </svg>
            </div>
            <a href="mailto:herbie.husker@unl.edu" itemprop="email">
              <span class="dcf-txt-nowrap">herbie.husker@unl.edu</span>
            </a>
        </dd>
        <dt class="dcf-sr-only">Office Hours</dt>
        <dd class="dcf-d-flex dcf-flex-nowrap dcf-ai-center dcf-col-gap-1 dcf-mb-2">
          <div class="dcf-flex-shrink-0 dcf-h-5 dcf-w-5 unl-gray">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 24 24">
              <path d="M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-23C5.935 1 1 5.935 1 12c0 6.066 4.935 11 11 11s11-4.934 11-11c0-6.065-4.935-11-11-11z"/><path d="m17.162 17.869-6-5.5A.503.503 0 0 1 11 12V6.5a.5.5 0 0 1 1 0v5.28l5.838 5.351a.5.5 0 0 1-.676.738z"/><path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
          <span itemprop="openingHours" content="Mo-Fr 08:00-17:00">Mon - Fri, 8 a.m. – 5 p.m.</span>
        </dd>
        <dt class="dcf-sr-only">Social Media</dt>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.facebook.com/UNLincoln" aria-label="Facebook">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M48 24.1c0-13.3-10.7-24-24-24S0 10.9 0 24.1c0 12 8.8 21.9 20.2 23.7V31.1h-6.1v-6.9h6.1v-5.3c0-6 3.6-9.3 9.1-9.3 2.6 0 5.4.5 5.4.5V16h-3c-3 0-3.9 1.9-3.9 3.7v4.5h6.7l-1.1 6.9h-5.6v16.8C39.2 46.1 48 36.1 48 24.1z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://twitter.com/UNLincoln" aria-label="Twitter">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M15.1 43.5c18.11 0 28-15 28-28v-1.27A20 20 0 0 0 48 9.11a19.66 19.66 0 0 1-5.66 1.55 9.88 9.88 0 0 0 4.33-5.45 19.74 19.74 0 0 1-6.25 2.39 9.86 9.86 0 0 0-16.78 9A28 28 0 0 1 3.34 6.3a9.86 9.86 0 0 0 3 13.15 9.77 9.77 0 0 1-4.47-1.23v.12A9.85 9.85 0 0 0 9.82 28a9.83 9.83 0 0 1-4.45.17 9.86 9.86 0 0 0 9.2 6.83 19.76 19.76 0 0 1-12.23 4.22A20 20 0 0 1 0 39.08a27.88 27.88 0 0 0 15.1 4.42"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.youtube.com/user/unl" aria-label="YouTube">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M47 12.37a6 6 0 0 0-4.25-4.27C39 7.09 24 7.09 24 7.09s-15 0-18.75 1A6 6 0 0 0 1 12.37C0 16.14 0 24 0 24s0 7.86 1 11.63a6 6 0 0 0 4.25 4.27c3.74 1 18.75 1 18.75 1s15 0 18.75-1A6 6 0 0 0 47 35.63C48 31.86 48 24 48 24s0-7.86-1-11.63zM19.09 31.14V16.86L31.64 24z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.instagram.com/unlincoln/" aria-label="Instagram">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M24 4.33c6.41 0 7.17 0 9.7.14a13.28 13.28 0 0 1 4.46.83 7.44 7.44 0 0 1 2.76 1.79 7.44 7.44 0 0 1 1.79 2.76 13.28 13.28 0 0 1 .83 4.46c.12 2.53.14 3.29.14 9.7s0 7.17-.14 9.7a13.28 13.28 0 0 1-.83 4.46 8 8 0 0 1-4.55 4.55 13.28 13.28 0 0 1-4.46.83c-2.53.12-3.29.14-9.7.14s-7.17 0-9.7-.14a13.28 13.28 0 0 1-4.46-.83 7.44 7.44 0 0 1-2.76-1.79 7.44 7.44 0 0 1-1.79-2.76 13.28 13.28 0 0 1-.83-4.46c-.12-2.53-.14-3.29-.14-9.7s0-7.17.14-9.7a13.28 13.28 0 0 1 .83-4.46 7.44 7.44 0 0 1 1.8-2.77 7.44 7.44 0 0 1 2.76-1.79 13.28 13.28 0 0 1 4.46-.83c2.53-.12 3.29-.14 9.7-.14M24 0c-6.52 0-7.34 0-9.9.14a17.61 17.61 0 0 0-5.82 1.12A11.76 11.76 0 0 0 4 4a11.76 11.76 0 0 0-2.74 4.28 17.6 17.6 0 0 0-1.12 5.83C0 16.66 0 17.48 0 24s0 7.34.14 9.9a17.6 17.6 0 0 0 1.11 5.82A11.76 11.76 0 0 0 4 44a11.76 11.76 0 0 0 4.25 2.77 17.59 17.59 0 0 0 5.83 1.12c2.55.12 3.38.14 9.9.14s7.34 0 9.9-.14a17.56 17.56 0 0 0 5.82-1.12 12.27 12.27 0 0 0 7-7 17.59 17.59 0 0 0 1.12-5.83c.18-2.6.18-3.42.18-9.94s0-7.34-.14-9.9a17.56 17.56 0 0 0-1.12-5.82A11.76 11.76 0 0 0 44 4a11.76 11.76 0 0 0-4.25-2.77A17.6 17.6 0 0 0 33.9.15C31.34 0 30.52 0 24 0zm0 11.68A12.32 12.32 0 1 0 36.32 24 12.32 12.32 0 0 0 24 11.67zM24 32a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM36.81 8.31a2.88 2.88 0 1 0 2.88 2.88 2.88 2.88 0 0 0-2.88-2.88z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.linkedin.com/edu/school?id=18836" aria-label="LinkedIn">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M44.45 0H3.54A3.5 3.5 0 0 0 0 3.46v41.08A3.5 3.5 0 0 0 3.54 48h40.91A3.51 3.51 0 0 0 48 44.54V3.46A3.51 3.51 0 0 0 44.45 0zM14.24 40.9H7.11V18h7.13zm-3.56-26a4.13 4.13 0 1 1 4.13-4.13 4.13 4.13 0 0 1-4.13 4.1zm30.23 26h-7.12V29.76c0-2.66 0-6.07-3.7-6.07s-4.27 2.9-4.27 5.88V40.9h-7.11V18h6.82v3.13h.1a7.48 7.48 0 0 1 6.74-3.7c7.21 0 8.54 4.74 8.54 10.91z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.pinterest.com/unlincoln/boards/" aria-label="Pinterest">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M24 0a24 24 0 0 0-8.75 46.35 23 23 0 0 1 .08-6.88l2.81-11.93a8.66 8.66 0 0 1-.71-3.54c0-3.34 1.93-5.83 4.34-5.83 2 0 3 1.54 3 3.38 0 2.06-1.31 5.14-2 8a3.48 3.48 0 0 0 3.55 4.34c4.27 0 7.54-4.5 7.54-11 0-5.75-4.13-9.76-10-9.76a10.39 10.39 0 0 0-10.8 10.38A9.34 9.34 0 0 0 14.85 29a.72.72 0 0 1 .17.69c-.18.76-.59 2.39-.67 2.72s-.35.53-.8.32c-3-1.4-4.87-5.78-4.87-9.3 0-7.57 5.5-14.52 15.86-14.52 8.33 0 14.8 5.93 14.8 13.86 0 8.27-5.22 14.93-12.45 14.93-2.43 0-4.72-1.26-5.5-2.76l-1.5 5.71a26.83 26.83 0 0 1-3 6.29A24 24 0 1 0 24 0z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://www.snapchat.com/add/unlincoln" aria-label="Snapchat">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M24.46 1.44h-.95A12.77 12.77 0 0 0 11.66 9.1c-1.06 2.39-.81 6.44-.6 9.7 0 .38 0 .78.07 1.17a1.91 1.91 0 0 1-.93.2 5.36 5.36 0 0 1-2.2-.58 1.78 1.78 0 0 0-.76-.16A2.38 2.38 0 0 0 4.89 21c-.13.69.18 1.7 2.4 2.58.2.08.44.16.7.24.92.29 2.31.73 2.68 1.62a2.13 2.13 0 0 1-.23 1.76c-.12.28-3.06 7-9.58 8.06a1 1 0 0 0-.83 1 1.34 1.34 0 0 0 .11.45c.49 1.14 2.56 2 6.32 2.57a4.67 4.67 0 0 1 .34 1.14c.08.36.16.73.28 1.13a1.11 1.11 0 0 0 1.16.85 6.05 6.05 0 0 0 1.08-.15 12.67 12.67 0 0 1 2.56-.29 11.27 11.27 0 0 1 1.83.15 8.7 8.7 0 0 1 3.4 1.89c1.71 1.21 3.65 2.58 6.59 2.58h.59c2.94 0 4.88-1.37 6.59-2.58a8.7 8.7 0 0 1 3.44-1.78 11.25 11.25 0 0 1 1.83-.15 12.75 12.75 0 0 1 2.56.27 6 6 0 0 0 1.08.13h.05a1.08 1.08 0 0 0 1.16-.85c.11-.38.19-.75.27-1.11a4.64 4.64 0 0 1 .34-1.13c3.76-.58 5.83-1.42 6.31-2.56a1.32 1.32 0 0 0 .11-.45 1 1 0 0 0-.83-1c-6.53-1.08-9.46-7.77-9.58-8.06a2.13 2.13 0 0 1-.23-1.76c.38-.89 1.76-1.33 2.68-1.62.26-.08.5-.16.7-.24 1.63-.64 2.44-1.43 2.43-2.35a2 2 0 0 0-1.46-1.68 2.67 2.67 0 0 0-1-.19 2.21 2.21 0 0 0-.92.19 5.6 5.6 0 0 1-2.07.59 1.84 1.84 0 0 1-.81-.2c0-.33 0-.67.06-1v-.14c.21-3.26.46-7.32-.6-9.71a12.79 12.79 0 0 0-11.94-7.76z"></path>
            </svg>
          </a>
        </dd>
        <dd class="dcf-d-inline-block dcf-pt-4 dcf-pr-3">
          <a class="dcf-d-block dcf-h-6 dcf-w-6" href="https://go.unl.edu/spotify" aria-label="Spotify">
            <svg class="dcf-h-100% dcf-w-100% dcf-fill-current" focusable="false" height="16" width="16" viewBox="0 0 48 48">
              <path d="M24 0a24 24 0 1 0 24 24A24 24 0 0 0 24 0zm11 34.61a1.5 1.5 0 0 1-2.06.5c-5.63-3.44-12.73-4.22-21.08-2.31a1.5 1.5 0 0 1-.67-2.92c9.14-2.09 17-1.19 23.31 2.68a1.5 1.5 0 0 1 .5 2.05zm2.94-6.54a1.87 1.87 0 0 1-2.57.62c-6.45-4-16.28-5.11-23.92-2.8a1.87 1.87 0 1 1-1.09-3.58c8.72-2.64 19.55-1.36 27 3.19a1.87 1.87 0 0 1 .62 2.57zm.25-6.8c-7.74-4.59-20.5-5-27.88-2.78A2.24 2.24 0 1 1 9 14.2c8.48-2.57 22.57-2.08 31.48 3.21a2.24 2.24 0 1 1-2.29 3.86z"></path>
            </svg>
          </a>
        </dd>
      </dl>
    </address>
  </div>
</div>
ericras commented 10 months ago
is the intention really to have “Phone 1” visible as a label all the time?
ericras commented 10 months ago
ericras commented 10 months ago
I believe that the schema isn't implemented correctly in the new code. In the new code we're saying that "University of Nebraska-Lincoln" has this address and this phone number and these hours, etc.
If we use "department" for our local website, department isn't defined as just a single simple string like in the new code- it needs to be a full Organization (or Ed Org) element; so basically all the additional properties should be inside it.
However, I think we need to go back to how it was before where the main thing we're working with is the unit that this website represents and we specify UNL as the parentOrganization. (We can still use EducationalOrganization instead of just Organization, that's fine to change.)
unlcms / project-herbie

Theme updates and field additions to the Contact Info custom block #448
