add a shortcode for placing images. page section bloc, others details
This commit is contained in:
parent
52bedce0ce
commit
fc2872e03e
@ -70,9 +70,6 @@ header.header {
|
||||
background-color: $bg-dark-blue;
|
||||
}
|
||||
main > section {
|
||||
h2 {
|
||||
width: fit-content;
|
||||
}
|
||||
&.hero {
|
||||
background-color: $bg-dark-blue;
|
||||
@include add-bg-pattern(1);
|
||||
@ -126,6 +123,7 @@ section {
|
||||
width: 100%;
|
||||
}
|
||||
h2, p {
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -147,18 +145,21 @@ section {
|
||||
}
|
||||
// Add custom colored icons on each item
|
||||
&.section-1 {
|
||||
//text-transform: uppercase;
|
||||
ul li {
|
||||
font-weight: 500;
|
||||
font-size: large;
|
||||
&:nth-child(1) {
|
||||
@include add-decorative-shape($text-green, 'square', 0.7, 110px);
|
||||
@include add-decorative-shape($text-green, 'square', 0.7, 105px);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
@include add-decorative-shape($icon-red, 'circle', 0.7, 110px);
|
||||
@include add-decorative-shape($icon-red, 'circle', 0.7, 105px);
|
||||
}
|
||||
&:nth-child(3) {
|
||||
@include add-decorative-shape($chill-orange, 'square', 0.7, 110px);
|
||||
@include add-decorative-shape($chill-orange, 'square', 0.7, 105px);
|
||||
}
|
||||
&:nth-child(4) {
|
||||
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 110px);
|
||||
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -191,6 +192,47 @@ section.dark {
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-transform: unset;
|
||||
.hop {
|
||||
color: red;
|
||||
}
|
||||
|
||||
|
||||
///// PAGES
|
||||
|
||||
main > section {
|
||||
&.page-hero {
|
||||
background-color: $bg-dark-blue;
|
||||
@include add-bg-pattern(1);
|
||||
@include add-horizontal-curve(1, bottom);
|
||||
h1 { color: $text-green; }
|
||||
}
|
||||
}
|
||||
|
||||
.chapo {
|
||||
font-size: large;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
figure.image {
|
||||
//background-color: $chill-lightgray;
|
||||
//padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&.left {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
&.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
img {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
figcaption {}
|
||||
}
|
||||
@ -73,14 +73,13 @@ features:
|
||||
- #5
|
||||
class: li-block
|
||||
image: /images/svg/curve-30.svg ##
|
||||
title: Mais aussi...
|
||||
content: >
|
||||
my-content Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu lobortis elementum nibh tellus molestie nunc. Vestibulum lorem sed risus ultricies tristique nulla aliquet.
|
||||
title: #Mais aussi...
|
||||
content: #CHILL est un logiciel professionnel conçu selon les standards de développement actuels.
|
||||
bulletpoints:
|
||||
- "**Responsive et accessible depuis n’importe quel support informatique** (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs."
|
||||
- "**Propose une solution clé en main** *backend-frontend* aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques."
|
||||
- "**Respecte les principes du RGPD** de *privacy by design* et *security by design*, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus."
|
||||
- "**S’inscrit dans la philosophie du logiciel libre** et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public."
|
||||
- <h4 class='mb-4'>Responsive et accessible depuis n’importe quel support informatique</h4> (smartphone, ordinateur, tablette, etc.) afin de répondre aux enjeux de mobilité des travailleurs.
|
||||
- <h4 class='mb-4'>Propose une solution clé en main</h4> <i>backend-frontend</i> aux nombreuses possibilités de paramétrage, qui peut être adaptée et installée dans différentes infrastructures techniques.
|
||||
- <h4 class='mb-4'>Respecte les principes du RGPD</h4> de <i>privacy by design</i> et <i>security by design</i>, en offrant la possibilité aux administrateurs de paramétrer différents rôles, cercles d’utilisateurs et règles d’accès aux contenus.
|
||||
- <h4 class='mb-4'>S’inscrit dans la philosophie du logiciel libre</h4> et dans un processus d’amélioration continue pour un code source restant ouvert, car l’argent public doit fabriquer du code public.
|
||||
button:
|
||||
enable: false
|
||||
label: Button label
|
||||
|
||||
@ -1,20 +1,27 @@
|
||||
---
|
||||
title: Suivi des usagers
|
||||
subtitle: Fiches usagers
|
||||
image:
|
||||
image: /images/test/capture1.png
|
||||
description: Chill permet d'enregistrer une grande quantité d'informations utiles pour le suivi des usagers.
|
||||
comments: false
|
||||
---
|
||||
|
||||
<!-- la prochaine phrase est un chapeau -->
|
||||
|
||||
**Chill permet d'enregistrer une grande quantité d'informations utiles pour le suivi des usagers.**
|
||||
|
||||
## Collecter les informations de base
|
||||
|
||||
Chaque usager dispose **de sa propre fiche**. Elle contient les informations "de base": nom et prénom, date de naissance, données de contacts, ∵
|
||||
Chaque usager dispose **de sa propre fiche**. Elle contient les informations "de base": nom et prénom, date de naissance, données de contacts, etc.
|
||||
|
||||
Il est possible d'indiquer plusieurs **numéros de téléphone**, mais aussi d'indiquer des données de contact libre.
|
||||
|
||||
{{< place-image
|
||||
src="img/image2.jpg"
|
||||
alt="Bactérie en très gros plan"
|
||||
class="bim"
|
||||
float="left"
|
||||
width="300"
|
||||
height="200"
|
||||
caption="Bactérie en très gros plan"
|
||||
>}}
|
||||
|
||||
## Associer l'usager à un ménage
|
||||
|
||||
Chill permet d'associer chaque usager à un ménage.
|
||||
@ -23,6 +30,16 @@ Un **historique** des appartenances à un ménage est enregistré, de sorte qu'i
|
||||
|
||||
Un ménage comporte des enfants en garde alternée ? Des membres occasionnels ? Il est également possible de renseigner cette information.
|
||||
|
||||
{{< place-image
|
||||
src="img/image3.jpg"
|
||||
alt="Comic rigolo"
|
||||
class="bim"
|
||||
float="right"
|
||||
width="300"
|
||||
height="200"
|
||||
caption="Comic rigolo"
|
||||
>}}
|
||||
|
||||
## Renseigner le budget de l'usager
|
||||
|
||||
Chill permet de saisir les données de budget de l'usager et des ménages: montant des revenus et des charges mensuels.
|
||||
@ -37,6 +54,14 @@ Chill permet d'enregistrer des personnes ou des tiers comme "ressources": médec
|
||||
|
||||
Ces "ressources" peuvent être décrits comme un texte libre, ou provenir d'une base de donnée de tiers entretenue en commun. Il est également possible de renseigner d'autres usagers comme "ressources".
|
||||
|
||||
{{< place-image
|
||||
src="img/image4.jpg"
|
||||
alt="Cute puppy"
|
||||
class="bim"
|
||||
width="400"
|
||||
caption="Cute puppy"
|
||||
>}}
|
||||
|
||||
## Téléverser et générer des documents
|
||||
|
||||
Pour chaque fiche, il est possible de **téléverser des documents divers**: documents d'identités scannés, preuve d'adresse, courrier reçu, etc.
|
||||
|
||||
@ -41,8 +41,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
----
|
||||
|
||||
|
||||
<svg class="curve" preserveAspectRatio="none" viewBox="0 0 1440 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 96 80-5.3C160 85 320 75 480 64s320-21 480-21.3c160 .3 320 10.3 400 16l80 5.3V0H0v96Z"></path>
|
||||
</svg>
|
||||
themes/hugoplate/layouts/
|
||||
├── 404.html
|
||||
├── about
|
||||
│ └── list.html
|
||||
├── authors
|
||||
│ ├── list.html
|
||||
│ └── single.html
|
||||
├── blog
|
||||
│ ├── list.html
|
||||
│ └── single.html
|
||||
├── contact
|
||||
│ └── list.html
|
||||
├── _default
|
||||
│ ├── baseof.html
|
||||
│ ├── list.html
|
||||
│ ├── single.html // page
|
||||
│ ├── taxonomy.html
|
||||
│ └── terms.html
|
||||
├── index.html // home
|
||||
└── partials
|
||||
├── call-to-action.html
|
||||
├── components
|
||||
│ ├── author-card.html
|
||||
│ ├── blog-card.html
|
||||
│ ├── breadcrumb.html
|
||||
│ ├── language-switcher.html
|
||||
│ ├── pagination.html
|
||||
│ ├── theme-switcher.html
|
||||
│ └── tw-size-indicator.html
|
||||
├── essentials
|
||||
│ ├── footer.html
|
||||
│ ├── header.html // home
|
||||
│ ├── head.html
|
||||
│ ├── script.html
|
||||
│ └── style.html
|
||||
├── page-header.html // page
|
||||
└── widgets
|
||||
├── categories.html
|
||||
├── tags.html
|
||||
└── widget-wrapper.html
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.btn {
|
||||
@apply inline-block rounded border border-transparent px-5 py-2 font-semibold capitalize transition;
|
||||
@apply inline-block rounded border border-transparent px-5 py-2 font-semibold transition;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
{{ define "main" }}
|
||||
{{ partial "page-header" . }}
|
||||
|
||||
|
||||
<section class="section-sm">
|
||||
<div class="container">
|
||||
<div class="row justify-center">
|
||||
<div class="lg:col-10">
|
||||
<div class="chapo mb-8">
|
||||
{{ .Description }}
|
||||
</div>
|
||||
<div class="content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
{{ $base := site.BaseURL }}
|
||||
|
||||
|
||||
<ul class="{{ $class }} inline-flex space-x-1 capitalize">
|
||||
<ul class="{{ $class }} inline-flex space-x-1">
|
||||
<li>
|
||||
<a
|
||||
class="text-primary dark:text-darkmode-primary"
|
||||
href="{{ $base | relLangURL }}">
|
||||
{{ i18n "home" | default "Home" }}
|
||||
</a>
|
||||
<span class="inlin-block mr-1">/</span>
|
||||
<span class="inlin-block mr-1"><i class="fa fa-arrow-right"></i></span>
|
||||
</li>
|
||||
{{ range $i, $e:= $context.Ancestors.Reverse }}
|
||||
{{ if and (not .IsHome) (ne .Title "Pages") }}
|
||||
@ -20,7 +20,7 @@
|
||||
href="{{ .RelPermalink }}">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
<span class="inlin-block mr-1">/</span>
|
||||
<span class="inlin-block mr-1"><i class="fa fa-arrow-right"></i></span>
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
@ -1,9 +1,17 @@
|
||||
<section>
|
||||
<section class="dark page-hero pt-14 mb-14">
|
||||
<div class="container text-center">
|
||||
<div
|
||||
class="from-body to-theme-light dark:from-darkmode-body dark:to-darkmode-theme-light rounded-2xl bg-gradient-to-b px-8 py-14">
|
||||
<h1>{{ .Title | title }}</h1>
|
||||
<div class="px-8 py-14 dark:from-darkmode-body dark:to-darkmode-theme-light">
|
||||
<!-- bg-gradient-to-b from-body to-theme-light rounded-2xl -->
|
||||
<h1>{{ .Title }}</h1><!-- | title -->
|
||||
{{ partial "components/breadcrumb" (dict "Context" . "Class" "mt-6") }}
|
||||
</div>
|
||||
<!--
|
||||
{{ $image:= .Params.image }}
|
||||
{{ if $image }}
|
||||
<div class="mb-10">
|
||||
{{ partial "image" (dict "Src" $image "Alt" .Title "Class" "w-full rounded") }}
|
||||
</div>
|
||||
{{ end }}
|
||||
-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
25
themes/hugoplate/layouts/shortcodes/place-image.html
Normal file
25
themes/hugoplate/layouts/shortcodes/place-image.html
Normal file
@ -0,0 +1,25 @@
|
||||
{{/* layouts/shortcodes/place-image.html */}}
|
||||
|
||||
{{ $base := ref . "." }}
|
||||
{{ $src := .Get "src" }}
|
||||
{{ $baseSrc := print $base $src }}
|
||||
|
||||
{{ $alt := .Get "alt" }}
|
||||
{{ $class := .Get "class" }}
|
||||
{{ $float := .Get "float" }}
|
||||
{{ $width := .Get "width" }}
|
||||
{{ $height := .Get "height" }}
|
||||
|
||||
<figure class="image {{ with $float }}{{ $float }}{{ else }}center{{ end }}">
|
||||
<img src="{{ $baseSrc }}"
|
||||
alt="{{ $alt }}"
|
||||
class="{{ $class }}"
|
||||
width="{{ $width }}"
|
||||
height="{{ $height }}"
|
||||
>
|
||||
{{ with .Get "caption" }}
|
||||
<figcaption>
|
||||
{{ . }}
|
||||
</figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
Loading…
Reference in New Issue
Block a user