tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

responsive home and stepper nav

Browse Source
This commit is contained in:
Tykayn 2022-02-09 14:47:51 +01:00 committed by tykayn
parent f635400d94
commit a14ccb3ddd
9 changed files with 83 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/core/components/header/header.component.html
View File

@ -1,54 +1,32 @@
<header class="big-header">
<div class="contained-desktop">
<div class="container">
<div class="columns">
<div class="column">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="logo-home-link navbar-item" routerLink="/">
<img
class="header-app-logo app-logo logo"
*ngIf="appLogo"
src="{{ appLogo }}"
alt="{{ appTitle }}"
/>
</a>
<a class="logo-home-link navbar-item" routerLink="/">
<span class="app-title">
{{ appTitle }}
</span>
</a>
<a class="logo-home-link navbar-item pull-left" routerLink="/">
<img class="header-app-logo app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
</a>
<div class="create-section" *ngIf="environment.display_header_create_button">
<span class="navbar-item">
<a
class="button is-primary"
role="button"
routerLink="/administration"
routerLinkActive="is-active"
>
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'creation.init' | translate }}
</div>
<div class="navbar-start">
<span class="navbar-item">
<a
*ngIf="environment.display_header_create_button"
class="button is-primary"
role="button"
routerLink="/administration"
routerLinkActive="is-active"
>
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'creation.init' | translate }}
</div>
</a>
</span>
</div>
<div class="navbar-end">
<!-- navbar items -->
<span class="navbar-item is-visible-desktop">
<app-language-selector></app-language-selector>
</span>
</div>
<!-- navbar items -->
<div class="mobile-menu" *ngIf="mobileMenuVisible">
<!-- menu mobile-->
<app-language-selector></app-language-selector>
</div>
</nav>
</div>
</a>
</span>
</div>
<div class="pull-right">
<app-language-selector></app-language-selector>
</div>
</div>
<div class="mobile-menu" *ngIf="mobileMenuVisible">
<!-- menu mobile-->
<app-language-selector></app-language-selector>
</div>
<div
*ngIf="environment.showDemoWarning"

4
src/app/core/components/header/header.component.scss
View File

@ -1,5 +1,7 @@
@import '../../../../styles/variables';
.big-header {
height: $home-nav-height;
}
.app-title {
color: $white !important;
line-height: 4rem;

2
src/app/core/components/home/home.component.ts
View File

@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
this.titleService.setTitle(environment.appTitle + ' - Landing ');
}
ngOnInit() {
this.openModalFindPoll();
// this.openModalFindPoll();
}
searchMyPolls() {

10
src/app/features/administration/stepper/stepper.component.html
View File

@ -73,17 +73,17 @@
</span>
</a>
<span *ngIf="pollService.step_current > 1">
<div *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }}
</span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
{{ 'nav.no_title' | translate }}
</span>
</span>
<span class="step-counter-text"
>{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</span>
</div>
<div class="step-counter-text">
{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</div>
</h1>
</div>
<div class="column has-text-right is-narrow">

12
src/app/features/administration/stepper/stepper.component.scss
View File

@ -25,9 +25,6 @@
display: inline-block !important;
overflow: hidden;
}
.step-counter-text {
display: block;
}
.columns,
.column {
@ -125,7 +122,7 @@
font-size: 0.85rem;
color: #767486;
margin-bottom: 0;
padding-top: 0.5rem;
padding-left: 0;
display: block;
font-weight: bold;
}
@ -135,8 +132,13 @@
}
.step-counter-text {
color: $d-primary-intense;
font-size: 1rem;
line-height: 1.25rem;
font-weight: 600;
color: $d-blue-700;
display: block;
float: left;
width: 100%;
}
.top {

6
src/styles/partials/_forms.scss
View File

@ -295,12 +295,6 @@ mat-checkbox {
line-height: 32px;
}
.step-counter-text {
color: $d-primary-intense;
font-size: 1rem;
line-height: 1.25rem;
}
.columns {
margin-left: 0;
margin-right: 0;

8
src/styles/partials/_responsive.scss
View File

@ -1,7 +1,13 @@
@import '../variables';
// small screens
@media (max-width: 487px) {
.big-header {
height: $home-nav-height-small;
}
.step {
padding: 0.25rem;
padding: $stepper-nav-height 0.25rem;
}
.bottom-step-buttons {
padding: 0;

69
src/styles/partials/global.scss
View File

@ -21,11 +21,10 @@ form {
}
main {
min-height: 90vh;
min-height: 60vh;
}
.min-height {
margin-top: 1em;
margin-bottom: 1em;
min-height: 50vh;
}
@ -57,39 +56,39 @@ main {
margin: 0 auto;
padding: 0;
//.column {
// padding: 0;
// width: 50% !important;
// float: left;
//
// &:nth-of-type(1) {
// padding-right: 1.5rem;
//
// .step-info & {
// padding: 0;
// }
// }
//
// &:nth-of-type(2) {
// padding-left: 1.5rem;
// }
//
// &.is-fullwidth {
// width: 100% !important;
// padding-right: 0 !important;
//
// .button:nth-of-type(1) {
// width: 50%;
// float: right;
// }
// }
//}
//
//.button {
// .is-half-offseted {
// float: right;
// }
//}
.column {
// padding: 0;
width: 50% !important;
// float: left;
//
// &:nth-of-type(1) {
// padding-right: 1.5rem;
//
// .step-info & {
// padding: 0;
// }
// }
//
// &:nth-of-type(2) {
// padding-left: 1.5rem;
// }
//
// &.is-fullwidth {
// width: 100% !important;
// padding-right: 0 !important;
//
// .button:nth-of-type(1) {
// width: 50%;
// float: right;
// }
// }
//}
//
//.button {
// .is-half-offseted {
// float: right;
// }
}
}
}
.top-padding-nav {

2
src/styles/variables.scss
View File

@ -80,6 +80,8 @@ $header-nav-height: 4.85rem;
$header-nav-inner-height: 4.5rem;
$widescreen-width-main-column: 75rem;
$stepper-nav-height: 4.5rem;
$home-nav-height: 4.5rem;
$home-nav-height-small: 3.5rem;
// datepicker
$cell-size: 30px;
$cell-size-desktop: 40px;