websites/coopgo
2
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

KIT&GO intro, module 1

Browse Source
This commit is contained in:
Arnaud Delcasse
2021-09-13 08:37:05 +02:00
parent b7ba1d105f
commit 498b9ab780
412 changed files with 121753 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_base.scss
View File

@@ -55,7 +55,7 @@ p {
.container {
margin: auto;
max-width: 1000px;
max-width: 1020px;
}
.cap {
@@ -65,4 +65,21 @@ p {
a {
text-decoration: none;
color: $brandblue;
}
button {
font-family: $brandfont;
padding: 10px;
border-radius: 17px;
padding-left: 20px;
padding-right: 20px;
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
font-size: 1em;
}
button:hover {
box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

79
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_flexbox.scss
View File

@@ -20,4 +20,83 @@
.direction-row-reverse {
flex-direction: row-reverse;
}
@media(max-width: $breakpoint-phone) {
.sm-flex-row {
display: flex;
}
.sm-flex-1 {
flex: 1;
}
.sm-wrap {
flex-wrap: wrap;
}
.sm-j-center {
justify-content: center;
}
.sm-ai-center {
align-items: center;
}
.sm-direction-row-reverse {
flex-direction: row-reverse;
}
}
@media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
.md-flex-row {
display: flex;
}
.md-flex-1 {
flex: 1;
}
.md-wrap {
flex-wrap: wrap;
}
.md-j-center {
justify-content: center;
}
.md-ai-center {
align-items: center;
}
.md-direction-row-reverse {
flex-direction: row-reverse;
}
}
@media(min-width: $breakpoint-tablet) {
.lg-flex-row {
display: flex;
}
.lg-flex-1 {
flex: 1;
}
.lg-wrap {
flex-wrap: wrap;
}
.lg-j-center {
justify-content: center;
}
.lg-ai-center {
align-items: center;
}
.lg-direction-row-reverse {
flex-direction: row-reverse;
}
}

84
themes/coopgo-theme/assets/sass/coopgo-web-ui-kit/_helpers.scss
View File

@@ -26,6 +26,84 @@ $widthvalues: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100, 125, 150, 200,
.min-h-#{$width} {
min-height: #{$width}px;
}
@media(max-width: $breakpoint-phone) {
.sm-w-#{$width} {
width: #{$width}px;
}
.sm-max-w-#{$width} {
max-width: #{$width}px;
}
.sm-min-w-#{$width} {
min-width: #{$width}px;
}
.sm-h-#{$width} {
height: #{$width}px;
}
.sm-max-h-#{$width} {
max-height: #{$width}px;
}
.sm-min-h-#{$width} {
min-height: #{$width}px;
}
}
@media(min-width: $breakpoint-phone) and (max-width: $breakpoint-tablet) {
.md-w-#{$width} {
width: #{$width}px;
}
.md-max-w-#{$width} {
max-width: #{$width}px;
}
.md-min-w-#{$width} {
min-width: #{$width}px;
}
.md-h-#{$width} {
height: #{$width}px;
}
.md-max-h-#{$width} {
max-height: #{$width}px;
}
.md-min-h-#{$width} {
min-height: #{$width}px;
}
}
@media(min-width: $breakpoint-tablet) {
.lg-w-#{$width} {
width: #{$width}px;
}
.lg-max-w-#{$width} {
max-width: #{$width}px;
}
.lg-min-w-#{$width} {
min-width: #{$width}px;
}
.lg-h-#{$width} {
height: #{$width}px;
}
.lg-max-h-#{$width} {
max-height: #{$width}px;
}
.lg-min-h-#{$width} {
min-height: #{$width}px;
}
}
}
@@ -78,4 +156,10 @@ $sides: (top, bottom, left, right);
padding-#{$side}: #{$space}px !important;
}
}
}
/* TEXT SIZE */
.small {
font-size: 0.8em;
}

13
themes/coopgo-theme/assets/sass/main.scss
View File

@@ -2,9 +2,10 @@
// @import 'colors' <- we use the library's default values for colors, we don't need this
nav{
height: 52px;
&#navbar {
height: 52px;
.left {
flex:0;
text-align: left;
@@ -61,6 +62,13 @@ nav{
box-sizing: border-box;
transition: ease 0.2s all;
}
&#TableOfContents {
a {
color: $white;
font-size: 0.8em;
}
}
}
@media(max-width: $breakpoint-phone) {
@@ -106,9 +114,6 @@ body {
text-align: justify;
color: $secondarycolor;
}
div {
min-width: 200px;
}
p {
text-align: justify;

2
themes/coopgo-theme/layouts/_default/list.html
View File

@@ -10,7 +10,7 @@
<div class="container flex-row j-center wrap p-30">
{{range .Pages}}
<a href="{{.Permalink}}">
<div class="max-w-300 flex-1 m-20">
<div class="max-w-250 flex-1 m-20">
{{ if (isset .Params "featuredimage" )}}
{{$img := resources.Get .Params.featuredimage}}
<div style='background-image: url({{ $img.Permalink }}); background-size: cover; background-position: center center;' class="bg-bubble w-150 h-150 m-auto"></div>

1
themes/coopgo-theme/layouts/_default/single.html
View File

@@ -1,5 +1,4 @@
{{ define "main" }}
<div class="container content">
{{.Content}}
</div>

76
themes/coopgo-theme/layouts/kitandgo/single.html Normal file
View File

@@ -0,0 +1,76 @@
{{ define "main" }}
{{ $site := .Site }}
{{ $current := . }}
<div class="content">
<div class="md-flex-row lg-flex-row md-direction-row-reverse lg-direction-row-reverse">
<div class="md-flex-1 lg-flex-1 m-20">{{.Content}}</div>
<div class="md-w-300 lg-w-300 m-0 m-t-20 m-r-10 p-20 bg-primary white">
{{$img := resources.Get "images/kit-and-go/kitandgo.png"}}
<img class="max-w-200 m-auto" src="{{ $img.Permalink }}" alt="KIT&GO" />
<div class="ta-c"><button class="m-auto m-b-20 bg-green white" onclick="togglekitandgosubscribe()">Abonnez vous</button></div>
<h2 class="white m-0 uppercase">{{.Params.Shorttitle}}</h3>
<p class="small">{{.Description}}</p>
<h3>Sommaire</h3>
{{.TableOfContents}}
<h3>Intervenant·e·s :</h3>
{{range .Params.Authors}}
<div class="flex-row ai-center">
{{ if (isset . "image" )}}
{{$img := resources.Get .image}}
<div style='background-image: url({{ $img.Permalink }}); background-size: cover; background-position: center center;' class="bg-bubble w-50 h-50 m-10"></div>
{{end}}
<div class="flex-1">
<h4 class="m-0 p-0">{{.name}}</h4>
<p class="small m-0 p-0">{{.description}}</p>
</div>
{{end}}
</div>
<h3>Accédez aux autres épisodes :</h3>
<ul class="small">
{{range (where $site.Pages.ByDate "Type" "kitandgo")}}
{{if eq .Permalink $current.Permalink}}
<li><a class="green" href="{{.Permalink}}">{{.Params.Shorttitle}}</a></li>
{{else}}
<li><a class="white" href="{{.Permalink}}">{{.Params.Shorttitle}}</a></li>
{{end}}
{{end}}
</ul>
<p class="small"><a class="white" href="/kitandgo-bibliotheque/">Bibliothèque de ressources</a></p>
<h3>Réutilisations :</h3>
<p class="small">Le savoir est bien commun. KIT&GO est publié sous licences ouvertes Creative Commons pour être facilement réutilisé et enrichi, avec quelques règles d'usage :</p>
<ul class="small">
<li>Les textes et ressources graphiques sont publiés sous licence <a class="white" href="https://creativecommons.org/licenses/by-sa/3.0/fr/">CC BY-SA 3.0</a></li>
<li>Les vidéos sont publiées sous licence <a class="white" href="https://creativecommons.org/licenses/by-nd/3.0/fr/">CC BY-ND 3.0</a></li>
</ul>
<p class="small">Vous utilisez ou adaptez les ressources KIT&GO ? Prévenez nous ! </p>
{{if (isset .Params "partners" )}}
<h3>Avec le soutien de :</h3>
{{ range .Params.Partners }}
{{ $img := resources.Get .image }}
<a href="{{.link}}"><img class="h-50 m-5" src="{{$img.Permalink}}" alt="{{.alt}}" /></a>
{{ end }}
{{end}}
</div>
</div>
</div>
<div id="kitandgosubscribe" style="position: fixed; top: 52px; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(36,56,135,0.5); display: none;" onclick="togglekitandgosubscribe()">
<div class="full-w max-w-1000 m-auto bg-white h-full" style=" opacity: 1;">
<div class="small ta-r p-10"><a style="cursor:pointer;" ontap="togglekitandgosubscribe()">X Fermer</a></div>
<iframe class="w-full h-full" style="border: 0;" src="https://kantree.io/f/711b48e0-formulaire"></iframe>
</div>
</div>
<script>
function togglekitandgosubscribe() {
var x = document.getElementById("kitandgosubscribe");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
{{ end }}

3
themes/coopgo-theme/layouts/partials/footer.html
View File

@@ -51,9 +51,8 @@
<h3 class="m-l-40 m-b-0">La coopérative :</h4>
<ul class="m-t-5">
<li><a href="/opensource/">❤️ Open source</a></li>
<li><a href="/opensource/">❤️ Open source & Open Data</a></li>
<li><a href="/mentions-legales/">Mentions légales</a></li>
<li><a href="https://emplois.scity.coop">Emplois</a></li>
</ul>
</div>
</div>

1
themes/coopgo-theme/layouts/shortcodes/center.html Normal file
View File

@@ -0,0 +1 @@
<div style="text-align: center;">{{.Inner}}</div>

204
themes/coopgo-theme/layouts/shortcodes/embed-pdf.html Normal file
View File

@@ -0,0 +1,204 @@
<script type="text/javascript" src= '/js/pdf-js/build/pdf.js'></script>
<style>
#the-canvas {
border: 1px solid black;
direction: ltr;
width: 100%;
height: auto;
display: none;
}
#paginator {
display: none;
text-align: center;
margin-bottom: 10px;
}
#loadingWrapper {
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 350px;
}
#loading {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid #d2d0d0;;
border-radius: 50%;
border-top-color: #383838;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
to { -webkit-transform: rotate(360deg); }
}
</style>
<div id="paginator">
<button id="prev">Previous</button>
<button id="next">Next</button>
&nbsp; &nbsp;
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<div id="embed-pdf-container">
<div id="loadingWrapper">
<div id="loading"></div>
</div>
<canvas id="the-canvas"></canvas>
</div>
<script type="text/javascript">
window.onload = function() {
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = "{{.Site.BaseURL}}" + '{{ .Get "url" }}';
var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
var hideLoader = "{{ .Get "hideLoader" }}" === "true";
var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + '/js/pdf-js/build/pdf.worker.js';
// Change the Scale value for lower or higher resolution.
var pdfDoc = null,
pageNum = selectedPageNum,
pageRendering = false,
pageNumPending = null,
scale = 3,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d'),
paginator = document.getElementById("paginator"),
loadingWrapper = document.getElementById('loadingWrapper');
// Attempt to show paginator and loader if enabled
showPaginator();
showLoader();
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
pageRendering = false;
showContent();
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = num;
}
/**
* Hides loader and shows canvas
*/
function showContent() {
loadingWrapper.style.display = 'none';
canvas.style.display = 'block';
}
/**
* If we haven't disabled the loader, show loader and hide canvas
*/
function showLoader() {
if(hideLoader) return
loadingWrapper.style.display = 'flex';
canvas.style.display = 'none';
}
/**
* If we haven't disabled the paginator, show paginator
*/
function showPaginator() {
if(hidePaginator) return
paginator.style.display = 'block';
}
/**
* If another page rendering in progress, waits until the rendering is
* finished. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
var numPages = pdfDoc.numPages;
document.getElementById('page_count').textContent = numPages;
// If the user passed in a number that is out of range, render the last page.
if(pageNum > numPages) {
pageNum = numPages
}
// Initial/first page rendering
renderPage(pageNum);
});
}
</script>

3
themes/coopgo-theme/layouts/shortcodes/embed.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="w-full m-auto max-w-600 h-600">
<embed class="w-full h-full" src="{{.Get 0}}"></embed>
</div>

19
themes/coopgo-theme/layouts/shortcodes/kantree-form-button.html Normal file
View File

@@ -0,0 +1,19 @@
<button class="{{.Get 1}}" onclick="toggleKantreeOverlay({{.Get 2}})">{{.Inner}}</button>
<div id="kantreeoverlay{{.Get 2}}" style="position: fixed; top: 52px; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(36,56,135,0.5); display: none;" onclick="toggleKantreeOverlay({{.Get 2}})">
<div class="w-full max-w-1000 m-auto bg-white h-full" style=" opacity: 1;">
<div class="small ta-r p-10"><a style="cursor:pointer" ontap="toggleKantreeOverlay({{.Get 2}})">X Fermer</a></div>
<iframe class="w-full h-full" style="border: 0;" src="{{.Get 0}}"></iframe>
</div>
</div>
<script>
function toggleKantreeOverlay(val) {
var x = document.getElementById("kantreeoverlay"+val);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>

3
themes/coopgo-theme/layouts/shortcodes/kantree-form-inline.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="w-full max-w-1000 m-auto">
<iframe height="{{.Get 1}}" class="w-full" style="border: 0;" src="{{.Get 0}}"></iframe>
</div>

10
themes/coopgo-theme/layouts/shortcodes/peertube.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="w-full max-w-700 m-auto" style="height: 394px;">
<iframe
class="w-full h-full"
sandbox="allow-same-origin allow-scripts allow-popups"
title="{{.Get 1}}"
src="{{.Get 0}}?warningTitle=0"
frameborder="0"
allowfullscreen>
</iframe>
</div>

4
themes/coopgo-theme/layouts/shortcodes/video.html Normal file
View File

@@ -0,0 +1,4 @@
<video controls class="w-full max-h-400 m-auto">
<source src="{{.Get 0}}" type="video/mp4" />
Votre navigateur ne supporte pas l'affichage des vidéos : <a href="{{.Get 0}}">cliquez sur ce lien pour la télécharger.</a>
</video>