Mobile Selector

super3 · Nov 21, 2018 · 14c508e · 14c508e
1 parent 7be65c2
commit 14c508e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
@@ -3,8 +3,19 @@
         <!-- Top bar -->
         <div class="border-b flex px-6 py-2 items-center flex-none">
             <div class="flex flex-col">
-                <h3 class="text-grey-darkest mb-1 font-extrabold">#{{channel.name}}</h3>
-                <div class="text-grey-dark text-sm truncate">
+                <h3 class="text-grey-darkest mb-1 font-extrabold hidden md:block">#{{channel.name}}</h3>
+								<div class="inline-block relative w-64 block md:hidden">
+								  <select class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded leading-tight focus:outline-none">
+						 			  <option class="font-bold text-black" disabled>Channels</option>
+										<option v-for="channel in channels"><span style="margin-left: 50px;">&nbsp;&nbsp;&nbsp;#{{channel.name}}</span></option>
+										<option class="font-bold text-black" disabled>Direct Messages</option>
+										<option class="pr-5 mr-5" v-for="direct in directs">&nbsp;&nbsp;&nbsp;{{direct.user.name}}</option>
+								  </select>
+								  <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
+								    <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
+								  </div>
+								</div>
+                <div class="text-grey-dark text-sm truncate hidden md:block">
                     Channel
                 </div>
             </div>
@@ -42,7 +53,9 @@ const Message = require('./Message.vue');
 
 module.exports = {
 	props: [
-		"channel"
+		"channel",
+		"channels",
+		"directs"
 	],
 	data: () => ({
 		message: "",

diff --git a/src/components/Dash.vue b/src/components/Dash.vue
@@ -96,8 +96,8 @@
 				</div>
     </div>
     <!-- Chat content -->
-	<Channel v-if="selectedType === 'channel'" v-bind:channel="channels.find(channel => channel.id === selected)" v-on:message="createMessage"></Channel>
-	<Direct v-if="selectedType === 'direct'" v-bind:direct="directs.find(direct => direct.user.id === selected)" v-on:message="createDirectMessage"></Direct>
+	<Channel v-if="selectedType === 'channel'" v-bind:channel="channels.find(channel => channel.id === selected)" v-bind:channels="channels" v-bind:directs="directs" v-on:message="createMessage"></Channel>
+	<Direct v-if="selectedType === 'direct'" v-bind:direct="directs.find(direct => direct.user.id === selected)" v-bind:channels="channels" v-bind:directs="directs" v-on:message="createDirectMessage"></Direct>
 </div>
 
 	</div>