Added radio page

This commit is contained in:
Jorit Tijsen
2024-03-13 17:44:35 +01:00
parent d445d90069
commit a0baa0230f
40 changed files with 749 additions and 610 deletions

BIN
public/css/airplay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 B

1
public/css/airplay.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="17" height="14" viewBox="0 0 16.9 13.9"><defs><style>.fill{fill:#fff;}</style></defs><title>7</title><g id="airplay"><polygon class="fill" points="0 0 16.9 0 16.9 10.4 13.2 10.4 11.9 8.9 15.4 8.9 15.4 1.6 1.5 1.6 1.5 8.9 5 8.9 3.6 10.4 0 10.4 0 0"/><polygon class="fill" points="2.7 13.9 8.4 7 14.2 13.9 2.7 13.9"/></g></svg>

After

Width:  |  Height:  |  Size: 417 B

BIN
public/css/chromecast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 951 B

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.3 13.4" x="0" y="0" width="17" height="14"><defs><style>.cls-1{fill:#fff;}</style></defs><title>5</title><path id="chromecast" class="cls-1" d="M80.4,13v2.2h2.2A2.22,2.22,0,0,0,80.4,13Zm0-2.9v1.5a3.69,3.69,0,0,1,3.7,3.68s0,0,0,0h1.5a5.29,5.29,0,0,0-5.2-5.2h0ZM93.7,4.9H83.4V6.1a9.59,9.59,0,0,1,6.2,6.2h4.1V4.9h0ZM80.4,7.1V8.6a6.7,6.7,0,0,1,6.7,6.7h1.4a8.15,8.15,0,0,0-8.1-8.2h0ZM95.1,1.9H81.8a1.54,1.54,0,0,0-1.5,1.5V5.6h1.5V3.4H95.1V13.7H89.9v1.5h5.2a1.54,1.54,0,0,0,1.5-1.5V3.4A1.54,1.54,0,0,0,95.1,1.9Z" transform="translate(-80.3 -1.9)"/></svg>

After

Width:  |  Height:  |  Size: 637 B

View File

@@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../resources/assets/sass/components/posts.scss","../../../resources/assets/sass/abstracts/_mixin.scss"],"names":[],"mappings":"AAEE;EACE;ECAF;EACA;EACA;EDAE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAIN;ECzBA;EACA;EACA;EDyBE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIJ;ECvGF;EACA;EACA;;ADwGI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAKN;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;AAEF;EACE","file":"posts.css"}

BIN
public/css/jumpforward.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 19" x="0" y="0" width="19" height="19"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-width:2px;}</style></defs><title>2</title><g id="jumpforward"><path class="cls-1" d="M32.1,2.3L27.8,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-1" d="M34.8,2.3L30.5,4.5V0.2Z" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.9,2.3a8.15,8.15,0,0,0-8.2,8.1h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M21.8,10a8.15,8.15,0,0,0,8.1,8.2h0" transform="translate(-20.7 -0.2)"/><path class="cls-2" d="M29.5,18.2a8.15,8.15,0,0,0,8.2-8.1h0" transform="translate(-20.7 -0.2)"/></g></svg>

After

Width:  |  Height:  |  Size: 718 B

View File

@@ -0,0 +1 @@
.mejs-airplay-button>button,.mejs__airplay-button>button{background:url(airplay.svg) no-repeat 0 4px}.mejs-airplay-button>button .fill,.mejs__airplay-button>button .fill{fill:#fff}.mejs-airplay-button>button.active .fill,.mejs__airplay-button>button.active .fill{fill:#66a8cc}.mejs-chromecast-button>button,.mejs__chromecast-button>button{--disconnected-color:#fff;background:none;display:inline-block}.mejs-chromecast-container,.mejs__chromecast-container{background:#000;color:#fff;font-size:10px;left:0;padding:5px;position:absolute;top:0;z-index:1}.mejs-chromecast-layer>img,.mejs__chromecast-layer>img{left:0;position:absolute;top:0;z-index:0}.mejs-chromecast-icon,.mejs__chromecast-icon{background:url(chromecast.svg) no-repeat 0 0;display:inline-block;height:14px;margin-right:5px;width:17px}.mejs-contextmenu,.mejs__contextmenu{background:#fff;border:1px solid #999;border-radius:4px;left:0;padding:10px;position:absolute;top:0;width:150px;z-index:1}.mejs-contextmenu-separator,.mejs__contextmenu-separator{background:#333;font-size:0;height:1px;margin:5px 6px}.mejs-contextmenu-item,.mejs__contextmenu-item{color:#333;cursor:pointer;font-size:12px;padding:4px 6px}.mejs-contextmenu-item:hover,.mejs__contextmenu-item:hover{background:#2c7c91;color:#fff}.mejs-jump-forward-button>button,.mejs__jump-forward-button>button{background:url(jumpforward.svg) no-repeat 0 0;color:#fff;font-size:8px;line-height:normal;position:relative}.mejs-skip-back-button>button,.mejs__skip-back-button>button{background:url(skipback.svg) no-repeat 0 -1px;color:#fff;font-size:8px;line-height:normal;position:relative}

BIN
public/css/skipback.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 410 B

17
public/css/skipback.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-290 291 19 19" style="enable-background:new -290 291 19 19;" xml:space="preserve">
<style type="text/css">
.st0{fill:#fff;}
.st1{fill:none;stroke:#fff;stroke-width:2;}
</style>
<title>2</title>
<g id="jumpforward">
<path class="st0" d="M-278.6,291v4.3l-4.3-2.2L-278.6,291z"/>
<path class="st0" d="M-281.3,291v4.3l-4.3-2.2L-281.3,291z"/>
<path class="st1" d="M-272.5,301.2L-272.5,301.2C-272.5,301.2-272.5,301.2-272.5,301.2c0-4.5-3.7-8.1-8.2-8.1"/>
<path class="st1" d="M-280.7,309L-280.7,309C-280.7,309-280.7,309-280.7,309c4.5,0,8.1-3.7,8.1-8.2"/>
<path class="st1" d="M-288.5,300.9L-288.5,300.9C-288.5,300.9-288.5,300.9-288.5,300.9c0,4.5,3.7,8.1,8.2,8.1"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 948 B

179
public/css/style.css vendored
View File

@@ -396,13 +396,26 @@
display: flex;
justify-content: space-between;
}
.tabs.fit_content {
width: fit-content;
}
.tabs .box_header {
padding-right: 20px;
}
.tabs .box_header:last-of-type {
padding-right: 0;
}
.tabs .box_header span {
color: #999;
border-bottom: none;
cursor: pointer;
padding-bottom: 3px;
}
.tabs .box_header.extra-small span {
font-size: 12px;
}
.tabs .box_header.small span {
font-size: 13px;
font-size: 14px;
}
.tabs .box_header.medium span {
font-size: 18px;
@@ -410,6 +423,7 @@
.tabs .box_header.active span, .tabs .box_header:hover span {
color: #0f259d;
border-bottom: 3px solid #0f259d;
padding-bottom: 0;
}
.tab_content {
@@ -432,17 +446,18 @@
height: 100%;
object-fit: cover;
}
.blog .post h2 {
.blog .post .post_title {
margin: 0;
}
.blog .post h2 a {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
.blog .post .post_title a {
text-decoration: none;
display: inline-block;
color: #1a1a1a;
}
.blog .post .col-8 {
padding: 0;
@@ -461,6 +476,16 @@
overflow: hidden;
white-space: nowrap;
}
.blog .post .disabled {
color: #A1A1A1;
cursor: not-allowed;
}
.blog .post .post_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.sidebar .box {
width: calc(100% - 38px);
@@ -641,6 +666,40 @@
white-space: nowrap;
}
.bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
}
.bread_crumb li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
}
.bread_crumb li a {
color: #666;
text-decoration: none;
}
.bread_crumb li i {
font-size: 8px;
}
.page_title {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_container {
padding: 40px 135px;
background-color: #f9f9f9;
@@ -651,30 +710,9 @@
margin-right: 50px;
}
.post_container .bread_crumb {
height: 38px;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #efefef;
padding-bottom: 18px;
}
.post_container .bread_crumb li {
float: left;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
text-align: left;
color: #666;
margin-right: 5px;
}
.post_container .bread_crumb li a {
color: #666;
text-decoration: none;
}
.post_container .bread_crumb li i {
font-size: 8px;
}
.post_container .post_tags {
margin: 0;
padding: 0;
@@ -699,15 +737,6 @@
text-decoration: none;
text-transform: uppercase;
}
.post_container h1 {
margin: 17px 0;
font-family: Montserrat, serif;
font-size: 40px;
font-weight: 600;
line-height: 1.15;
text-align: left;
color: #282828;
}
.post_container .post_body {
width: 100%;
font-family: Nunito, serif;
@@ -792,6 +821,88 @@
color: #ED1C24;
}
#schedule a {
text-decoration: none;
}
#schedule .program-title {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
}
#schedule .program-times {
display: block;
height: 30px;
font-family: Nunito, serif;
font-size: 12px;
font-weight: 500;
line-height: 3.17;
letter-spacing: normal;
text-align: left;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#schedule .no-results, #schedule .loading {
font-family: Montserrat, serif;
font-size: 14px;
font-weight: 600;
line-height: 1.43;
color: #1a1a1a;
text-align: center;
padding: 20px;
}
#schedule .no-results span, #schedule .loading span {
margin-right: 10px;
}
.page_container {
background-color: #fff;
width: calc(100% - 270px);
padding: 32px 135px;
}
.page_container.grey-background {
background-color: #f9f9f9;
}
.page_body {
font-family: Nunito, serif;
font-size: 15px;
line-height: 1.6;
color: #282828;
}
.action_button {
text-decoration: none;
color: #282828;
}
.input_container {
border: 1px solid #efefef;
border-radius: 5px;
background-color: #fff;
display: flex;
height: 48px;
font-family: Montserrat, serif;
font-size: 16px;
line-height: 1.25;
color: #1a1a1a;
}
.input_container .input_prefix, .input_container .input_postfix {
padding: 13px 10px 13px 15px;
}
.input_container input {
border: none;
padding: 13px 5px;
font-family: Montserrat, serif;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
color: #1a1a1a;
}
.footer_container {
font-family: Montserrat, serif;
font-size: 14px;

File diff suppressed because one or more lines are too long