Skip to content

Commit 9f40741

Browse files
salikansari6salikansari6
committed
truncated text for long description and bios
1 parent fa5f2bf commit 9f40741

File tree

3 files changed

+170
-178
lines changed

3 files changed

+170
-178
lines changed

‎src/components/Dashboard/SearchResults/RepoList/LanguageDist/PieChart/PieChart.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,7 @@ li{
4646
width: 35px;
4747
border-radius: 6px;
4848
/* background-color: white; */
49-
}
49+
}
50+
51+
52+

‎src/components/Dashboard/SearchResults/RepoList/LanguageDist/PieChart/PieChart.js

-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ const PieChart = ({languages}) => {
1414
const total = Object.values(languages).reduce((total, number) =>{
1515
return total + number
1616
},0)
17-
console.log(total)
1817

1918
Object.keys(languages).forEach(function(key, index) {
2019
langWithPercentage.push({ name : [key][0],

‎src/components/Dashboard/SearchResults/SearchResults.css

+166-176
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,189 @@
11
.result {
2+
padding: 1rem;
3+
display: flex;
4+
height: auto;
5+
border-bottom: 1px solid rgba(177, 167, 167, 0.3);
6+
}
7+
8+
.followers {
9+
/* justify-self: flex-end; */
10+
padding: 0.5rem;
11+
margin-left: auto;
12+
}
13+
14+
.followers__number {
15+
display: inline-block;
16+
color: white;
17+
font-weight: bold;
18+
width: 70px;
19+
border-radius: 10px;
20+
text-align: center;
21+
background: rgb(90, 87, 87);
22+
margin-left: 0.7rem;
23+
}
24+
25+
.loading-screen {
26+
height: 60vh;
27+
width: 100%;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
}
32+
33+
.search-results {
34+
padding: 2rem 20rem 2rem 20rem;
35+
overflow-y: scroll;
36+
z-index: -2;
37+
height: 80vh;
38+
}
39+
40+
.results {
41+
margin-top: 2rem;
42+
border: 1px solid rgba(177, 167, 167, 0.3);
43+
border-radius: 5px;
44+
}
45+
46+
.name-row {
47+
display: flex;
48+
align-items: center;
49+
}
50+
51+
.location,
52+
.text-small {
53+
font-size: 0.8rem;
54+
padding: 0.5rem;
55+
/* font-weight: bold; */
56+
/* color: rgb(105, 100, 100); */
57+
display: flex;
58+
align-items: center;
59+
}
60+
61+
.text-small > :nth-child(n) {
62+
/* padding: 0.5rem; */
63+
margin-right: 1rem;
64+
}
65+
66+
.full-name {
67+
margin: 0;
68+
padding: 0.5rem;
69+
font-weight: bold;
70+
}
71+
72+
.login {
73+
font-weight: bold;
74+
margin: 0;
75+
}
76+
77+
.username,
78+
.reponame {
79+
padding: 0.5rem;
80+
text-decoration: none;
81+
display: inline-block;
82+
}
83+
84+
.reponame {
85+
font-weight: bold;
86+
}
87+
88+
.stars > :first-child {
89+
margin-right: 2px;
90+
}
91+
92+
.stars {
93+
display: flex;
94+
justify-content: center;
95+
align-items: center;
96+
}
97+
98+
.language {
99+
display: flex;
100+
justify-content: center;
101+
align-items: center;
102+
}
103+
104+
.lang-color {
105+
display: inline-block;
106+
height: 15px;
107+
width: 15px;
108+
margin-right: 5px;
109+
border: 1px solid black;
110+
border-radius: 50%;
111+
}
112+
113+
p {
114+
margin: 0;
115+
}
116+
117+
.avatar {
118+
height: 40px;
119+
/* float: left; */
120+
width: 40px;
121+
border-radius: 50%;
122+
}
123+
124+
.bio,
125+
.description {
126+
height: 50%;
127+
overflow: hidden;
128+
white-space: nowrap;
129+
text-overflow: ellipsis;
130+
padding: 0.5rem;
131+
}
132+
133+
.results__header {
134+
display: flex;
135+
justify-content: space-between;
136+
}
137+
138+
@media (max-width: 700px) {
139+
.search-results {
2140
padding: 1rem;
3-
display: flex;
4-
height: auto;
5-
border-bottom: 1px solid rgba(177, 167, 167,.3);
6-
}
7-
8-
.followers {
9-
/* justify-self: flex-end; */
10-
padding:.5rem;
11-
margin-left: auto;
12-
13-
}
14-
15-
.followers__number{
16-
display: inline-block;
17-
color:white;
18-
font-weight:bold;
19-
width: 70px;
20-
border-radius: 10px;
21-
text-align: center;
22-
background:rgb(90, 87, 87) ;
23-
margin-left: .7rem;
24141
}
25-
26-
.loading-screen{
27-
height: 60vh;
28-
width: 100%;
142+
.result {
29143
display: flex;
30-
align-items: center;
31-
justify-content: center;
32-
}
33-
34-
35-
.search-results{
36-
padding: 2rem 20rem 2rem 20rem;
37-
overflow-y: scroll;
38-
z-index: -2;
39-
height:80vh;
40-
}
41-
42-
.results {
43-
margin-top: 2rem;
44-
border:1px solid rgba(177, 167, 167,.3);
45-
border-radius: 5px;
46-
144+
flex-direction: column;
47145
}
48-
49146
.name-row {
50-
display: flex;
51-
align-items: center;
52-
}
53-
54-
55-
56-
.location,
57-
.text-small {
58-
font-size: 0.8rem;
59-
padding: 0.5rem;
60-
/* font-weight: bold; */
61-
/* color: rgb(105, 100, 100); */
62-
display: flex;
63-
align-items: center;
64-
}
65-
66-
.text-small>:nth-child(n){
67-
/* padding: 0.5rem; */
68-
margin-right: 1rem;
147+
flex-direction: column;
69148
}
70-
71-
.full-name {
72-
margin: 0;
73-
padding: 0.5rem;
74-
font-weight: bold;
75-
}
76-
77-
.login{
78-
font-weight: bold;
79-
margin:0;
80-
}
81-
82-
.username,
83-
.reponame {
84-
padding: 0.5rem;
85-
text-decoration: none;
86-
display: inline-block;
87-
}
88-
89-
.reponame{
90-
font-weight: bold;
91-
}
92-
93-
.stars>:first-child{
94-
margin-right: 2px;
95-
}
96-
97-
.stars{
98-
display: flex;
149+
.bio,
150+
.location {
151+
text-align: center;
99152
justify-content: center;
100-
align-items: center;
101153
}
102-
103-
.language{
104-
display: flex;
105-
justify-content: center;
106-
align-items: center;
154+
.followers {
155+
margin: auto;
107156
}
108-
109-
.lang-color{
110-
display: inline-block;
111-
height: 15px;
112-
width: 15px;
113-
margin-right: 5px;
114-
border:1px solid black;
115-
border-radius: 50%;
157+
.results__header {
158+
height: 50px;
116159
}
117-
118-
p{
119-
margin:0
160+
.results__header .no-of-results {
161+
font-size: 20px;
120162
}
163+
}
121164

122-
.avatar {
123-
height: 40px;
124-
/* float: left; */
125-
width: 40px;
126-
border-radius: 50%;
127-
}
128-
129-
.bio,
130-
.description {
131-
padding: 0.5rem;
165+
@media (min-width: 700px) {
166+
.search-results {
167+
padding: 2rem;
132168
}
169+
}
133170

134-
135-
.results__header{
136-
display: flex;
137-
justify-content: space-between;
171+
@media (min-width: 900px) {
172+
.search-results {
173+
padding: 2rem 5rem 2rem 5rem;
138174
}
175+
}
139176

140-
141-
@media (max-width:700px){
142-
.search-results{
143-
padding:1rem;
144-
}
145-
.result{
146-
display: flex;
147-
flex-direction: column;
148-
}
149-
.name-row{
150-
flex-direction: column;
151-
}
152-
.bio,.location{
153-
text-align: center;
154-
justify-content: center;
155-
}
156-
.followers{
157-
margin: auto;
158-
}
159-
.results__header{
160-
height: 50px;
161-
162-
}
163-
.results__header .no-of-results{
164-
font-size: 20px;
165-
}
166-
}
167-
168-
@media (min-width:700px){
169-
.search-results{
170-
padding:2rem;
171-
}
172-
}
173-
174-
@media (min-width:900px){
175-
.search-results{
176-
padding: 2rem 5rem 2rem 5rem;
177-
178-
}
179-
177+
@media (min-width: 1400px) {
178+
.search-results {
179+
padding: 2rem 20rem 2rem 20rem;
180180
}
181181

182-
@media (min-width:1400px){
183-
.search-results{
184-
padding: 2rem 20rem 2rem 20rem;
185-
186-
}
187-
188-
189-
.result__info{
182+
.result__info {
190183
max-width: 80%;
191184
}
192185

193-
.result{
194-
height: 200px;
195-
}
196-
186+
.result {
187+
height: 200px;
197188
}
198-
199-
189+
}

0 commit comments

Comments
 (0)