Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/jwrunge/FCC_Svelte
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwrunge
jwrunge committed Jun 10, 2024
2 parents abbcf34 + 6cab8fd commit 6503f3b
Showing 1 changed file with 12 additions and 164 deletions.
176 changes: 12 additions & 164 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import {fly, fade, scale} from 'svelte/transition'
import {onMount} from 'svelte'
Expand Down Expand Up @@ -69,7 +69,7 @@
}
let curPage = ""
function getPageData(loc) {
function getPageData(loc): Promise<any[] | undefined> {
return new Promise((resolve, reject)=> {
fetch(loc)
.then(res=> res.json())
Expand All @@ -83,8 +83,8 @@
let previousMonth
function changeEventMonth(event, skipSet = false) {
let newMonth = new Date(event.date).getMonth()
newMonth = months[newMonth]
let monthnum = new Date(event.date).getMonth()
let newMonth = months[monthnum]
if(previousMonth && newMonth === previousMonth) return false
Expand Down Expand Up @@ -201,28 +201,14 @@

<!-- Background slideshow -->
<Slideshow scrollTop={scrollTop} {subpageOpen} {header} {getPageData}/>

<!-- Closed message -->
<div class="closed-message">
<h3>Church building closed for Sunday worship, 1/14/24</h3>
<p>Due to inclement weather, the church will be closed for Sunday morning worship on 1/14/24. Please join us on Facebook for online worship.</p>
</div>

<!-- Information box -->
<div class="infobox">
<!-- <img bind:this={infoboxImage} class='bg' src="/primary-images/worshipservice.jpg" alt="" style={"transform: translateY(-25%) translateY(" + infoTop/5 + "px);"}> -->
<div class="worship-times">
<h3>Sunday Worship</h3> r <a href="#worship">worship with us online!</a></div>
<!-- <hr>
<div>Worshipping outside Sundays at 9:30am, weather permitting... <a href="#sermons">or join us online!</a></div> -->
<!-- <div>Contemporary: 8:30am</div>
<div>Traditional: 11am</div>
<hr>
<div class='ss-classes'>All-ages Sunday School: 9:30am</div> -->
<h3>Sunday Worship</h3>
<div>Gathering Sundays at 10am<br/>or <a href="#worship">worship with us online!</a></div>
</div>
<!-- <a id='giveonline' target='_blank' style='display: none' href="https://tithe.ly/give?c=1478951">Give online</a>
<button class='givebutton' on:click={()=>{ document.getElementById('giveonline').click() }}><img src='icons/tithely.svg' alt='tithely logo'><br>Give Online Securely</button>
<a class='no-underline' href="#current"><button class='not-mobile'>Learn More</button></a> -->
<div class='quicklinks'>
<div class="inner">
<a href="#sermons"><img src='/icons/round/sermons.svg' alt='Sermons'><span class='linklabel'><span class='inner'>Sermons</span></span></a>
Expand Down Expand Up @@ -254,12 +240,6 @@
<p><strong>Our Mission</strong> To be and to share the Good News of Jesus Christ, witnessing, loving and serving from our doorsteps "to the ends of the earth." <em>- Acts 1:8</em> And as First Christian in Galesburg, our mission is Growing Spirit-filled, committed disciples of Christ.</p>
{/if}
</div>
<!-- <div class='current-events'>
<img class="float" alt='"Transformed" sermon series' src='/uploads/events/transformed.jpg'>
<h3>Transformed</h3>
<p>Based on Romans 12:2, this series will look at the health of our body, mind, and spirit – and the transforming power of Jesus Christ. It is said that 40% of US Adults have reported dissatisfaction with their mental & emotional well-being due to the pandemic. People are hurting for many reasons... and it is so important for us all to know that God has a plan to transform us in every area of our lives, for His glory.</p>
<p>Be sure to contact <a href="#staff">Pastor MJ</a> if you are interested in materials for the accompanying study for families and small groups!</p>
</div> -->
</div>

{#if latestVid}
Expand All @@ -270,29 +250,16 @@
{#if latestVid.type && latestVid.type == "onsite"}
<video controls poster={latestVid.poster}>
<source src={latestVid.src} type="video/mp4">
<track kind="captions">
</video>
{:else}
<iframe title={latestVid.title} src={latestVid.src} width="560" height="487" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
<iframe title={latestVid.title} src={latestVid.src} width="560" height="487" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency={true} allow="encrypted-media" allowFullScreen={true}></iframe>
{/if}
</div>
</div>
{/if}
{/if}
</div>
<!-- <div class="inner wider mt">
<div class="box">
<div class="current-events">
<div>
<h3>Epiphany Star Words</h3>
<p>Epiphany begins on January 6. This is the day we celebrate the wise men from the East following a star to see the baby Jesus in Bethlehem. Each year we ourselves randomly select a star with a word on it and use that word as a source of prayer and meditation for the year ahead. Just like the wise men, we are invited to follow our individual star and open our hearts and minds to see where it takes us in 2021. May God inspire and bless us as we journey with Him, following the star!</p>
<p>Click on the star to have a word generated for you. You may also go to <a target="_blank" href="http://dayspring.com/yourwordquiz#/home">Dayspring</a> and answer 7 questions to find your 2021 word for the year.</p>
</div>
<div>
<Starwords/>
</div>
</div>
</div>
</div> -->
</div>

{#await getPageData('/data/events.json')}
Expand All @@ -308,7 +275,7 @@
</div>
</div>
{:then events}
{#if events && (events.sort((a, b)=> (new Date(a.date)).getTime() - (new Date(b.date)).getTime())
{#if events && ((events).sort((a, b)=> (new Date(a.date)).getTime() - (new Date(b.date)).getTime())
.filter(event=> (new Date(event.date)).getTime() > Date.now())
.slice(0, 5)).length > 0}
<div class='events' id="events">
Expand Down Expand Up @@ -351,15 +318,6 @@
{/if}
{/await}

<!-- <div class='section quicklinks'>
<div class="inner">
<a href="#staff"><img src='/icons/staff.svg' alt='Staff'><span class='linklabel'><span class='inner'>Staff</span></span></a>
<a href="#sermons"><img src='/icons/sermons.svg' alt='Sermons'><span class='linklabel'><span class='inner'>Sermons</span></span></a>
<a href="#newsletters"><img src='/icons/newsletters.svg' alt='Newsletters'><span class='linklabel'><span class='inner'>Newsletters</span></span></a>
<a href='https://www.facebook.com/First-Christian-Church-Disciples-of-Christ-Galesburg-Illinois-108822552519210/' target="_blank"><img src='/icons/facebooklogo.svg' alt='Facebook'><span class='linklabel'><span class='inner'>Facebook</span></span></a>
</div>
</div> -->

<LoveBox {loveTop} {getPageData} bind:loveImage/>

<div class='footer'>
Expand All @@ -372,7 +330,9 @@
{#if subpageOpen}
<div class='subpage' transition:fade>
<svelte:component this={page[curPage]} {getPageData}>
<div on:click={()=> window.history.back()} href="#home" class="back-arrow"><img src="/icons/back.svg" alt="Back to main page"></div>
<div role="button" tabindex=0 on:click={()=> window.history.back()} on:keydown={(event) => {if (event.key === 'Enter') window.history.back()}} class="back-arrow">
<img src="/icons/back.svg" alt="Back to main page">
</div>
<Navigation bind:mobileOpen bind:curPage {subpageOpen} subpageStyle={true} {scrollTop} {main}/>
</svelte:component>
</div>
Expand All @@ -385,34 +345,6 @@

<style lang='scss'>
@import 'style/variables.scss';
.side-by-side {
@media #{$notMobile} {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
}
.givebutton {
background-color: rgb(0, 155, 0);
img {
max-width: 8em;
margin-bottom: .5em;
}
}
button {
min-width: 12em;
}
.not-mobile {
display: none;
@media #{$notMobile} {
display: block;
}
}
//Header and other info over the top of the slideshow
.forefront-content {
position: relative;
Expand Down Expand Up @@ -601,10 +533,6 @@
// Information box
.infobox {
img.bg {
object-position: 100% 50%;
}
overflow: hidden;
transform: translateY(98vh);
background: $lightgray;
Expand All @@ -613,13 +541,6 @@
text-align: center;
font-size: 1.1em;
hr {
width: 70%;
border: none;
background-color: black;
height: .5px;
}
@media #{$notMobile} and (max-width: 1300px) {
font-size: 1em;
}
Expand All @@ -640,8 +561,6 @@
width: 30vw;
margin-bottom: 2em;
img.bg { display: none; }
}
.worship-times {
Expand Down Expand Up @@ -706,10 +625,6 @@
width: 45em;
box-sizing: border-box;
&.wider {
width: 60em;
}
@media screen and (max-width: 500px) {
padding-left: 0;
padding-right: 0;
Expand Down Expand Up @@ -779,22 +694,10 @@
max-width: 50%;
float: right;
margin: 0 1em 1em 1em;
&.left {
float: left;
}
}
}
img.small {
max-width: 60%;
}
}
}
.inner + .inner {
padding-top: 1em;
}
}
.events {
Expand Down Expand Up @@ -845,61 +748,6 @@
h2 { margin-bottom: .5em; }
}
//Quick links
// .section.quicklinks {
// background: $accent-color;
// background: radial-gradient(lighten($accent-color, 15%), $accent-color);//linear-gradient($lightblue, darken($lightblue, 10%));
// transform: skewY(-1.5deg);
// padding: 3em 0 6em 0;
// border-top: 1px solid darken($accent-color, 20%);
// }
// .section.quicklinks > .inner {
// max-width: 45em;
// display: grid;
// grid-template-columns: 1fr 1fr;
// margin: 5em auto 5em auto;
// align-items: center;
// justify-items: center;
// transform: skewY(1.5deg);
// @media screen and (min-width: 700px) {
// grid-template-columns: 1fr 1fr 1fr 1fr;
// }
// img {
// max-width: 5em;
// margin: 1em 1em;
// transition: transform .3s ease-in-out;
// @media #{$notMobile} {
// max-width: 8em;
// }
// }
// a {
// position: relative;
// color: $red;
// &:hover {
// filter: brightness(1.2);
// img {
// transform: scale(1.1);
// }
// }
// }
// .linklabel {
// display: block;
// margin: 0 auto 2em auto;
// text-align: center;
// text-decoration: none;
// font-weight: bold;
// }
// }
.footer {
color: black;
padding: 3em 0 8em 0;
Expand Down

0 comments on commit 6503f3b

Please sign in to comment.