dan/dchadwick
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new react block

Browse Source
This commit is contained in:
Dan Chadwick 2024-04-10 15:00:10 -07:00
parent 69f2a14f9b
commit 5e16d7687e
9 changed files with 221 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
web/modules/custom/ufc/js/dist/main.min.js vendored
View File

@ -17,7 +17,7 @@ __webpack_require__.r(__webpack_exports__);
function Button(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
className: "btn btn-primary"
className: "btn btn-" + props.classes
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: props.link
}, "View Fight"));
@ -39,6 +39,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button */ "./js/src/components/Button.js");
/* harmony import */ var _Image__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Image */ "./js/src/components/Image.js");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@ -48,6 +49,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var FightCard = function FightCard() {
var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
_useState2 = _slicedToArray(_useState, 2),
@ -57,7 +59,6 @@ var FightCard = function FightCard() {
fetch('/api/v1/recent-fights').then(function (res) {
return res.json();
}).then(function (data) {
console.log(data);
setFights(data);
});
}, []);
@ -68,9 +69,22 @@ var FightCard = function FightCard() {
key: index,
className: "card col-md-3"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-header"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
alt: "headshot for ufc fighter",
uri: fight.fighter_one_image
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
id: "versus"
}, "vs."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Image__WEBPACK_IMPORTED_MODULE_2__["default"], {
alt: "headshot for ufc fighter",
uri: fight.fighter_two_image
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-body"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_one), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_two), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
link: fight.url
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_one), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h4", null, fight.fighter_two)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "card-footer"
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__["default"], {
link: fight.url,
classes: "primary"
})));
}));
};
@ -78,6 +92,30 @@ var FightCard = function FightCard() {
/***/ }),
/***/ "./js/src/components/Image.js":
/*!************************************!*\
!*** ./js/src/components/Image.js ***!
\************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
function Image(props) {
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
src: props.uri,
className: "img-fluid fightcard-img",
alt: props.alt
});
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Image);
/***/ }),
/***/ "./node_modules/react-dom/cjs/react-dom.development.js":
/*!*************************************************************!*\
!*** ./node_modules/react-dom/cjs/react-dom.development.js ***!

2
web/modules/custom/ufc/js/dist/main.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
web/modules/custom/ufc/js/src/components/Button.js
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react';
function Button(props) {
return <button className="btn btn-primary"><a href={props.link}>View Fight</a></button>;
return <button className={"btn btn-" + props.classes}><a href={props.link}>View Fight</a></button>;
}
export default Button;

11
web/modules/custom/ufc/js/src/components/FightCard.js
View File

@ -1,6 +1,7 @@
import React, { Component } from 'react';
import { useState, useEffect } from 'react';
import Button from './Button';
import Image from './Image';
const FightCard = () => {
const [fights, setFights] = useState([]);
@ -10,7 +11,6 @@ const FightCard = () => {
return res.json();
})
.then((data) => {
console.log(data);
setFights(data);
});
}, []);
@ -18,10 +18,17 @@ const FightCard = () => {
<div className="d-flex flex-row flex-wrap">
{fights.map((fight, index) => (
<div key={index} className="card col-md-3">
<div className="card-header">
<Image alt="headshot for ufc fighter" uri={fight.fighter_one_image} />
<span id="versus">vs.</span>
<Image alt="headshot for ufc fighter" uri={fight.fighter_two_image} />
</div>
<div className="card-body">
<h4>{fight.fighter_one}</h4>
<h4>{fight.fighter_two}</h4>
<Button link={fight.url} />
</div>
<div className="card-footer">
<Button link={fight.url} classes="primary" />
</div>
</div>
))}

9
web/modules/custom/ufc/js/src/components/Image.js Normal file
View File

@ -0,0 +1,9 @@
import React, { Component } from 'react';
function Image(props) {
return (
<img src={props.uri} className="img-fluid fightcard-img" alt={props.alt} />
);
}
export default Image;

13
web/modules/custom/ufc/src/Controller/RecentFightsController.php
View File

@ -4,6 +4,7 @@
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Entity\EntityTypeManager;
use Drupal\Core\Url;
use Drupal\node\Entity\Node;
use Drupal\Core\Cache\CacheableJsonResponse;
use Symfony\Component\DependencyInjection\ContainerInterface;
@ -34,7 +35,7 @@ public function getRecentFights() {
$query = $this->entityTypeManager->getStorage('node')->getQuery();
$query->accessCheck(TRUE);
$query->condition('type', 'fight')->sort('created', 'DESC');
$query->range(0, 12);
$query->range(0, 13);
$nids = $query->execute();
$all_fights = Node::loadMultiple($nids);
$fights = [];
@ -44,14 +45,24 @@ public function getRecentFights() {
$result = Node::load($fight->field_result->target_id);
$alias = \Drupal::service('path_alias.manager')->getAliasByPath("/" . $fight->toUrl()->getInternalPath());
if ($f1 && $f2) {
$f1_uri = $f1->field_player_photo->entity->field_media_image->entity->getFileUri() ?? 'public://player-headshots/headshot-default.jpeg';
$f2_uri = $f2->field_player_photo->entity->field_media_image->entity->getFileUri() ?? 'public://player-headshots/headshot-default.jpeg';
$f1_pic_url = str_replace("public://", "/sites/default/files/", $f1_uri);
$f2_pic_url = str_replace("public://", "sites/default/files/", $f2_uri);
$fights[] = [
'fighter_one' => $f1->getTitle(),
'fighter_one_image' => $f1_pic_url,
'fighter_two' => $f2->getTitle(),
'fighter_two_image' => $f2_pic_url,
'result' => $result->getTitle(),
'url' => $alias
];
}
}
return new CacheableJsonResponse($fights);
}

67
web/themes/custom/dchadwick/css/style.css
View File

@ -227,6 +227,7 @@ table.cols-5 td.incorrect {
padding: 2rem;
padding-bottom: 1rem;
background: #31748f;
border-radius: 5px;
color: #f6c177;
}
@ -244,9 +245,75 @@ table.cols-5 td.incorrect {
margin: 0;
}
#recent-fights {
background: #fffaf3;
border: 2px solid #6e6a86;
padding: 2rem;
}
#recent-fights > div {
grid-gap: 5px;
justify-content: center;
}
#block-dchadwick-recentfightsblock {
margin-top: 100px;
}
#block-dchadwick-recentfightsblock h2 {
background: #191724;
color: #f6c177;
padding: 1rem 0;
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
border-left: 2px solid #6e6a86;
border-right: 2px solid #6e6a86;
border-top: 2px solid #6e6a86;
margin-bottom: 0;
}
@media screen and (min-width: 1024px) {
#block-dchadwick-recentfightsblock .card {
flex: 1 0 21%;
}
}
#block-dchadwick-recentfightsblock .fightcard-img {
height: 60px;
border-radius: 50%;
}
#block-dchadwick-recentfightsblock .card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
#block-dchadwick-recentfightsblock .card-body {
text-align: center;
}
#block-dchadwick-recentfightsblock .card-body h4 {
font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
#block-dchadwick-recentfightsblock .card-body h4 {
font-size: 0.8rem;
}
}
#block-dchadwick-recentfightsblock .card-footer {
display: flex;
}
#block-dchadwick-recentfightsblock .card-footer button {
background: #fffaf3;
border: 1px solid #6e6a86;
flex-grow: 1;
}
#block-dchadwick-recentfightsblock .card-footer button:hover {
background: #191724;
}
#block-dchadwick-recentfightsblock .card-footer button:hover a {
color: #f6c177;
}
#block-dchadwick-recentfightsblock .card-footer button a {
color: #6e6a86;
}
body {
background: #faf4ed;

1
web/themes/custom/dchadwick/src/sass/partials/hero.scss
View File

@ -25,6 +25,7 @@
padding: 2rem;
padding-bottom: 1rem;
background: $pine;
border-radius: 5px;
// border: 5px solid $pine;
color: $orangeish;
// opacity: 0.95;

79
web/themes/custom/dchadwick/src/sass/partials/recent-fights.scss
View File

@ -1,3 +1,82 @@
#recent-fights {
background: $surface;
border: 2px solid $muted;
padding: 2rem;
> div {
grid-gap: 5px;
justify-content: center;
}
}
#block-dchadwick-recentfightsblock {
margin-top: 100px;
h2 {
background: $base_bl;
color: $orangeish;
padding: 1rem 0;
text-transform: uppercase;
font-size: 2.4rem;
text-align: center;
width: 100%;
border-left: 2px solid $muted;
border-right: 2px solid $muted;
border-top: 2px solid $muted;
margin-bottom: 0;
}
.card {
@media screen and (min-width: 1024px) {
flex: 1 0 21%;
}
}
.fightcard-img {
height: 60px;
border-radius: 50%;
}
.card-header {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-flow: wrap;
}
.card-body {
text-align: center;
h4 {
font-size: 1.2rem;
@media screen and (max-width: 767px) {
font-size: 0.8rem;
}
}
}
.card-footer {
display: flex;
button {
background: $surface;
border: 1px solid $muted;
flex-grow: 1;
&:hover {
background: $base_bl;
a {
color: $orangeish;
}
}
a {
color: $muted;
}
}
}
}