Tour Nav Widget - markup ready

themovation / th-widget-pack

Theme Widget Pack

19 stars 6 forks source link

Tour Nav Widget - markup ready #92

Closed teaganm closed 7 years ago

teaganm commented 7 years ago

Here's the markup for the Tour Nav widget: https://gist.github.com/teaganm/e92cb79ebd385cd29564b5c1150754a6

Pretty simple for now:

Each item has the class "th-tour-nav-item"
The icon outputs an i tag into that element
The text field outputs into a span tag right after

In terms of color:

Background .th-tour-nav {background-color: rgba(0,0,0,0.5);}

Icon color .th-tour-nav-item i {color:#fff}

Text color .th-tour-nav-item span {color:#fff}

I think that should do it!

ryanlabelle commented 7 years ago

Thanks! Okay, version 1 is ready with default content and colours. Looking good.

ryanlabelle commented 7 years ago

Added quick rendering via JavaScript

teaganm commented 7 years ago

Alright, now that we have the revised designs we can implement the new additions.

As discussed, I think since it's not a nav anymore we can rename it to "Tour Info" or "Tour Info Bar".

Here is the revised markup: https://gist.github.com/teaganm/6afaa5c08aa63ed59217cac22f86dc3e

No change to the existing tour nav items markup.

Just the addition of "th-tour-nav-price" and "th-tour-nav-btn".

For the price, we output the dollar amount into the div, and then the "Price Text" is in a span tag. For the widget form, I think something like the Package widget is good: https://cl.ly/0t2v1R3V2k0Y

For the button, as discussed, we should have the dropdown to select the type of button to show. I think we could leave out the CTA button options as they might look a bit too bold, but your call.

ryanlabelle commented 7 years ago

Looking good! Needs some quick test. I've added the icon inside the button because the code was already there with the CTA widget. I think it looks okay. I left the CTA button style in, but tell me what you think.

teaganm commented 7 years ago

Nice! I tested and it looks like it's all working well. I think the button icon option is nice. I'm fine with having the CTA button options there as well.

Only thing is I think we should change the sample content a bit now that the price is separate. Right now it's there twice - how about we change it to the example included here that was from Andy’s mockup - the compass and 4.5 miles:

https://gist.github.com/teaganm/6afaa5c08aa63ed59217cac22f86dc3e

ryanlabelle commented 7 years ago

Added demo content.

425bb610941d813df6d30890da196c5d6c68d23f

teaganm commented 7 years ago

Looks great.