From 7f1455b3fcecd0bd803de44f599db89ff295dd58 Mon Sep 17 00:00:00 2001
From: Eric Barbour <ebarbour@redhat.com>
Date: Aug 10 2016 19:35:20 +0000
Subject: Major improvements for Feed UI


* Revert the breaks in the card interface for feed widget from switching
to fedora-bootstrapp.

* Spacing and font size fixes

---

diff --git a/hubs/static/client/app/components/Icon.jsx b/hubs/static/client/app/components/Icon.jsx
index 08c8d60..9adf0e4 100644
--- a/hubs/static/client/app/components/Icon.jsx
+++ b/hubs/static/client/app/components/Icon.jsx
@@ -2,16 +2,14 @@ import React from 'react';
 
 const Icon = function (props) {
   return (
-    <div>
-      <div className="media-left">
-        <a href={props.match.link ? props.match.link : '#'} target="_blank">
-          <img
-            alt="User avatar"
-            className="media-object square-32 img-circle"
-            src={props.match.secondary_icon}
-          />
-        </a>
-      </div>
+    <div className="media-left">
+      <a href={props.match.link ? props.match.link : '#'} target="_blank">
+        <img
+          alt="User avatar"
+          className="media-object square-32"
+          src={props.match.secondary_icon}
+        />
+      </a>
     </div>
   );
 };
diff --git a/hubs/static/client/app/components/Markup.jsx b/hubs/static/client/app/components/Markup.jsx
index f2464fe..7342f58 100644
--- a/hubs/static/client/app/components/Markup.jsx
+++ b/hubs/static/client/app/components/Markup.jsx
@@ -1,12 +1,25 @@
 import React from 'react';
+import SaveNotificationButton from './SaveNotificationButton.jsx';
+
 import TimeAgo from 'react-timeago';
 
+
 export default class Markup extends React.Component {
   createMarkup() {
     return { __html: this.props.match.markup };
   }
   render() {
     const timestamp = this.props.date_time ? (<TimeAgo date={this.props.match.date_time} />) : null;
+
+
+    let saveBtn;
+    if (!this.props.match.saved && this.props.saveUrl) {
+      saveBtn = (
+        <SaveNotificationButton
+          match={this.props.match}
+          saveUrl={this.props.saveUrl}
+        />);
+    }
     return (
       <div className="media-body">
         <h4
@@ -15,6 +28,7 @@ export default class Markup extends React.Component {
         >
         </h4>
         {timestamp}
+        {saveBtn}
       </div>
     );
   }
diff --git a/hubs/static/client/app/components/Panel.jsx b/hubs/static/client/app/components/Panel.jsx
index 7760893..0cd9bdf 100644
--- a/hubs/static/client/app/components/Panel.jsx
+++ b/hubs/static/client/app/components/Panel.jsx
@@ -2,24 +2,13 @@ import React from 'react';
 
 import Icon from './Icon.jsx';
 import Markup from './Markup.jsx';
-import SaveNotificationButton from './SaveNotificationButton.jsx';
 
 const Panel = function (props) {
-  let saveBtn;
-  if (!props.match.saved && props.saveUrl) {
-    saveBtn = (
-      <SaveNotificationButton
-        match={props.match}
-        saveUrl={props.saveUrl}
-      />);
-  }
-
   return (
-    <div className="panel panel-default panel-visible">
-      <div className="panel-body">
+    <div className="card">
+      <div className="card-block">
         <Icon match={props.match} />
-        <Markup match={props.match} />
-        {saveBtn}
+        <Markup match={props.match} saveUrl={props.saveUrl} />
       </div>
     </div>
   );
diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index cb29255..3ab75a9 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -3,6 +3,32 @@
 {% block title %}{{ hub.name }}{% endblock %}
 {% block content %}
 
+  <div class="col-md-2">
+    <nav class="navbar navbar-light p-t-2 p-b-0">
+      <button type="button" class="navbar-toggler hidden-sm-up"
+        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="oi" data-glyph="menu"></span>
+      </button>
+
+      <!-- Collect the nav links, forms, and other content for toggling -->
+      {% if g.auth.logged_in %}
+      <div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
+        <ul class="nav navbar-nav">
+          <li class="p-x-1 nav-item {% if request.path.endswith('/' + g.auth.user.username + '/') %}active{% endif %}">
+            <a class="nav-link" href="/{{g.auth.user.username}}">me</a></li>
+          <li class="p-x-1 nav-item"><a class="nav-link" href="/{{g.auth.user.username}}/stream">My Stream</a></li>
+          {% for hub in g.auth.user.bookmarks %}
+          <li class='p-x-1 nav-item idle-{{hub.activity_class}}{% if request.path.endswith('/' + hub.name + '/') %} active{% endif %}'>
+            <a class="nav-link" href="/{{hub.name}}">{{hub.name}}</a></li>
+          {% endfor %}
+          <!-- At the end of the list, tack on a link to all groups -->
+          <li class="p-x-1 nav-item"><a class="nav-link" href="/groups">all</a></li>
+        </ul>
+      </div><!-- /.navbar-collapse -->
+      {% endif %}
+    </nav>
+  </div>
   <header class="p-t-2">
     <div class="container">
 
diff --git a/hubs/templates/includes/_messages.html b/hubs/templates/includes/_messages.html
index 1502b48..1e89ae8 100644
--- a/hubs/templates/includes/_messages.html
+++ b/hubs/templates/includes/_messages.html
@@ -1,5 +1,5 @@
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -12,8 +12,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -26,8 +26,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -40,8 +40,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -54,8 +54,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -68,8 +68,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -82,8 +82,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -96,8 +96,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -110,8 +110,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -124,8 +124,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
@@ -138,8 +138,8 @@
   </div>
 </div>
 
-<div class="panel panel-default panel-visible">
-  <div class="panel-body">
+<div class="card">
+  <div class="card-block">
     <div>
       <div class="media-left">
         <a href="#" target="_blank"><img alt="User avatar" class="media-object square-32 img-circle" src="https://secure.gravatar.com/avatar/ba1882fd5522d16213b0535934f77b796f0b89f76edd65460078099fe97c20ea.jpg?s=64&d=retro"></a>
diff --git a/hubs/templates/master.html b/hubs/templates/master.html
index 1e19d91..e02081b 100644
--- a/hubs/templates/master.html
+++ b/hubs/templates/master.html
@@ -52,33 +52,6 @@
   </div>
 </div>
 <div class="bodycontent">
-  <div class="col-md-2">
-    <nav class="navbar navbar-light p-t-2 p-b-0">
-      <button type="button" class="navbar-toggler hidden-sm-up"
-        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-        <span class="sr-only">Toggle navigation</span>
-        <span><i class="fa fa-bars" aria-hidden="true"></i></span>
-      </button>
-
-      <!-- Collect the nav links, forms, and other content for toggling -->
-      {% if g.auth.logged_in %}
-      <div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
-        <ul class="nav navbar-nav">
-          <li class="p-x-1 nav-item {% if request.path.endswith('/' + g.auth.user.username + '/') %}active{% endif %}">
-            <a class="nav-link" href="/{{g.auth.user.username}}">me</a></li>
-          <li class="p-x-1 nav-item"><a class="nav-link" href="/{{g.auth.user.username}}/stream">My Stream</a></li>
-          {% for hub in g.auth.user.bookmarks %}
-          <li class='p-x-1 nav-item idle-{{hub.activity_class}}{% if request.path.endswith('/' + hub.name + '/') %} active{% endif %}'>
-            <a class="nav-link" href="/{{hub.name}}">{{hub.name}}</a></li>
-          {% endfor %}
-          <!-- At the end of the list, tack on a link to all groups -->
-
-            <li class="p-x-1 nav-item"><a class="nav-link" href="/groups">all</a></li>
-        </ul>
-      </div><!-- /.navbar-collapse -->
-      {% endif %}
-    </nav>
-  </div>
 
 {% block content %}{% endblock %}
 
diff --git a/hubs/templates/stream.html b/hubs/templates/stream.html
index 6da69e4..eff03f8 100644
--- a/hubs/templates/stream.html
+++ b/hubs/templates/stream.html
@@ -6,13 +6,12 @@
   <h1>My Stream</h1>
   <p>Notifications, actions, and other things of interest to me</p>
 </div>
-
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav-tabs " role="tablist">
   <li class="nav-item">
-    <a class="nav-link active" href="#stream" role="tab" data-toggle="tab">My stream</a>
+    <a class="nav-link active" href="#stream" role="tab" data-toggle="tab">My Stream</a>
   </li>
   <li class="nav-item">
-    <a class="nav-link" href="#actions" role="tab" data-toggle="tab">My actions</a>
+    <a class="nav-link" href="#actions" role="tab" data-toggle="tab">My Actions</a>
   </li>
   <li class="nav-item">
     <a class="nav-link" href="#mentions" role="tab" data-toggle="tab">My Mentions</a>
@@ -29,8 +28,9 @@
       <div class="row">
         <div class="col-sm-8 pull-left">
           {% include "includes/_searchstream.html" %}
+          <br/>
           <div class="alert alert-warning" role="alert">
-            This stream is filtered. <a href="#">View Filters</a>
+            This stream is filtered. <a href="https://apps.fedoraproject.org/notifications/{{hub.name}}.id.fedoraproject.org/">View Filters</a>
           </div>
           <div id="streamFeed"></div>
         </div>
@@ -45,8 +45,9 @@
     <div class="container">
       <div class="row">
         {% include "includes/_searchstream.html" %}
+        <br/>
         <div class="alert alert-warning" role="alert">
-          This stream is filtered. <a href="#">View Filters</a>
+          This stream is filtered. <a href="https://apps.fedoraproject.org/notifications/{{hub.name}}.id.fedoraproject.org/">View Filters</a>
         </div>
         <div class="col-sm-8 pull-left">
           <div id="actionsFeed"></div>
@@ -92,6 +93,9 @@
  .jumbotron {
    margin-bottom: 0;
  }
+ .nav-tabs {
+   list-style: none;
+ }
 </style>
 {% endblock %}