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 {
a {
color: #fff;

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

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

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

@ -1,15 +1,43 @@
:host {
margin: 0;
.demo {
margin: 1em;
@import '../../../../styles/variables';
.navbar-item {
color: $white;
.app-title {
color: $white;
}
.burger-button-menu-custom {
width: 4em;
text-align: center;
a {
color: $white;
}
.navbar-item {
.fa {
margin-right: 1ch;
}
.fa {
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>
</div>
<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 }}
</a>
</div>
@ -37,7 +37,7 @@
<form (ngSubmit)="searchMyPolls()">
<div class="search-others-box">
<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">
{{ 'home.search_title' | translate }}
</h2>
@ -64,12 +64,12 @@
<i class="fa fa-envelope"></i> C'est envoyé! Vérifiez votre boite email, ainsi que
votre dossier de spam.
</div>
<div
class="email_error has-background-warning padded"
*ngIf="nonexistent_email === storageService.vote_stack.owner.email"
>
<i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.
</div>
<!-- <div-->
<!-- class="email_error has-background-warning padded"-->
<!-- *ngIf="nonexistent_email === storageService.vote_stack.owner.email"-->
<!-- >-->
<!-- <i class="fa fa-warning"></i> Aucun sondage enregistré pour cet email.-->
<!-- </div>-->
<button
type="submit"
role="button"

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

@ -22,7 +22,6 @@
&.is-secondary {
color: $white !important;
background: $secondary_color !important;
border-color: $secondary_color !important;
}
}
@ -43,24 +42,32 @@
.home-content {
.title,
.subtitle {
color: $primary_color;
}
}
.search {
margin-top: 2em;
.search-others {
padding: 1em;
background: $d-grey;
border-radius: 0.25em;
}
#search_email {
background: $white;
}
.button-submit {
background: $d-grey;
color: $secondary_color;
border-color: $secondary_color;
}
}
}
.search {
margin-top: 2em;
.title {
font-size: 1.5rem;
}
.search-others {
padding: 2rem;
background: $d-grey;
border-radius: 0.5rem;
}
#search_email {
background: $white !important;
margin-bottom: 0;
}
.button-submit {
margin-top: 1rem !important;
background: $d-grey;
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-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 {
constructor(
public pseudo: string = 'pseudo',
public email: string = '_nonexistent_contact@cipherbliss.com',
public pseudo: string = '',
public email: string = '',
public polls: Poll[] = [],
public role: UserRole = UserRole.ADMIN,
public modifier_token: string = '',

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

@ -58,7 +58,12 @@
[routerLink]="['/']"
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>
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}

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

@ -1,10 +1,9 @@
<div class="selector">
<img
class="lang-selector-icon clickable"
src="assets/img/icone-langue.svg"
alt="sélection de langue"
(click)="nextLang()"
/>
<span class="lang-button" (click)="nextLang()">
{{ 'LANGUAGES.' + currentLang | translate }}
<i class="fa fa-language lang-selector-icon clickable" title="sélection de langue"></i>
</span>
<div class="buttons has-addons">
<label for="lang_selector" class="hidden"
>{{ '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,
display_menu_creation: false,
display_routes: false,
display_header_create_button: false,
expiresDaysDelay: 60,
frontDomain: productionBaseUrl,
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_proposals_time_slices: false,
creation_email_is_required: true,
display_header_create_button: false,
display_menu_creation: false,
display_routes: false, // demo paths to test polls
expiresDaysDelay: 60,

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

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

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

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

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

@ -101,3 +101,10 @@ main {
width: 100%;
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;
$header-nav-height: 4.25rem;
$header-nav-inner-height: 4rem;
$widescreen-width-main-column: 75rem;
// datepicker
$cell-size: 30px;