From 779f7643fbdbefa1f1285b9c7b45993f3544e4f4 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sun, 17 Apr 2022 00:49:33 +0800
Subject: [PATCH] update responsive notification ui

---
 .../elements/NotificationSectionComponent.vue | 60 ++++++++++---------
 resources/views/partials/header.blade.php     |  9 +--
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue b/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue
index cce6f6c0..468ed7a7 100644
--- a/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue
+++ b/resources/assets/vue/components/general/elements/NotificationSectionComponent.vue
@@ -2,44 +2,47 @@
     <div class="row h-100">
         <div class="col">
             <div class="btn-group h-100">
-                <div class="row align-items-center justify-content-center b-a b-thick h-100 pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="openNotification()" style="border-color: #ffffff3d">
+                <div class="d-none d-md-flex row align-items-center justify-content-center b-a b-thick h-100 pointer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="openNotification()" style="border-color: #ffffff3d">
                     <div class="col p-r-10 p-l-10">
                         <i class="fa fa-bell fs-12 text-primary-lighter"></i>
                     </div>
                 </div>
-                <div class="b-rad-md dropdown-menu dropdown-menu-right p-l-15 p-b-15 p-r-15 p-t-0 container-fluid container-fixed-lg" style="height: 100vh; background: transparent !important; box-shadow: none!important;" @click="openNotification()">
-                    <div class="row shadow" style="width: 320px; position: absolute; top: 50px; right: -50px; background: white!important;">
-                        <div class="col">
-                            <div class="row">
-                                <div class="bg-master-lighter col p-l-10 p-l-10 p-t-10 bg-white text-center">
-                                    <p>Notification Center</p>
+                <i class="fa fa-bell fs-18 text-primary-lighter d-md-none" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="openNotification()"></i>
+                <div class="b-rad-md dropdown-menu dropdown-menu-right p-l-15 p-b-15 p-r-15 p-t-0" style="height: 100vh; width:100vw; background: transparent !important; box-shadow: none!important;" @click="openNotification()">
+                    <div class="container-fluid container-fixed-lg" style="position: relative; background: transparent; height: 100vh; left: 0;">
+                        <div class="row shadow" style="width: 320px; position: absolute; top: 50px; right: 30px; background: white!important;">
+                            <div class="col">
+                                <div class="row">
+                                    <div class="bg-master-lighter col p-l-10 p-l-10 p-t-10 bg-white text-center">
+                                        <p>Notification Center</p>
+                                    </div>
                                 </div>
-                            </div>
-                            <loading-component style="height: 200px; top: 0;" key="1" color="primary" v-show="isLoading"></loading-component>
-                            <div class="row" :class="{'h-100' : notificationsLength >= 5}" v-show="!isLoading" style="max-height: 400px; ">
-                                <div class="col page-container overflow-hidden">
-                                    <div class="row b-b b-grey bg-primary-lighter-hover pointer w-100 m-l-0 m-r-0" v-for="(notification, index) in notifications">
-                                        <div class="col-auto justify-content-center align-items-center d-flex hide">
-                                            <div>
-                                                <i class="fa fa-check-circle fs-20 p-l-5 text-success"></i>
+                                <loading-component style="height: 200px; top: 0;" key="1" color="primary" v-show="isLoading"></loading-component>
+                                <div class="row" :class="{'h-100' : notificationsLength >= 5}" v-show="!isLoading" style="max-height: 400px; ">
+                                    <div class="col page-container overflow-hidden">
+                                        <div class="row b-b b-grey bg-primary-lighter-hover pointer w-100 m-l-0 m-r-0" v-for="(notification, index) in notifications">
+                                            <div class="col-auto justify-content-center align-items-center d-flex hide">
+                                                <div>
+                                                    <i class="fa fa-check-circle fs-20 p-l-5 text-success"></i>
+                                                </div>
                                             </div>
-                                        </div>
-                                        <div class="col padding-10 p-l-15 p-r-15">
-                                            <p class="bold m-b-5 lh-16">{{ notification.title }}</p>
-                                            <p class="fs-9 m-b-0 lh-10">{{ notification.description }}</p>
-                                            <p class="fs-9 m-b-0 m-t-10 lh-10">{{ notification.long_ago }}</p>
-                                        </div>
-                                        <div class="col-auto justify-content-center align-items-center d-none" :class="{'d-flex' : index === 0}">
-                                            <div>
-                                                <i class="fa fa-circle fs-10 text-primary"></i>
+                                            <div class="col padding-10 p-l-15 p-r-15">
+                                                <p class="bold m-b-5 lh-16">{{ notification.title }}</p>
+                                                <p class="fs-9 m-b-0 lh-10">{{ notification.description }}</p>
+                                                <p class="fs-9 m-b-0 m-t-10 lh-10">{{ notification.long_ago }}</p>
+                                            </div>
+                                            <div class="col-auto justify-content-center align-items-center d-none" :class="{'d-flex' : index === 0}">
+                                                <div>
+                                                    <i class="fa fa-circle fs-10 text-primary"></i>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="row b-t muted">
-                                <div class="col p-l-10 p-l-10 p-t-10 m-b-10 bg-white text-center">
-                                    <a href="#">View All Notifications</a>
+                                <div class="row b-t muted">
+                                    <div class="col p-l-10 p-l-10 p-t-10 m-b-10 bg-white text-center">
+                                        <a href="#">View All Notifications</a>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -64,7 +67,6 @@
         methods: {
             openNotification(){
                 this.isClicked === false ? this.fetchNotification() : '';
-                if (this.isClicked == false) {console.log('cose');}
                 this.isClicked = !this.isClicked;
             },
             fetchNotification(){
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 5bf0bcca..e616e80c 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -65,7 +65,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col-auto p-r-30">
+                    <div class="col-auto pr-1 pr-md-4">
                         <div class="row no-margin">
                             <div class="col-auto m-r-20 d-none d-md-inline">
                                 <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
@@ -94,11 +94,12 @@
                             <div class="col-12 col-md-auto text-right d-none d-md-inline">
                                 <log-out-form-component></log-out-form-component>
                             </div>
+
+                            <div class="col-auto d-md-none pointer" @click="$store.dispatch('toggleSection', {name: 'sideMenu', status: true})">
+                                <i class="fa fa-bars fs-18 text-white"></i>
+                            </div>
                         </div>
                     </div>
-                    <div class="col-auto d-md-none pointer" @click="$store.dispatch('toggleSection', {name: 'sideMenu', status: true})">
-                        <i class="fa fa-bars fs-18 text-white"></i>
-                    </div>
                 </div>
             </div>
         </div>