casey
@casey@kafeneio.social  ·  activity timestamp 5 days ago
Casey speaks to the camera in her usual spot sitting in a red and orange striped outdoor chair. A clip from an Al Jazeera news video from the previous rain storm appears, showing families in their tents with water flooding in. Another video clip appears of a table full of junk food and candy. Another video appears from inside a makeshift tent as rain pours down.
“a Gazan student” aya
@rania40@mastodon.social  ·  activity timestamp 17 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
Gaza Verified Campaigns
@gaza_verified_campaigns@mastodon.social  ·  activity timestamp 15 hours ago
“a Gazan student” aya
@rania40@mastodon.social  ·  activity timestamp 17 hours ago
Aseelsehwel🇵🇸
@Aseelsehwel@mas.to  ·  activity timestamp yesterday
Aseelsehwel🇵🇸
@Aseelsehwel@mas.to  ·  activity timestamp yesterday
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 days ago
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted): export default class InterviewsPage extends kitten.Page { html () { const today = db.calendar.today const futureDays = db.calendar.futureDays const pastDays = db.calendar.pastDays return kitten.html` <${MainLayout} page='/admin/interviews/'> <h2>Interviews</h2> <${SignUpsSwitch.connectedTo(this)} /> <${InternalNav} /> <${TeamSchedule.connectedTo(this)} /> <h3 id='today'>Today</h3> <if ${today !== undefined}> <then>
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted): export default class InterviewsPage extends kitten.Page { html () { const today = db.calendar.today const futureDays = db.calendar.futureDays const pastDays = db.calendar.pastDays return kitten.html` <${MainLayout} page='/admin/interviews/'> <h2>Interviews</h2> <${SignUpsSwitch.connectedTo(this)} /> <${InternalNav} /> <${TeamSchedule.connectedTo(this)} /> <h3 id='today'>Today</h3> <if ${today !== undefined}> <then>
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted): export default class InterviewsPage extends kitten.Page { html () { const today = db.calendar.today const futureDays = db.calendar.futureDays const pastDays = db.calendar.pastDays return kitten.html` <${MainLayout} page='/admin/interviews/'> <h2>Interviews</h2> <${SignUpsSwitch.connectedTo(this)} /> <${InternalNav} /> <${TeamSchedule.connectedTo(this)} /> <h3 id='today'>Today</h3> <if ${today !== undefined}> <then>
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted: <style> table[inert] { opacity: 0.9; filter: grayscale(100%); } </style> </table> </section> ` } onToggle () { this.editable = !this.editable console.log(this.editable) this.update() } }
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted: <style> table[inert] { opacity: 0.9; filter: grayscale(100%); } </style> </table> </section> ` } onToggle () { this.editable = !this.editable console.log(this.editable) this.update() } }
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted: <style> table[inert] { opacity: 0.9; filter: grayscale(100%); } </style> </table> </section> ` } onToggle () { this.editable = !this.editable console.log(this.editable) this.update() } }
Screenshot of code (the lines editable=false and the button tag code are highlighted): class TeamSchedule extends kitten.Component { editable = false html () { return kitten.html` <section> <h3>Team schedule</h3> <button name='toggle' connect >${this.editable ? 'Lock' : 'Unlock to edit'}</button> <table id='team-schedule' ${this.editable ? '' : 'inert'}> <caption id='caption'> <markdown> Shows which team members will be present on calls on which days. </markdown>
Screenshot of code (the lines editable=false and the button tag code are highlighted): class TeamSchedule extends kitten.Component { editable = false html () { return kitten.html` <section> <h3>Team schedule</h3> <button name='toggle' connect >${this.editable ? 'Lock' : 'Unlock to edit'}</button> <table id='team-schedule' ${this.editable ? '' : 'inert'}> <caption id='caption'> <markdown> Shows which team members will be present on calls on which days. </markdown>
Screenshot of code (the lines editable=false and the button tag code are highlighted): class TeamSchedule extends kitten.Component { editable = false html () { return kitten.html` <section> <h3>Team schedule</h3> <button name='toggle' connect >${this.editable ? 'Lock' : 'Unlock to edit'}</button> <table id='team-schedule' ${this.editable ? '' : 'inert'}> <caption id='caption'> <markdown> Shows which team members will be present on calls on which days. </markdown>
GIF
GIF
Screen capture of the Team schedule interface from the Gaza Verified admin site. It is a table of names and days (Aral, Casey, Joy, Aseel, Fabio And Mondays … Fridays) with checkboxes at each name/day pair. It starts out greyed out. The Unlock to edit button is clicked and the interface comes alive (opacity returns to full and the checkboxes become green and clickable). The person toggles a few checkboxes and clicks the Lock button to lock the interface again and then repeats the process to undo the changes they just made.
Screen capture of the Team schedule interface from the Gaza Verified admin site. It is a table of names and days (Aral, Casey, Joy, Aseel, Fabio And Mondays … Fridays) with checkboxes at each name/day pair. It starts out greyed out. The Unlock to edit button is clicked and the interface comes alive (opacity returns to full and the checkboxes become green and clickable). The person toggles a few checkboxes and clicks the Lock button to lock the interface again and then repeats the process to undo the changes they just made.
Gaza Verified
@gazaverified@mastodon.ar.al  ·  activity timestamp 2 days ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 days ago
Gaza Verified
@gazaverified@mastodon.ar.al  ·  activity timestamp 2 days ago
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 days ago
Gaza Verified
@gazaverified@mastodon.ar.al  ·  activity timestamp 3 days ago
Gaza Verified
@gazaverified@mastodon.ar.al  ·  activity timestamp 3 days ago
“a Gazan student” aya
@rania40@mastodon.social  ·  activity timestamp 3 days ago
Rain floods the tents of displaced people in Gaza. We suffer in winter without homes.
“a Gazan student” aya
@rania40@mastodon.social  ·  activity timestamp 3 days ago
Rain floods the tents of displaced people in Gaza. We suffer in winter without homes.
Home Login