Merge pull request #39 from SamsungInternet/ui-fixes

Ui fixes

public/css/_donate.css

@@ -1,5 +1,5 @@
 .header-bg {   
-    background: linear-gradient(rgba(32,32,32,0) 0%, var(--background) 40%), url(../images/raster/donate_top.webp);
+    background: linear-gradient(rgba(32,32,32,0) 0%, var(--background) 40%), url(../images/raster/donate_top.jpg);
     background-position: top;
     background-origin: border-box;
     background-repeat: no-repeat;

public/css/_first_run.css

@@ -63,7 +63,7 @@ h1, p {
 .fr-1 {
     width: 100vw;
     height: 100vh;
-    background: url('/images/raster/updates_header.webp'), #8e7ebb;
+    background: url('/images/raster/updates_header.jpg'), #8e7ebb;
     background-size: cover;
     background-blend-mode: multiply;
     background-position: right;
@@ -73,7 +73,7 @@ h1, p {
 .fr-2 {
     width: 100vw;
     height: 100vh;
-    background-image: url('/images/raster/updates_header.webp') #291561;
+    background-image: url('/images/raster/updates_header.jpg') #291561;
     background-size: cover;
     background-position: right;
     padding: 27vh 0rem 0 0;

public/css/_updates.css

@@ -4,7 +4,7 @@
 }
 
 .header-bg {   
-    background: linear-gradient(rgba(32,32,32,0) 0%, var(--background) 40%), url(../images/raster/updates_header.webp);
+    background: linear-gradient(rgba(32,32,32,0) 0%, var(--background) 40%), url(../images/raster/updates_header.jpg);
     background-position: top;
     background-origin: border-box;
     background-repeat: no-repeat;

public/js/_gg_ui.js

@@ -226,7 +226,7 @@ let getActionsContent = (cActions) => {
 let loadStaticCards = (cMainContent) =>{
     const donateCard = createVerticalCard( 'Donate directly to the UNDP',
     'Donate as little as £1 to support any Global Goal through a quick in-app purchase.',
-     'images/raster/donate_vert.webp',
+     'images/raster/donate_vert.jpg',
      0,
      [['Donate','https://give.undp.org/give/120717/#!/donation/checkout']]);
 
@@ -242,7 +242,7 @@ let loadStaticCards = (cMainContent) =>{
     cMainContent.appendChild(learnCard);
     const peopleCard = createHorizontalCard('We the People',
     'This star-studded video introduces the new plan for the people and planet: the UN Global Goals for Sustainable Development. Audio is in English.</p>',
-    '/images/raster/video-horz.webp',
+    '/images/raster/video-horz.jpg',
     0,
     [['Watch','https://youtu.be/RpqVmvMCmp0']]
     );
@@ -251,15 +251,15 @@ let loadStaticCards = (cMainContent) =>{
 
     const workCard   = createHorizontalCard('How this app works',
     'When you see ads from this app, you will earn money for donations that support the Global Goals, such as fighting to end poverty, reducing social inequality, and tackling climate change.',
-    '/images/raster/boy-horz.webp',
+    '/images/raster/boy-horz.jpg',
     0,
     null
     );
     cMainContent.appendChild(workCard);  
 
     const unCard     = createVerticalCard('Developed by the United Nations',
                                          'The 17 Global Goals, also called the Sustainable Development Goals (SDGs), were built on decades of work by the UN and adopted by all host countries',
-                                         '/images/raster/undp.webp',
+                                         '/images/raster/undp.jpg',
                                          0,
                                          [['Learn More','www.undp.org']])
 

public/js/donate.js

@@ -36,7 +36,7 @@ async function loadDonationsCard(){
 window.addEventListener('load', () => {
     //adds the default donate card
     let mc = document.getElementById('_main_content');
-    let defaultDonateCard = createVerticalCard('Donate directly to the UNDP', 'Donate to the UNDP to help tackle the root causes of poverty and create a better life for everyone.', '/images/raster/donate_vert.webp', 0, [['Donate', 'https://give.undp.org/give/120717/#!/donation/checkout']]); 
+    let defaultDonateCard = createVerticalCard('Donate directly to the UNDP', 'Donate to the UNDP to help tackle the root causes of poverty and create a better life for everyone.', '/images/raster/donate_vert.jpg', 0, [['Donate', 'https://give.undp.org/give/120717/#!/donation/checkout']]); 
     mc.appendChild(defaultDonateCard);
 });
 

public/js/goal.js

@@ -31,7 +31,7 @@ function getSamsungCard(goal, posts){
     if(card){
         postCard = createHorizontalCard(card.title,
             card.message,
-            '/images/raster/samsung.webp',
+            '/images/raster/samsung.jpg',
             goal,
             [[card.action,card.actionUrl]],
             false, 
@@ -127,7 +127,7 @@ function loadStaticGoalsCards(cRootContent){
 
     const developedCard = createVerticalCard('Developed by United Nations',
     'The 17 Global Goals, also called the Sustainable Development Goals (SDGs), were built on decades of work by the UN and adopted by all host countries.',
-    '/images/raster/undp.webp',                                
+    '/images/raster/undp.jpg',                                
     0,
     [['Learn more','www.undp.org']]
     );

public/js/updates.js

@@ -99,7 +99,7 @@ async function loadWallpapers(){
             wallpaperCard = createWallpaperCard(`<p>Julia Gillard</p>
                                                         <p>#GlobalGoal4</p>
                                                         <a href="goal.html?no=4" id="link-goal">Learn More</a>`,
-                                                        '/images/raster/wallpaper-quote.webp',
+                                                        '/images/raster/wallpaper-quote.jpg',
                                                         4 
                                                       )
         }                                            

public/serviceworker.js

@@ -5,12 +5,17 @@ var urlsToCache = [
     'css/gg-light.css',
     'css/gg.css',
     'images/raster/hands-vert.webp',
+    'images/raster/hands-vert.jpg',
     'images/raster/goals-vert.jpg',
     'images/raster/video-horz.webp',
+    'images/raster/video-horz.jpg',
     'images/raster/boy-horz.webp',
+    'images/raster/boy-horz.jpg',
     'images/raster/goals_header.jpg',
     'images/raster/covid_pandemic.webp',
+    'images/raster/covid_pandemic.jpg',
     'images/raster/wallpaper-quote.webp',
+    'images/raster/wallpaper-quote.png',
     'assets/goalsDetail.js',
     'js/_gg_ui.js',
     'offline.html'