Skip to content

Commit

Permalink
Merge pull request #145 from dailybruin/Breaking-Feeds
Browse files Browse the repository at this point in the history
Breaking feeds
  • Loading branch information
EdNawrocki authored Nov 4, 2024
2 parents 4650643 + 031a14c commit 9228447
Show file tree
Hide file tree
Showing 9 changed files with 742 additions and 3 deletions.
160 changes: 160 additions & 0 deletions components/ArticleCard/Breaking.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
import * as React from "react";
import Link from "next/link";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import * as globals from "../globals";
import * as locals from "./locals";
import * as utilities from "./utilities";
import * as moment from "moment";

export default function Breaking(props) {
var CurrentTime = new Date();
var PostTime = new Date(props.date);
var DiffInMilliseconds = CurrentTime - PostTime;
var TotalMinutes = Math.floor(DiffInMilliseconds / (1000 * 60));
var DiffInDays = Math.floor(TotalMinutes / (60 * 24));
var DiffInHours = Math.floor((TotalMinutes % (60 * 24)) / 60);
var DiffInMinutes = TotalMinutes % 60;

var TimeDiff = "";
if (DiffInDays != 0) {
TimeDiff += DiffInDays + " Day" + (DiffInDays != 1 ? "s" : "") + ", ";
}
if (DiffInHours != 0) {
TimeDiff += DiffInHours + " Hour" + (DiffInHours != 1 ? "s" : "") + ", ";
}
TimeDiff += DiffInMinutes + " Minute" + (DiffInMinutes != 1 ? "s" : "") + " Ago";

return (
<div
css={css`
display: flex;
flex-wrap: wrap;
box-shadow: ${globals.cardShadow};
padding: 0px;
background-color: #ffffff;
/*border: 10px solid #d12008;*/
border-radius: 20px;
width: 100%;
`}
>
<div
css={css`
padding: 20px;
padding-bottom: 5px;
padding-top: 5px;
width: 100%;
`}
>
<span>
<span>
<h3
css={css`
margin: 0;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: bold;
font-size: 11px;
display: inline;
margin-right: 4px;
color: #000000;`}
>
{utilities.renderAuthors(props.authors)}
</h3>
</span>

<span
css={css`
margin: 0 5px 0 0;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
display: inline;
`}
>
{PostTime.toLocaleString()}
</span>
<span
css={css`
border-left: 1px solid #000;
padding-left: 4px;
font-family: ${globals.bodyFont};
font-style: normal;
font-weight: 300;
font-size: 11px;
line-height: 14px;
`}
>
{TimeDiff}
</span>
</span>
<div
css={css`
margin: 2px 0 4px;
font-family: 'DM Serif Text', serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1.5rem;\n line-height: 1.25;\n color: #000000;\n
`}
style={{
fontStyle:
props.acf.db_article_format == "column" ? "italic" : "normal"
}}
dangerouslySetInnerHTML={{ __html: props.headline }}
/>
<div
css={css`
margin: 0 0 5px;
font-family: 'Roboto', serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n color: #000000;\n\n p {\n margin: 0;\n }\n \n br {\n display: none;\n }\n
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
</div>
{props.imageurl != "http://wp.dailybruin.com/images/2017/03/db-logo.png" &&

<div
css={css`
height: 100%;
width: 100%;
padding-top: 66.66%;
overflow: hidden;
position: relative;
`}
>
<img
css={css`
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
padding: 20px;
padding-top: 0px;
padding-bottom: 10px;
`}
src={props.imageurl}
/>
</div>
/* <h4
css={css`
display: block;
margin: 2px 0 0;
font-family: Arimo;
font-style: normal;
font-weight: normal;
font-size: 8px;
text-align: right;
color: #000000;
`}
>
{props.photographer}
</h4> */
}

</div>
);
}
102 changes: 102 additions & 0 deletions components/ArticleCard/BreakingOverview.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import * as React from "react";
import Link from "next/link";
/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import * as globals from "../globals";
import * as locals from "./locals";
import * as utilities from "./utilities";
import * as moment from "moment";

export default function BreakingOverview(props) {
return (
<div
css={css`
display: flex;
flex-wrap: wrap;
box-shadow: ${globals.cardShadow};
padding: 0px;
background-color: #ffffff;
border: 2px solid #d12008;
border-radius: 20px;
width: 100%;
position: sticky;
`}
>
<div
css={css`
padding: 20px;
padding-bottom: 5px;
padding-top: 5px;
width: 100%;
`}
>
<span>
<span>
<h3
css={css`
margin: 0;
font-family: 'DM Serif Text', serif;\n font-style: normal;\n font-weight: bold;\n font-size: 1.5rem;\n line-height: 1.25;\n color: #000000;\n
font-size: 1.3rem;
display: inline;
`}
>
{"What we're covering here"}
</h3>
</span>
</span>
<div
css={css`
margin: 10px 0 5px;
font-family: 'Roboto', serif;\n font-style: normal;\n font-weight: normal;\n font-size: 18px;\n color: #000000;\n\n p {\n margin: 0;\n }\n \n br {\n display: none;\n }\n
`}
dangerouslySetInnerHTML={{ __html: props.excerpt }}
/>
</div>
{props.imageurl != "http://wp.dailybruin.com/images/2017/03/db-logo.png" &&

<div
css={css`
height: 100%;
width: 100%;
padding-top: 66.66%;
overflow: hidden;
position: relative;
`}
>
<img
css={css`
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
padding: 20px;
padding-top: 0px;
padding-bottom: 10px;
`}
src={props.imageurl}
/>
</div>
/* <h4
css={css`
display: block;
margin: 2px 0 0;
font-family: Arimo;
font-style: normal;
font-weight: normal;
font-size: 8px;
text-align: right;
color: #000000;
`}
>
{props.photographer}
</h4> */
}

</div>
);
}
8 changes: 8 additions & 0 deletions components/ArticleCard/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Full from "./Full";
import Mini from "./Mini";
import Video from "./Video";
import Podcast from "./Podcast";
import Breaking from "./Breaking";
import BreakingOverview from "./BreakingOverview"

export default class ArticleCard extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -38,6 +40,12 @@ export default class ArticleCard extends React.Component {
case "podcast":
card = <Podcast {...this.props} />;
break;
case "breaking":
card = <Breaking {...this.props} />;
break;
case "breakingOverview":
card = <BreakingOverview {...this.props} />;
break;
default:
card = <Full {...this.props} />;
}
Expand Down
Loading

0 comments on commit 9228447

Please sign in to comment.