Skip to content

Instantly share code, notes, and snippets.

@craigtommola

craigtommola/code.gs

Last active March 27, 2018 20:49
Show Gist options
  • Save craigtommola/401866dcbc8c1d3e300c3f2da9370a6b to your computer and use it in GitHub Desktop.
Save craigtommola/401866dcbc8c1d3e300c3f2da9370a6b to your computer and use it in GitHub Desktop.
Download ZIP
GAS Sheet: Pitchfork Complex
Raw
code.gs
function doGet() {
var root = XmlService.createElement('CALENDAR');
var CALENDAR = SpreadsheetApp.openById('18S7Jvc5xQE-Bx2yOpLlebIyhTzjyR845lNFHjscV8ss');
var data = CALENDAR.getDataRange().getValues();
for (var i = 1; i < data.length; i++) {
var child = XmlService.createElement('EVENT')
var NAME = XmlService.createElement('NAME')
.setText(data[i][0]);
var LINK = XmlService.createElement('LINK')
.setText(data[i][1]);
var IMG = XmlService.createElement('IMG')
.setText(data[i][2]);
var START = XmlService.createElement('START')
.setText(data[i][3]);
var END = XmlService.createElement('END')
.setText(data[i][4]);
var VENUE = XmlService.createElement('VENUE')
.setText(data[i][5]);
var LOC = XmlService.createElement('LOC')
.setText(data[i][6]);
var DESC = XmlService.createElement('DESC')
.setText(data[i][7]);
var LINEUP = XmlService.createElement('LINEUP')
.setText(data[i][8]);
child.addContent(NAME);
child.addContent(LINK);
child.addContent(IMG);
child.addContent(START);
child.addContent(END);
child.addContent(VENUE);
child.addContent(LOC);
child.addContent(DESC);
child.addContent(LINEUP);
root.addContent(child);
}
var document = XmlService.createDocument(root);
var xml = XmlService.getPrettyFormat().format(document);
Logger.log(xml);
return ContentService.createTextOutput(xml).setMimeType(ContentService.MimeType.XML);
}
Raw
index.php
<!DOCTYPE html>
<html lang="en" >
<!-- Solving Problems With CSS Grid and Flexbox: The Card UI https://codepen.io/tutsplus/pen/YGQKAy -->
<head>
<meta charset="UTF-8">
<title>Pitchfork Guide to Music Festivals (GAS Sheet)</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='css/xjvpgo.css'>
<link rel="stylesheet" href="css/style.css">
<link data-react-helmet="true" rel="shortcut icon" type="image/png" href="https://cdn.pitchfork.com/assets/misc/favicon-32.png"/>
<style type="text/css">.card .thumb {padding-bottom:100%;}</style>
</head>
<body>
<div class="support-grid"></div>
<div class="header"><h1 class="main-heading">Pitchfork Guide to Music Festivals</h1>
<h2 class="sub-heading">A regularly updated guide to upcoming music festivals happening across the globe.</h2></div>
<?php
$datetoday = date('Y-m-d');
$xml = simplexml_load_file('https://script.google.com/macros/s/AKfycbxGz8yRPFXxwo-176e6L1nuOWL4FnFxq0ILLkP-48XvRy3GZsc/exec');
echo "<div class=\"band\">";
$i = 1;
foreach($xml->EVENT as $festivals) {
echo "<div class=\"item-".$i."\">";
echo "<a href=\"".$festivals->LINK."\" class=\"card\" target=\"_blank\">";
echo "<div class=\"thumb\" style=\"background-image: url(".$festivals->IMG.");\"></div>";
echo "<article>";
echo "<h1>".$festivals->NAME."</h1>";
echo "<p>".$festivals->DESC."</p>";
if ($festivals->LINEUP != '') {
echo "<span>WSG</span>"."<p class=\"lineup\">".$festivals->LINEUP."</p>";
}
$startDate = date('M d, Y', strtotime($festivals->START));
$endDate = date('M d, Y', strtotime($festivals->END));
echo "<span>".$startDate." - ".$endDate."</span>";
echo "</article>";
echo "</a>";
echo "</div>";
$i++;
}
?>
</div></div>
</body>
</html>
Raw
style.css
/* Solving Problems With CSS Grid and Flexbox: The Card UI https://codepen.io/tutsplus/pen/YGQKAy */
html {
background: #f5f7f8;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
padding: 20px 0;
}
.header {
max-width: 1240px;
margin: 0 auto;
padding: 2em;
}
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
/*h1, h2, h3 {
font-weight: 700;
letter-spacing: 2px;
}*/
@media only screen and (min-width: 500px) {
.band {
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1/ span 2;
}
.item-1 h1 {
font-size: 30px;
}
}
@media only screen and (min-width: 850px) {
.band {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* card */
.card {
min-height: 100%;
background: white;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-decoration: none;
color: #444;
position: relative;
top: 0;
-webkit-transition: all .1s ease-in;
transition: all .1s ease-in;
}
.card:hover {
top: -2px;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,0.2);
box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}
.card article {
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.card .thumb {
padding-bottom: 60%;
background-size: cover;
background-position: center center;
}
.card p {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1; /* make p grow to fill available space*/
line-height: 1.4;
}
p.lineup {
-webkit-box-flex: initial;
-ms-flex: initial;
flex: initial;
}
/* typography */
h1 {
font-size: 20px;
margin: 0;
color: #333;
}
.card span {
font-size: 12px;
font-weight: bold;
color: #999;
text-transform: uppercase;
letter-spacing: .05em;
margin: 2em 0 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment