topics tracklist

[carlynlee]

relates to: #63

shortens the tracklist, Match color of tracklisting with schedule

result of these changes:

[kylerisse]

Thanks @carlynlee . Appreciate you updating the color schemes for new and renamed tracks. I just have one concern noted in line. Generally not a fan of special characters in map keys and unsure how that might affect css.

[kylerisse]

I'm concerned the use of @ in the selector name might not be valid. Can you confirm @carlynlee @sarcasticadmin ?

[sarcasticadmin]

thats a good question, let me do some digging

[sarcasticadmin]

From the example that @carlynlee sent over while work through this it does look like FLOSS@HOME is not the expected color. Its grey (default) in this screenshot:

I believe we just need to escape the @:

.FOSS\@HOME {

If you want a quick example in https://jsfiddle.net/ :

html

<div class="container">
  <div class="one">
    <p>One</p>
  </div>
  <div class="floss@home">
    <p>floss@home</p> 
  </div>
  <div class="floss@broken">
    <p>floss@broken</p>
  </div>
</div>

css:

/* For each class, set some colors */
.one {
  background-color: cornflowerblue;
}
.floss\@home {
  color: black;
  background-color: #8ADA20;
}
.floss@broken {
  color: black;
  background-color: #8ADA20;
}

Results in:

[kylerisse]

I believe the selector name is the map key value. My suggestion is to just omit the @ from the key here

scale-signs/server/scroll.php

Line 50 in e166012

"FOSS@HOME" => "FOSS @ HOME",

, making it FOSSHOME and then match the CSS selector to FOSSHOME. Same pattern as how spaces are treated. Probably cleaner than escaping.

[sarcasticadmin]

that makes sense, definitely safer 👍

[sarcasticadmin]

@carlynlee topics are looking good and awesome job getting these colors to align with the main schedule ! This will really go a along way to make it easy for the Scale attendees to identify their designed tracks since it will match the program.

Per Kyles suggestion, I think we just need to make that small tweak in the css (see my comment inline below) and then it should be good. Would you mind testing that out?

[sarcasticadmin]

From the example that @carlynlee sent over while work through this it does look like FLOSS@HOME is not the expected color. Its grey (default) in this screenshot:

I believe we just need to escape the @:

.FOSS\@HOME {

If you want a quick example in https://jsfiddle.net/ :

html

<div class="container">
  <div class="one">
    <p>One</p>
  </div>
  <div class="floss@home">
    <p>floss@home</p> 
  </div>
  <div class="floss@broken">
    <p>floss@broken</p>
  </div>
</div>

css:

/* For each class, set some colors */
.one {
  background-color: cornflowerblue;
}
.floss\@home {
  color: black;
  background-color: #8ADA20;
}
.floss@broken {
  color: black;
  background-color: #8ADA20;
}

Results in:

[sarcasticadmin]

Thanks for adding this to the list!

[carlynlee]

Ok, I removed the special char @ from two files:

https://github.com/carlynlee/scale-signs/blob/shorten_topics_tracklist/server/scroll.php#L50

https://github.com/carlynlee/scale-signs/blob/shorten_topics_tracklist/server/style.css#L561

I rebuilt the image and tried to view the track listing again but I'm unsure why the colors aren't applied:

[sarcasticadmin]

did you rebuild the container? It looks like its still the old name Foss @ Home from your screenshot (which it should be FOSS HOME from your diff)

BTW keep the @ on the right side of the assignment. So the entry in scroll.php would look like:

"FOSSHOME"	=>	 "FOSS @ HOME",

[carlynlee]

yep, I ran docker-compose build --no-cache and then docker-compose up -d

[sarcasticadmin]

@carlynlee did a little digging, turns out we need to replace the @ in the original Topic name we get from the XML as well. Its due to the lookup that takes place here:

scale-signs/server/scroll.php

Line 257 in 2c23457

if ( array_key_exists($topic, $shorten_topics) ) {

It all looks good for me now 🙂

I pushed these changes directly on your branch so just pull them down with: git pull -r origin shorten_topics_tracklist and you should these my additions

[carlynlee]

Thanks @sarcasticadmin ! Seems like the this pull req is ready to merge. Your changes and it seem to work on my end too:

[sarcasticadmin]

@carlynlee this is fantastic, the signs server is really coming along 🎉

I went ahead and rebased these commits so the history was more straightforward prior to use merging it into master