diff --git a/UpNext.md b/UpNext.md index 7307077..9fcb79f 100644 --- a/UpNext.md +++ b/UpNext.md @@ -3,8 +3,10 @@ * Backend - Add Indexes: - "stations": 3ALPHA, STANOX, TIPLOC - "corpus": 3ALPHA, NLC, NLCDESC(TEXT) +* Backend - Tidy up nrcc messages. Remove `

` and `\n`. * Frontend - Implement paginated NRCC Notices as they take up lots of space. - Carousel: https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/ + - "Active Alerts" dropdown accordian? * Frontend - If Ferry Services Present - Load at bottom of screen. * Frontend - Decide what to do with Bus Services. * Frontend - Implement error pages - will need to look at including these on the proxy container too? diff --git a/static/board.html b/static/board.html index 9a7305a..17e613d 100644 --- a/static/board.html +++ b/static/board.html @@ -34,12 +34,15 @@ -
-

- Example NRCC Message Here... ... ... - NRCC Messages can sometimes be long, and sometimes - short so this must be accounted for. -

+
+
+ +

There are no active alerts

+ +
+

\nThe lifts are out of order between Platforms 1 & 2 and the station at Cardiff Central station.

","\nDisruption in the Bristol area due to a number of incidents. More details can be found in Latest Travel News.","\nBuses replace trains between Radyr and Cardiff Central. More details can be found in Latest Travel News.","\nPoor weather affecting services in Wales due to flooding on the railway More details can be found in Latest Travel News.","Poor weather affecting services across the South West of England. More details can be found in Latest Travel News +
+
@@ -58,6 +61,17 @@

Ferry Services

+ + + + + + + + + + +
OriginDest.Sch Arr.Exp Arr.Sch Dep.Exp Dep.
diff --git a/static/images/nav/alert_icon.svg b/static/images/nav/alert_icon.svg new file mode 100644 index 0000000..b06f301 --- /dev/null +++ b/static/images/nav/alert_icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + +image/svg+xmlOpenclipartWarning Notification2007-02-08T17:08:47Beveled yellow caution signhttp://openclipart.org/detail/3130/warning-notification-by-eastshoreseastshoresalertcautionclip artcliparticonimagemediapublic domainsvgwarning diff --git a/static/js/boards.js b/static/js/boards.js index 55d649f..6b7e37c 100644 --- a/static/js/boards.js +++ b/static/js/boards.js @@ -63,6 +63,19 @@ async function parseTime(string){ } // Sometimes the origin or destination names are undefined, need to catch that -async function parseName(){ +async function parseName() { return; +} + +// Display Alert Messages +async function displayAlerts() { + document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div. +} + +async function expandAlerts() { + return +} + +async function deflateAlerts() { + return } \ No newline at end of file diff --git a/static/styles/boards.css b/static/styles/boards.css index 25f5e7a..e27323b 100644 --- a/static/styles/boards.css +++ b/static/styles/boards.css @@ -1,3 +1,8 @@ +/* Hide when loading */ +.hide-when-loading { + display: none; +} + /* Main Notices: */ .main-notice { display: none; @@ -64,36 +69,65 @@ margin: 3px; } -#footer { +/* NRCC Notices */ +#alerts{ position: fixed; - bottom: 0; + width: 100%; + left: 0; + top: 0; +} + +#alerts_bar{ + position: absolute; + margin-top:50px; left: 0; width: 100%; height: 40px; - background-color: var(--overlay-color); + background-color: darkorange; + color: white; } -#footer img { - height: 35px; +#alert_icon{ + position: absolute; + left: 10px; + margin-top: 5px; + width: 30px; + height: 30px; } -.hide-when-loading { - display: none; -} - -/* NRCC Notices */ -#nrcc_notices { - margin-top: 60px; - font-size: 14px; -} -#nrcc_notices p { - width: 95%; +#alert_bar_note { + position: relative; + text-align: center; margin: auto; + margin-top: 8px; + font-weight: 900; +} + +#alert_expand_arrow { + position: absolute; + right: 0; + top: 0; + padding: 10px; + padding-right: 15px; + padding-left: 30px; + background: none; + border: none; + font-weight: 900; + color: white; +} + +#alerts_msg{ + position: absolute; + left: 0; + top: 40px; + width: 100%; + background-color: pink; } /* Content */ #output { width: 100%; + margin-top: 95px; /* SHOULD BE REMOVED AFTER IMPLEMENTING ALERTS */ } table { @@ -137,6 +171,20 @@ table { animation: pulse 1.5s linear infinite; } +/* Footer: */ +#footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 40px; + background-color: var(--overlay-color); +} + +#footer img { + height: 35px; +} + /* Animations */ @keyframes pulse { 50% { diff --git a/static/styles/main.css b/static/styles/main.css index 1040cef..fd68f4b 100644 --- a/static/styles/main.css +++ b/static/styles/main.css @@ -82,6 +82,10 @@ } /* MAIN */ +html{ + width: 100%; + height: 100%; +} body { background-color: var(--main-bg-color); color: var(--main-text-color);