Made profile design responsive. Closes #71
This commit is contained in:
parent
b89cecd0bc
commit
153ca81808
3 changed files with 45 additions and 0 deletions
|
@ -5,6 +5,10 @@
|
|||
padding: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__section {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
|
|
|
@ -27,6 +27,11 @@
|
|||
&--edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&__check {
|
||||
|
@ -85,6 +90,10 @@
|
|||
&__content {
|
||||
margin: 5px 10px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__relation {
|
||||
|
@ -95,6 +104,11 @@
|
|||
padding: 1px 5px 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
|
@ -103,19 +117,38 @@
|
|||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
margin-right: 5px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__stat {
|
||||
|
|
|
@ -14,6 +14,14 @@
|
|||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue