<commit_before><!--
This is the article card for projects, tutorials, and other informationl text.
It can take in: title, content, and date. An image can also be placed within the
element as well.
-->

<link rel="import" href="../bower_compnents/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">

<!--
TODO: 1. Add an optional animation for opening articles
      2. More properly implment the image being passed in
      3. Default image, probably OSC logo
      4. May need to resize images for different sized screens
-->

<dom-module id="paper-article-card">
    <template>

        <style>
            paper-card {
                @apply(--layout-horizontal);
                /*max-height: 200px;*/
            }
            ::content img {
                max-height: 185px;
                background-size: cover;
                float: left;
            }
            .article-content {
                @apply(--layout-flex);
                /* Hides overflow of text */
                overflow: hidden;
            }
            .article-name {
                @apply(--paper-font-headline);
            }
            .article-subinfo {
                color: var(--paper-grey-600);
                margin: 10px 0;
            }
            .card-height {
                height: 100px;
            }
            a {
                color: black;
                text-decoration: none;
            }
            paper-button {
                color: black;
                float: right;
                margin-bottom: 5px;
            }
            paper-dialog[less-wide-layout] {
                color: green;
                /*margin-left: 525px;*/
            }
        </style>

        <!-- Resizing properties -->
        <iron-media-query query="(min-width: 800px)" query-matches="{{wide}}"></iron-media-query>
        <iron-media-query query="(min-width: 600px)" query-matches="{{lessWide}}"></iron-media-query>

        <!-- Based of the paper-card class -->
        <paper-card>
            <!-- Where the image goes into -->
            <!-- Hides if page not big enough -->
            <template is="dom-if" if="{{wide}}">
                <a href={{link}}>
                    <content></content>
                </a>
            </template>

            <!-- Main content -->
            <div class="article-content">
                <div class="card-content card-height">
                    <div class="article-name">{{title}}</div>
                    <div class="article-subinfo">{{date}}</div>
                    <div id="theShortendText"></div>
                </div>
                <div class="card-actions">
                        <paper-button on-tap="toggleDialog">Read More</paper-button>
                    <a href={{link}}>
                        <paper-button>Go to</paper-button>
                    </a><commit_msg>Refind article card<commit_after><!--
This is the article card for projects, tutorials, and other informationl text.
It can take in: title, content, and date. An image can also be placed within the
element as well.
-->

<link rel="import" href="../bower_compnents/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../bower_components/iron-resizable-behavior/iron-resizable-behavior.html">

<!--
TODO: 1. Add an optional animation for opening articles
      2. More properly implment the image being passed in
      3. Default image, probably OSC logo
      4. May need to resize images for different sized screens
-->

<dom-module id="paper-article-card">
    <template>

        <style>
            paper-card {
                @apply(--layout-horizontal);
                /*max-height: 200px;*/
            }
            ::content img {
                max-height: 185px;
                background-size: cover;
                float: left;
            }
            .article-content {
                @apply(--layout-flex);
                /* Hides overflow of text */
                overflow: hidden;
            }
            .article-name {
                @apply(--paper-font-headline);
            }
            .article-subinfo {
                color: var(--paper-grey-600);
                margin: 10px 0;
            }
            .card-height {
                height: 100px;
            }
            a {
                color: black;
                text-decoration: none;
            }
            paper-button {
                color: black;
                float: right;
                margin-bottom: 5px;
            }
            paper-dialog[less-wide-layout] {
                /*color: green;*/
                /*margin-left: 525px;*/
            }
        </style>

        <!-- Resizing properties -->
        <iron-media-query query="(min-width: 800px)" query-matches="{{wide}}"></iron-media-query>
        <iron-media-query query="(min-width: 600px)" query-matches="{{lessWide}}"></iron-media-query>

        <!-- Based of the paper-card class -->
        <paper-card>
            <!-- Where the image goes into -->
            <!-- Hides if page not big enough -->
            <template is="dom-if" if="{{wide}}">
                <a href={{link}}>
                    <content></content>
                </a>
            </template>

            <!-- Main content -->
            <div class="article-content">
                <div class="card-content card-height">
                    <div class="article-name">{{title}}</div>
                    <div class="article-subinfo">{{date}}</div>
                    <div id="theShortendText"></div>
                </div>
                <div class="card-actions">
                        <paper-button on-tap="toggleDialog">Read More</paper-button>
                    <a href={{link}}>
                        <paper-button>Go to</paper-button>
                    </a>
{'fraction_non_alphanumeric': 0.14072039072039072, 'fraction_numerical': 0.008852258852258852, 'mean_word_length': 1.4756327918398187, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2474531', 'n_tokens_mistral': 1823, 'n_tokens_neox': 1680, 'n_words': 393}