WIP navbar
This commit is contained in:
Matthew Stratford
parent
56d2605e9d
commit
32946e5c91
4 changed files with 232 additions and 1 deletions
|
|
@ -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`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
<title>WebStudio | University Radio York</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
|
|
@ -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`.
|
||||
-->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
||||
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<script src="https://kit.fontawesome.com/255e917109.js" crossorigin="anonymous"></script>
|
||||
<script src="//cdn.rawgit.com/toots/shine/master/js/dist/libshine.js"></script>
|
||||
<script src="//cdn.rawgit.com/webcast/libsamplerate.js/master/dist/libsamplerate.js"></script>
|
||||
<script src="//cdn.rawgit.com/webcast/taglib.js/master/dist/taglib.js"></script>
|
||||
|
|
|
|||
12
src/assets/images/webstudio.svg
Normal file
12
src/assets/images/webstudio.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="499.992" height="83.178" viewBox="0 0 541 90">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
font-size: 83px;
|
||||
fill: #fff;
|
||||
font-family: roundabout;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<text id="WebStudio" class="cls-1" x="-1.178" y="82.1">WebStudio</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 320 B |
169
src/index.css
169
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
|
||||
<header className="navbar navbar-ury navbar-expand-md fixed-top bd-navbar">
|
||||
<nav className="container">
|
||||
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsed" aria-controls="collapsed" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div className="navbar-nav">
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src="//ury.org.uk/myradio/img/URY.svg" height="34" alt="University Radio York Logo" />
|
||||
</a>
|
||||
<span className="navbar-brand divider"></span>
|
||||
<a className="navbar-brand" href="/">
|
||||
<img src={appLogo} height="34" alt="University Radio York Logo" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ul className="nav navbar-nav navbar-right">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" target="_blank" href="https://ury.org.uk/myradio/MyRadio/timeslot/?next=/webstudio">
|
||||
<span className="fa fa-clock-o"></span>
|
||||
Timeslot Time
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item dropdown">
|
||||
<a className="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span className="fa fa-user-o"></span>
|
||||
{userName}
|
||||
</a>
|
||||
<div className="dropdown-menu" aria-labelledby="dropdown07">
|
||||
<a className="dropdown-item" target="_blank" href="https://ury.org.uk/myradio/Profile/default/">My Profile</a>
|
||||
<a className="dropdown-item" target="_blank" href="https://ury.org.uk/myradio/MyRadio/logout/">Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
|
||||
const {
|
||||
plan: showplan,
|
||||
|
|
@ -329,6 +375,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
|
|||
}
|
||||
return (
|
||||
<div className="sp-container">
|
||||
<NavBar />
|
||||
<div style={{ height: "10%" }}>
|
||||
<h1>WebStudio</h1>
|
||||
<img
|
||||
|
|
|
|||
Loading…
Reference in a new issue