Merge pull request #7 from AJRedDevil/responsive-ui

Responsive ui
AjanShrestha · Jan 2, 2020 · b8b5ab0 · b8b5ab0
2 parents bf8ec2e + 347516c
commit b8b5ab0
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/public/index.html b/public/index.html
@@ -93,7 +93,12 @@
             </div>
           </form>
         </div>
-        <img src="/src/images/main-image.jpg" alt="Explore the City" class="main-image">
+        <img src="/src/images/main-image.jpg" 
+          srcset="/src/images/main-image-lg.jpg 1200w, 
+                  /src/images/main-image.jpg 900w, 
+                  /src/images/main-image-sm.jpg 480w" 
+          alt="Explore the City"
+          class="main-image">
         <div class="page-content">
           <h5 class="text-center mdl-color-text--primary">Share your Moments</h5>
           <div id="shared-moments"></div>

diff --git a/public/src/css/feed.css b/public/src/css/feed.css
@@ -8,7 +8,8 @@
   top: 56px;
   background: white;
   text-align: center;
-  display: none;
+  transform: translateY(100vh);
+  transition: transform 0.3s;
 }
 
 .main-image {
@@ -32,4 +33,33 @@
 
 .shared-moment-card.mdl-card {
   margin: 10px auto;
+  width: 60%;
+}
+
+@media (min-width: 600px) {
+  .shared-moment-card.mdl-card {
+    width: 60%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .shared-moment-card.mdl-card {
+    width: 75%;
+  }
+}
+
+.shared-moment-card .mdl-card__title {
+  height: 140px;
+}
+
+@media (min-height: 700px) {
+  .shared-moment-card.mdl-card {
+    height: 160px;
+  }
+}
+
+@media (min-height: 1000px) {
+  .shared-moment-card.mdl-card {
+    height: 200px;
+  }
 }
diff --git a/public/src/js/feed.js b/public/src/js/feed.js
@@ -6,7 +6,9 @@ var closeCreatePostModalButton = document.querySelector(
 var sharedMomentsArea = document.querySelector('#shared-moments');
 
 function openCreatePostModal() {
-  createPostArea.style.display = 'block';
+  setTimeout(() => {
+    createPostArea.style.transform = 'translateY(0)';
+  }, 1);
   if (deferredPrompt) {
     deferredPrompt.prompt();
 
@@ -33,7 +35,7 @@ function openCreatePostModal() {
 }
 
 function closeCreatePostModal() {
-  createPostArea.style.display = 'none';
+  createPostArea.style.transform = 'translateY(100vh)';
 }
 
 shareImageButton.addEventListener('click', openCreatePostModal);
@@ -59,13 +61,11 @@ function clearCards() {
 
 function createCard(data) {
   var cardWrapper = document.createElement('div');
-  cardWrapper.className =
-    'shared-moment-card mdl-cardnep-aus.jpg mdl-shadow--2dp';
+  cardWrapper.className = 'shared-moment-card mdl-card mdl-shadow--2dp';
   var cardTitle = document.createElement('div');
   cardTitle.className = 'mdl-card__title';
   cardTitle.style.backgroundImage = `url(${data.image})`;
   cardTitle.style.backgroundSize = 'cover';
-  cardTitle.style.height = '180px';
   cardWrapper.appendChild(cardTitle);
   var cardTitleTextElement = document.createElement('h2');
   cardTitleTextElement.className = 'mdl-card__title-text';

diff --git a/public/sw.js b/public/sw.js
@@ -1,7 +1,7 @@
 importScripts('/src/js/idb.js');
 importScripts('/src/js/utility.js');
 
-const CACHE_STATIC_NAME = 'static-v11';
+const CACHE_STATIC_NAME = 'static-v13';
 const CACHE_DYNAMIC_NAME = 'dynamic-v3';
 const STATIC_FILES = [
   '/',