Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

refactoring

This commit is contained in:
Nicolas Constant 2023-08-05 18:40:46 -04:00
parent 73ac37a8f4
commit 26a01b5c30
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/stream/status/status-translate/status-translate.component.html
View File

@ -1,6 +1,6 @@
<div class="translation" *ngIf="isTranslationAvailable && showTranslationButton"> <div class="translation translation__button-display" *ngIf="isTranslationAvailable && showTranslationButton">
<a href class="translation__link" (click)="translate()">Translate</a> <a href class="translation__link translation__button-display__link" (click)="translate()">Translate</a>
</div> </div>
<div class="translation translation__display" *ngIf="isTranslationAvailable && !showTranslationButton"> <div class="translation translation__display" *ngIf="isTranslationAvailable && !showTranslationButton">
<span class="translation__by">Translated by {{translatedBy}}</span> <a href (click)="revertTranslation()" class="translation__display__link">revert</a> <span class="translation__by">Translated by {{translatedBy}}</span> <a href (click)="revertTranslation()" class="translation__link translation__display__link">revert</a>
</div> </div>

49
src/app/components/stream/status/status-translate/status-translate.component.scss
View File

@ -1,44 +1,43 @@
@import "variables"; @import "variables";
@import "commons"; @import "commons";
$translation-color: #656b8f;
$translation-color-hover: #9fa5ca;
.translation { .translation {
margin: 0 10px 0 $avatar-column-space; margin: 0 10px 0 $avatar-column-space;
text-align: center; color: $translation-color;
font-size: 12px;
&__link, &__by { &__button-display {
font-size: 12px; text-align: center;
color: #656b8f;
padding: 5px 5px 0 5px;
}
&__link { &__link {
transition: all .2s; padding: 5px 5px 0 5px;
&:hover {
text-decoration: none;
color: #9fa5ca;
} }
} }
&__by {
display: block;
text-align: left;
padding: 5px 0 0 0;
}
&__display { &__display {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&__link { &__link {
padding: 5px 0 0 0; padding: 5px 0 0 0;
font-size: 12px;
color: #656b8f;
transition: all .2s;
&:hover {
text-decoration: none;
color: #9fa5ca;
}
} }
} }
&__link {
color: $translation-color;
transition: all .2s;
&:hover {
text-decoration: none;
color: $translation-color-hover;
}
}
&__by {
display: block;
text-align: left;
padding: 5px 0 0 0;
}
} }