Skip to content

Commit

Permalink
Merge pull request #20 from DilwoarH/single-view-mode
Browse files Browse the repository at this point in the history
Single View mode
  • Loading branch information
DilwoarH authored Mar 12, 2019
2 parents d5d61f5 + a1a4551 commit 57b534b
Show file tree
Hide file tree
Showing 32 changed files with 369 additions and 51 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
useful summary for people upgrading their application, not a replication
of the commit log.

## 5.0.0
- Adds Single View mode for mosques which do not want changing views.

## 4.0.1
- Adds background to hadith of the day text.
- Removes alt text for logo so that it does not show the text "logo" when there is no internet.
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mosque-screen",
"version": "4.0.1",
"version": "5.0.0",
"private": true,
"main": "public/electron.js",
"homepage": "https://mosque-screen.netlify.com",
Expand Down
22 changes: 15 additions & 7 deletions src/Slider/Slider.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { Component } from 'react';
import './Slider.css';
import View1 from '../View 1/View1';
import View2 from '../View 2/View2';
import View3 from '../View 3/View3';
import View4 from '../View 4/View4';
import View6 from '../View 6/View6';
import View1 from '../Views/View 1/View1';
import View2 from '../Views/View 2/View2';
import View3 from '../Views/View 3/View3';
import View4 from '../Views/View 4/View4';
import View6 from '../Views/View 6/View6';
import SingleView from '../Views/SingleView/SingleView';
import GoogleSlides from '../GoogleSlides/GoogleSlides';
import config from '../config.json';
import BlackoutPeriods from '../_components/blackout-periods/blackout-periods';
Expand All @@ -15,10 +16,13 @@ class Slider extends Component {
super(props);
var _appConfig = new AppConfig();
this.state = {
currentSlide: this.getInitialSlide(),
currentSlide:
_appConfig.get('sliderMode') === 'single-view'
? this.getSingleView()
: this.getInitialSlide(),
slides: this.getSlides(),
currentPosition: 0,
sliderMode: config.sliderMode || 'slider',
sliderMode: _appConfig.get('sliderMode') || 'slider',
slideTimeout: _appConfig.get('sliderTimeout') || 8000,
googleSlides: {
slide: <GoogleSlides />,
Expand All @@ -34,6 +38,10 @@ class Slider extends Component {
return <View1 />;
}

getSingleView() {
return <SingleView />;
}

getSlides() {
return [<View1 />, <View2 />, <View3 />, <View4 />, <View6 />];
}
Expand Down
File renamed without changes.
67 changes: 67 additions & 0 deletions src/Views/SingleView/SingleView.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React, { Component } from 'react';
import './SingleView.css';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import Date from '../../_components/date/date';
import BuildNumber from '../../_components/build-number/build-number';
import SunriseAndZawwal from '../../_components/sunrise-and-zawwal/sunrise-and-zawwal';
import AdditionalMessage from '../../_components/additional-message/additional-message';
import AppConfig from '../../_components/app-config/app-config';
import Branding from '../../_components/branding/branding';
import PrayerTimesSingleView from '../../_components/prayer-times-single-view/prayer-times-single-view';
import JummahTimes from '../../_components/jummah-times/jummah-times';

class SingleView extends Component {
constructor(props) {
super(props);
this.state = {
_appConfig: new AppConfig()
};
}

componentWillUnmount() {
this.setState(() => ({
_appConfig: null
}));
}

render() {
return (
<div className="SingleView">
<div className="row">
<Logo />
</div>
<div className="row">
<div className="col-12 col-md-6">
<div className="row">
<Clock />
</div>
<div className="row">
<Date />
</div>
<div className="row">
<AdditionalMessage
message={this.state._appConfig.get('SingleView_Message')}
/>
</div>
</div>
<div className="col-12 col-md-6">
<div className="row">
<PrayerTimesSingleView />
</div>
<div className="row">
<SunriseAndZawwal />
</div>
<div className="row">
<JummahTimes />
</div>
</div>
</div>
<BuildNumber />
<Branding />
</div>
);
}
}

export default SingleView;
9 changes: 9 additions & 0 deletions src/Views/SingleView/SingleView.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import SingleView from './SingleView';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<SingleView />, div);
ReactDOM.unmountComponentAtNode(div);
});
File renamed without changes.
18 changes: 9 additions & 9 deletions src/View 1/View1.js → src/Views/View 1/View1.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { Component } from 'react';
import './View1.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import PrayerTimes from '../_components/prayer-times/prayer-times';
import Date from '../_components/date/date';
import BuildNumber from '../_components/build-number/build-number';
import SunriseAndZawwal from '../_components/sunrise-and-zawwal/sunrise-and-zawwal';
import AdditionalMessage from '../_components/additional-message/additional-message';
import AppConfig from '../_components/app-config/app-config';
import Branding from '../_components/branding/branding';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import PrayerTimes from '../../_components/prayer-times/prayer-times';
import Date from '../../_components/date/date';
import BuildNumber from '../../_components/build-number/build-number';
import SunriseAndZawwal from '../../_components/sunrise-and-zawwal/sunrise-and-zawwal';
import AdditionalMessage from '../../_components/additional-message/additional-message';
import AppConfig from '../../_components/app-config/app-config';
import Branding from '../../_components/branding/branding';

class View1 extends Component {
constructor(props) {
Expand Down
File renamed without changes.
File renamed without changes.
18 changes: 9 additions & 9 deletions src/View 2/View2.js → src/Views/View 2/View2.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { Component } from 'react';
import './View2.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import PrayerTimes from '../_components/prayer-times/prayer-times';
import Date from '../_components/date/date';
import BuildNumber from '../_components/build-number/build-number';
import JummahTimes from '../_components/jummah-times/jummah-times';
import AdditionalMessage from '../_components/additional-message/additional-message';
import AppConfig from '../_components/app-config/app-config';
import Branding from '../_components/branding/branding';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import PrayerTimes from '../../_components/prayer-times/prayer-times';
import Date from '../../_components/date/date';
import BuildNumber from '../../_components/build-number/build-number';
import JummahTimes from '../../_components/jummah-times/jummah-times';
import AdditionalMessage from '../../_components/additional-message/additional-message';
import AppConfig from '../../_components/app-config/app-config';
import Branding from '../../_components/branding/branding';

class View2 extends Component {
constructor(props) {
Expand Down
File renamed without changes.
Empty file added src/Views/View 3/View3.css
Empty file.
16 changes: 8 additions & 8 deletions src/View 3/View3.js → src/Views/View 3/View3.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { Component } from 'react';
import './View3.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import Date from '../_components/date/date';
import BuildNumber from '../_components/build-number/build-number';
import NextJamahTime from '../_components/next-jamah-time/next-jamah-time';
import AdditionalMessage from '../_components/additional-message/additional-message';
import AppConfig from '../_components/app-config/app-config';
import Branding from '../_components/branding/branding';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import Date from '../../_components/date/date';
import BuildNumber from '../../_components/build-number/build-number';
import NextJamahTime from '../../_components/next-jamah-time/next-jamah-time';
import AdditionalMessage from '../../_components/additional-message/additional-message';
import AppConfig from '../../_components/app-config/app-config';
import Branding from '../../_components/branding/branding';

class View3 extends Component {
constructor(props) {
Expand Down
File renamed without changes.
File renamed without changes.
10 changes: 5 additions & 5 deletions src/View 4/View4.js → src/Views/View 4/View4.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { Component } from 'react';
import './View4.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import BuildNumber from '../_components/build-number/build-number';
import PrayerTimesWeekAhead from '../_components/prayer-times-week-ahead/prayer-times-week-ahead';
import Branding from '../_components/branding/branding';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import BuildNumber from '../../_components/build-number/build-number';
import PrayerTimesWeekAhead from '../../_components/prayer-times-week-ahead/prayer-times-week-ahead';
import Branding from '../../_components/branding/branding';

class View4 extends Component {
render() {
Expand Down
File renamed without changes.
File renamed without changes.
8 changes: 4 additions & 4 deletions src/View 5/View5.js → src/Views/View 5/View5.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
import './View5.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import BuildNumber from '../_components/build-number/build-number';
import Branding from '../_components/branding/branding';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import BuildNumber from '../../_components/build-number/build-number';
import Branding from '../../_components/branding/branding';

class View5 extends Component {
componentWillMount() {
Expand Down
File renamed without changes.
File renamed without changes.
10 changes: 5 additions & 5 deletions src/View 6/View6.js → src/Views/View 6/View6.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, { Component } from 'react';
import './View6.css';
import Logo from '../_components/logo/logo';
import Clock from '../_components/clock/clock';
import BuildNumber from '../_components/build-number/build-number';
import Branding from '../_components/branding/branding';
import HadithOfTheDay from '../_components/hadith-of-the-day/hadith-of-the-day';
import Logo from '../../_components/logo/logo';
import Clock from '../../_components/clock/clock';
import BuildNumber from '../../_components/build-number/build-number';
import Branding from '../../_components/branding/branding';
import HadithOfTheDay from '../../_components/hadith-of-the-day/hadith-of-the-day';

class View6 extends Component {
render() {
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion src/_components/blackout-periods/blackout-periods.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PrayerData from '../prayer-data/prayer-data';
import moment from 'moment/moment';
import View5 from '../../View 5/View5';
import View5 from '../../Views/View 5/View5';
import AppConfig from '../app-config/app-config';

class BlackoutPeriods extends Component {
Expand Down
8 changes: 8 additions & 0 deletions src/_components/branding/branding.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ class Branding extends Component {
secondary_colour: _appConfig.get('secondary_colour'),
primary_text_colour: _appConfig.get('primary_text_colour'),
secondary_text_colour: _appConfig.get('secondary_text_colour'),
prayer_time_highlight_colour: _appConfig.get(
'prayer_time_highlight_colour'
),
clock_background_colour: _appConfig.get('clock_background_colour')
};
}
Expand Down Expand Up @@ -60,6 +63,11 @@ class Branding extends Component {
.HadithOfTheDayWrapper {
color: ${this.state.primary_colour};
}
/* SINGLE VIEW PRAYER TIMES */
.PrayerTimesSingleView .nextJamahHighlight {
color: ${this.state.prayer_time_highlight_colour};
}
`;
}

Expand Down
Binary file added src/_components/logo/assets/ric-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
.PrayerTimesSingleViewWrapper {
width: 100%;
}

.PrayerTimesSingleView {
font-size: 3em;
text-align: right;
color: white;
margin-left: 60px;
padding-top: 50px;
width: 840px;
}

.PrayerTimesSingleView th {
font-weight: bolder;
font-size: 1em;
text-align: right;
}

.PrayerTimesSingleView th:last-child {
padding-left: 0px;
}

.PrayerTimesSingleView td,
.PrayerTimesSingleView th {
margin: 150px;
padding-bottom: 10px;
}

.PrayerTimesSingleView th:first-child {
font-size: 1.2em;
text-align: left;
}

.PrayerTimesSingleView .mithl-text {
font-size: 0.5em;
max-width: 100px;
}

.PrayerTimesSingleView td {
min-width: 100px;
font-size: 1.3em;
}

.PrayerTimesSingleView td:nth-child(3) {
font-weight: bolder;
}

.PrayerTimesSingleView td:last-child.normal-text {
font-weight: normal;
}

@media only screen and (max-width: 600px) {
.PrayerTimesSingleView {
font-size: 1em;
margin-left: 0;
width: 100%;
}

.PrayerTimesSingleView th:last-child {
padding-left: 0;
}

.PrayerTimesSingleView td {
min-width: 10px;
}
}

@media only screen and (min-width: 600px) and (max-width: 1024px) {
.PrayerTimesSingleView {
font-size: 2em;
margin-left: 0;
width: 100%;
padding: 30px;
}

.PrayerTimesSingleView th:last-child {
padding-left: 0;
}

.PrayerTimesSingleView td {
min-width: 10px;
}
}

.PrayerTimesSingleView .nextJamahHighlight {
font-weight: bolder;
color: #ff3995;
}
Loading

0 comments on commit 57b534b

Please sign in to comment.