mobile ready menus kidna wonky but working

frontend/components/MenuList/MenuList.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+import MenuPreview from '../MenuPreview/MenuPreview.vue';
+import {emitter, MenuChangePayload} from '../../lib/global';
+export default {
+    name:"MenuList",
+    components: { MenuPreview },
+    data(){
+        return {selectedMenu:false,}
+    },
+    //mounted emitter.on for menuPreview click emits
+    mounted(){
+        emitter.on('menu-change',(payload:string) => {
+            console.log('change menu please')
+            console.log(payload)
+            if(payload){
+                this.activeMenu = payload;
+                this.selectedMenu =true;
+            }
+            else{
+                this.activeMenu = 'none'
+                this.selectedMenu = false;
+            }
+        })
+    },
+}
+</script>
+<template>
+    <div class="list_container" v-bind:class="(this.selectedMenu) ? 'hide-if-small': 'no-menu-selected'" id="THREADLIST">
+        <div class="threadlist-header d-flex justify-content-between align-items-center">
+            <div class="ml-05">
+                <router-link class="fa fa-arrow-left btn btn-large " to="`/threadlist.php`" aria="Go Back to threadlist!"></router-link>
+
+                <h6 class="m-auto">Settings</h6>
+            </div>
+        </div>
+        <MenuPreview name="templates" link='templates.php' descriptions="Manage Message Templates" 
+                   ></MenuPreview>
+
+        <div class="threadlist-table">
+            <div class="preview_list_container">
+
+            </div>
+        </div>
+
+    </div>
+</template>
+<style>
+.ml-05{
+    margin-left:5%;
+}
+.mr-05{
+    margin-right:5%;
+}
+/*body{
+    cursor:pointer;
+} */
+.menu-icon{
+    color:white;
+}
+.menu-icon:hover{
+    color:#BB6025;
+}
+.float-right{
+    position:absolute;
+    top: 50%;
+    float:right;
+}
+
+.active{
+    grid-column-start: 1;
+}
+.preview_list_container {
+    direction: ltr;
+}
+.list_container {
+    height: 100%;
+    grid-column-start: 1;
+    grid-column-end: 1;
+    padding-right: 0.25rem;
+    border-radius: 0.5rem;
+    border-color: none;
+}
+.hide-if-small{
+}
+
+.threadlist-header{
+    box-shadow: 0 4px 4px -2px white;
+    margin: 0 auto 0px auto;
+    padding-top: 0.75rem;
+    padding-bottom: 0.25rem;
+    background-color: #5f9fd3;
+    color: #fff;
+    border-top-left-radius: 0.5em;
+    border-top-right-radius: 0.5em;
+    font-weight: bold;
+    border: solid #5f9fd3 2px;
+}
+
+.threadlist-table {
+    /*border-spacing: 1em; */
+    direction: rtl;
+    overflow-y: auto;
+    height: 69dvh;
+    width: 100%;
+    table-layout: fixed;
+    padding-left: 3px;
+}
+.link-container{
+    font-size: 2rem;
+    line-height: 2rem;
+    height: 3rem;
+    width: 3rem;
+    background-color: #5f9fd3;
+    border-radius: 50%;
+    position:relative;
+    float: center;
+    margin-top: 0.5rem;
+}
+
+.dot-center{
+    text-align:center;
+     margin: 0;
+     position: absolute;               
+     top: 50%;                         
+     left: 50%;
+     transform: translate(-50%, -50%) ; 
+}
+.dot {    
+     
+         border-radius: 50%;
+         -moz-border-radius: 50%;
+         -webkit-border-radius: 50%;
+         color: #ffffff;
+         display: inline-block;
+         font-weight: bold;
+         line-height: 22px;
+         margin-right: 5px;
+         text-align: center;
+ 
+ }
+ .dot:hover{
+     color:#BB6025;
+ }
+
+ .link-container-container{
+    justify-content: center;
+    display:flex;
+}
+.load-animation-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+
+    @media screen and (width <=700px) {    
+    div.action_bar {
+        top: 0px;
+    }
+    .active{
+        z-index:7;
+    }
+    .table {
+        height: 79dvh;
+    }
+    .hide-if-small{
+        display:none;
+    }
+    
+}
+</style>

frontend/components/MenuPlaceholder/MenuPlaceholder.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+export default{
+    name:"MenuPlaceholder",
+    props:{
+        selectedConvo: Boolean,
+    }
+}
+</script>
+<template>
+    <div id="NO_MESSAGES" >
+            <p v-if="!selectedConvo" class="center">  Click on a Menu Item to get started!</p>
+
+    </div>
+</template>
+<style scoped>
+#NO_MESSAGES {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+}
+.center{
+    grid-column-start: 1;
+    grid-row-start: 1;
+    align-self: center;
+    justify-self: center;
+}
+
+@media screen and (width <=700px) {
+    #NO_MESSAGES{
+        display:none;
+    }
+}
+
+</style>

frontend/components/MenuPreview/MenuPreview.vue

@@ -0,0 +1,167 @@
+<script lang='ts'>
+import {emitter} from '../../lib/global';
+
+export default {
+    name:'MenuPreview',
+    props:{
+        link:{
+            type:String
+        },
+        description:{
+            type: String
+        },
+        name:{
+            type:String
+        }
+    },
+    methods:{
+        menuLinkClickHandler(){
+            console.log(this.name)
+            emitter.emit("menu-change",this.name)
+        }
+    }
+    //mounted click event emitter
+}
+
+</script>
+<template>
+    <div class='tr_replace' :data-displayName="this.name"  >
+        <div class='td_preview' >
+            <router-link :to="this.link" class="menu-link" @click="menuLinkClickHandler">
+                <div class="menu-preview-container" >
+                    <span class='menu-name' >{{
+                        this.name }}</span>
+                    <span class='timestamp' 
+                        :data-timestamp="this.timestamp"></span>
+
+                    <span class='menu-last-message' >{{
+                        this.description }}</span>
+                        <div class="new-messages">
+                            <span class="new-message-alert-dot bgc-AN-orange" v-if="newMessages>0">{{this.newMessages}}</span>
+                        </div>
+                </div>
+
+
+            </router-link>
+        </div>
+    </div>
+</template>
+
+<style>
+.menu-name {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row: 1;
+    justify-self: start;
+    color: black;
+}
+
+.timestamp {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row: 1;
+    justify-self: end;
+}
+
+.menu-last-message {
+    color: darkgray;
+    grid-row-start: 2;
+    grid-column: 1;
+    justify-self: start;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.new-messages{
+    grid-row:2;
+    grid-column: 3;
+    display: inline-block;
+    justify-content: right;
+    justify-self: right;
+}
+.new-message-alert-dot {    
+         border-radius: 50%;
+         -moz-border-radius: 50%;
+         -webkit-border-radius: 50%;
+         color: #ffffff;
+         display: inline-block;
+         font-weight: bold;
+         line-height: 22px;
+         margin-right: 1.5rem;
+         text-align: center;
+         width: 22px;
+ 
+ }
+ .dot:hover{
+     color:#fff;
+ }
+
+.timestamp.activeMenu {
+    color: white;
+}
+
+.menu-name.activeMenu {
+    color: white;
+}
+
+.menu-last-message.activeMenu {
+    color: white;
+}
+
+.text-center {
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.activeMenu {
+    color: white;
+}
+
+.menu-preview-container {
+    border-radius: 1em;
+    padding: 0.5625em;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 0 auto auto;
+}
+.tr_replace{
+    max-height: 6rem;
+
+}
+
+.tr_replace:hover span {
+    color: black;
+}
+.tr_replace:hover {
+    background-color: #aaaaaa;
+}
+
+.tr_replace.activeMenu:hover span {
+    color: white;
+}
+.tr_replace.activeMenu:hover {
+    background-color: #aaaaaa;
+}
+
+.tr_replace.activeMenu {
+    background-color: #3178B1;
+}
+
+.tr_replace.activeMenu:hover {
+    background-color: #aaaaaa;
+}
+
+/*
+.tr_replace:first-child {
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+}
+*/
+.tr_replace:last-child {
+    border-bottom-left-radius: 0.5rem;
+    border-bottom-right-radius: 0.5rem;
+}
+</style>