tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

⚡ lang input placement

This commit is contained in:
Baptiste Lemoine 2020-01-20 15:35:33 +01:00
parent f8568eb910
commit ff5c11e79c
10 changed files with 133 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -29,7 +29,7 @@
> >
<select <select
name="language" name="language"
class="Language-" class="language-selector"
(change)="switchLanguage(currentLang)" (change)="switchLanguage(currentLang)"
[(ngModel)]="currentLang" [(ngModel)]="currentLang"
> >

20
src/app/app.component.scss
View File

@ -1,15 +1,19 @@
@charset "UTF-8"; @charset "UTF-8";
header { header {
h1, h1,
a { a {
&::before, &::before,
&::after { &::after {
display: none; display: none;
}
} }
}
} }
i { i {
display: block; display: block;
} }
.language-selector {
width: auto;
}

17
src/app/pages/resume/resume.component.html
View File

@ -31,20 +31,11 @@
</div > </div >
<button <button [routerLink]="'/step/visibility'"
(click)='submitCreationAndGoToEnd()' class="btn btn--primary btn--full">
class="btn btn--primary btn--full"
i18n="@@confirm" >
C'est parfait! C'est parfait!
<i </button>
class='fa fa-paper-plane'
*ngIf="!config.loading" ></i >
<span
class="loading"
*ngIf="config.loading" >
<i class="fa fa-refresh fa-spin fa-fw" ></i >
</span >
</button >
<div class="back" > <div class="back" >
<a <a

3
src/app/pages/resume/resume.component.ts
View File

@ -15,7 +15,4 @@ export class ResumeComponent extends BaseComponent {
super(config); super(config);
} }
submitCreationAndGoToEnd() {
this.config.createPoll();
}
} }

20
src/app/pages/visibility/visibility.component.html
View File

@ -94,7 +94,7 @@
</section > </section >
<section class="access" > <section class="access" >
<h2 > <h2 class='title' >
{{"visibility.access"|translate}} {{"visibility.access"|translate}}
</h2 > </h2 >
<label for="url" > <label for="url" >
@ -159,11 +159,21 @@
</div > </div >
</section > </section >
<a <button
[routerLink]="'/step/end'" (click)='submitCreationAndGoToEnd()'
class="btn btn-link btn--primary" > class="btn btn--primary btn--full"
i18n="@@confirm" >
{{"visibility.validate_btn"|translate}} {{"visibility.validate_btn"|translate}}
</a > <i
class='fa fa-paper-plane'
*ngIf="!config.loading" ></i >
<span
class="loading"
*ngIf="config.loading" >
<i class="fa fa-refresh fa-spin fa-fw" ></i >
</span >
</button >
<div class="back" > <div class="back" >
<a <a

5
src/app/pages/visibility/visibility.component.scss
View File

@ -0,0 +1,5 @@
:host {
h2 {
margin-top: 1em;
}
}

3
src/app/pages/visibility/visibility.component.ts
View File

@ -21,5 +21,8 @@ export class VisibilityComponent extends BaseComponent implements OnInit {
this.config.expirationDate = (this.config.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10); this.config.expirationDate = (this.config.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10);
} }
submitCreationAndGoToEnd() {
this.config.createPoll();
}
} }

4
src/assets/scss/atoms/_forms.scss
View File

@ -97,10 +97,6 @@ input {
} }
} }
label {
font-weight: 600;
font-size: 18px;
}
.comment { .comment {
border-left: 6px solid $ugly-purple; border-left: 6px solid $ugly-purple;

108
src/assets/scss/atoms/_links.scss
View File

@ -1,66 +1,66 @@
@charset "UTF-8"; @charset "UTF-8";
a { a {
display: inline-block;
position: relative;
font-family: $default_font;
font-weight: 600;
font-size: 1.6rem;
color: $font_color;
&,
&:hover {
text-decoration: none;
}
&::before,
&::after {
content: "";
}
&.next::before,
&.prev::after {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
height: 0.6rem;
margin: auto;
background-color: $secondary_color;
z-index: -1;
}
&.next::after,
&.prev::before {
display: inline-block; display: inline-block;
width: 1rem; position: relative;
height: 1rem; font-family: $default_font;
border-bottom: 2px solid #000; font-weight: 600;
} font-size: 1.6rem;
color: $font_color !important;
&.next::after { &,
margin-right: 1rem; &:hover {
border-right: 2px solid #000; text-decoration: none;
transform: rotate(-45deg); }
}
&.prev::before { &::before,
margin-left: 1rem; &::after {
border-left: 2px solid #000; content: "";
transform: rotate(45deg); }
}
&:hover {
&.next::before, &.next::before,
&.prev::after { &.prev::after {
background-color: rgba($primary_color,0.7); position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
height: 0.6rem;
margin: auto;
background-color: $secondary_color;
z-index: -1;
} }
}
span { &.next::after,
padding-right: 1rem; &.prev::before {
padding-left: 1rem; display: inline-block;
} width: 1rem;
height: 1rem;
border-bottom: 2px solid #000;
}
&.next::after {
margin-right: 1rem;
border-right: 2px solid #000;
transform: rotate(-45deg);
}
&.prev::before {
margin-left: 1rem;
border-left: 2px solid #000;
transform: rotate(45deg);
}
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span {
padding-right: 1rem;
padding-left: 1rem;
}
} }

72
src/assets/scss/molecules/_logo.scss
View File

@ -1,64 +1,70 @@
.logo_first, .logo_second { .logo_first, .logo_second {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
.logo_first { .logo_first {
color: $logo_color; color: $logo_color;
} }
.logo_second { .logo_second {
color: $logo_color_2; color: $logo_color_2;
} }
.wrapper { .wrapper {
display: grid; display: grid;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 80px; width: 20em;
margin-top: 1rem; margin-top: 1rem;
select {
float: right;
}
} }
.lang_icon { .lang_icon {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 1ch;
} }
.menu_icon { .menu_icon {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.lang_label { .lang_label {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
.menu_label { .menu_label {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
font-family: SourceSansPro; font-family: SourceSansPro;
font-size: 11px; font-size: 11px;
padding-top: 10px; padding-top: 10px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.legend_first { .legend_first {
color: $legend_color; color: $legend_color;
padding-right: 0rem; padding-right: 0rem;
padding-left: 0rem; padding-left: 0rem;
} }
.legend_second { .legend_second {
color: $legend_color_2; color: $legend_color_2;
padding-right: 0rem; padding-right: 0rem;
padding-left: 0rem; padding-left: 0rem;
} }
.legend { .legend {
font-size: 10px; font-size: 10px;
} }