treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Update glitch-soc style to match new bio fields markup

lolsob-rspec
Thibaut Girka 2018-05-09 22:11:59 +02:00
parent 5b46a6002f
commit b8f8a3ea58
2 changed files with 50 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/javascript/flavours/glitch/styles/components/metadata.scss
View File

@ -2,7 +2,6 @@
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
overflow: hidden; overflow: hidden;
border-collapse: collapse;
margin: 20px -10px -20px; margin: 20px -10px -20px;
border-bottom: 0; border-bottom: 0;
@ -14,35 +13,36 @@
} }
} }
tr { dl {
border-top: 1px solid lighten($ui-base-color, 8%); border-top: 1px solid lighten($ui-base-color, 8%);
text-align: center; display: flex;
} }
th, td { dt,
dd {
box-sizing: border-box;
padding: 14px 20px; padding: 14px 20px;
vertical-align: middle; text-align: center;
max-height: 48px;
& > div { overflow: hidden;
max-height: 40px; white-space: nowrap;
overflow-y: auto;
white-space: pre-wrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
}
th { dt {
color: $darker-text-color; color: $darker-text-color;
background: lighten($ui-base-color, 13%); background: lighten($ui-base-color, 13%);
max-width: 120px; width: 120px;
flex: 0 0 auto;
font-weight: 500;
a { a {
color: $primary-text-color; color: $primary-text-color;
} }
} }
td { dd {
flex: auto; flex: 1 1 auto;
color: $primary-text-color; color: $primary-text-color;
background: $ui-base-color; background: $ui-base-color;

55
app/javascript/flavours/glitch/styles/metadata.scss
View File

@ -1,43 +1,56 @@
.account__header__fields { .account__header__fields {
$meta-table-border: lighten($ui-base-color, 8%); $meta-table-border: lighten($ui-base-color, 8%);
border-collapse: collapse;
padding: 0; padding: 0;
margin: 15px -15px -15px -15px; margin: 15px -15px -15px -15px;
border: 0 none; border: 0 none;
border-top: 1px solid $meta-table-border; border-top: 1px solid $meta-table-border;
border-bottom: 1px solid $meta-table-border; border-bottom: 1px solid $meta-table-border;
font-size: 14px;
line-height: 20px;
td, th { dl {
padding: 15px; display: flex;
border: 0 none;
border-bottom: 1px solid $meta-table-border; border-bottom: 1px solid $meta-table-border;
vertical-align: middle;
} }
tr:last-child { dt,
td, th { dd {
border-bottom: 0 none; box-sizing: border-box;
} padding: 14px;
}
td {
color: $ui-primary-color;
text-align: center; text-align: center;
width:100%; max-height: 48px;
padding-left: 0; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
th { dt {
padding-left: 15px; padding-left: 15px;
font-weight: bold; font-weight: 500;
text-align: center; text-align: center;
width: 94px; width: 120px;
color: $ui-secondary-color; flex: 0 0 auto;
color: $secondary-text-color;
background: darken($ui-base-color, 8%); background: darken($ui-base-color, 8%);
} }
dd {
flex: 1 1 auto;
color: $darker-text-color;
}
a { a {
color: $classic-highlight-color; color: $highlight-text-color;
text-decoration: none;
&:hover,
&:focus,
&:active {
text-decoration: underline;
}
}
dl:last-child {
border-bottom: 0;
} }
} }