Skip to content

Commit 5c4f9c6

Browse files
jstnmthwjstnmthw
committed
Frontend updates to Video.vue, Homepage.vue and stylesheets.
1 parent 822a4a7 commit 5c4f9c6

File tree

8 files changed

+507
-86
lines changed

8 files changed

+507
-86
lines changed

‎public/css/app.css

+377-13
Large diffs are not rendered by default.

‎public/js/app.js

+81-51
Original file line numberDiff line numberDiff line change
@@ -2020,6 +2020,12 @@ __webpack_require__.r(__webpack_exports__);
20202020
//
20212021
//
20222022
//
2023+
//
2024+
//
2025+
//
2026+
//
2027+
//
2028+
//
20232029
/* harmony default export */ __webpack_exports__["default"] = ({
20242030
data: function data() {
20252031
return {
@@ -2945,6 +2951,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
29452951
//
29462952
//
29472953
//
2954+
//
29482955

29492956

29502957

@@ -3415,7 +3422,8 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
34153422
_this.$Progress.finish();
34163423

34173424
_this.data = response.data;
3418-
_this.loaded = true; // $('#video')[0].contentWindow.location.replace(this.data.embed)
3425+
_this.loaded = true;
3426+
$('#video')[0].contentWindow.location.replace(_this.data.embed);
34193427

34203428
_this.getRelated(12);
34213429
})["catch"](function (error) {
@@ -23504,7 +23512,10 @@ var render = function() {
2350423512
"a",
2350523513
{ attrs: { href: "/my/subscriptions" } },
2350623514
[
23507-
_c("ion-icon", { attrs: { name: "mail-outline" } }),
23515+
_c("ion-icon", {
23516+
staticClass: "text-lilac",
23517+
attrs: { name: "mail-outline" }
23518+
}),
2350823519
_vm._v("Subscriptions\n "),
2350923520
_c("span", { staticClass: "counter counter-subscriptions" })
2351023521
],
@@ -23517,7 +23528,10 @@ var render = function() {
2351723528
"a",
2351823529
{ attrs: { href: "/my/watch-history" } },
2351923530
[
23520-
_c("ion-icon", { attrs: { name: "sync-circle-outline" } }),
23531+
_c("ion-icon", {
23532+
staticClass: "text-lilac",
23533+
attrs: { name: "sync-circle-outline" }
23534+
}),
2352123535
_vm._v("Watch History\n ")
2352223536
],
2352323537
1
@@ -23531,8 +23545,11 @@ var render = function() {
2353123545
"a",
2353223546
{ attrs: { href: "/best/weekly" } },
2353323547
[
23534-
_c("ion-icon", { attrs: { name: "trophy-outline" } }),
23535-
_vm._v("Best Videos\n ")
23548+
_c("ion-icon", {
23549+
staticClass: "text-lilac",
23550+
attrs: { name: "trophy-outline" }
23551+
}),
23552+
_vm._v("Best\n Videos\n ")
2353623553
],
2353723554
1
2353823555
)
@@ -23543,8 +23560,11 @@ var render = function() {
2354323560
"a",
2354423561
{ attrs: { href: "/most-viewed/weekly" } },
2354523562
[
23546-
_c("ion-icon", { attrs: { name: "eye-outline" } }),
23547-
_vm._v("Most Viewed\n ")
23563+
_c("ion-icon", {
23564+
staticClass: "text-lilac",
23565+
attrs: { name: "eye-outline" }
23566+
}),
23567+
_vm._v("Most\n Viewed\n ")
2354823568
],
2354923569
1
2355023570
)
@@ -23555,8 +23575,11 @@ var render = function() {
2355523575
"a",
2355623576
{ attrs: { href: "/most-commented/weekly" } },
2355723577
[
23558-
_c("ion-icon", { attrs: { name: "chatbox-outline" } }),
23559-
_vm._v("Most Commented\n ")
23578+
_c("ion-icon", {
23579+
staticClass: "text-lilac",
23580+
attrs: { name: "chatbox-outline" }
23581+
}),
23582+
_vm._v("Most\n Commented\n ")
2356023583
],
2356123584
1
2356223585
)
@@ -23567,7 +23590,10 @@ var render = function() {
2356723590
"a",
2356823591
{ attrs: { href: "/videos/recommended" } },
2356923592
[
23570-
_c("ion-icon", { attrs: { name: "thumbs-up-outline" } }),
23593+
_c("ion-icon", {
23594+
staticClass: "text-lilac",
23595+
attrs: { name: "thumbs-up-outline" }
23596+
}),
2357123597
_vm._v("Recommended\n ")
2357223598
],
2357323599
1
@@ -24238,10 +24264,7 @@ var render = function() {
2423824264
_vm._v(" "),
2423924265
_c(
2424024266
"span",
24241-
{
24242-
staticClass: "pr-2 position-relative",
24243-
staticStyle: { opacity: "0.5" }
24244-
},
24267+
{ staticClass: "pr-2 position-relative text-sage" },
2424524268
[
2424624269
_c("ion-icon", {
2424724270
staticStyle: { top: "3px" },
@@ -24569,53 +24592,59 @@ var render = function() {
2456924592
[
2457024593
_c("top-ad-banner"),
2457124594
_vm._v(" "),
24572-
_c("page-header", {
24573-
directives: [
24574-
{
24575-
name: "show",
24576-
rawName: "v-show",
24577-
value: _vm.loaded,
24578-
expression: "loaded"
24579-
}
24580-
],
24581-
attrs: { title: "Most Viewed Videos", icon: "eye" }
24582-
}),
24583-
_vm._v(" "),
2458424595
_c(
2458524596
"div",
2458624597
{
2458724598
staticClass:
24588-
"d-flex justify-content-between align-items-center mb-3"
24599+
"d-flex justify-content-between align-items-top mb-3"
2458924600
},
2459024601
[
2459124602
_c(
24592-
"h3",
24593-
{
24594-
directives: [
24603+
"div",
24604+
[
24605+
_c("page-header", {
24606+
directives: [
24607+
{
24608+
name: "show",
24609+
rawName: "v-show",
24610+
value: _vm.loaded,
24611+
expression: "loaded"
24612+
}
24613+
],
24614+
attrs: { title: "Hot Videos", icon: "flame" }
24615+
}),
24616+
_vm._v(" "),
24617+
_c(
24618+
"h3",
2459524619
{
24596-
name: "show",
24597-
rawName: "v-show",
24598-
value: !_vm.loaded,
24599-
expression: "!loaded"
24600-
}
24601-
],
24602-
staticClass: "text-center"
24603-
},
24604-
[_vm._v("Loading API")]
24620+
directives: [
24621+
{
24622+
name: "show",
24623+
rawName: "v-show",
24624+
value: !_vm.loaded,
24625+
expression: "!loaded"
24626+
}
24627+
],
24628+
staticClass: "text-center"
24629+
},
24630+
[_vm._v("Loading API")]
24631+
),
24632+
_vm._v(" "),
24633+
_vm.loaded
24634+
? _c("div", { staticClass: "text-sage" }, [
24635+
_vm._v(
24636+
"\n Showing: " +
24637+
_vm._s(_vm.uf_num(_vm.videos.current_page)) +
24638+
" of\n " +
24639+
_vm._s(_vm.uf_num(_vm.videos.last_page)) +
24640+
"\n "
24641+
)
24642+
])
24643+
: _vm._e()
24644+
],
24645+
1
2460524646
),
2460624647
_vm._v(" "),
24607-
_vm.loaded
24608-
? _c("div", [
24609-
_vm._v(
24610-
"\n Showing: " +
24611-
_vm._s(_vm.uf_num(_vm.videos.current_page)) +
24612-
" of\n " +
24613-
_vm._s(_vm.uf_num(_vm.videos.last_page)) +
24614-
"\n "
24615-
)
24616-
])
24617-
: _vm._e(),
24618-
_vm._v(" "),
2461924648
_c("div", [
2462024649
_c(
2462124650
"select",
@@ -24950,6 +24979,7 @@ var render = function() {
2495024979
_vm.data.views
2495124980
? _c(
2495224981
"div",
24982+
{ staticClass: "text-muted" },
2495324983
[
2495424984
_c("ion-icon", {
2495524985
staticStyle: { position: "relative", top: "3px" },

‎resources/js/components/MainSidebar.vue

+12-6
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,40 @@
44
<ul class="list-unstyled pl-4">
55
<li>
66
<a href="/my/subscriptions">
7-
<ion-icon name="mail-outline"></ion-icon>Subscriptions
7+
<ion-icon class="text-lilac" name="mail-outline"></ion-icon
8+
>Subscriptions
89
<span class="counter counter-subscriptions"></span>
910
</a>
1011
</li>
1112
<li>
1213
<a href="/my/watch-history">
13-
<ion-icon name="sync-circle-outline"></ion-icon>Watch History
14+
<ion-icon class="text-lilac" name="sync-circle-outline"></ion-icon
15+
>Watch History
1416
</a>
1517
</li>
1618
<div class="line"></div>
1719
<li>
1820
<a href="/best/weekly">
19-
<ion-icon name="trophy-outline"></ion-icon>Best Videos
21+
<ion-icon class="text-lilac" name="trophy-outline"></ion-icon>Best
22+
Videos
2023
</a>
2124
</li>
2225
<li>
2326
<a href="/most-viewed/weekly">
24-
<ion-icon name="eye-outline"></ion-icon>Most Viewed
27+
<ion-icon class="text-lilac" name="eye-outline"></ion-icon>Most
28+
Viewed
2529
</a>
2630
</li>
2731
<li>
2832
<a href="/most-commented/weekly">
29-
<ion-icon name="chatbox-outline"></ion-icon>Most Commented
33+
<ion-icon class="text-lilac" name="chatbox-outline"></ion-icon>Most
34+
Commented
3035
</a>
3136
</li>
3237
<li>
3338
<a href="/videos/recommended">
34-
<ion-icon name="thumbs-up-outline"></ion-icon>Recommended
39+
<ion-icon class="text-lilac" name="thumbs-up-outline"></ion-icon
40+
>Recommended
3541
</a>
3642
</li>
3743
</ul>

‎resources/js/components/VideoListItem.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<h5 class="video-title mt-2 mb-1">
2424
<router-link :to="'/videos/' + data.id">{{ data.title }}</router-link>
2525
</h5>
26-
<span style="opacity: 0.5;" class="pr-2 position-relative">
26+
<span class="pr-2 position-relative text-sage">
2727
<ion-icon name="eye" style="top: 3px;"></ion-icon>
2828
{{ views }}
2929
</span>

‎resources/js/views/HomePage.vue

+12-11
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,18 @@
55
<main class="col-md-10">
66
<top-ad-banner></top-ad-banner>
77

8-
<page-header
9-
:title="'Most Viewed Videos'"
10-
icon="eye"
11-
v-show="loaded"
12-
></page-header>
13-
14-
<div class="d-flex justify-content-between align-items-center mb-3">
15-
<h3 class="text-center" v-show="!loaded">Loading API</h3>
16-
<div v-if="loaded">
17-
Showing: {{ uf_num(videos.current_page) }} of
18-
{{ uf_num(videos.last_page) }}
8+
<div class="d-flex justify-content-between align-items-top mb-3">
9+
<div>
10+
<page-header
11+
:title="'Hot Videos'"
12+
icon="flame"
13+
v-show="loaded"
14+
></page-header>
15+
<h3 class="text-center" v-show="!loaded">Loading API</h3>
16+
<div v-if="loaded" class="text-sage">
17+
Showing: {{ uf_num(videos.current_page) }} of
18+
{{ uf_num(videos.last_page) }}
19+
</div>
1920
</div>
2021
<div>
2122
<select

‎resources/js/views/Video.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="container bg-purple">
33
<div class="d-flex align-items-center mb-1">
44
<h3 class="mr-3 mb-1">{{ data.title }}</h3>
5-
<div v-if="data.views">
5+
<div v-if="data.views" class="text-muted">
66
<ion-icon name="eye" style="position: relative; top: 3px;"></ion-icon>
77
{{ views }}
88
<ion-icon
@@ -151,7 +151,7 @@ export default {
151151
this.data = response.data
152152
this.loaded = true
153153
154-
// $('#video')[0].contentWindow.location.replace(this.data.embed)
154+
$('#video')[0].contentWindow.location.replace(this.data.embed)
155155
156156
this.getRelated(12)
157157
})

‎resources/sass/_style.scss

+18-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ a,
4444
box-shadow: 0 0 0 0.2rem darken($lilac, 22%);
4545
}
4646
}
47+
.text-muted {
48+
color: $sage !important;
49+
}
4750
.form-control,
4851
.form-control:focus {
4952
background: $indigo;
@@ -61,7 +64,7 @@ a,
6164
.page-item {
6265
.page-link {
6366
font-weight: bold;
64-
color: $lilac;
67+
color: $white;
6568
background-color: lighten($purple, 10%);
6669
border: 1px solid $purple;
6770
&:focus {
@@ -225,6 +228,12 @@ a,
225228
min-height: 58px;
226229
.video-title {
227230
word-break: break-word;
231+
a {
232+
color: $lilac;
233+
&:hover {
234+
color: $white;
235+
}
236+
}
228237
}
229238
.liked {
230239
color: $green;
@@ -288,6 +297,14 @@ a,
288297
}
289298
}
290299
}
300+
.all-categories {
301+
a {
302+
color: $lilac;
303+
&:hover {
304+
color: $white;
305+
}
306+
}
307+
}
291308

292309
// Main site footer
293310
.main-footer {

‎resources/sass/_variables.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ $line-height-base: 1.6;
1515
$indigo: #20205b;
1616
$purple: #38388b;
1717
$lavendar: #5959cf;
18-
$lilac: #cacaee;
18+
$sage: #8f8fe9;
19+
$lilac: #cacaf1;
1920

2021
// Basic Colors
2122
$blue: #3490dc;
@@ -29,6 +30,8 @@ $cyan: #6cb2eb;
2930

3031
// Map custom colors
3132
$theme-colors: (
33+
'lilac': $lilac,
34+
'sage': $sage,
3235
'indigo': $indigo,
3336
'pink': $pink,
3437
'purple': $purple

0 commit comments

Comments
 (0)