code4recovery / tsml-ui

Embeddable recovery meeting finder
https://tsml-ui.code4recovery.org/
MIT License
23 stars 17 forks source link

Help with the sunspot WP Theme #329

Closed thepripri closed 11 months ago

thepripri commented 12 months ago

Screenshot of Website

joshreisner commented 12 months ago

thanks @thepripri! i'm working on some enhancements as part of #287 that should help with this - i'll update here when they can be demoed

joshreisner commented 11 months ago

hey @thepripri i've got a PR ready, but need to do some extensive testing before releasing. when you get a chance, could you update your page code to:

<div
  id="tsml-ui"
  data-src="https://aavirginia.org/wp-admin/admin-ajax.php?action=meetings&district=district-33-manassas"
  data-mapbox="pk.eyJ1Ijoiam9zaHJlaXNuZXIiLCJhIjoiY2tvYXA0YnZxMGRldDJxbzdta25uNGphdiJ9.eay-UKgIT99ALmdw08xBPw"
  data-timezone="America/New_York"
></div>
<script>var tsml_react_config = { map: { style: 'mapbox://styles/mapbox/navigation-night-v1' } };</script>
<script src="https://deploy-preview-330--tsml-ui.netlify.app/app.js" async></script>

then go to WordPress Dashboard > Appearance > Customize > Additional CSS and add this:

body.tsml-ui #secondary {
  display: none;
}
body.tsml-ui #content {
  padding: 0;
}
body.tsml-ui #content, body.tsml-ui #content > article, body.tsml-ui .entry-content, #tsml-ui {
  min-height: calc(100vh - 24px);
}
body.tsml-ui #content > article > header {
  display: none;
}
@media (min-width: 651px) {
  body.tsml-ui #main {
      width: 73.7%;
    }
}
body.tsml-ui #primary {
  width: 100%;
}
body.tsml-ui #wrapper {
    max-width: none;
}
body.tsml-ui .entry-content {
    margin: 0
}

@media (max-width: 480px) {
  #tsml-ui {
    margin: 0 -0.9em;
  }
}

#tsml-ui {
  --alert-background: #191919;
  --alert-text: #d7c2a8;
  --background: #292625;
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --in-person: #66cc66;
  --inactive: #cc6666;
  --link: #fcb03e;
  --online: #6699cc;
  --text: #d7c2a8;
}

hopefully it will look like this: list

meeting

let me know! thanks