Troop20/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Adding mobile service

Browse Source 
Adding mobile components
This commit is contained in:
Tara Wilson 2025-02-19 21:07:32 -05:00
parent cf82be2b5f
commit acc339768e
15 changed files with 426 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
source/src/app/about/about.component.html
View File

@ -0,0 +1,12 @@
<article class="pa3 pa5-ns">
<p class="measure lh-copy bg-light-blue">
Founded in 2020, Troop 20 develops young women into tomorrow's leaders. The troop is a group of odd ducks enjoying
the outdoors through hiking and camping. The troop also goes on additional outings such as day trips to trampoline
parks, beaches, zoos, and other places as determined by the troop.
</p>
<p class="measure lh-copy bg-light-blue">
Troop 20 follows the Patrol Method, where the youth leadership, not the adults, plan and organize the troops actives
based on monthly themes. The troop is currently working on turning out our first Eagle Scouts - one of the founding members
is really close and we hope to celebrate her accomplishments.
</p>
</article>

161
source/src/app/committee/committee.component.html
View File

@ -1,62 +1,111 @@
<article class="vh-100 dt w-100 bg-transparent"> @if (mobileService.isMobile()) {
<div class="dtc v-mid tc ph3 ph4-l"> <ul class="list pl0 mt0 measure center">
<div class="dt dt--fixed"> <li
<div class="dtc tc pv0 bg-transparent"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
<div class="tc"> <div class="pl3 flex-auto">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee"> <span class="f6 db black-70">Richard Simpson</span>
<h1 class="f3 mb2">Richard Simpson</h1> <span class="f6 db black-70">Chartered Organization Rep</span>
<h2 class="f5 fw4 gray mt0">Chartered Organization Rep</h2>
</div>
</article>
</div> </div>
<div class="dtc tc pv0 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/committeechair.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee Chair"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/committeechair.png"/>
<h1 class="f3 mb2">Rik Linebaugh</h1> <div class="pl3 flex-auto">
<h2 class="f5 fw4 gray mt0">Committee Chair</h2> <span class="f6 db black-70">Rik Linebaugh</span>
</div> <span class="f6 db black-70">Committee Chair</span>
</article>
</div> </div>
<div class="dtc tc pv0 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/sm.png"/>
<h1 class="f3 mb2">Linda Linebaugh</h1> <div class="pl3 flex-auto">
<h2 class="f5 fw4 gray mt0">Scoutmaster</h2> <span class="f6 db black-70">Linda Linebaugh</span>
</div> <span class="f6 db black-70">Scoutmaster</span>
</article>
</div> </div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Jaime Seidler</span>
<span class="f6 db black-70">Fundraising Chair</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Tara Wilson</span>
<span class="f6 db black-70">Advancement Chair</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/committee.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Jessica Wilson</span>
<span class="f6 db black-70">Secretary</span>
</div>
</li>
</ul>
} @else {
<div class="dt dt--fixed">
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
<h1 class="f3 mb2">Richard Simpson</h1>
<h2 class="f5 fw4 gray mt0">Chartered Organization Rep</h2>
</div>
</article>
</div> </div>
<div class="dt dt--fixed"> <div class="dtc tc pv0 bg-transparent">
<div class="dtc tc pv0 bg-transparent"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <div class="tc">
<div class="tc"> <img src="titles/committeechair.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee Chair">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee"> <h1 class="f3 mb2">Rik Linebaugh</h1>
<h1 class="f3 mb2">Jaime Seidler</h1> <h2 class="f5 fw4 gray mt0">Committee Chair</h2>
<h2 class="f5 fw4 gray mt0">Fundraising Chair</h2> </div>
</div> </article>
</article> </div>
</div> <div class="dtc tc pv0 bg-transparent">
<div class="dtc tc pv0 bg-transparent"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <div class="tc">
<div class="tc"> <img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee"> <h1 class="f3 mb2">Linda Linebaugh</h1>
<h1 class="f3 mb2">Tara Wilson</h1> <h2 class="f5 fw4 gray mt0">Scoutmaster</h2>
<h2 class="f5 fw4 gray mt0">Advancement Chair</h2> </div>
</div> </article>
</article>
</div>
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
<h1 class="f3 mb2">Jessica Wilson</h1>
<h2 class="f5 fw4 gray mt0">Secretary</h2>
</div>
</article>
</div>
</div> </div>
</div> </div>
</article> <div class="dt dt--fixed">
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
<h1 class="f3 mb2">Jaime Seidler</h1>
<h2 class="f5 fw4 gray mt0">Fundraising Chair</h2>
</div>
</article>
</div>
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
<h1 class="f3 mb2">Tara Wilson</h1>
<h2 class="f5 fw4 gray mt0">Advancement Chair</h2>
</div>
</article>
</div>
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/committee.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Committee">
<h1 class="f3 mb2">Jessica Wilson</h1>
<h2 class="f5 fw4 gray mt0">Secretary</h2>
</div>
</article>
</div>
</div>
}

5
source/src/app/committee/committee.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import {Component, inject} from '@angular/core';
import {MobileService} from '../mobile.service';
@Component({ @Component({
selector: 'app-committee', selector: 'app-committee',
@ -7,5 +8,5 @@ import { Component } from '@angular/core';
styleUrl: './committee.component.scss' styleUrl: './committee.component.scss'
}) })
export class CommitteeComponent { export class CommitteeComponent {
public mobileService = inject(MobileService);
} }

4
source/src/app/footer/footer.component.html
View File

@ -1,5 +1,5 @@
<div class="footer"> <div [class]="{'footer': !mobileService.isMobile(), 'footer-mobile': mobileService.isMobile()}">
<footer class="pv4 ph3 ph5-m ph6-l bg-near-black"> <footer class="pv4 ph3 ph5-m ph6-l bg-black">
<small class="f6 db tc white"> <small class="f6 db tc white">
© 2025 © 2025
<b class="ttu"> <b class="ttu">

7
source/src/app/footer/footer.component.scss
View File

@ -4,3 +4,10 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.footer-mobile {
position: static;
left: 0;
bottom: 0;
width: 100%;
}

5
source/src/app/footer/footer.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import {Component, inject} from '@angular/core';
import {MobileService} from '../mobile.service';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
@ -7,5 +8,5 @@ import { Component } from '@angular/core';
styleUrl: './footer.component.scss' styleUrl: './footer.component.scss'
}) })
export class FooterComponent { export class FooterComponent {
public mobileService = inject(MobileService);
} }

88
source/src/app/forms/forms.component.html
View File

@ -1,46 +1,46 @@
<article class="vh-100 dt w-100 bg-transparent"> <article class="center mw5 mw6-ns hidden ba mv4">
<div class="dtc v-mid tc ph3 ph4-l"> <h1 class="f4 bg-near-black white mv0 pv2 ph3">Youth Application</h1>
<article class="center mw5 mw6-ns hidden ba mv4"> <div class="pa3 bt bg-light-blue">
<h1 class="f4 bg-near-black white mv0 pv2 ph3">Youth Application</h1> <p class="f6 f5-ns lh-copy measure mv0">
<div class="pa3 bt bg-light-blue"> <a
<p class="f6 f5-ns lh-copy measure mv0"> href="https://filestore.scouting.org/filestore/pdf/524-406.pdf?_gl=1*wtt3bs*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1MzM5LjU2LjAuMA..&_ga=2.6189623.583820647.1679520579-13622772.1675274891"
<a href="https://filestore.scouting.org/filestore/pdf/524-406.pdf?_gl=1*wtt3bs*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1MzM5LjU2LjAuMA..&_ga=2.6189623.583820647.1679520579-13622772.1675274891" target="_blank"> target="_blank">
Download and fill out the form Download and fill out the form
</a> </a>
</p> </p>
</div> </div>
</article> </article>
<article class="center mw5 mw6-ns hidden ba mv4"> <article class="center mw5 mw6-ns hidden ba mv4">
<h1 class="f4 bg-near-black white mv0 pv2 ph3">Adult Leader Application</h1> <h1 class="f4 bg-near-black white mv0 pv2 ph3">Adult Leader Application</h1>
<div class="pa3 bt bg-light-blue"> <div class="pa3 bt bg-light-blue">
<p class="f6 f5-ns lh-copy measure mv0"> <p class="f6 f5-ns lh-copy measure mv0">
<a href="https://filestore.scouting.org/filestore/pdf/524-501.pdf" target="_blank"> <a href="https://filestore.scouting.org/filestore/pdf/524-501.pdf" target="_blank">
Download and fill out the form Download and fill out the form
</a> </a>
</p> </p>
</div> </div>
</article> </article>
<article class="center mw5 mw6-ns hidden ba mv4"> <article class="center mw5 mw6-ns hidden ba mv4">
<h1 class="f4 bg-near-black white mv0 pv2 ph3">Merit Badge Councilor Application</h1> <h1 class="f4 bg-near-black white mv0 pv2 ph3">Merit Badge Councilor Application</h1>
<div class="pa3 bt bg-light-blue"> <div class="pa3 bt bg-light-blue">
<p class="f6 f5-ns lh-copy measure mv0"> <p class="f6 f5-ns lh-copy measure mv0">
<a href="https://filestore.scouting.org/filestore/pdf/34405.pdf?_gl=1*1hlrsjt*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1NDE2LjYwLjAuMA..&_ga=2.61297192.583820647.1679520579-13622772.1675274891" target="_blank"> <a
Download and fill out the form href="https://filestore.scouting.org/filestore/pdf/34405.pdf?_gl=1*1hlrsjt*_ga*MTM2MjI3NzIuMTY3NTI3NDg5MQ..*_ga_20G0JHESG4*MTY3OTUyNDgwMi4xMDAuMS4xNjc5NTI1NDE2LjYwLjAuMA..&_ga=2.61297192.583820647.1679520579-13622772.1675274891"
</a> target="_blank">
</p> Download and fill out the form
</div> </a>
</article> </p>
<article class="center mw5 mw6-ns hidden ba mv4"> </div>
<h1 class="f4 bg-near-black white mv0 pv2 ph3">BSA Medical Form</h1> </article>
<div class="pa3 bt bg-light-blue"> <article class="center mw5 mw6-ns hidden ba mv4">
<p class="f6 f5-ns lh-copy measure mv0"> <h1 class="f4 bg-near-black white mv0 pv2 ph3">BSA Medical Form</h1>
<a href="https://filestore.scouting.org/filestore/healthsafety/pdf/680-001_abc.pdf" target="_blank"> <div class="pa3 bt bg-light-blue">
Download and fill out the form <p class="f6 f5-ns lh-copy measure mv0">
</a> <a href="https://filestore.scouting.org/filestore/healthsafety/pdf/680-001_abc.pdf" target="_blank">
<br/> Download and fill out the form
Forms A, B, and C are required for Summer Camp </a>
</p> <br/>
</div> Forms A, B, and C are required for Summer Camp
</article> </p>
</div> </div>
</article> </article>

4
source/src/app/home/home.component.html
View File

@ -1,5 +1,5 @@
<article class="vh-100 dt w-100 bg-transparent"> <article class="vh-75 dt w-100">
<div class="dtc v-mid tc ph3 ph4-l"> <div class="dtc v-mid tc white ph3 ph4-l">
<img ngSrc="bsa-logo.png" priority height="336" width="294" alt="Scouting USA Logo"/> <img ngSrc="bsa-logo.png" priority height="336" width="294" alt="Scouting USA Logo"/>
<h1 class="f3 f2-m f1-l fw2 white mv3">Prepared. For life.</h1> <h1 class="f3 f2-m f1-l fw2 white mv3">Prepared. For life.</h1>
</div> </div>

120
source/src/app/leadership/leadership.component.html
View File

@ -1,51 +1,79 @@
<article class="vh-100 dt w-100 bg-transparent"> @if (mobileService.isMobile()) {
<div class="dtc v-mid tc ph3 ph4-l"> <ul class="list pl0 mt0 measure center">
<div class="dt dt--fixed"> <li
<div class="dtc tc pv4 bg-transparent"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/sm.png"/>
<div class="tc"> <div class="pl3 flex-auto">
<img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster"> <span class="f6 db black-70">Linda Linebaugh</span>
<h1 class="f4">Linda Linebaugh</h1> <span class="f6 db black-70">Scoutmaster</span>
<h2 class="f5">Scoutmaster</h2>
<hr class="mw3 bb bw1 b--black-10">
</div>
<p class="lh-copy measure center f6 black-70">
Linda founded Troop 20 - then Troop 40 - in 2020. She received the
<a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood Badge</a>
in 2025. She also finds time to be a Den Leader for Pack 16 in Columbiana where she is developing the next generation of Scouts.
</p>
</article>
</div> </div>
<div class="dtc tc pv4 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/asm.png"/>
<h1 class="f4">Jaime Seidler</h1> <div class="pl3 flex-auto">
<h2 class="f5">Assistant Scoutmaster</h2> <span class="f6 db black-70">Jaime Seidler</span>
<hr class="mw3 bb bw1 b--black-10"> <span class="f6 db black-70">Assistant Scoutmaster</span>
</div>
<p class="lh-copy measure center f6 black-70">
Jaime joined Troop 20 in 2023 when her daughter crossed over from Cub Scouts.
She has taken several leadership trainings and has participated in the summer camp program.
She has also accompanied the scouts on several outings, including polar bears.
</p>
</article>
</div> </div>
<div class="dtc tc pv4 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/asm.png"/>
<h1 class="f4">Tara Wilson</h1> <div class="pl3 flex-auto">
<h2 class="f5">Assistant Scoutmaster</h2> <span class="f6 db black-70">Tara Wilson</span>
<hr class="mw3 bb bw1 b--black-10"> <span class="f6 db black-70">Assistant Scoutmaster</span>
</div>
<p class="lh-copy measure center f6 black-70">
Tara is a lifelong Scout, starting her journey back in the early 1990s as a Cub Scout and progressed all the way to Life Scout.
She went to the 2001 National Jamboree at Fort AP Hill, Virginia and holds a 5th year Pipestone.
She joined Troop 20 in 2025 when her daughter crossed over from Cub Scouts.
</p>
</article>
</div> </div>
</li>
</ul>
} @else {
<div class="dt dt--fixed">
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/sm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scoutmaster">
<h1 class="f4">Linda Linebaugh</h1>
<h2 class="f5">Scoutmaster</h2>
<hr class="mw3 bb bw1 b--black-10">
</div>
<p class="lh-copy measure center f6 black-70">
Linda founded Troop 20 - then Troop 40 - in 2020. She received the
<a href="https://www.scouting.org/training/resources-for-program-trainers-training-committees/woodbadge/">Wood
Badge</a>
in 2025. She also finds time to be a Den Leader for Pack 16 in Columbiana where she is developing the next
generation of Scouts.
</p>
</article>
</div>
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
<h1 class="f4">Jaime Seidler</h1>
<h2 class="f5">Assistant Scoutmaster</h2>
<hr class="mw3 bb bw1 b--black-10">
</div>
<p class="lh-copy measure center f6 black-70">
Jaime joined Troop 20 in 2023 when her daughter crossed over from Cub Scouts.
She has taken several leadership trainings and has participated in the summer camp program.
She has also accompanied the scouts on several outings, including polar bears.
</p>
</article>
</div>
<div class="dtc tc pv0 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/asm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Assistant Scoutmaster">
<h1 class="f4">Tara Wilson</h1>
<h2 class="f5">Assistant Scoutmaster</h2>
<hr class="mw3 bb bw1 b--black-10">
</div>
<p class="lh-copy measure center f6 black-70">
Tara is a lifelong Scout, starting her journey back in the early 1990s as a Cub Scout and progressed all
the way to Life Scout.
She went to the 2001 National Jamboree at Fort AP Hill, Virginia and holds a 5th year Pipestone.
She joined Troop 20 in 2025 when her daughter crossed over from Cub Scouts.
</p>
</article>
</div> </div>
</div> </div>
</article> }

5
source/src/app/leadership/leadership.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import {Component, inject} from '@angular/core';
import {MobileService} from '../mobile.service';
@Component({ @Component({
selector: 'app-leadership', selector: 'app-leadership',
@ -7,5 +8,5 @@ import { Component } from '@angular/core';
styleUrl: './leadership.component.scss' styleUrl: './leadership.component.scss'
}) })
export class LeadershipComponent { export class LeadershipComponent {
public mobileService = inject(MobileService);
} }

13
source/src/app/mobile.service.ts Normal file
View File

@ -0,0 +1,13 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MobileService {
/**
* Determines if the user is using a small resolution or mobile browser
*/
public isMobile(): boolean {
return (window.innerWidth <= 667 );
}
}

2
source/src/app/top-nav/top-nav.component.html
View File

@ -1,4 +1,4 @@
<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l"> <header class="bg-black w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
<nav class="f6 fw6 ttu tracked"> <nav class="f6 fw6 ttu tracked">
<a class="link dim white dib mr3" [routerLink]="['/']" title="Home">Home</a> <a class="link dim white dib mr3" [routerLink]="['/']" title="Home">Home</a>
<a class="link dim white dib mr3" [routerLink]="['/about']" title="About">About</a> <a class="link dim white dib mr3" [routerLink]="['/about']" title="About">About</a>

232
source/src/app/youth-leadership/youth-leadership.component.html
View File

@ -1,88 +1,160 @@
<article class="vh-100 dt w-100 bg-transparent"> @if (mobileService.isMobile()) {
<div class="dtc v-mid tc ph3 ph4-l"> <ul class="list pl0 mt0 measure center">
<div class="cf"> <li
<div class="fl w-20 tc pv1 bg-transparent"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/spl.png"/>
<div class="tc"> <div class="pl3 flex-auto">
<img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <span class="f6 db black-70">Juliahna Seidler</span>
<h1 class="f3 mb2">Juliahna Seidler</h1>
</div>
</article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
<h1 class="f3 mb2">Kenzie Witherow</h1> <div class="pl3 flex-auto">
</div> <span class="f6 db black-70">Kenzie Witherow</span>
</article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/aspl.png"/>
<h1 class="f3 mb2">Carlie Sorrell</h1> <div class="pl3 flex-auto">
</div> <span class="f6 db black-70">Carlie Sorrell</span>
</article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/qm.png"/>
<h1 class="f3 mb2">Ella Mercer</h1> <div class="pl3 flex-auto">
</div> <span class="f6 db black-70">Ella Mercer</span>
</article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> </li>
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <li
<div class="tc"> class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img class="w2 h2 w3-ns h3-ns br-100" src="titles/scribe.png"/>
<h1 class="f3 mb2">Nora Wilson</h1> <div class="pl3 flex-auto">
</div> <span class="f6 db black-70">Nora Wilson</span>
</article>
</div> </div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Avery Elliot</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/pl.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Locklyn Linebaugh</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/historian.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Natalie Sorrell</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/librarian.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Kenzie Elliot</span>
</div>
</li>
<li
class="flex items-center lh-copy pa3 ph0-l bb b--black-10 bg-light-blue">
<img class="w2 h2 w3-ns h3-ns br-100" src="titles/dc.png"/>
<div class="pl3 flex-auto">
<span class="f6 db black-70">Locklyn Linebaugh</span>
</div>
</li>
</ul>
} @else {
<div class="cf">
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/spl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
<h1 class="f3 mb2">Juliahna Seidler</h1>
</div>
</article>
</div> </div>
<div class="cf"> <div class="fl w-20 tc pv1 bg-transparent">
<div class="fl w-20 tc pv1 bg-transparent"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <div class="tc">
<div class="tc"> <img src="titles/aspl.png" class="br-100 h4 w4 dib ba b--black-05 pa2"
<img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> title="Assistant Senior Patrol Leader">
<h1 class="f3 mb2">Avery Elliot</h1> <h1 class="f3 mb2">Kenzie Witherow</h1>
</div> </div>
</article> </article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> <div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc"> <div class="tc">
<img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img src="titles/oeg.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Outdoor Ethics Guide">
<h1 class="f3 mb2">Locklyn Linebaugh</h1> <h1 class="f3 mb2">Carlie Sorrell</h1>
</div> </div>
</article> </article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> <div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc"> <div class="tc">
<img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img src="titles/qm.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Quarter Master">
<h1 class="f3 mb2">Natalie Sorrell</h1> <h1 class="f3 mb2">Ella Mercer</h1>
</div> </div>
</article> </article>
</div> </div>
<div class="fl w-20 tc pv1 bg-transparent"> <div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10"> <article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc"> <div class="tc">
<img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader"> <img src="titles/scribe.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Scribe">
<h1 class="f3 mb2">Kenzie Elliot</h1> <h1 class="f3 mb2">Nora Wilson</h1>
</div> </div>
</article> </article>
</div>
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Senior Patrol Leader">
<h1 class="f3 mb2">Locklyn Linebaugh</h1>
</div>
</article>
</div>
</div> </div>
</div> </div>
</article> <div class="cf">
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
<h1 class="f3 mb2">Avery Elliot</h1>
</div>
</article>
</div>
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/pl.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Patrol Leader">
<h1 class="f3 mb2">Locklyn Linebaugh</h1>
</div>
</article>
</div>
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/historian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Historian">
<h1 class="f3 mb2">Natalie Sorrell</h1>
</div>
</article>
</div>
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/librarian.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Librarian">
<h1 class="f3 mb2">Kenzie Elliot</h1>
</div>
</article>
</div>
<div class="fl w-20 tc pv1 bg-transparent">
<article class="mw5 center bg-light-blue br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="titles/dc.png" class="br-100 h4 w4 dib ba b--black-05 pa2" title="Den Chief">
<h1 class="f3 mb2">Locklyn Linebaugh</h1>
</div>
</article>
</div>
</div>
}

5
source/src/app/youth-leadership/youth-leadership.component.ts
View File

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import {Component, inject} from '@angular/core';
import {MobileService} from '../mobile.service';
@Component({ @Component({
selector: 'app-youth-leadership', selector: 'app-youth-leadership',
@ -7,5 +8,5 @@ import { Component } from '@angular/core';
styleUrl: './youth-leadership.component.scss' styleUrl: './youth-leadership.component.scss'
}) })
export class YouthLeadershipComponent { export class YouthLeadershipComponent {
public mobileService = inject(MobileService);
} }

1
source/src/styles.scss
View File

@ -4,4 +4,5 @@ body, html {
height: 100%; height: 100%;
margin: 0; margin: 0;
background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-image: url('https://images.unsplash.com/photo-1505490096310-204ef067fe6b?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-color: black;
} }