#572 style the tags at the top of the halp widget
Merged 6 years ago by abompard. Opened 6 years ago by ryanlerch.
ryanlerch/fedora-hubs halp-css  into  develop

file modified
+2 -2
@@ -9,10 +9,10 @@ 

    }

  

    render() {

-     var activeClass = this.props.active ? "active" : "inactive";

+     var activeClass = this.props.active ? "badge-primary" : "badge-light";

      return (

        <span

-         className={"hub " + activeClass}

+         className={"hub badge " + activeClass}

          onClick={this.onClick.bind(this)}

          >{"@" + this.props.name}</span>

      );

@@ -25,14 +25,18 @@ 

      }.bind(this));

      return (

        <div className="hubs">

-         <span className="fa fa-tags" aria-hidden="true"></span>

+         <span className="fa fa-tags text-muted" aria-hidden="true"></span>

          { (hubNodes.length !== 0) ?

-             hubNodes

+           <span className="tag-list">

+             { hubNodes }

+           </span>

            :

+             <span className="text-muted">

              <FormattedMessage

                tagName="em"

                {...messages.watching_all_hubs}

                />

+             </span>

          }

        </div>

      );

file modified
+28 -14
@@ -4,27 +4,41 @@ 

   * Widget halp

   */

  

- .widget-halp {

- }

- .widget-halp .hubs {

-     color: gray;

- }

+ 

  .widget-halp .hubs .fa {

      margin-right: 4px;

  }

+ 

  .widget-halp .hubs span.hub {

-     border: 1px solid gray;

-     border-radius: 2px;

-     background-color: #eee;

-     display: inline-block;

-     margin: 2px 3px 2px 0;

-     padding: 1px 2px;

-     font-size: 90%;

      cursor: pointer;

+     line-height: 1.2em;

+     margin-left: 2px;

+     margin-right:2px;

  }

- .widget-halp .hubs span.hub.inactive {

-     background-color: white;

+ 

+ .widget-halp .hubs span.tag-list {

+     font-size: 1.2em;

  }

+ 

+ .widget-halp .hubs span.hub.badge-primary {

+     border: 1px solid #294172;

+ }

+ 

+ .widget-halp .hubs span.hub.badge-primary:hover {

+     background-color: #294172;

+ }

+ 

+ .widget-halp .hubs span.hub.badge-light {

+     background-color: #eceeef;

+     color: #808080;

+     border: 1px solid #d5d5d5;

+ }

+ 

+ .widget-halp .hubs span.hub.badge-light:hover {

+     background-color: #d5d5d5;

+     border: 1px solid #a3a3a3;

+ }

+ 

  .widget-halp .Spinner {

      margin: 0 auto;

  }

rebased onto e35a3d3

6 years ago

Or you could just remove it if you don't need it :-)

thanks @abompard !

removed the commented out CSS, and rebased!

rebased onto 92db5e1

6 years ago

I don't know where that error comes from, but it should be {{ hubNodes }} with the braces.

So the light gray means that the hub is selected, while the dark blue means that it's not? It feels a bit counter-intuitive, no? (maybe my intuition is backwards though ;-) )

rebased onto 83440dc

6 years ago

whoops!

thanks, fixed up those two issues...

Darn, I got mixed up with the templating language, it's { hubNodes } with single curly braces, of course. Sorry.

okies! removed the double curlies!

rebased onto 9ebfb49

6 years ago

Commit b6fa21b fixes this pull-request

Pull-Request has been merged by abompard

6 years ago

Pull-Request has been merged by abompard

6 years ago