Merge pull request #11 from olinpin/cssgrid

Cssgrid

dashboard_static/index.html

@@ -90,20 +90,33 @@
                     </div>
                 </div>
                 <div class="centercol column">
-                    <span class="colheader">Filtered Cluccs</span>
+                    <h1 class="colheader">FILTERED CLUCCS</h1>
                 </div>
                 <div class="rightcol column">
                     <div class="searchcontainer column">
-                        <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
+                    <input class = "searchbar" type = "text" placeholder="SEARCH CLUCCS...">
-                        <button class = "button">SORT BY</button>
+                    <button class = "button">SORT BY</button>
-                        <button class = "button">BLOCKED WORDS</button>
+                    <button class = "button">BLOCKED WORDS</button>
-                        <button class = "button">POPULARITY FILTER</button>
+                    <button class = "button">POPULARITY FILTER</button>
-                    </div>
+                </div>
-                    <div class="popchart column">
+                <div class="popchart column">
-                        <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
+                    <h1 class="colheader chartheader">SPORTS POPULARITY CHART</h1>
                     </div>
                 </div>
             </div>
+            -->
+            <div class = "maintable">
+                <div class = "leftcol">
+                    <h1 class = 'colheader'>LATEST CLUCCS</h1>
+                </div>
+                <div class="centercol">
+                    <h1 class = 'colheader'>FILTERED CLUCCS</h1>
+                </div>
+                <div class = "searchbar"></div>
+                <div class = "popchart">
+                    <h1 class = 'colheader'>SPORTS POPULARITY CHART</h1>
+                </div>
+            </div>
         </div> 
     </div>
     <script src="/lib/jquery-2.1.1.min.js"></script>

dashboard_static/js/code.js

@@ -50,11 +50,11 @@ function tweetCell(tweet) {
     var cell = document.createElement("div");
     cell.innerHTML =
     `<div class="tweet">
-        <img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture">
+        <a href ="https://www.twitter.com/${tweet.user.screen_name}"><img src="${tweet.user.profile_image_url}" alt="" class="tweet-profilepicture"></a>
         <div class="tweet-content"> 
             <div class="tweet-name">
-                <span class="tweet-nickname">${tweet.user.name}</span>
+                <a class="tweet-nickname" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">${tweet.user.name}</a>
-                <span class="tweet-username">@${tweet.user.screen_name}</span>
+                <a class="tweet-username" href = "https://www.twitter.com/${tweet.user.screen_name}" target = "_blank">@${tweet.user.screen_name}</a>
             </div>
             <span class="tweet-text">${tweet.text}</span>
             <div class="tweet-interactions">

dashboard_static/style/style.css

@@ -122,10 +122,20 @@ body {
 }
 
 .tweet-nickname {
+	color: white;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+.tweet-nickname:active {
+	color: white;
+	text-decoration: underline;
 	font-weight: bold;
 }
 
 .tweet-username {
+	color: white;
+	text-decoration: none;
 	opacity: 0.8;
 }