Skip to content

Commit d6409ff

Browse files
lestercoyoyjrlestercoyoyjr
committed
Merge branch 'feature/TRENDING' into develop
2 parents 1efa78d + 7b5e18b commit d6409ff

File tree

3 files changed

+147
-15
lines changed

3 files changed

+147
-15
lines changed

‎Twitter.html

+41-8
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</head>
2323

2424
<body>
25-
<!-- Right Buttons -->
25+
<!-- Left Buttons -->
2626
<nav class="left-sidebar">
2727
<div class="twitter-logo">
2828
<img src="icons/Twitter_icon.svg" style="width: 35px;">
@@ -63,9 +63,9 @@
6363
Tweet
6464
</button>
6565
</nav>
66-
<!-- Ends Right Buttons -->
66+
<!-- Ends Left Buttons -->
6767

68-
<!-- Left Buttons -->
68+
<!-- Right Buttons -->
6969
<nav class="right-sidebar">
7070
<div class="search-container">
7171
<button class="search-button">
@@ -74,13 +74,46 @@
7474
<input class="search-input" type="text" placeholder="Search Twitter">
7575
</div>
7676
<div class="trending-container">
77-
77+
<div class="tc-upper">
78+
<p>Trends for you</p>
79+
<img src="icons/tweet_gear.svg" alt="tweet-gear">
80+
</div>
81+
<div class="trending">
82+
<span class="trending-mini">Trending worldwide</span>
83+
<span class="trending-strong">#WorldNews</span>
84+
<span class="trending-mini">125K Tweets</span>
85+
<span class="trending-mini">5,094 people are tweeting about this</span>
86+
</div>
87+
<div class="trending">
88+
<span class="trending-mini">Trending worldwide</span>
89+
<span class="trending-strong">#BreakingNews</span>
90+
<div class="trending-link">
91+
<div class="t-link-content">
92+
<h3>Google</h3>
93+
<p>This is a link for Google</p>
94+
</div>
95+
<div class="t-link-image">
96+
<img src="tweet_img/image-link.png" alt="trending-link-image">
97+
</div>
98+
</div>
99+
<span class="trending-mini">11,094 people are tweeting about this</span>
100+
</div>
101+
<div class="trending" style="border-bottom: 1px solid rgb(238, 238, 238);">
102+
<span class="trending-mini">Trending in United States</span>
103+
<span class="trending-strong">#BestofUS</span>
104+
</div>
105+
<div class="show-more">
106+
<p>Show more</p>
107+
</div>
78108
</div>
79109
<div class="who-to-follow-container">
80-
110+
<div class="wtof-upper">
111+
<p>Who to follow</p>
112+
<img src="icons/tweet_gear.svg" alt="tweet-gear">
113+
</div>
81114
</div>
82115
</nav>
83-
<!-- Ends Left Buttons -->
116+
<!-- Ends Right Buttons -->
84117

85118
<!-- Middle for Home and Tweet -->
86119
<main>
@@ -114,7 +147,7 @@
114147

115148
</div>
116149
</section>
117-
<div class="tweet-timeline">
150+
<section class="tweet-timeline">
118151
<div class="tweet-post">
119152
<div class="tweet-post-profile_pic">
120153
<img src="profile_pics/cat2.jpg">
@@ -272,7 +305,7 @@ <h3>Google</h3>
272305
</div>
273306
</div>
274307
</div>
275-
</div>
308+
</section>
276309
</main>
277310
<!-- EndsMiddle for Home and Tweet -->
278311
</body>

‎icons/tweet_gear.svg

+4
Loading

‎styles/right_sidebar.css

+102-7
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,25 @@
1010
border-left: 1px solid rgb(211, 210, 210);
1111
align-items: center;
1212
padding-top: 10px;
13+
overflow-y: auto;
1314
}
1415

1516
/* Search Container */
1617
.search-container,
1718
.trending-container,
1819
.who-to-follow-container{
1920
margin: 0;
20-
width: 300px;
21-
background-color: rgb(238, 238, 238);
21+
width: 300px;
2222
}
2323

2424
.search-container{
25-
height: 50px;
25+
height: 70px;
2626
border: none;
2727
margin-bottom: 10px;
2828
border-radius: 25px;
2929
display: flex;
3030
flex-direction: row;
31+
background-color: rgb(238, 238, 238);
3132
}
3233
.search-button{
3334
width: 66px;
@@ -52,12 +53,106 @@
5253
outline: none;
5354
}
5455

55-
56-
.trending-container{
57-
height: 500px;
58-
border-radius: 20px;
56+
/* Trending */
57+
.trending-container,
58+
.who-to-follow-container{
59+
height: 1fr;
60+
border-radius: 10px;
5961
margin-bottom: 10px;
62+
background-color: #F5F7FB;
63+
}
64+
.tc-upper,
65+
.wtof-upper{
66+
display: flex;
67+
flex-direction: row;
68+
justify-content: space-between;
69+
padding: 10px;
70+
}
71+
.tc-upper p,
72+
.wtof-upper p{
73+
font-size: 18px;
74+
font-weight: bold;
75+
margin: 0;
76+
}
77+
.tc-upper img,
78+
.wtof-upper img{
79+
width: 17px;
80+
filter: invert(.3) sepia(3) saturate(1) hue-rotate(170deg);
81+
margin: 0;
82+
}
83+
.trending{
84+
height: 1fr;
85+
padding: 10px;
86+
border: 1px solid rgb(230, 230, 230);
87+
border-bottom: none;
88+
border-left: none;
89+
border-right: none;
90+
margin: 0;
91+
display: flex;
92+
flex-direction: column;
93+
}
94+
.trending-mini{
95+
margin-bottom: 5px;
96+
font-size: 12px;
97+
color: rgb(130, 130, 130);
98+
}
99+
.trending-strong{
100+
margin-bottom: 5px;
101+
font-size: 15px;
102+
font-weight: bold;
103+
}
104+
.show-more p{
105+
margin: 0;
106+
padding: 10px;
107+
padding-left: 20px;
108+
color: #00AAEC;
109+
cursor: pointer;
110+
}
111+
.trending-link{
112+
display: flex;
113+
flex: 1;
114+
flex-direction: row;
115+
height: 80px;
116+
border: 1px solid rgb(211, 210, 210);
117+
border-radius: 10px;
60118
}
119+
.t-link-content{
120+
display: flex;
121+
flex: 1;
122+
flex-direction: column;
123+
justify-content: center;
124+
font-size: 10px;
125+
padding: 20px;
126+
padding-left: 10px;
127+
}
128+
.t-link-image{
129+
display: flex;
130+
width: 105px;
131+
height: 70px;
132+
}
133+
.t-link-image img{
134+
flex: 1;
135+
object-fit: contain;
136+
border-top-right-radius: 10px;
137+
border-bottom-right-radius: 10px;
138+
}
139+
140+
141+
.t-link-content h3,
142+
.t-link-content p{
143+
margin: 0;
144+
}
145+
/*
146+
.t-link-image{
147+
display: flex;
148+
width: 50px;
149+
}
150+
.t-link-image img{
151+
flex: 1;
152+
object-fit: contain;
153+
width: 50px;
154+
} */
155+
/* Who-to-follow container */
61156
.who-to-follow-container{
62157
height: 500px;
63158
border-radius: 20px;

0 commit comments

Comments
 (0)