Skip to content

Commit

Permalink
feat: #1055 (cont) + dark + triggers + cal-mobile;
Browse files Browse the repository at this point in the history
  • Loading branch information
@migbash
migbash committed Feb 28, 2023
1 parent c085fd4 commit 793a04d
Show file tree
Hide file tree
Showing 11 changed files with 196 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,7 +183,7 @@ FONT COLOURS
color: var(--secondary);
}
.color-grey {
color: var(--grey);
color: var(--grey) !important;
}
.color-red {
color: var(--red);
Expand Down
124 changes: 111 additions & 13 deletions src/lib/components/page/home/livescores-v2/Livescores_Calendar_Table.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,21 @@ COMPONENT JS (w/ TS)
//#region ➤ Svelte/SvelteKit Imports
// IMPORTS GO HERE
import { browser } from '$app/environment';
//#endregion ➤ Svelte/SvelteKit Imports
import { page } from '$app/stores';
//#endregion ➤ Svelte/SvelteKit Imports
//#region ➤ Project Custom Imports
// IMPORTS GO HERE
import { sessionStore } from '$lib/store/session';
// IMPORTS GO HERE
import { MONTH_NAMES_ABBRV, WEEK_DAYS_ABBRV } from '$lib/utils/dates';
import { userBetarenaSettings } from '$lib/store/user-settings';
// IMPORTS GO HERE
import { monthNames, WEEK_DAYS_ABBRV_2 } from '$lib/utils/dates';
// IMPORTS GO HERE
import { dlog, LV2_W_H_TAG } from '$lib/utils/debug';
//#endregion ➤ Project Custom Imports
import { viewport_change } from '$lib/utils/platform-functions';
import type { B_LS2_T } from 'betarena-types/types/livescores-v2';
import { onMount } from 'svelte';
//#endregion ➤ Project Custom Imports
//#region ➤ Firebase Imports
// IMPORTS GO HERE
Expand All @@ -31,7 +36,9 @@ COMPONENT JS (w/ TS)
//#region ➤ Assets Imports
// IMPORTS GO HERE
import vec_arrow_left_dark from './assets/arrow-left-dark.svg';
import vec_arrow_left from './assets/arrow-left.svg';
import vec_arrow_right_dark from './assets/arrow-right-dark.svg';
import vec_arrow_right from './assets/arrow-right.svg';
//#endregion ➤ Assets Imports
Expand All @@ -53,6 +60,8 @@ COMPONENT JS (w/ TS)
let tempDate = $sessionStore.livescoreNowSelectedDate;
const _currentDate = new Date()
let WIDGET_T_DATA: B_LS2_T = $page.data?.LIVESCORES_V2_T_DATA
//#endregion ➤ [VARIABLES]
//#region ➤ [METHODS]
Expand Down Expand Up @@ -126,8 +135,28 @@ COMPONENT JS (w/ TS)
}
// ~~~~~~~~~~~~~~~~~~~~~
// VIEWPORT CHANGES
// ~~~~~~~~~~~~~~~~~~~~~
// VIEWPORT CHANGES | IMPORTANT
// ~~~~~~~~~~~~~~~~~~~~~
const TABLET_VIEW = 1160;
const MOBILE_VIEW = 475;
let mobileExclusive,
tabletExclusive: boolean = false;
onMount(async () => {
[tabletExclusive, mobileExclusive] =
viewport_change(TABLET_VIEW, MOBILE_VIEW);
window.addEventListener(
'resize',
function () {
[tabletExclusive, mobileExclusive] =
viewport_change(
TABLET_VIEW,
MOBILE_VIEW
);
}
);
});
//#endregion ➤ [METHODS]
Expand Down Expand Up @@ -201,7 +230,13 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
=================-->

<div
id="calendar-popup">
id="background-area-close-inner"
on:click={() => $sessionStore.livescoreShowCalendar = false}
/>

<div
id="calendar-popup"
class:dark-background-1={$userBetarenaSettings.theme == 'Dark'}>
<!--
[ℹ] calendar select month (top-row)
-->
Expand All @@ -211,7 +246,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
row-space-out
">
<img
src="{vec_arrow_left}"
src="{$userBetarenaSettings.theme == 'Dark' ? vec_arrow_left_dark : vec_arrow_left}"
alt=""
on:click={() => monthChange(-1)}
class="cursor-pointer"
Expand All @@ -222,10 +257,11 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
w-500
color-black-2
">
{MONTH_NAMES_ABBRV[tempDate.getMonth()]}
{WIDGET_T_DATA?.months?.months[monthNames[tempDate.getMonth()]]}
{tempDate.getFullYear()}
</p>
<img
src="{vec_arrow_right}"
src="{$userBetarenaSettings.theme == 'Dark' ? vec_arrow_right_dark : vec_arrow_right}"
alt=""
on:click={() => monthChange(1)}
class="cursor-pointer"
Expand All @@ -241,7 +277,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
[ℹ] week days abbrev
-->
<tr>
{#each WEEK_DAYS_ABBRV as day}
{#each WEEK_DAYS_ABBRV_2 as day}
<th>
<p
class="
Expand Down Expand Up @@ -287,6 +323,34 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/

<style>
#background-area-close-inner {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 999998;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
div#calendar-popup {
/* p */
position: fixed;
z-index: 999999;
bottom: 20px;
right: 0;
left: 0;
/* s */
width: fit-content;
margin: auto;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
border-radius: 8px;
} div#calendar-popup div#calendar-date-select {
padding: 16px;
border-bottom: 1px solid var(--grey-color);
}
div#calendar-inner table {
padding: 16px;
}
Expand All @@ -312,10 +376,44 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
color: var(--primary);
}
td.notViewMonth {
color: var(--grey-color);
color: var(--grey-color) !important;
}
@media only screen and (min-width: 475px) {
div#calendar-popup {
position: absolute;
top: 105%;
right: 0;
bottom: unset;
left: unset;
background: #FFFFFF;
z-index: 2;
}
#background-area-close-inner {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
background-color: transparent;
}
}
div#calendar-popup.dark-background-1 {
background-color: var(--dark-theme-1-shade) !important;
}
.dark-background-1 div#calendar-inner table tr td:hover {
background-color: var(--dark-theme-1);
border-radius: 60px;
color: var(--white);
}
@media only screen and (min-width: 726px) and (max-width: 1000px) {
.dark-background-1 td.notViewMonth {
color: var(--dark-theme-1-2-shade) !important;
}
</style>
19 changes: 12 additions & 7 deletions src/lib/components/page/home/livescores-v2/Livescores_Fixture_Row.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
row-space-out
fixture-row
"
class:dark-background-1={$userBetarenaSettings.theme == 'Dark'}
>
<!--
[ℹ] fixture left-side container
Expand Down Expand Up @@ -170,7 +171,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
no-wrap
s-14
color-black
color-black-2
"
class:color-grey={[
'FT',
Expand Down Expand Up @@ -237,7 +238,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
<p
class="
s-14
color-black
color-black-2
w-500
m-r-8
odds-view
Expand Down Expand Up @@ -287,7 +288,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
<p
class="
s-14
color-black
color-black-2
w-500
m-r-8
odds-view
Expand Down Expand Up @@ -364,7 +365,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
s-12
w-500
color-black
color-black-2
"
>
TIP
Expand Down Expand Up @@ -415,7 +416,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
s-14
w-500
color-black
color-black-2
"
class:color-grey={FIXTURE_D
?.teams?.home
Expand All @@ -437,7 +438,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
s-14
w-500
color-black
color-black-2
"
class:color-grey={FIXTURE_D
?.teams?.away
Expand Down Expand Up @@ -474,7 +475,7 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
}
div.fixture-teams-box {
border-left: 1px #e6e6e6 solid;
border-left: 1px var(--grey-color) solid;
padding-left: 8px;
} div.fixture-teams-box p.odds-view {
overflow: hidden;
Expand Down Expand Up @@ -504,4 +505,8 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
}
}
.dark-background-1 div.fixture-teams-box {
border-left: 1px var(--dark-theme-1-shade) solid;
}
</style>
13 changes: 12 additions & 1 deletion src/lib/components/page/home/livescores-v2/Livescores_Main.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ COMPONENT JS (w/ TS)
//#endregion ➤ Assets Imports
import WidgetTitle from '$lib/components/Widget-Title.svelte';
import { userBetarenaSettings } from '$lib/store/user-settings';
import { FIXTURE_LIVE_TIME_OPT } from 'betarena-types/src/api/sportmonks';
import LivescoresFixtureRow from './Livescores_Fixture_Row.svelte';
import LivescoresTopRow from './Livescores_Top_Row.svelte';
Expand Down Expand Up @@ -313,7 +314,8 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
/>

<div
class="widget-component">
class="widget-component"
class:dark-background-1={$userBetarenaSettings.theme == 'Dark'}>

<LivescoresTopRow
{numOfFixtures}
Expand Down Expand Up @@ -369,6 +371,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
s-16
w-500
color-black-2
">
{league?.league_name}
</p>
Expand Down Expand Up @@ -419,6 +422,7 @@ NOTE: [HINT] use (CTRL+SPACE) to select a (class) (id) style
class="
s-16
w-500
color-black-2
">
{league?.league_name}
</p>
Expand Down Expand Up @@ -489,4 +493,11 @@ NOTE: [HINT] auto-fill/auto-complete iniside <style> for var() values by typing/
@media only screen and (min-width: 726px) and (max-width: 1000px) {
}
/* DARK MODE */
.dark-background-1 div.league-group,
.dark-background-1 div#show-more-box {
border-top: 1px solid var(--dark-theme-1-shade);
}
</style>
Loading

0 comments on commit 793a04d

Please sign in to comment.