diff --git a/public/index.html b/public/index.html index 03904c8..7123d12 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + WebStudio | University Radio York @@ -39,6 +39,9 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + + diff --git a/src/assets/images/webstudio.svg b/src/assets/images/webstudio.svg new file mode 100644 index 0000000..e5a1b6e --- /dev/null +++ b/src/assets/images/webstudio.svg @@ -0,0 +1,12 @@ + + + + + WebStudio + diff --git a/src/index.css b/src/index.css index ec2585e..be5f354 100644 --- a/src/index.css +++ b/src/index.css @@ -11,3 +11,172 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + + +/* Stuff to get the nav to collapse at 991px (when the menu collapses) + * Taken from http://stackoverflow.com/a/36289507/995325 */ +@media (max-width: 991px) { + .navbar-header { + float: none; + } + .navbar-left, .navbar-right { + float: none !important; + } + .navbar-toggle { + display: block; + } + .navbar-collapse { + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + } + .navbar-fixed-top { + top: 0; + border-width: 0 0 1px; + } + .navbar-collapse.collapse { + display: none !important; + } + .navbar-nav { + float: none !important; + margin-top: 7.5px; + } + .navbar-nav > li { + float: none; + } + .navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + } + .collapse.in { + display: block !important; + } +} +/** MyRadio bootstrap navbar overides taken from http://work.smarchal.com/twbscolor/css/2D425F2D425Fffffffe1e1e11 **/ +.navbar-ury { + background-color: #2D333C; + border-color: #2D425F; + border: none; +} +.navbar-ury .navbar-brand { + color: #ffffff; + padding: 10px 15px; /** added to center the logo **/ + line-height: 30px; /** added to center the logo **/ + +} +.navbar-ury .navbar-brand.myradio-logo { + margin-left: 0 !important; +} +.navbar-ury .navbar-brand img { + max-height: 100%; +} +.navbar-ury .navbar-brand:hover, +.navbar-ury .navbar-brand:focus { + color: #e1e1e1; +} +.navbar-ury .navbar-brand.divider { + border-right: 1px white solid; + margin: 14px 0; + height: 22px; + padding: 0; +} +.navbar-ury .navbar-text { + color: #ffffff; +} +.navbar-ury .navbar-nav > li > a { + color: #ffffff; +} +.navbar-ury .navbar-nav > li.nav-img { + height: 50px; +} +.navbar-ury .navbar-nav > li.nav-img > a { + height: 100%; + padding: 10px 10px; +} +.navbar-ury .navbar-nav > li.nav-img > a > img { + height: 100%; +} +.navbar-ury .navbar-nav .caret { + margin-left: 5px; +} +.navbar-ury .navbar-nav .glyphicon { + margin-right: 5px; +} + +.navbar-ury .navbar-nav > li > a:hover, +.navbar-ury .navbar-nav > li > a:focus { + color: #e1e1e1; + background-color: #2D425F; +} +.navbar-ury .navbar-nav > li > .dropdown-menu { + background-color: #2D425F; + border-top: none; +} +.navbar-ury .navbar-nav > li > .dropdown-menu > li > a { + color: #ffffff; +} +.navbar-ury .navbar-nav > li > .dropdown-menu > li > a:hover, +.navbar-ury .navbar-nav > li > .dropdown-menu > li > a:focus { + color: #e1e1e1; + background-color: #2D425F; +} +.navbar-ury .navbar-nav > li > .dropdown-menu > li > .divider { + background-color: #2D425F; +} +.navbar-ury .navbar-nav .open .dropdown-menu > .active > a, +.navbar-ury .navbar-nav .open .dropdown-menu > .active > a:hover, +.navbar-ury .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #e1e1e1; + background-color: #2D425F; +} +.navbar-ury .navbar-nav > .active > a, +.navbar-ury .navbar-nav > .active > a:hover, +.navbar-ury .navbar-nav > .active > a:focus { + color: #e1e1e1; + background-color: #2D425F; +} +.navbar-ury .navbar-nav > .open > a, +.navbar-ury .navbar-nav > .open > a:hover, +.navbar-ury .navbar-nav > .open > a:focus { + color: #e1e1e1; + background-color: #2D425F !important; +} +.navbar-ury .navbar-toggle { + border-color: #2D425F; +} +.navbar-ury .navbar-toggle:hover, +.navbar-ury .navbar-toggle:focus { + background-color: #2D425F; +} +.navbar-ury .navbar-toggle .icon-bar { + background-color: #ffffff; +} +.navbar-ury .navbar-collapse, +.navbar-ury .navbar-form { + border-color: #ffffff; +} +.navbar-ury .navbar-link { + color: #ffffff; +} +.navbar-ury .navbar-link:hover { + color: #e1e1e1; +} +.navbar-ury .navbar-brand:hover { + color: #e1e1e1; + background-color: #2D425F !important; +} + +@media (max-width: 767px) { + .navbar-ury .navbar-nav .open .dropdown-menu > li > a { + color: #ffffff; + } + .navbar-ury .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-ury .navbar-nav .open .dropdown-menu > li > a:focus { + color: #e1e1e1; + } + .navbar-ury .navbar-nav .open .dropdown-menu > .active > a, + .navbar-ury .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-ury .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #e1e1e1; + background-color: #2D425F; + } +} diff --git a/src/showplanner/index.tsx b/src/showplanner/index.tsx index 7244bae..9d19649 100644 --- a/src/showplanner/index.tsx +++ b/src/showplanner/index.tsx @@ -37,6 +37,8 @@ import playLogo from "../assets/icons/play.svg"; import pauseLogo from "../assets/icons/pause.svg"; import stopLogo from "../assets/icons/stop.svg"; +import appLogo from "../assets/images/webstudio.svg"; + const CML_CACHE: { [recordid_trackid: string]: Track } = {}; const TS_ITEM_MENU_ID = "SongMenu"; @@ -260,6 +262,50 @@ function MixingInterface() { ); } + +function NavBar() { + const userName = "Matthew Stratford"; + return ( + +
+ +
+ + ); +} + const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) { const { plan: showplan, @@ -329,6 +375,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) { } return (
+

WebStudio