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

reordering the manage panel to include more functionnalities

This commit is contained in:
Nicolas Constant 2019-03-18 23:28:44 -04:00
parent eb552028b0
commit 5376ce0703
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/components/floating-column/manage-account/manage-account.component.html
View File

@ -1,16 +1,20 @@
<div class="panel">
<h3 class="panel__title">Manage Account</h3>
<div class="account-editor__display-avatar">
<img class="account-editor__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
<div class="account__header">
<!-- <div class="account__display-avatar"> -->
<img class="account__avatar" src="{{account.avatar}}" title="{{ account.info.id }} " />
<!-- </div> -->
</div>
<h4 class="account__label">add column:</h4>
<div class="account__body flexcroll">
<a class="account__link account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
{{ stream.name }}
</a>
<!-- <a class="add-column__link" href>
<h4 class="account__label">add column:</h4>
<a class="account__link account__blue" href *ngFor="let stream of availableStreams" (click)="addStream(stream)">
{{ stream.name }}
</a>
<!-- <a class="add-column__link" href>
Global Timeline
</a>
<a class="add-column__link" href>
@ -21,8 +25,9 @@
</a> -->
<h4 class="account__label account__margin-top">remove account from sengi:</h4>
<a class="account__link account__red" href (click)="removeAccount()">
Delete
</a>
<h4 class="account__label account__margin-top">remove account from sengi:</h4>
<a class="account__link account__red" href (click)="removeAccount()">
Delete
</a>
</div>
</div>

50
src/app/components/floating-column/manage-account/manage-account.component.scss
View File

@ -1,29 +1,42 @@
@import "variables";
@import "panel";
.account-editor {
// padding: 10px 10px 0 7px;
// font-size: $small-font-size;
// &__title {
// font-size: 13px;
// text-transform: uppercase;
// margin: 6px 0 12px 0;
// }
&__display-avatar {
text-align: center;
margin-bottom: 30px;
}
&__avatar {
// display: block;
width: 75px;
border-radius: 50px;
transform: translateX(15px); // margin: auto;
}
@import "commons";
$account-header-height: 55px;
.panel {
padding-left: 0px;
padding-right: 0px;
}
.account {
&__header {
// padding-left: 10px;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 5px;
height: $account-header-height; //border-top: 1px solid #222736;
border-bottom: 1px solid #222736;
} // &__display-avatar {
// text-align: center;
// margin-bottom: 30px;
// }
&__avatar {
// display: block;
width: 50px;
border-radius: 3px; //transform: translateX(15px); // margin: auto;
}
&__body {
overflow: auto;
height: calc(100% - #{$account-header-height} - 31px);
padding-left: 10px;
padding-right: 10px;
// outline: 1px solid red;
}
&__label {
// text-decoration: underline;
font-size: $small-font-size;
margin-top: 10px;
margin-left: 5px;
color: $font-color-secondary;
}
@ -55,7 +68,6 @@
background-color: lighten($color-primary, 15);
}
}
&__red {
$red-button-color: rgb(65, 3, 3);
background-color: $red-button-color;