<article class="registry-card" title="Open Programme grants awarded from 2013 until April 2019">
    <div class="registry-card__pub-logo">
        <a href="http://abcharitabletrust.org.uk/" target="_blank" rel="noreferrer">

        </a>
    </div>
    <div class="registry-card__content">
        <h3 class="registry-card__pub-name"></h3>

        <ul class="registry-card__list">

            <li class="registry-card__item ">
                <table class="registry-grant">

                    <tr class="registry-grant__line registry-grant--title-line">
                        <!-- @DAVID
                Initially, I imagined this would print just the date range of the grants
                since this is a more relevant information then the title of the grant/file, 
                which often is basically referring to this date range. This wans't implemented
                because I believe we would need to massage the data a little in order 
                to get these dates in a structured format.
                <td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td> 
              -->
                        <td class="registry-grant__title" colspan="3"></td>
                    </tr>

                    <tr class="registry-grant__line registry-grant--amounts-line">
                        <td class="registry-grant__pub-date">Published in </td>

                        <td class="registry-grant__records">Records
                            <!-- @DAVID - I wasn't able to find where this information is coming from -->
                            <span class="registry-grant__grant-n">XXX</span>
                        </td>
                        <td class="registry-grant__amount">
                            <!-- @DAVID
                  I wasn't able to find where this information is coming from.
                  This is true for both the "grant amount" and the "currency".
                -->
                            £ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
                        </td>

                    </tr>
                    <tr class="registry-grant__line  registry-grant--data-line">
                        <td class="registry-grant__download">
                            <a class="registry-grant__file registry-grant--xls" href="" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>

                        </td>

                        <!-- if validated -->
                        <!-- <td class="registry-grant__validation registry-grant--validated">
                    Data Validated
                <i class="material-icons">check_circle_outline</i>
              </td> -->
                        <!-- if not validaded -->
                        <td class="registry-grant__validation registry-grant--invalid">
                            Data Invalid
                            <i class="material-icons">highlight_off</i>
                        </td>

                        <td class="registry-grant__license">

                        </td>
                    </tr>

                </table>
            </li>
        </ul>
    </div>
</article>
<article class="registry-card" title="{{ title }}">
  <div class="registry-card__pub-logo">
      <a href="{{ data.publisher.website }}" target="_blank" rel="noreferrer">
      {% if publisher.logo %}
        <img src="{{ data.publisher.logo }}" alt="{{ data.publisher.name }}">
      {% endif %}
      </a>
  </div>
  <div class="registry-card__content">
    <h3 class="registry-card__pub-name">{{ publisher.name }}</h3>
    
    <ul class="registry-card__list">

      <li class="registry-card__item ">
        <table class="registry-grant">
          {# {% for grant in registry_list %} #}
            {% if grant.publisher.prefix == publisher.prefix %}
            <tr class="registry-grant__line registry-grant--title-line">
              <!-- @DAVID
                Initially, I imagined this would print just the date range of the grants
                since this is a more relevant information then the title of the grant/file, 
                which often is basically referring to this date range. This wans't implemented
                because I believe we would need to massage the data a little in order 
                to get these dates in a structured format.
                <td class="registry-grant__date-range">Records from Apr ’12 to Dec ‘18</td> 
              -->
              <td class="registry-grant__title" colspan="3">{{ grant.title }}</td>
            </tr>

            <tr class="registry-grant__line registry-grant--amounts-line">
              <td class="registry-grant__pub-date">Published in {{ grant.issued }}</td>

              <td class="registry-grant__records">Records
                <!-- @DAVID - I wasn't able to find where this information is coming from -->
                <span class="registry-grant__grant-n">XXX</span>
              </td>
              <td class="registry-grant__amount">
                <!-- @DAVID
                  I wasn't able to find where this information is coming from.
                  This is true for both the "grant amount" and the "currency".
                -->
                £ <span class="registry-grant__amount-n">XX,XXX,XXX</span>
              </td>
              
            </tr>
            <tr class="registry-grant__line  registry-grant--data-line">
              <td class="registry-grant__download">
                <a class="registry-grant__file registry-grant--xls"  href="{{ grant.distribution.downloadURL }}" download title="Excel Spreadsheet - 260Kb<!-- FileSize Variable -->">XLS - 260Kb</a>
                {# commenting these other options out 
                <a class="registry-grant__file registry-grant--csv"  href="{{ grant.distribution.downloadURL }}" download title="JSON - <!-- FileSize Variable -->">CSV - 260Kb</a>
                <a class="registry-grant__file registry-grant--json" href="{{ grant.distribution.downloadURL }}" download title="Comma Separated Values - <!-- FileSize Variable -->">JSON - 260Kb</a>
                <a class="registry-grant__file registry-grant--ods"  href="{{ grant.distribution.downloadURL }}" download title="Open Document Spreadsheet - <!-- FileSize Variable -->">OSD - 260Kb</a>
                #}
              </td>

          <!-- if validated -->
          <!-- <td class="registry-grant__validation registry-grant--validated">
                    Data Validated
                <i class="material-icons">check_circle_outline</i>
              </td> -->
          <!-- if not validaded -->
              <td class="registry-grant__validation registry-grant--invalid">
                Data Invalid
                <i class="material-icons">highlight_off</i>
              </td>


              <td class="registry-grant__license">
                {% if grant.license_name %}
                Licence
                <a href="{{grant.license}}" target="_blank" rel="noreferrer">
                
                {% if grant.license_name == "Creative Commons Attribution 4.0 International (CC BY 4.0)" %}
                  <img class="license license--cc" src="/images/licenses/creative-commons-main.svg" alt="{{grant.license_name}}">
                
                {% elif grant.license_name == "Creative Commons Attribution 4.0" %}
                  <img class="license license--cc" src="/images/licenses/creative-commons-main.svg" alt="{{grant.license_name}}">
                
                {% elif grant.license_name == "Creative Commons Attribution Share-Alike 4.0" %}
                  <img class="license license--cc" src="/images/licenses/creative-commons-main.svg" alt="{{grant.license_name}}">
                  <img class="license license--cc" src="/images/licenses/Cc-sa.svg" alt="{{grant.license_name}}">
                
                {% elif grant.license_name == "CCO" %}
                  <img class="license license--cc" src="/images/licenses/Cc-zero.svg" alt="{{grant.license_name}}">
                
                {% elif grant.license_name == "Open Data Commons Public Domain Dedication and Licence 1.0" %}
                  <img class="license license--pddl" src="/images/licenses/pddl.svg" alt="{{grant.license_name}}">
                
                {% elif grant.license_name == "Open Government Licence 3.0 (United Kingdom)" %}
                  <img class="license license--ogl" src="/images/licenses/UKOpenGovernmentLicence.svg" alt="{{grant.license_name}}">  
                {% endif %}
                </a>
                {% endif %}
              </td>
            </tr>
          {% endif %}
        {# {% endfor %} #}
        </table>
      </li>
    </ul>
  </div>
</article>
{
  "title": "Open Programme grants awarded from 2013 until April 2019",
  "data": {
    "title": "Open Programme grants awarded from 2013 until April 2019,",
    "description": null,
    "identifier": "a001p00000zgyHZAAY\"",
    "license": "https://creativecommons.org/licenses/by/4.0/",
    "license_name": "Creative Commons Attribution 4.0 International (CC BY 4.0)",
    "issued": "2018-06-21,",
    "modified": "2019-07-19T13:16:14.000+0000,",
    "publisher": {
      "name": "A B Charitable Trust",
      "website": "http://abcharitabletrust.org.uk/",
      "logo": "https://www.threesixtygiving.org/wp-content/uploads/Arcadia-Logo.jpg",
      "prefix": "360G-ABCT"
    },
    "distribution": {
      "downloadURL": "http://abcharitabletrust.org.uk/data/abct-data.xlsx,",
      "accessURL": "http://abcharitabletrust.org.uk/awards.htm,",
      "title": "Open Programme grants awarded from 2013 until April 2019"
    }
  }
}
  • Content:
    .registry-card { display: flex; }
    .registry-card__content { flex: 1; }
    
    .registry-card {
      // This is a partial implementation of the theme colors. 
      // This card falls back to teal instead of base > transparent
      --registry-card-border-hsl: var(--teal-hsl); 
    
      background: hsla(var(--white-hsl), 1);
      box-shadow: 0px 4px 8px hsla(var(--base-hsl), .15);
      position: relative;
      padding: 16px 24px 16px 24px;  
      
      @include breakpoint($large) { padding: 32px 40px 16px 40px; }
    }
    
    .registry-card:before {
      content: '';
      width: 4px;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: hsla(var(--registry-card-border-hsl, transparent), 1);
    }
    
    .registry-card__pub-logo { width: 132px; }
    
    .registry-card__pub-name {
      font-size: 1.5rem;
      color: hsla(var(--base-hsl), 1);
      font-weight: 300;
    }
      
    .registry-card__content { margin-left: 32px; }
      
    .registry-card__list {
      list-style: none;
      padding-left: 0;
    }
    
    .registry-grant { width: 100%; }
    
    .registry-grant td { 
      border: 0;
      padding: 0; 
      vertical-align: top;
    }
    
    .registry-grant__line {
      font-style: normal;
      font-weight: 300;
    }
      
    .registry-grant--title-line td { 
      padding-top: 12px; 
      font-weight: 400;
      padding-bottom: 4px;
    }
    
    .registry-grant--amounts-line td { 
      line-height: 1.3;
      border-bottom: 0;
    }
    
    .registry-grant--data-line { border-bottom: 1px solid hsla(var(--base-hsl), .1); }
    .registry-grant td { padding: 8px 0 16px; }
    .registry-grant:last-child { border-bottom: 0; }
    
    .registry-grant__records,
    .registry-grant__validation { width: 35%; }
    
    .registry-grant__spacer { padding-left: 24px; }
      
    .registry-grant__pub-date,
    .registry-grant__download { width: 40%; }
    
    .registry-grant__title { width: 100%; }
      
    .registry-grant__amount,
    .registry-grant__license { 
      width: 100%; 
      text-align: right;
    }
    
    .registry-grant__amount { margin-bottom: 8; }
    .registry-grant__license a { margin-left: 32px; }
    .registry-grant__validation > i { vertical-align: -7px; }
    .registry-grant--validated > i { color: hsla(var(--teal-dark-hsl), 1); }
    .registry-grant--invalid > i { color: hsla(var(--red-hsl), 1); }
    
    .registry-grant__grant-n,
    .registry-grant__amount-n { font-size: 1.6rem; }
    
    .registry-grant__grant-n { font-weight: 300; }
    .registry-grant__amount-n { font-weight: 400; }
    
    .registry-grant__file {
      padding: 0 12px 0;
      border-radius: 20px;
      border: 1px solid currentColor;
      font-weight: 400;
      text-align: center;
      display: inline-block;
    }
    
    .registry-grant--xls { color: hsla(var(--orange-dark-hsl), 1); }
    .registry-grant--csv { color: hsla(var(--teal-dark-hsl), 1); }
    .registry-grant--json { color: hsla(var(--yellow-dark-hsl), 1);; }
    .registry-grant--ods { color: hsla(var(--red-hsl), 1);; }
    
    .license { opacity: .4; }  
    .license--cc { max-width: 20px; }
    .license--ogl { max-width: 32px; }
    .license--pddl { max-width: 32px; }
    
  • URL: /components/raw/registry-card/registry-card.scss
  • Filesystem Path: src/components/04-modules/registry-card/registry-card.scss
  • Size: 2.8 KB

No notes defined.