-
@@ -90,11 +90,13 @@
diff --git a/dashboard_static/js/code.js b/dashboard_static/js/code.js
index 2fea0fc..7ed572d 100644
--- a/dashboard_static/js/code.js
+++ b/dashboard_static/js/code.js
@@ -16,12 +16,37 @@ $(".sport").on("click", function() {
}
$(this).trigger("selected", [selectedSports.includes(sportName), selectedSports]) // Trigger event
+ showFeeds()
})
function getCSSVariable(name) {
return getComputedStyle(root).getPropertyValue(name)
}
+
+function showFeeds() {
+ if ($(window).width() < 1280) {
+ if (selectedSports.length === 0) {
+ $(".leftcol").show()
+ $(".centercol").hide()
+ } else {
+ $(".leftcol").hide()
+ $(".centercol").show()
+ }
+ } else {
+ $(".leftcol").show()
+ $(".centercol").show()
+ }
+}
+
+$(window).on("resize", function(){
+ showFeeds()
+});
+
+$(window).on("load", function() {
+ showFeeds()
+})
+
function tweetCell(tweet, parent) {
var cell = document.createElement("div");
cell.innerHTML =
@@ -52,56 +77,55 @@ function tweetCell(tweet, parent) {
parent.append(cell);
}
-
-var atweet = {
- "created_at": "Sat Nov 16 12:51:41 +0000 2019",
- "text": "@BobGreenburg @ONeill_Coffee Congrats to the excellent football program at Wilmington. One classy organization!",
- "source": "Twitter for iPhone<\/a>",
- "user": {
- "name": "Express Youngstown",
- "screen_name": "ExpressProsYO",
- "url": "http:\/\/apply.expresspros.com\/",
- "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/775167844921188353\/fWquHsOK_normal.jpg",
- },
- "quote_count": 0,
- "reply_count": 0,
- "retweet_count": 0,
- "favorite_count": 0,
- "entities": {
- "hashtags": [
-
- ],
- "urls": [
-
- ],
- "user_mentions": [
- {
- "screen_name": "BobGreenburg",
- "name": "Bob Greenburg",
- "id": 483881032,
- "id_str": "483881032",
- "indices": [
- 0,
- 13
- ]
- },
- {
- "screen_name": "ONeill_Coffee",
- "name": "O'NeillCoffeeCompany",
- "id": 2804543925,
- "id_str": "2804543925",
- "indices": [
- 14,
- 28
- ]
- }
- ],
- "symbols": [
-
- ]
- },
-}
-
for (let i = 0; i < 2; i++) {
tweetCell(atweet, $(".leftcol"));
-}
\ No newline at end of file
+}
+
+ var atweet = {
+ "created_at": "Sat Nov 16 12:51:41 +0000 2019",
+ "text": "@BobGreenburg @ONeill_Coffee Congrats to the excellent football program at Wilmington. One classy organization!",
+ "source": "Twitter for iPhone<\/a>",
+ "user": {
+ "name": "Express Youngstown",
+ "screen_name": "ExpressProsYO",
+ "url": "http:\/\/apply.expresspros.com\/",
+ "profile_image_url": "http:\/\/pbs.twimg.com\/profile_images\/775167844921188353\/fWquHsOK_normal.jpg",
+ },
+ "quote_count": 0,
+ "reply_count": 0,
+ "retweet_count": 0,
+ "favorite_count": 0,
+ "entities": {
+ "hashtags": [
+
+ ],
+ "urls": [
+
+ ],
+ "user_mentions": [
+ {
+ "screen_name": "BobGreenburg",
+ "name": "Bob Greenburg",
+ "id": 483881032,
+ "id_str": "483881032",
+ "indices": [
+ 0,
+ 13
+ ]
+ },
+ {
+ "screen_name": "ONeill_Coffee",
+ "name": "O'NeillCoffeeCompany",
+ "id": 2804543925,
+ "id_str": "2804543925",
+ "indices": [
+ 14,
+ 28
+ ]
+ }
+ ],
+ "symbols": [
+
+ ]
+ },
+ }
\ No newline at end of file
diff --git a/dashboard_static/style/responsive.css b/dashboard_static/style/responsive.css
new file mode 100644
index 0000000..379fbba
--- /dev/null
+++ b/dashboard_static/style/responsive.css
@@ -0,0 +1,33 @@
+@media only screen and (max-width: 1280px) {
+ .maintable {
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 32px;
+ }
+}
+
+
+@media only screen and (max-width: 850px) {
+ .maintable {
+ grid-template-columns: 1fr;
+ }
+ .header-title {
+ display: none;
+ }
+ .sport-name {
+ font-size: 20px;
+ }
+ .column {
+ grid-row: unset;
+ }
+ .colheader {
+ font-size: 32px;
+ }
+
+}
+
+
+
+
+
+ /* 360x640 414x896
+ 601x962 1280x800 */
\ No newline at end of file
diff --git a/dashboard_static/style/style.css b/dashboard_static/style/style.css
index 5c3f4af..60509f7 100644
--- a/dashboard_static/style/style.css
+++ b/dashboard_static/style/style.css
@@ -24,6 +24,8 @@ body {
background-color: var(--main-bg);
color: white;
padding: 16px 48px;
+ display: flex;
+ flex-direction: column;
}
.header, .sports, .logo {
@@ -45,11 +47,11 @@ body {
}
.logo img {
- height: 40px;
+ height: 36px;
}
.logo span {
- font-size: 40px;
+ font-size: 36px;
font-weight: 500;
margin: 0 8px;
}
@@ -112,7 +114,7 @@ body {
.tweet-interaction {
display: flex;
align-items: center;
- margin-right: 32px;
+ margin-right: 24px;
}
.tweet-interaction .material-symbols-outlined {
@@ -147,44 +149,55 @@ body {
/* Three main columns; CSS Grid */
.maintable {
/*background-color: #ffffff; */ /* The colors are there just so that I can see what I'm doing better */
- display: grid;
width: 100%;
+ height: 100%;
+ display: grid;
grid-template-columns: 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr;
-
- gap: 48px;
+ grid-template-rows: 1fr;
+ grid-gap: 48px;
/* margin:20px; */
}
.main {
- margin-top: 48px;
+ margin-top: 32px;
+ height: 100%;
}
.column {
border-radius: 16px;
}
+.leftcol, .centercol {
+ overflow-y: auto;
+ grid-row: 1/ -1;
+}
+
.leftcol {
background-color: red;
- grid-row: 1/ -1;
}
.centercol {
background-color: green;
- grid-row: 1/ -1;
+}
+
+.rightcol {
+ display: flex;
+ flex-direction: column;
}
.searchbar {
background-color: blue;
- height: 400px;
+ /* height: 400px; */
}
.popchart {
background-color: rgba(255, 0, 255, 0.344);
- height: 400px;
+ /* height: 400px; */
}
.colheader {
- font-size: 38px;
- padding-left: 30px;
+ display: block;
+ font-weight: 500;
+ font-size: 40px;
+ padding: 8px 16px;
}
\ No newline at end of file
LATEST CLUCCS
+ Latest Cluccs
@@ -90,11 +90,13 @@
-
-
- FILTERED CLUCCS
+ Filtered Cluccs
-
SPORTS POPULARITY CHART
+
+
+
+ Sports Popularity Chart
+