[spalenque] - #13221 * fix styles for track and level view in schedule

Author: santipalenque

summit/css/schedule-grid.css

@@ -278,22 +278,32 @@ i.collapse-nav {
 }
 
 .view-select-container #view-select {
-    background-color: #edf2f7;
+    background-color: #fff;
     margin-left: 10px;
     border-radius: 5px;
     height: 30px;
-    width: 55px;
     cursor: pointer;
+    border: 1px solid #d6d5d5;
+    color: #808080;
+}
 
+.track-nav-container #track-select {
+    background-color: #fff;
+    border-radius: 5px;
+    height: 30px;
+    cursor: pointer;
+    border: 1px solid #d6d5d5;
+    color: #808080;
+    width: 95%;
 }
 
 @media (max-width: 767px) {
     .view-select-container {
-        width: 50%;
+        width: 45%;
         float: left;
     }
     .view-days-container {
-        width: 50%;
+        width: 55%;
         float: left;
         padding-right: 5px;
     }
@@ -308,7 +318,7 @@ i.collapse-nav {
 }
 
 .track-nav-container {
-    padding: 15px;
+    padding: 10px 0 0 0;
 }
 
 @media all and (min-width: 1400px) {
@@ -374,7 +384,9 @@ i.collapse-nav {
 a.navbar-brand.navbar-brand-month
 {
     font-size: 11pt !important;
-    color: #2A4E68 !important
+    color: #2A4E68 !important;
+    float: right;
+    margin-right: 15px;
 }
 
 .navbar-default .navbar-nav > .active.day-selected

summit/ui/source/js/components/schedule/main-view.js

@@ -13,7 +13,7 @@ class MainView extends Component {
         return (
         <div className="row navbar-container">
             <div className="col-md-3 col-sm-3 view-select-container">
-                View by
+                Filter
                 <select id="view-select" value={view.type}
                 onChange={e => this.changeView(e, e.target.value)}>
                     <option value={VIEW_DAYS}>Day</option>
@@ -100,19 +100,36 @@ class MainView extends Component {
         } = this.props
         return (
         <nav className="navbar navbar-default navbar-days">
-            <div className="container">
+            <div>
+            {/* Brand and toggle get grouped for better mobile display */}
+                <div className="navbar-header">
+                    <button type="button" aria-expanded="false" data-toggle="collapse"
+                    className="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1">
+                        <span className="sr-only">
+                        Toggle navigation
+                        </span>
+                        <span className="icon-bar"></span>
+                        <span className="icon-bar"></span>
+                        <span className="icon-bar"></span>
+                    </button>
+                    <a href="#" onClick={e => e.preventDefault()}
+                    className="navbar-brand navbar-brand-month">
+                        Levels
+                    </a>
+                </div>
+                {/* Collect the nav links, forms, and other content for toggling */}
                 <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                     <ul className="nav navbar-nav">
                     {Object.keys(summit.presentation_levels).map(levelId => {
                         const level = summit.presentation_levels[levelId]
                         const classes = levelId.toLowerCase() === view.value ? 'active level-selected' : null
                         return (
-                        <li key={levelId} className={classes}>
-                            <a onClick={e => this.changeView(e, view.type, levelId.toLowerCase())}
-                            href="#" className="level-label">
-                                {level.level}
-                            </a>
-                        </li>
+                            <li key={levelId} className={classes}>
+                                <a onClick={e => this.changeView(e, view.type, levelId.toLowerCase())}
+                                href="#" className="level-label">
+                                        {level.level}
+                                </a>
+                            </li>
                     )})}
                     </ul>
                 </div>