app/assets/stylesheets/components/user.scss
#user_home {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-column-gap: $baseline * 1.5;
grid-row-gap: $baseline * 1.5;
justify-content: space-around;
grid-template-areas:
"header header"
"playlists playlists"
"left right"
"card card"
"links links"
"follows follows"
"stats stats"
"mod_stats mod_stats"
"actions actions"
"plays popular";
> * {
min-width: 320px;
}
h2 {
color: $theme-accent;
padding-left: 16px;
margin-bottom: 16px;
line-height: 1;
}
.box {
margin-bottom: 0;
h2 {
padding-left: 50px;
}
}
@media #{$one-column} {
display: flex;
flex-direction: column;
column-gap: 0;
row-gap: 0;
> * {
width: 100%;
}
}
@media #{$mobile} {
padding-left: 0;
padding-right: 0;
}
#user_header_area {
grid-area: header;
}
#user_playlists_area {
grid-area: playlists;
@media #{$one-column} {
margin-top: $baseline * 1.5;
margin-bottom: -$baseline * 1.5;
}
h2 {
color: $accent;
}
ul {
margin-top: 0;
margin-bottom: 0;
}
.below_box {
margin-bottom: 26px;
@media #{$mobile} {
margin-top: 0;
}
&.sparse {
text-align: left;
}
}
}
#user_left_column {
margin-top: -$baseline * 1.5;
grid-area: left;
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
> div {
margin-bottom: $baseline * 1.5;
&:last-child {
margin-bottom: 0;
}
}
}
#user_right_column {
margin-top: -$baseline * 1.5;
grid-area: right;
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
> div {
margin-bottom: $baseline * 1.5;
&:last-child {
margin-bottom: 0;
}
}
}
#user_card_area {
grid-area: card;
@media #{$mobile} {
order: 1;
}
}
#user_links_area {
grid-area: links;
}
#user_follows_area {
grid-area: follows;
}
#user_stats_area {
grid-area: stats;
}
#user_mod_stats_area {
grid-area: mod_stats;
}
#user_actions_area {
grid-area: actions;
}
#user_plays_area {
grid-area: plays;
}
#user_popular_area {
grid-area: popular;
}
#user_header_area {
#user_header {
display: flex;
.user_name_and_follow {
display: flex;
flex-wrap: wrap;
@media #{$mobile} {
flex: 1;
padding-left: 16px;
padding-right: 16px;
}
h1.user_name {
font-size: 28px;
line-height: 1;
margin-top: 0;
margin-right: 24px;
margin-bottom: 16px;
}
button.follow {
@include image_button();
display: flex;
margin-right: 24px;
&:hover {
text-decoration: none;
}
div.follow_button {
@include default_button();
background-color: $user-follow-background;
color: $accent;
margin-right: 8px;
@media #{$mobile} {
margin-left: 0;
}
&:hover {
background-color: $user-follow-background-hover;
}
}
svg {
width: 32px;
height: 32px;
position: relative;
top: -3px;
}
}
}
}
.user_header_avatar {
margin-left: auto;
overflow: hidden;
@include samo-shadow-and-radius();
border: 1px solid $user-header-avatar-border;
width: 48px;
height: 48px;
min-width: 48px;
@media #{$mobile} {
margin-right: 16px;
}
img {
display: block;
width: 48px;
height: 48px;
}
}
}
.user_playlists_buttons {
margin-bottom: $baseline;
#create_new_playlist {
@include default_button("admin");
}
#change_playlist_order {
@include default_button("admin");
img {
display: none;
}
}
}
#user_card_area {
display: flex;
flex-wrap: wrap;
background-color: $user-card-background;
@include samo-shadow-and-radius();
box-shadow: $user-card-shadow;
overflow: hidden;
@media #{$one-column} {
flex-direction: column;
margin-top: $baseline * 1.5;
}
.user_card_avatar {
max-width: 50%;
flex-grow: 1;
@media #{$one-column} {
max-width: 100%;
width: 100%;
}
img {
width: 100%;
display: block;
}
}
.user_card_content {
flex-grow: 1;
display: flex;
flex-direction: column;
max-width: 50%;
box-sizing: border-box;
@media #{$one-column} {
max-width: 100%;
width: 100%;
margin-left: 0;
}
.user_card_bio {
flex-grow: 1;
font-size: 16px;
line-height: 1.3;
color: $user-card-bio-text;
padding: 36px;
font-family: $medium-sans-font;
p {
overflow-wrap: break-word;
}
}
.user_card_content_divider {
height: 1px;
margin: 0 24px;
background-color: $user-card-content-divider-background;
}
.user_location {
font-weight: bold;
color: $accent;
font-size: 14px;
padding: 16px 36px;
}
}
}
#user_follows_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
h2.area_heading {
font-size: 24px;
color: $body-text;
display: block;
}
> div {
background-color: $user-follows-background;
@include samo-shadow-and-radius();
flex: 1;
padding: 16px;
padding-right: 12px;
padding-left: 12px;
display: flex;
flex-wrap: wrap;
padding-bottom: 8px;
> .user_small_avatar {
margin-left: 4px;
margin-right: 4px;
height: 50px;
width: 50px;
border-radius: 4.29px;
margin-bottom: 8px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
}
}
#user_stats_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
h2.area_heading {
font-size: 24px;
color: $body-text;
display: block;
}
.area_content {
display: flex;
flex-wrap: wrap;
> div {
background-color: $user-stats-background;
@include samo-shadow-and-radius();
flex: 1;
padding: 16px;
display: flex;
> div {
> div:first-child {
color: $user-stats-label-text;
font-size: 12px;
margin-bottom: 8px;
}
> div:last-child {
font-size: 16px;
color: $user-stats-data-text;
}
}
}
> div.time_and_date {
margin-right: 16px;
@media #{$one-column} {
width: 100%;
flex: auto;
margin-right: 0;
margin-bottom: 12px;
}
> div {
width: 240px;
}
}
> div.tracks_and_listens {
div:first-child {
width: 35%;
}
div:last-child {
flex: 1;
}
}
}
}
#user_mod_stats_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
h2.area_heading {
font-size: 20px;
color: $user-mod-stats-heading-text;
display: block;
}
.area_content {
background-color: $user-mod-stats-background;
@include samo-shadow-and-radius();
.user_ip {
padding: 16px;
display: flex;
> div:first-child {
width: 240px;
}
> div:last-child {
flex: 1;
}
}
.user_agent {
padding: 16px;
border-top: 2px solid $user-mod-stats-agent-border;
> div:first-child {
color: $user-stats-label-text;
font-size: 12px;
margin-bottom: 8px;
}
> div:last-child {
font-size: 16px;
color: $user-stats-data-text;
}
}
> div {
> div {
> div:first-child {
color: $user-stats-label-text;
font-size: 12px;
margin-bottom: 8px;
}
> div:last-child {
font-size: 16px;
color: $user-stats-data-text;
}
}
}
}
}
#user_actions_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
background-color: $user-actions-area-background;
@include samo-shadow-and-radius();
padding: 12px 16px 4px 16px;
box-sizing: border-box;
> a {
margin-top: 0px;
margin-bottom: 8px;
margin-right: 4px;
}
a.edit_profile {
@include default-button("admin");
}
a.edit_profile--delete {
@include default-button("admin");
background-color: $red600;
}
}
#user_links_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
ul {
display: flex;
padding-left: 0;
flex-wrap: wrap;
overflow: auto;
@media #{$mobile} {
background-color: $user-links-background;
border-radius: 6px;
}
li {
margin-bottom: 2px;
padding-top: 4px;
padding-bottom: 4px;
background-color: $user-links-background;
color: $user-links-text;
box-sizing: border-box;
@media #{$two-column-narrow-to-full} {
width: calc(100% / 6);
&:nth-child(6n) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
a {
border-right: 0;
}
}
&:nth-child(6n + 1) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
@media #{$two-column-narrow} {
width: calc(100% / 5);
border-radius: 0;
&:nth-child(5n) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
a {
border-right: 0;
}
}
&:nth-child(5n + 1) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
@media #{$mobile-to-one-column} {
width: calc(100% / 3);
border-radius: 0;
&:nth-child(3n) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
a {
border-right: 0;
}
}
&:nth-child(3n + 1) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
}
&:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
a {
border-right: 0;
}
}
@media #{$mobile} {
width: calc(100% / 2);
border-radius: 0!important;
margin-bottom: 0px;
border-bottom: 1px solid #000;
a {
opacity: 1!important;
}
&:nth-child(2n) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
a {
border-right: 0;
}
}
&:nth-child(2n + 1) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
&:last-child {
a {
border-right: 2px solid #000;
}
}
}
a {
height: 40px;
overflow: auto;
display: block;
text-decoration: none;
display: flex;
justify-content: space-between;
padding: 0 9px;
border-right: 2px solid #999;
@media #{$mobile} {
border-right: 2px solid #000;
}
&:hover {
.link_left, .link_right {
opacity: 1;
}
}
.link_left {
opacity: 0.5;
div:nth-child(1) {
font-family: $medium-sans-font;
margin-bottom: 0px;
margin-top: 5px;
opacity: 0.5;
font-size: 12px;
}
div:nth-child(2) {
font-weight: bold;
font-size: 14px;
}
}
.link_right {
opacity: 0.5;
float: right;
width: 24px;
height: 24px;
svg {
margin-top: 8px;
}
}
}
}
}
}
#user_plays_area {
@media #{$one-column} {
margin-top: $baseline * 1.5;
}
.box > h2 {
padding-left: $baseline / 2;
}
#user_track_plays {
padding-bottom: $baseline / 2;
.static_content {
font-size: 12px;
margin-left: $baseline / 2;
margin-top: $baseline / 2;
margin-bottom: $baseline / 2;
}
}
}
}