Merge branch 'ng-init' of framagit.org:framasoft/framadate/funky-framadate-front into ng-init

src/app/app.component.html

@@ -1,9 +1,5 @@
-<div style="text-align:center">
+<header style="text-align:center">
-	<a
+	<a [routerLink]="'home'" class="home_link" aria-roledescription="home">
-		  [routerLink]="'home'"
-		  class="home_link"
-		  aria-roledescription="home"
-	>
 		<h1>
 			<span class="logo_first">Frama</span>
 			<span class="logo_second">date</span>
@@ -13,7 +9,9 @@
 		</i>
 	</a>
 
-</div>
+</header>
 <framadate-navigation></framadate-navigation>
-<router-outlet></router-outlet>
+<main>
-<framadate-debugger></framadate-debugger>
+	<router-outlet></router-outlet>
+</main>
+<framadate-debugger></framadate-debugger>

src/app/app.component.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+header {
+  h1,
+  a {
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+i {
+  display: block;
+}

src/app/app.module.ts

@@ -20,6 +20,7 @@ import { PicturesComponent } from './pages/pictures/pictures.component';
 import { AnswersComponent } from './pages/answers/answers.component';
 import { EndConfirmationComponent } from './pages/end-confirmation/end-confirmation.component';
 import { CreateOrRetrieveComponent } from './page/create-or-retrieve/create-or-retrieve.component';
+import { CalendarComponent } from './calendar/calendar.component';
 
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -42,6 +43,7 @@ registerLocaleData(localeFr, 'fr');
     AnswersComponent,
     EndConfirmationComponent,
     CreateOrRetrieveComponent,
+    CalendarComponent,
 
   ],
   imports: [

src/app/calendar/calendar.component.html

@@ -0,0 +1 @@
+<p>calendar works!</p>

src/app/calendar/calendar.component.html.save

@@ -0,0 +1 @@
+

src/app/calendar/calendar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CalendarComponent } from './calendar.component';
+
+describe('CalendarComponent', () => {
+  let component: CalendarComponent;
+  let fixture: ComponentFixture<CalendarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CalendarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CalendarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/calendar/calendar.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'framadate-calendar',
+  templateUrl: './calendar.component.html',
+  styleUrls: ['./calendar.component.scss']
+})
+export class CalendarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/page/create-or-retrieve/create-or-retrieve.component.html

@@ -11,7 +11,6 @@
 	</p>
 	<a
 		  [routerLink]="'/home'"
-		  class="btn striked"
 	>
 		C'est parti
 	</a>
@@ -36,7 +35,6 @@
 			  name="mail"
 			  id="email"
 			  autofocus="autofocus"
-			  placeholder="mon e-mail"
 		/>
 		<input
 			  type="submit"

src/app/ui/navigation/navigation.component.html

@@ -1,56 +1,29 @@
 <nav class="choices">
-	<a
+	<a [routerLink]="'/step/creation'">
-
-		  [routerLink]="'/step/creation'"
-	>
 		Création
 	</a>
-	<a
+	<a [routerLink]="'/step/date'">
-
-		  [routerLink]="'/step/date'"
-	>
 		Les Dates
 	</a>
-	<a
+	<a [routerLink]="'/step/answers'">
-
-		  [routerLink]="'/step/answers'"
-	>
 		Réponses
 	</a>
-	<a
+	<a [routerLink]="'/step/visibility'">
-
-		  [routerLink]="'/step/visibility'"
-	>
 		Visibilité
 	</a>
-	<a
+	<a [routerLink]="'/step/base'">
-
-		  [routerLink]="'/step/base'"
-	>
 		Base
 	</a>
-	<a
+	<a [routerLink]="'/step/pictures'">
-
-		  [routerLink]="'/step/pictures'"
-	>
 		Images
 	</a>
-	<a
+	<a [routerLink]="'/step/resume'">
-
-		  [routerLink]="'/step/resume'"
-	>
 		Résumé
 	</a>
-	<a
+	<a [routerLink]="'/step/kind'">
-
-		  [routerLink]="'/step/kind'"
-	>
 		Page démo
 	</a>
-	<a
+	<a [routerLink]="'/home'">
-
-		  [routerLink]="'/home'"
-	>
 		Accueil
 	</a>
-</nav>
+</nav>

src/app/ui/navigation/navigation.component.scss

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+nav {
+  text-align: center;
+  margin-bottom: 3.2rem;
+  padding-top: 1.6rem;
+  padding-bottom: 1.6rem;
+  border-top: 2px solid #ffd52c;
+  border-bottom: 2px solid #ffd52c;
+
+  a {
+    &::before {
+      display: inline-block;
+      position: relative;
+      width: auto;
+      background: none;
+    }
+    &::after {
+      display: none;
+    }
+
+    &:not(:first-of-type)::before {
+      content: ' | ';
+      
+    }
+  }
+}

src/assets/css/bootstrap-reboot-4.3.1.css

@@ -0,0 +1,331 @@
+/*!
+ * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+ *,
+ *::before,
+ *::after {
+   box-sizing: border-box;
+ }
+ 
+ html {
+   font-family: sans-serif;
+   line-height: 1.15;
+   -webkit-text-size-adjust: 100%;
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ }
+ 
+ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+   display: block;
+ }
+ 
+ body {
+   margin: 0;
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+   font-size: 1rem;
+   font-weight: 400;
+   line-height: 1.5;
+   color: #212529;
+   text-align: left;
+   background-color: #fff;
+ }
+ 
+ [tabindex="-1"]:focus {
+   outline: 0 !important;
+ }
+ 
+ hr {
+   box-sizing: content-box;
+   height: 0;
+   overflow: visible;
+ }
+ 
+ h1, h2, h3, h4, h5, h6 {
+   margin-top: 0;
+   margin-bottom: 0.5rem;
+ }
+ 
+ p {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+ 
+ abbr[title],
+ abbr[data-original-title] {
+   text-decoration: underline;
+   -webkit-text-decoration: underline dotted;
+   text-decoration: underline dotted;
+   cursor: help;
+   border-bottom: 0;
+   -webkit-text-decoration-skip-ink: none;
+   text-decoration-skip-ink: none;
+ }
+ 
+ address {
+   margin-bottom: 1rem;
+   font-style: normal;
+   line-height: inherit;
+ }
+ 
+ ol,
+ ul,
+ dl {
+   margin-top: 0;
+   margin-bottom: 1rem;
+ }
+ 
+ ol ol,
+ ul ul,
+ ol ul,
+ ul ol {
+   margin-bottom: 0;
+ }
+ 
+ dt {
+   font-weight: 700;
+ }
+ 
+ dd {
+   margin-bottom: .5rem;
+   margin-left: 0;
+ }
+ 
+ blockquote {
+   margin: 0 0 1rem;
+ }
+ 
+ b,
+ strong {
+   font-weight: bolder;
+ }
+ 
+ small {
+   font-size: 80%;
+ }
+ 
+ sub,
+ sup {
+   position: relative;
+   font-size: 75%;
+   line-height: 0;
+   vertical-align: baseline;
+ }
+ 
+ sub {
+   bottom: -.25em;
+ }
+ 
+ sup {
+   top: -.5em;
+ }
+ 
+ a {
+   color: #007bff;
+   text-decoration: none;
+   background-color: transparent;
+ }
+ 
+ a:hover {
+   color: #0056b3;
+   text-decoration: underline;
+ }
+ 
+ a:not([href]):not([tabindex]) {
+   color: inherit;
+   text-decoration: none;
+ }
+ 
+ a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
+   color: inherit;
+   text-decoration: none;
+ }
+ 
+ a:not([href]):not([tabindex]):focus {
+   outline: 0;
+ }
+ 
+ pre,
+ code,
+ kbd,
+ samp {
+   font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+   font-size: 1em;
+ }
+ 
+ pre {
+   margin-top: 0;
+   margin-bottom: 1rem;
+   overflow: auto;
+ }
+ 
+ figure {
+   margin: 0 0 1rem;
+ }
+ 
+ img {
+   vertical-align: middle;
+   border-style: none;
+ }
+ 
+ svg {
+   overflow: hidden;
+   vertical-align: middle;
+ }
+ 
+ table {
+   border-collapse: collapse;
+ }
+ 
+ caption {
+   padding-top: 0.75rem;
+   padding-bottom: 0.75rem;
+   color: #6c757d;
+   text-align: left;
+   caption-side: bottom;
+ }
+ 
+ th {
+   text-align: inherit;
+ }
+ 
+ label {
+   display: inline-block;
+   margin-bottom: 0.5rem;
+ }
+ 
+ button {
+   border-radius: 0;
+ }
+ 
+ button:focus {
+   outline: 1px dotted;
+   outline: 5px auto -webkit-focus-ring-color;
+ }
+ 
+ input,
+ button,
+ select,
+ optgroup,
+ textarea {
+   margin: 0;
+   font-family: inherit;
+   font-size: inherit;
+   line-height: inherit;
+ }
+ 
+ button,
+ input {
+   overflow: visible;
+ }
+ 
+ button,
+ select {
+   text-transform: none;
+ }
+ 
+ select {
+   word-wrap: normal;
+ }
+ 
+ button,
+ [type="button"],
+ [type="reset"],
+ [type="submit"] {
+   -webkit-appearance: button;
+ }
+ 
+ button:not(:disabled),
+ [type="button"]:not(:disabled),
+ [type="reset"]:not(:disabled),
+ [type="submit"]:not(:disabled) {
+   cursor: pointer;
+ }
+ 
+ button::-moz-focus-inner,
+ [type="button"]::-moz-focus-inner,
+ [type="reset"]::-moz-focus-inner,
+ [type="submit"]::-moz-focus-inner {
+   padding: 0;
+   border-style: none;
+ }
+ 
+ input[type="radio"],
+ input[type="checkbox"] {
+   box-sizing: border-box;
+   padding: 0;
+ }
+ 
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="month"] {
+   -webkit-appearance: listbox;
+ }
+ 
+ textarea {
+   overflow: auto;
+   resize: vertical;
+ }
+ 
+ fieldset {
+   min-width: 0;
+   padding: 0;
+   margin: 0;
+   border: 0;
+ }
+ 
+ legend {
+   display: block;
+   width: 100%;
+   max-width: 100%;
+   padding: 0;
+   margin-bottom: .5rem;
+   font-size: 1.5rem;
+   line-height: inherit;
+   color: inherit;
+   white-space: normal;
+ }
+ 
+ progress {
+   vertical-align: baseline;
+ }
+ 
+ [type="number"]::-webkit-inner-spin-button,
+ [type="number"]::-webkit-outer-spin-button {
+   height: auto;
+ }
+ 
+ [type="search"] {
+   outline-offset: -2px;
+   -webkit-appearance: none;
+ }
+ 
+ [type="search"]::-webkit-search-decoration {
+   -webkit-appearance: none;
+ }
+ 
+ ::-webkit-file-upload-button {
+   font: inherit;
+   -webkit-appearance: button;
+ }
+ 
+ output {
+   display: inline-block;
+ }
+ 
+ summary {
+   display: list-item;
+   cursor: pointer;
+ }
+ 
+ template {
+   display: none;
+ }
+ 
+ [hidden] {
+   display: none !important;
+ }
+ /*# sourceMappingURL=bootstrap-reboot.css.map */

src/assets/scss/atoms/_fonts.scss

@@ -4,8 +4,56 @@
 //  src: url("ProzaLibre-Regular.ttf") format("ttf"); // TODO find the correct path
 //}
 
+@font-face {
+  font-family: "pt_sans";
+  src: url("assets/fonts/pt_sans_regular-webfont.woff2") format("woff2"),
+    url("assets/fonts/pt_sans_regular-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "pt_sans";
+  src: url("assets/fonts/pt_sans_bold-webfont.woff2") format("woff2"),
+    url("assets/fonts/pt_sans_bold-webfont.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "proza_libre";
+  src: url("assets/fonts/prozalibre-regular-webfont.woff2") format("woff2"), 
+  url("assets/fonts/prozalibre-regular-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "proza_libre";
+  src: url("assets/fonts/prozalibre-medium-webfont.woff2") format("woff2"), 
+  url("assets/fonts/prozalibre-medium-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "proza_libre";
+  src: url("assets/fonts/prozalibre-semibold-webfont.woff2") format("woff2"), 
+  url("assets/fonts/prozalibre-semibold-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "proza_libre";
+  src: url("assets/fonts/prozalibre-bold-webfont.woff2") format("woff2"), 
+  url("assets/fonts/prozalibre-bold-webfont.woff") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+
 body {
-  font-family: "Proza-libre", "PT Sans", "DejaVu Sans Light", "Arial", "DejaVu Sans Mono";
+  font-family: $default_font, Arial, Helvetica, sans-serif;
   font-size: 1.4rem;
 }
 
@@ -15,5 +63,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Proza-libre", "Brie Light", "Arial", "DejaVu Sans Mono";
+  font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono";
 }

src/assets/scss/atoms/_forms.scss

@@ -16,6 +16,9 @@ input,
 textarea,
 select {
   @extend .funky-box;
+  border:none;
+  border-bottom:2px solid $primary_color;
+  
 }
 
 textarea {

src/assets/scss/atoms/_headings.scss

@@ -1,10 +1,18 @@
 @charset "UTF-8";
 
-h1,
+
-h2,
+h1 {
-h3,
+  display: inline-block;
-h4,
+  margin-bottom: 3rem;
-h5,
+
-h6 {
+  &::after {
-  border-bottom: 1px solid $primary_color;
+    content: "";
+    display: block;
+    width: 27.4%;
+    height: 2px;
+    margin-top: 5px;
+    margin-right: auto;
+    margin-left: auto;
+    background-color: $primary_color;
+  }
 }

src/assets/scss/atoms/_links.scss

@@ -1,15 +1,28 @@
 @charset "UTF-8";
 
 a {
+  position: relative;
+  font-family: $default_font;
+  font-weight: 600;
+  font-size: 1.6rem;
+  color: $black;
   text-decoration: none;
 
-  nav & {
+  &::before {
-    @extend .btn-outline, .btn;
+    content: "";
-    display: inline-block;
+    position: absolute;
-    margin: 0.5em;
+    top: 0;
-    padding: 0.5em;
+    bottom: 0;
-    color: #000;
+    display: block;
-    font-size: 1rem;
+    width: 100%;
+    height: 6px;
+    margin: auto;
+    background-color: $primary_color;
+    z-index: -1;
+  }
+
+  &::after {
+    content: ">";
   }
 }
 

src/assets/scss/atoms/_main.scss

@@ -1,12 +1,9 @@
 @charset "UTF-8";
 
-body {
+main {
-  background-color: #fff;
-  padding: 1rem;
-}
-
-app-root {
   max-width: 500px; // to look like the styleguide, to remove when we will have full width views
+  width: 100%;
   display: block;
   margin: 0 auto;
+  padding: 0 1.2rem;
 }

src/assets/scss/atoms/_section.scss

@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+section {
+    & + & {
+        margin-top: 6rem;
+    }
+}

src/assets/scss/default.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+html { 
+  font-size: 62.5%; /* 10px */
+  font-size: calc(1em * 0.625); /* fix */
+}

src/assets/scss/variables.scss

@@ -14,3 +14,7 @@ $primary_color: $sun-yellow;
 $font_color: $black;
 $logo_color: $dark-lavender;
 $logo_color_2: $camo;
+
+// FONT
+$default_font : "pt_sans";
+$title_font: "proza_libre";

src/index.html

@@ -7,6 +7,8 @@
 
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="favicon.ico" rel="icon" type="image/x-icon">
+
+  <link rel="stylesheet" href="assets/css/bootstrap-reboot-4.3.1.css">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,7 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "assets/scss/variables";
-@import "assets/scss/global_layout";
+@import "assets/scss/default";
 
+@import "assets/scss/atoms/main";
+@import "assets/scss/atoms/section";
 @import "assets/scss/atoms/fonts";
 @import "assets/scss/atoms/headings";
 @import "assets/scss/atoms/buttons";