added basic layout to gui

follower/follower.go

@@ -8,7 +8,7 @@ package main
 //#include "../c/okv.c"
 import "C"
 
-//sssssssssssss
+//ssssssssssssss
 
 import (
 	"2PPS/lib"

gui/src/App.vue

@@ -1,26 +1,24 @@
 <template>
-<div class="main-grid">
-<div class="head">2PPS
-  	<form>
+<div class="container">
+  <div class="toppane">Test Page
+    <form>
     <input type="text" ref="my_input">
     <button @click.prevent="submitTweet()">Submit</button>
   </form>
-</div>
-<div class="topicLists">
-  <topicLists id="topicLists"></topicLists>
-</div>
-<div class="tweets">
-  <ul>
-    <Tweet
-      v-for="(tweet, index) in tweets"
-      :key="tweet.id"
-      :topics="tweet.topics"
-      :text="tweet.text"
-    ></Tweet>
-  </ul>
+
   </div>
-</div>
-<div class="ArchivedTweets">
+  <div class="leftpane">
+    <h1>Test Page</h1>
+  </div>
+  <div class="middlepane">Test Page
+     <h1>Test Page</h1>
+     <h1>Test Page</h1>
+     <h1>Test Page</h1>
+     <h1>Test Page</h1>
+     
+  </div>
+  <div class="rightpane">
+    <h1>Test Page</h1></div>
 </div>
  
 </template>
@@ -60,22 +58,46 @@ export default {
 <style>
 @import './assets/base.css';
 
-header {
-  line-height: 1.5;
-  text-align: center;
-  font-size: large;
+body, html {
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }
 
-.topicLists {
-  float : left;
-  margin: 0 1.5%;
-  width: 30%;
+.container {
+  width: 100%;
+  height: 100%;
 }
 
-.tweets {
-  float : left;
-  margin: 0 1.5%;
-  width: 30%;
+.leftpane {
+    width: 25%;
+    height: 100%;
+    float: left;
+    background-color: rosybrown;
+    border-collapse: collapse;
 }
 
+.middlepane {
+    width: 50%;
+    height: 100%;
+    float: left;
+    background-color: royalblue;
+    border-collapse: collapse;
+}
+
+.rightpane {
+  width: 25%;
+  height: 100%;
+  position: relative;
+  float: right;
+  background-color: yellow;
+  border-collapse: collapse;
+}
+
+.toppane {
+  width: 100%;
+  height: 100px;
+  border-collapse: collapse;
+  background-color: #4da6ff;
+}
 </style>

gui/src/App_old.vue

@@ -0,0 +1,81 @@
+<template>
+<div class="main-grid">
+<div class="head">2PPS
+  	<form>
+    <input type="text" ref="my_input">
+    <button @click.prevent="submitTweet()">Submit</button>
+  </form>
+</div>
+<div class="topicLists">
+  <topicLists id="topicLists"></topicLists>
+</div>
+<div class="tweets">
+  <ul>
+    <Tweet
+      v-for="(tweet, index) in tweets"
+      :key="tweet.id"
+      :topics="tweet.topics"
+      :text="tweet.text"
+    ></Tweet>
+  </ul>
+  </div>
+</div>
+<div class="ArchivedTweets">
+</div>
+ 
+</template>
+
+<script>
+import topicLists from './components/TopicLists.vue'
+import Tweet from './components/Tweet.vue'
+
+export default {
+  components: { Tweet },
+  data() {
+    return {
+      tweetToSubmit: '',
+      tweets : [
+        {
+          id: 1,
+          topics: "house",
+          text: "asd"
+        },
+        {
+          id: 2,
+          topics: "mouse",
+          text: "asdds"
+        }
+      ]
+    }
+  },
+  methods: {
+    submitTweet () {
+      this.tweetToSubmit = this.$refs.my_input.value
+    }
+  }
+}
+
+</script>
+
+<style>
+@import './assets/base.css';
+
+header {
+  line-height: 1.5;
+  text-align: center;
+  font-size: large;
+}
+
+.topicLists {
+  float : left;
+  margin: 0 1.5%;
+  width: 30%;
+}
+
+.tweets {
+  float : left;
+  margin: 0 1.5%;
+  width: 30%;
+}
+
+</style>