Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests 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"> <header class="big-header">
<div class="contained-desktop"> <div class="contained-desktop">
<div class="container"> <div class="container">
<div class="columns"> <a class="logo-home-link navbar-item pull-left" routerLink="/">
<div class="column"> <img class="header-app-logo app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
<nav class="navbar" role="navigation" aria-label="main navigation"> </a>
<div class="navbar-brand">
<a class="logo-home-link navbar-item" routerLink="/"> <div class="create-section" *ngIf="environment.display_header_create_button">
<img <span class="navbar-item">
class="header-app-logo app-logo logo" <a
*ngIf="appLogo" class="button is-primary"
src="{{ appLogo }}" role="button"
alt="{{ appTitle }}" routerLink="/administration"
/> routerLinkActive="is-active"
</a> >
<a class="logo-home-link navbar-item" routerLink="/"> <i class="fa fa-plus-circle"></i>
<span class="app-title"> <div class="is-hidden-touch">
{{ appTitle }} {{ 'creation.init' | translate }}
</span>
</a>
</div> </div>
<div class="navbar-start"> </a>
<span class="navbar-item"> </span>
<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>
</div> </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>
<div <div
*ngIf="environment.showDemoWarning" *ngIf="environment.showDemoWarning"

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

@ -1,5 +1,7 @@
@import '../../../../styles/variables'; @import '../../../../styles/variables';
.big-header {
height: $home-nav-height;
}
.app-title { .app-title {
color: $white !important; color: $white !important;
line-height: 4rem; 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 '); this.titleService.setTitle(environment.appTitle + ' - Landing ');
} }
ngOnInit() { ngOnInit() {
this.openModalFindPoll(); // this.openModalFindPoll();
} }
searchMyPolls() { searchMyPolls() {

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

@ -73,17 +73,17 @@
</span> </span>
</a> </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"> <span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }} {{ pollService.form.value.title }}
</span> </span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length"> <span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
{{ 'nav.no_title' | translate }} {{ 'nav.no_title' | translate }}
</span> </span>
</span> </div>
<span class="step-counter-text" <div class="step-counter-text">
>{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }} {{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</span> </div>
</h1> </h1>
</div> </div>
<div class="column has-text-right is-narrow"> <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; display: inline-block !important;
overflow: hidden; overflow: hidden;
} }
.step-counter-text {
display: block;
}
.columns, .columns,
.column { .column {
@ -125,7 +122,7 @@
font-size: 0.85rem; font-size: 0.85rem;
color: #767486; color: #767486;
margin-bottom: 0; margin-bottom: 0;
padding-top: 0.5rem; padding-left: 0;
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
@ -135,8 +132,13 @@
} }
.step-counter-text { .step-counter-text {
color: $d-primary-intense;
font-size: 1rem;
line-height: 1.25rem;
font-weight: 600; font-weight: 600;
color: $d-blue-700; display: block;
float: left;
width: 100%;
} }
.top { .top {

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

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

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

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

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

@ -21,11 +21,10 @@ form {
} }
main { main {
min-height: 90vh; min-height: 60vh;
} }
.min-height { .min-height {
margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
min-height: 50vh; min-height: 50vh;
} }
@ -57,39 +56,39 @@ main {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
//.column { .column {
// padding: 0; // padding: 0;
// width: 50% !important; width: 50% !important;
// float: left; // float: left;
// //
// &:nth-of-type(1) { // &:nth-of-type(1) {
// padding-right: 1.5rem; // padding-right: 1.5rem;
// //
// .step-info & { // .step-info & {
// padding: 0; // padding: 0;
// } // }
// } // }
// //
// &:nth-of-type(2) { // &:nth-of-type(2) {
// padding-left: 1.5rem; // padding-left: 1.5rem;
// } // }
// //
// &.is-fullwidth { // &.is-fullwidth {
// width: 100% !important; // width: 100% !important;
// padding-right: 0 !important; // padding-right: 0 !important;
// //
// .button:nth-of-type(1) { // .button:nth-of-type(1) {
// width: 50%; // width: 50%;
// float: right; // float: right;
// } // }
// } // }
//} //}
// //
//.button { //.button {
// .is-half-offseted { // .is-half-offseted {
// float: right; // float: right;
// } // }
//} }
} }
} }
.top-padding-nav { .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; $header-nav-inner-height: 4.5rem;
$widescreen-width-main-column: 75rem; $widescreen-width-main-column: 75rem;
$stepper-nav-height: 4.5rem; $stepper-nav-height: 4.5rem;
$home-nav-height: 4.5rem;
$home-nav-height-small: 3.5rem;
// datepicker // datepicker
$cell-size: 30px; $cell-size: 30px;
$cell-size-desktop: 40px; $cell-size-desktop: 40px;