Browse Source

Un semblant de présentation css de l’index

master
Matthieu Marcillaud 9 months ago
parent
commit
a6f7766dcc
  1. 11
      src/Stage/IndexStage.php
  2. 145
      templates/autodoc.css
  3. BIN
      templates/autodoc.png
  4. 40
      templates/index.html.twig

11
src/Stage/IndexStage.php

@ -4,6 +4,7 @@ namespace Spip\Autodoc\Stage;
use Spip\Autodoc\Context;
use Spip\Autodoc\Exception\ContextException;
use Symfony\Component\Filesystem\Filesystem;
/** Create index.html page with links of all available documentations */
class IndexStage implements StageInterface {
@ -22,6 +23,7 @@ class IndexStage implements StageInterface {
$list = $this->load($context->directory->output_base);
$list = $this->sort($list);
$this->createIndex($context, $list);
$this->copyCss($context);
return $context;
}
@ -77,12 +79,17 @@ class IndexStage implements StageInterface {
}
$index = $twig->render('index.html.twig', [
'title' => 'Documentation automatique de SPIP et ses plugins',
'title' => 'SPIP Code',
'subtitle' => 'Documentation du code de SPIP et ses plugins',
'groups' => $groups,
'organizations' => $organizations,
]);
file_put_contents($context->directory->output_base . '/index.html', $index);
}
return $context;
private function copyCss(Context $context) {
$fs = new Filesystem();
$fs->copy($context->directory->templates . '/autodoc.png', $context->directory->output_base . '/autodoc.png');
$fs->copy($context->directory->templates . '/autodoc.css', $context->directory->output_base . '/autodoc.css');
}
}

145
templates/autodoc.css

@ -0,0 +1,145 @@
:root {
--theme-color: #660e5c;
--theme-color--light: #a887b8;
--theme-gray-light: #d4d4d4;
--theme-gray-lighten: #f2f2f2;
--theme-gray-lighter: #fafafa;
--border-color: #cfcfcf;
--border-color--dark: #ccc;
--table-heading-bg: #f6f6f6;
--table-hover-bg: #f5f5f5;
}
html {
accent-color: var(--theme-color);
font-size: 100%;
line-height: 1.25;
}
html.avec_boussole_topnav body .header {
padding-top: 45px;
}
body {
margin: 0;
}
main {
line-height: 1.5;
}
a {
color: #91548C;
text-decoration: none;
transition: color .2s;
}
a:hover, a:focus {
color: #6D446A;
text-decoration: underline;
}
.hide {
display: none;
}
.container {
max-width: 1200px;
width: 100%;
margin: auto;
}
.header {
padding: 0;
padding-top: 0px;
color: white;
background: -moz-linear-gradient(250deg, var(--theme-color) 0%, var(--theme-color--light) 100%) repeat scroll 0 0
transparent;
position: relative;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.075);
}
.header .title {
position: relative;
}
.header h1 {
font-size: 40px;
margin-bottom: 0;
margin-top: 0;
padding: 34px 0 10px 150px;
font-weight: normal;
}
.header h1:before {
content: "";
position: absolute;
top: 8px;
left: -20px;
width: 176px;
height: 122px;
display: block;
background: url(autodoc.png) no-repeat top left;
}
.navbar {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: var(--theme-gray-lighter);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid var(--theme-gray-light);
background-image: linear-gradient(to bottom, #ffffff, var(--theme-gray-lighten));
background-repeat: repeat-x;
display: flex;
}
.navbar .subtitle {
padding-left: 150px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
margin: 1em 0 2em 0;
text-align: left;
}
table td,
table th {
padding: 0.3em 0.4em;
}
table tr {
border-bottom: 1px dotted var(--border-color--dark);
}
table tr:last-child {
border-bottom: 1px solid var(--border-color);
}
table caption {
border-bottom: 1px solid var(--border-color);
padding: 0.2em;
font-weight: bold;
}
table thead tr {
border-bottom: 1px solid var(--border-color);
background: var(--table-heading-bg);
}
table tbody > tr:hover > td,
table tbody > tr:hover > th {
background-color: var(--table-hover-bg);
}
.table {
margin: 1em 0 2em 0;
}
.table th,
.table td {
border-top: none;
}
td.links a + a:before {
content: "/";
display: inline-flex;
color: var(--theme-gray-light);
margin-right: 0.3em;
}
.footer {
background-color: #F5F5F5;
border-top: 1px solid #E5E5E5;
margin-top: 70px;
padding: 40px 0;
}

BIN
templates/autodoc.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

40
templates/index.html.twig

@ -7,12 +7,9 @@
<link href="__data/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="__data/css/perso.css" />
<link rel="stylesheet" href="autodoc.css" />
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<script src="__data/js/jquery.min.js"></script>
<script src="__data/bootstrap/js/bootstrap.min.js"></script>
{%- if topnav %}
<script type="text/javascript">
(function() {
@ -24,34 +21,23 @@
</head>
<body>
<header class="header subhead" id="header">
<header class="header" id="header">
<div class='container'>
<div class="heading row">
<div class="titre span12">
<h1><span></span>{{ title }}</h1>
</div>
<div class="title">
<h1>{{ title }}</h1>
</div>
</div><!-- .container -->
</div>
</header>
<div class="nav hornav clearfix" id="nav">
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<div class='babarre'>
</div><!-- /.babarre -->
</div>
</div><!-- /navbar-inner -->
<div class="navbar">
<div class="container">
<strong class="subtitle">{{ subtitle }}</strong>
</div>
</div><!-- #nav -->
</div>
{%- block principal %}
<div class='container'>
<div class="principal">
<main class="main">
<div class='container'>
<div class="content" id="content">
<h1 class='hide'>{{ title }}</h1>
{% for organization, name in organizations %}
{% if groups[organization] %}
<h2>{{ name }}</h2>
@ -87,8 +73,8 @@
{% endfor %}
</div><!-- #content -->
</div><!-- .principal -->
</div><!-- .container -->
</div><!-- .container -->
</main>
{% endblock %}
{%- block footer %}

Loading…
Cancel
Save