Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

style for homepage containers, lang selector icon, colors

Browse Source
This commit is contained in:
Tykayn 2021-12-13 18:14:40 +01:00 committed by tykayn
parent 9cf278f18b
commit e4c3d4e022
15 changed files with 113 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,3 @@
.app-logo {
max-width: 5em;
max-height: 5em;
}
.main-footer { .main-footer {
a { a {
color: #fff; color: #fff;

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

@ -1,12 +1,12 @@
<header class="big-header"> <header class="big-header">
<div class="container"> <div class="stuff">
<nav class="navbar" role="navigation" aria-label="main navigation"> <nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" routerLink="/"> <a class="navbar-item title logo-home-link has-text-black" routerLink="/">
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" /> <img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
</a> <span class="app-title">
<a class="navbar-item title is-size-1-fullhd is-size-4-touch has-text-black" routerLink="/">
{{ appTitle }} {{ appTitle }}
</span>
<!-- <sub>--> <!-- <sub>-->
<!-- {{ environment.appVersion }}--> <!-- {{ environment.appVersion }}-->
<!-- </sub>--> <!-- </sub>-->
@ -15,6 +15,7 @@
<div class="navbar-start"> <div class="navbar-start">
<span class="navbar-item"> <span class="navbar-item">
<a <a
*ngIf="environment.display_header_create_button"
class="button is-primary" class="button is-primary"
role="button" role="button"
routerLink="/administration" routerLink="/administration"
@ -25,19 +26,19 @@
{{ 'creation.init' | translate }} {{ 'creation.init' | translate }}
</div> </div>
</a> </a>
<a href="#"> <a href="#" class="navbar-item is-visible-desktop">
Explorer le libre Explorer le libre
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</a> </a>
<a href="#"> <a href="#" class="navbar-item is-visible-desktop">
Des outils éthiques Des outils éthiques
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</a> </a>
<a href="#"> <a href="#" class="navbar-item is-visible-desktop">
Changer le monde Changer le monde
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</a> </a>
<a href="#"> <a href="#" class="navbar-item is-visible-desktop">
Entraide Entraide
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</a> </a>
@ -49,10 +50,12 @@
<span class="navbar-item"> <span class="navbar-item">
<app-language-selector></app-language-selector> <app-language-selector></app-language-selector>
</span> </span>
<a href="#"> <span class="navbar-item give-to-project">
<a href="#" class="button is-outlined">
Faire un don Faire un don
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down"></i>
</a> </a>
</span>
</div> </div>
<!-- navbar items --> <!-- navbar items -->
<div class="mobile-menu" *ngIf="mobileMenuVisible"> <div class="mobile-menu" *ngIf="mobileMenuVisible">

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

@ -1,15 +1,43 @@
:host { @import '../../../../styles/variables';
margin: 0;
.demo {
margin: 1em;
}
.burger-button-menu-custom {
width: 4em;
text-align: center;
}
.navbar-item { .navbar-item {
color: $white;
.app-title {
color: $white;
}
a {
color: $white;
}
.fa { .fa {
margin-right: 1ch; margin: 0 1ch;
} }
} }
.app-logo {
max-width: $main-column-width-inner;
max-height: $main-column-width-inner;
height: 3rem;
width: 3rem;
display: inline-block;
}
.logo-home-link {
margin-top: 0;
line-height: $header-nav-inner-height;
padding: 1rem !important;
font-size: 0.85rem;
&:hover {
color: $font_color;
}
}
.give-to-project {
.button {
background: transparent;
}
}
app-language-selector {
.fa {
color: $white;
}
} }

16
src/app/core/components/home/home.component.html
View File

@ -16,7 +16,7 @@
</a> </a>
</div> </div>
<div class="column"> <div class="column">
<a role="button" class="button is-fullwidth is-secondary" routerLink="about"> <a role="button" class="button is-fullwidth is-secondary is-outlined" routerLink="about">
{{ 'config.discover' | translate }} {{ 'config.discover' | translate }}
</a> </a>
</div> </div>
@ -37,7 +37,7 @@
<form (ngSubmit)="searchMyPolls()"> <form (ngSubmit)="searchMyPolls()">
<div class="search-others-box"> <div class="search-others-box">
<div class="columns"> <div class="columns">
<div class="search-others column is-three-fifths-desktop marged-auto"> <div class="search-others column contained-in-main-column">
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'home.search_title' | translate }} {{ 'home.search_title' | translate }}
</h2> </h2>
@ -64,12 +64,12 @@
<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que <i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
votre dossier de spam. votre dossier de spam.
</div> </div>
<div <!-- <div-->
class="email_error has-background-warning padded" <!-- class="email_error has-background-warning padded"-->
*ngIf="nonexistent_email === storageService.vote_stack.owner.email" <!-- *ngIf="nonexistent_email === storageService.vote_stack.owner.email"-->
> <!-- >-->
<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email. <!-- <i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.-->
</div> <!-- </div>-->
<button <button
type="submit" type="submit"
role="button" role="button"

17
src/app/core/components/home/home.component.scss
View File

@ -22,7 +22,6 @@
&.is-secondary { &.is-secondary {
color: $white !important; color: $white !important;
background: $secondary_color !important; background: $secondary_color !important;
border-color: $secondary_color !important;
} }
} }
@ -43,24 +42,32 @@
.home-content { .home-content {
.title, .title,
.subtitle { .subtitle {
color: $primary_color; color: $secondary_color;
}
} }
} }
.search { .search {
margin-top: 2em; margin-top: 2em;
.title {
font-size: 1.5rem;
}
.search-others { .search-others {
padding: 1em; padding: 2rem;
background: $d-grey; background: $d-grey;
border-radius: 0.25em; border-radius: 0.5rem;
} }
#search_email { #search_email {
background: $white; background: $white !important;
margin-bottom: 0;
} }
.button-submit { .button-submit {
margin-top: 1rem !important;
background: $d-grey; background: $d-grey;
color: $secondary_color; color: $secondary_color;
border-color: $secondary_color; border-color: $secondary_color;
} }
.search-description {
margin: 2rem 0;
} }
} }

12
src/app/core/components/sibebar/navigation/navigation.component.scss
View File

@ -4,15 +4,3 @@ em {
margin-left: 1ch; margin-left: 1ch;
margin-right: 1ch; margin-right: 1ch;
} }
.logo-home-link {
margin-top: 0;
line-height: $header-nav-inner-height;
height: $header-nav-inner-height;
display: inline-block;
padding-left: 1em;
&:hover {
color: $font_color;
}
}

4
src/app/core/models/owner.model.ts
View File

@ -3,8 +3,8 @@ import { Poll } from './poll.model';
export class Owner { export class Owner {
constructor( constructor(
public pseudo: string = 'pseudo', public pseudo: string = '',
public email: string = '_nonexistent_contact@cipherbliss.com', public email: string = '',
public polls: Poll[] = [], public polls: Poll[] = [],
public role: UserRole = UserRole.ADMIN, public role: UserRole = UserRole.ADMIN,
public modifier_token: string = '', public modifier_token: string = '',

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

@ -58,7 +58,12 @@
[routerLink]="['/']" [routerLink]="['/']"
routerLinkActive="active" routerLinkActive="active"
> >
<img src="assets/img/icone_home.png" alt="accueil FramaDate" /> <img
class="app-logo logo"
*ngIf="environment.appLogo"
src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}"
/>
</a> </a>
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1"> <h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}

11
src/app/shared/components/selectors/language-selector/language-selector.component.html
View File

@ -1,10 +1,9 @@
<div class="selector"> <div class="selector">
<img <span class="lang-button" (click)="nextLang()">
class="lang-selector-icon clickable" {{ 'LANGUAGES.' + currentLang | translate }}
src="assets/img/icone-langue.svg" <i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>
alt="sélection de langue" </span>
(click)="nextLang()"
/>
<div class="buttons has-addons"> <div class="buttons has-addons">
<label for="lang_selector" class="hidden" <label for="lang_selector" class="hidden"
>{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label >{{ 'selector.lang' | translate }} {{ 'LANGUAGES.' + language | translate }}</label

1
src/environments/environment.prod.ts
View File

@ -29,6 +29,7 @@ export const environment = {
creation_email_is_required: true, creation_email_is_required: true,
display_menu_creation: false, display_menu_creation: false,
display_routes: false, display_routes: false,
display_header_create_button: false,
expiresDaysDelay: 60, expiresDaysDelay: 60,
frontDomain: productionBaseUrl, frontDomain: productionBaseUrl,
interval_days_default: 7, interval_days_default: 7,

1
src/environments/environment.ts
View File

@ -28,6 +28,7 @@ export const environment = {
creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day creation_display_hour_per_day: false, // display or not the ability to choose time slices different per day
creation_display_proposals_time_slices: false, creation_display_proposals_time_slices: false,
creation_email_is_required: true, creation_email_is_required: true,
display_header_create_button: false,
display_menu_creation: false, display_menu_creation: false,
display_routes: false, // demo paths to test polls display_routes: false, // demo paths to test polls
expiresDaysDelay: 60, expiresDaysDelay: 60,

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

@ -274,7 +274,7 @@ mat-checkbox {
.step { .step {
max-width: $main-column-width; max-width: $main-column-width;
margin: 0 auto; margin: 0 auto;
padding: 5rem 1rem; padding: 9rem 1rem;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
@extend .top-padding-nav; @extend .top-padding-nav;

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

@ -7,7 +7,7 @@
// wide screen like desktop // wide screen like desktop
@media (min-width: $widescreen) { @media (min-width: $widescreen) {
.step { .step {
padding: 2rem 0; padding: 6rem 0;
} }
.date-choice > input:first-of-type { .date-choice > input:first-of-type {
width: 75%; width: 75%;

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

@ -101,3 +101,10 @@ main {
width: 100%; width: 100%;
display: block; display: block;
} }
.contained-desktop,
.stuff {
display: block;
width: 100%;
max-width: $widescreen-width-main-column;
margin: 0 auto;
}

1
src/styles/variables.scss
View File

@ -73,6 +73,7 @@ $main-column-width-inner: 23.75rem;
$mobile-size: 25rem; $mobile-size: 25rem;
$header-nav-height: 4.25rem; $header-nav-height: 4.25rem;
$header-nav-inner-height: 4rem; $header-nav-inner-height: 4rem;
$widescreen-width-main-column: 75rem;
// datepicker // datepicker
$cell-size: 30px; $cell-size: 30px;