Proposition avec les logos à gauche. Ça oblige à passer par du flex pour que... (4216d1db) · Validations · spip / svp

formulaires/inc-admin_plugin.html

+7 −4

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -28,6 +28,7 @@
		id="(#PREFIXE\|strtolower)-#COMPTEUR_BOUCLE"][ data-id_paquet="(#ID_PAQUET)"]>

		[(#REM) Checkbox pour actions groupées ]
		<div class="col-check">
		[(#GET{incompatible}\|non\|ou{#GET{attente}}\|et{#GET{verrou}\|non})
		[(#GET{obsolete}\|non)
		<div class="check">
		@@ -45,12 +46,14 @@
		]
		]
		]
		</div>

		<div class="col-icon">[(#LOGO\|oui)<div class="icon">
		[(#CONST{#CONSTANTE}\|concat{#SRC_ARCHIVE/#LOGO}\|balise_img)]
		</div>]</div>

		[(#REM) Resume du plugin ]
		<div class="resume">
		[(#LOGO\|oui)<div class="icon">
		[(#CONST{#CONSTANTE}\|concat{#SRC_ARCHIVE/#LOGO}\|balise_img)]
		</div>]
		<h3 class="nom">[(#NOM\|extraire_multi\|svp_importer_charset)]</h3>
		<small class="version">#_plugins:VERSION</small>
		[(#ENV{verrouille}\|=={tous}\|oui)
		@@ -158,7 +161,7 @@
		</div>
		]

		</div>
		</div>[(#REM) /.footer ]

		[(#REM) Détails ]
		[(#GET{details})

prive/style_prive_plugin_svp.html

+72 −22

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		@@ -46,11 +46,51 @@

		/* Item + états */
		.liste-plugins .liste-items .item {
		padding-#ENV{left}: 46px;
		padding-#ENV{right}: 10px;
		padding-left: 10px;
		padding-right: 10px;
		overflow: initial;
		clear: both;
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		}
		.liste-plugins .item .col-check {
		width: 1.25em;
		text-align: left;
		padding: 0 5px;
		align-self: center;
		}
		.liste-plugins .item .col-icon {
		width: 38px;
		padding-right: .75em;
		align-self: center;
		}
		.liste-plugins .item .resume {
		align-self: center;
		}
		.liste-plugins .item .messages,
		.liste-plugins .item .footer,
		.liste-plugins .item .details {
		flex-basis: 100%;
		margin-left: calc(48px + 2em);
		}
		.liste-plugins .item .footer {
		flex-wrap: wrap;
		}
		@media (max-width: 500px) {
		.liste-plugins .item .col-icon {
		width: 18px;
		}
		.liste-plugins .item .messages,
		.liste-plugins .item .footer,
		.liste-plugins .item .details {
		flex-basis: 100%;
		margin-left: calc(28px + 2em);
		flex-wrap: wrap;
		}
		}


		.liste-plugins .item:last-child {
		border: none;
		}
		@@ -81,24 +121,35 @@

		/* Case à cocher */
		.liste-plugins .liste-items .item .check {
		position: absolute;
		#ENV{left}: 15px;
		#ENV{right}: initial;
		top: 12px;
		font-size: 1em;
		position: static;
		padding:0 0 2px 0;
		margin:0;
		font-size: .85em;
		}

		/* Résumé : logo, nom, version, slogan */
		.liste-plugins .item .resume {
		.liste-plugins .liste-items .item .resume {
		min-height: initial;
		margin-bottom: 0.25em;
		min-height: 2.25em;
		}
		.liste-plugins .liste-items .item .icon {
		position: static;
		float: #ENV{right};
		margin-#ENV{left}: 10px;
		float: none;
		margin: 0px;
		width: 38px;
		height: 38px;
		}
		.liste-plugins .liste-items .item .icon img {
		width: 100%;
		max-width: 38px;
		}
		@media (max-width: 500px) {
		.liste-plugins .liste-items .item .icon {
		width: 18px;
		height: 18px;
		}
		.liste-plugins .liste-items .item .icon img {
		max-width: 18px;
		}
		}

		.liste-plugins .label-etat {
		@@ -117,9 +168,7 @@
		}

		/* Messages */
		.liste-plugins .messages {
		margin-bottom: 0.5em;
		}
		.liste-plugins .messages {}
		.liste-plugins .svp_message {
		display: block;
		font-weight: 500;
		@@ -143,6 +192,7 @@
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		margin-top:.5em;
		}
		.liste-plugins .liste-items .item .actions {
		visibility: visible;